/* Reset and Base Styles */
* {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Uniform ultra-bold for all text */
    max-width: 100%;
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Base visibility settings */
html, body {
    opacity: 1;
    visibility: visible;
}

/* Prevent horizontal scroll on all sections and main containers */
section {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    position: relative;
}

main {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Ensure animations don't cause overflow */
.hero, .problem, .solution, .stats, .team, .contact, .trusted-by {
    overflow: hidden !important;
    position: relative;
}

/* Prevent any scrollbars on sections */
section::-webkit-scrollbar {
    display: none;
}

section {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body {
    min-height: 100vh;
}

/* Prevent animation delays on load */
body:not(.loaded) * {
    animation-delay: 0s !important;
    transition: none !important;
}

/* Layout-specific display properties */
.hero-content {
    display: flex;
}

.stats-container, .problem-details, .solution-comparison, .partners-grid {
    display: flex;
}

.team-grid {
    display: grid;
}

/* Loading state management */
body.loading {
    overflow: hidden;
}

body.loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

body:not(.loading)::before {
    display: none;
}

/* Global Ultra-thin Scrollbar Styling - Webkit */
::-webkit-scrollbar {
    width: 4px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Hide all horizontal scrollbars */
::-webkit-scrollbar:horizontal {
    display: none;
}

/* Performance Optimizations */

/* Optimize effects during scroll */
.scrolling * {
    transition-duration: 0.1s !important;
}

.scrolling .team-member,
.scrolling .comparison-item {
    animation-play-state: paused !important;
}

/* Force team visibility when animations are disabled */
body:not(.loaded) .team-member {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Final fallback: Always show team members after a brief delay */
@keyframes ensureVisible {
    to {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Keep mesh visible during scroll with subtle fade */
.scrolling #fem-mesh-canvas {
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

/* Optimize scroll performance */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Reduce animation complexity on slower devices */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Performance mode for mobile and tablets */
@media (max-width: 1024px) {
    .team-member {
        animation: none !important;
        opacity: 1 !important;
    }

    #fem-mesh-canvas {
        opacity: 0.5;
    }

    /* Keep solution section animations but faster */
    .comparison-item {
        animation-duration: 0.5s !important;
    }
}

/* Ultra performance mode for very slow devices */
@supports (-webkit-overflow-scrolling: touch) {
    body {
        -webkit-overflow-scrolling: touch;
    }

    * {
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
}

/* FEM Mesh Background Canvas - High Contrast */
#fem-mesh-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Height set by JavaScript to cover full document */
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: screen;
    transition: opacity 0.5s ease;
}

/* Responsive mesh visibility */
@media (max-width: 1024px) {
    #fem-mesh-canvas {
        opacity: 0.7;
    }
}

@media (max-width: 768px) {
    #fem-mesh-canvas {
        opacity: 0.5; /* Visible on mobile */
    }
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

body {
    background-color: #000000;
    color: #f5f5f5;
    line-height: 1.7;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    position: relative; /* For absolute canvas positioning */
    overflow-x: hidden;
    overflow-y: visible;
    max-width: 100vw;
    width: 100%;
}

/* Ensure all content appears above the mesh */
body > *:not(#fem-mesh-canvas) {
    position: relative;
    z-index: 1;
}

main {
    position: relative;
    z-index: 2;
}

/* Typography Scale - High Contrast */
h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    /* Ultra-thin metallic silver effect - consistent across all headings */
    background: linear-gradient(135deg,
        #e0e0e0 0%,
        #f0f0f0 25%,
        #ffffff 50%,
        #f0f0f0 75%,
        #e0e0e0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff; /* Fallback */
    filter: brightness(0.95);
}
h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    /* Ultra-thin metallic silver effect - consistent across all headings */
    background: linear-gradient(135deg,
        #e0e0e0 0%,
        #f0f0f0 25%,
        #ffffff 50%,
        #f0f0f0 75%,
        #e0e0e0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff; /* Fallback */
    filter: brightness(0.95);
}
h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    /* Ultra-thin metallic silver effect - consistent across all headings */
    background: linear-gradient(135deg,
        #e0e0e0 0%,
        #f0f0f0 25%,
        #ffffff 50%,
        #f0f0f0 75%,
        #e0e0e0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f8f8f8; /* Fallback */
    filter: brightness(0.95);
}
h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    /* Ultra-thin metallic silver effect - consistent across all headings */
    background: linear-gradient(135deg,
        #e0e0e0 0%,
        #f0f0f0 25%,
        #ffffff 50%,
        #f0f0f0 75%,
        #e0e0e0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f0f0f0; /* Fallback */
    filter: brightness(0.95);
}
p {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
    color: #e0e0e0;
}
small {
    font-size: 14px;
    font-weight: 600;
    color: #d0d0d0;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
}

/* Header Styles - Ultra-thin Glass Effect */
header {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 100%);
    /* Removed backdrop-filter for performance */
    color: #ffffff;
    padding: 16px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: none;
    /* transition: opacity 0.3s ease;
    transform: translateZ(0); */
    min-height: 68px;
}

/* header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.01) 50%,
        transparent 100%);
    z-index: -1;
    opacity: 0.3;
} */

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
}

.logo {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    padding: 0;
    position: relative;
    margin-right: 50px;
    transform: translateY(-2px);
    white-space: nowrap; /* Keep text on one line */
    font-size: 24px; /* Larger size for header logo */
}

.logo::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(192, 192, 192, 0.08) 20%,
        rgba(192, 192, 192, 0.12) 50%,
        rgba(192, 192, 192, 0.08) 80%,
        transparent 100%);
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(192, 192, 192, 0.03) 8%,
        rgba(192, 192, 192, 0.08) 25%,
        rgba(192, 192, 192, 0.12) 40%,
        rgba(192, 192, 192, 0.12) 60%,
        rgba(192, 192, 192, 0.08) 75%,
        rgba(192, 192, 192, 0.03) 92%,
        transparent 100%);
    transform: translateY(-50%) scaleX(0.7);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    pointer-events: none;
}

.logo:hover::before {
    opacity: 0.8;
    transform: translateY(-50%) scaleX(1);
}

a.logo {
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

.logo-img {
    height: 80px; /* Larger size for better visibility */
    width: auto;
    filter: brightness(0) invert(1) brightness(0.85) contrast(1.1); /* Silver tone to match theme */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    object-fit: contain;
    margin: 0;
    position: relative;
    display: block;
}

.logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    margin: -8px -12px;
}

.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    background: radial-gradient(ellipse at center,
        rgba(192, 192, 192, 0.12) 0%,
        rgba(176, 176, 176, 0.06) 25%,
        rgba(160, 160, 160, 0.03) 50%,
        transparent 75%);
    transform: translate(-50%, -50%);
    opacity: 0.3;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
    pointer-events: none;
    animation: ultrathinGlowPulse 5s ease-in-out infinite;
    filter: blur(1px);
    mix-blend-mode: screen;
}

.logo-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle at center,
        rgba(192, 192, 192, 0.3) 0%,
        transparent 50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: ultrathinInnerGlow 3s ease-in-out infinite alternate;
}

@keyframes ultrathinGlowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.35;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 0.25;
    }
    75% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.32;
    }
}

@keyframes ultrathinInnerGlow {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 0.15;
        transform: translate(-50%, -50%) scale(1);
    }
}

.logo:hover .logo-glow {
    opacity: 0.6;
    filter: blur(2px);
}

.logo:hover .logo-glow::before {
    opacity: 0.3;
}

.logo-img:hover {
    opacity: 0.95;
    filter: brightness(0) invert(1) brightness(1) contrast(1.1) drop-shadow(0 0 12px rgba(192, 192, 192, 0.25));
}


.logo-text {
    color: #ffffff;
    font-size: 28px;
    letter-spacing: 2px;
    opacity: 0.95;
    margin-right: 15px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    opacity: 0.85;
}


.logo-text:hover {
    opacity: 0.95;
}

@keyframes ultrathinLogoFade {
    0% {
        opacity: 0;
        filter: brightness(0) invert(1) blur(10px);
        transform: translateX(-20px) scale(0.85) rotateY(-15deg);
    }
    40% {
        opacity: 0.4;
        filter: brightness(0) invert(1) blur(4px);
        transform: translateX(-8px) scale(0.92) rotateY(-7deg);
    }
    70% {
        opacity: 0.6;
        filter: brightness(0) invert(1) blur(1px);
        transform: translateX(-2px) scale(0.98) rotateY(-2deg);
    }
    100% {
        opacity: 0.7;
        filter: brightness(0) invert(1) blur(0);
        transform: translateX(0) scale(1) rotateY(0);
    }
}

@keyframes ultrathinShimmer {
    0%, 100% {
        filter: brightness(0) invert(1);
        opacity: 0.7;
    }
    20% {
        filter: brightness(0) invert(1) contrast(1.15) brightness(1.05);
        opacity: 0.76;
    }
    40% {
        filter: brightness(0) invert(1) contrast(1.08);
        opacity: 0.72;
    }
    60% {
        filter: brightness(0) invert(1) contrast(1.12) brightness(1.02);
        opacity: 0.74;
    }
    80% {
        filter: brightness(0) invert(1) contrast(1.05);
        opacity: 0.71;
    }
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-left: 40px;
    position: relative;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    padding: 5px 0;
}

.nav-links a:hover {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 0.5px;
    background: linear-gradient(90deg, transparent, #c0c0c0, transparent);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active {
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
}

.nav-links a.active::after {
    width: 100%;
    opacity: 0.6;
}

/* Hamburger Menu - Ultrathin style */
.hamburger-menu {
    display: none;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1002;
    padding: 6px;
    -webkit-tap-highlight-color: transparent;
    border-radius: 4px;
}

.hamburger-menu span {
    display: block;
    position: absolute;
    height: 1px;
    width: 22px;
    background: rgba(192, 192, 192, 0.8);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    transform-origin: center;
    pointer-events: none;
}

.hamburger-menu span:nth-child(1) {
    top: 11px;
}

.hamburger-menu span:nth-child(2) {
    top: 18px;
}

.hamburger-menu span:nth-child(3) {
    top: 25px;
}

.hamburger-menu:hover {
    background: rgba(192, 192, 192, 0.05);
}

.hamburger-menu:hover span {
    background: rgba(192, 192, 192, 1);
}

.hamburger-menu.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: rgba(192, 192, 192, 1);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: rgba(192, 192, 192, 1);
}

/* Hero Section */
.hero {
    background: transparent;
    padding: 10vh 0 0.8vw;
    text-align: left;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    z-index: 1;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Ensure all sections are above mesh */
main {
    position: relative;
    z-index: 1;
    background: transparent;
    overflow: visible;
    max-width: 100vw;
    width: 100%;
}


.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-text {
    flex: 1;
    padding-right: 50px;
}

.hero-text h1 {
    font-size: 36px;
    color: #e0e0e0;
    margin-bottom: 24px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.highlight {
    background: linear-gradient(135deg, #c0c0c0, #e5e5e5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    font-weight: 600;
}

.logo-container {
    display: none;
}

.gear-simulation {
    display: none;
}

.gear {
    position: relative;
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    animation: gear-rotate 20s linear infinite; /* Slower rotation */
    transform-origin: center center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in, filter 0.3s ease;
    will-change: transform;
}
  
.gear::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: conic-gradient(
      from 0deg,
      #1a1a1a 0deg 20deg,
      transparent 20deg 40deg,
      #1a1a1a 40deg 60deg,
      transparent 60deg 80deg,
      #1a1a1a 80deg 100deg,
      transparent 100deg 120deg,
      #1a1a1a 120deg 140deg,
      transparent 140deg 160deg,
      #1a1a1a 160deg 180deg,
      transparent 180deg 200deg,
      #1a1a1a 200deg 220deg,
      transparent 220deg 240deg,
      #1a1a1a 240deg 260deg,
      transparent 260deg 280deg,
      #1a1a1a 280deg 300deg,
      transparent 300deg 320deg,
      #1a1a1a 320deg 340deg,
      transparent 340deg 360deg
    );
    z-index: -1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
  
/* The central hub */
.gear::after {
    content: "";
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle at 30% 30%, #4a4a4a, #222 60%, #1a1a1a 100%);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 
      inset 0 2px 5px rgba(255, 255, 255, 0.2),
      inset 0 -3px 8px rgba(0, 0, 0, 0.7),
      0 0 5px rgba(0, 0, 0, 0.5);
}
  
/* Add tooth detail with an additional pseudo-element */
.gear-teeth {
    position: absolute;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    border-radius: 50%;
    background: 
      repeating-conic-gradient(
        from 0deg,
        transparent 0deg 19deg,
        rgba(255, 255, 255, 0.1) 19deg 20deg,
        transparent 20deg 39deg,
        rgba(0, 0, 0, 0.3) 39deg 40deg,
        transparent 40deg 59deg,
        rgba(255, 255, 255, 0.1) 59deg 60deg,
        transparent 60deg 79deg,
        rgba(0, 0, 0, 0.3) 79deg 80deg,
        transparent 80deg 99deg,
        rgba(255, 255, 255, 0.1) 99deg 100deg,
        transparent 100deg 119deg,
        rgba(0, 0, 0, 0.3) 119deg 120deg,
        transparent 120deg 139deg,
        rgba(255, 255, 255, 0.1) 139deg 140deg,
        transparent 140deg 159deg,
        rgba(0, 0, 0, 0.3) 159deg 160deg,
        transparent 160deg 179deg,
        rgba(255, 255, 255, 0.1) 179deg 180deg,
        transparent 180deg 199deg,
        rgba(0, 0, 0, 0.3) 199deg 200deg,
        transparent 200deg 219deg,
        rgba(255, 255, 255, 0.1) 219deg 220deg,
        transparent 220deg 239deg,
        rgba(0, 0, 0, 0.3) 239deg 240deg,
        transparent 240deg 259deg,
        rgba(255, 255, 255, 0.1) 259deg 260deg,
        transparent 260deg 279deg,
        rgba(0, 0, 0, 0.3) 279deg 280deg,
        transparent 280deg 299deg,
        rgba(255, 255, 255, 0.1) 299deg 300deg,
        transparent 300deg 319deg,
        rgba(0, 0, 0, 0.3) 319deg 320deg,
        transparent 320deg 339deg,
        rgba(255, 255, 255, 0.1) 339deg 340deg,
        transparent 340deg 359deg,
        rgba(0, 0, 0, 0.3) 359deg 360deg
      );
    z-index: -2;
    pointer-events: none;
}

.gear-large {
    width: 70px;
    height: 70px;
    top: 50px;
    left: 50px;
    animation-duration: 24s;
    animation-name: rotate-ccw;
}

.ai-boost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    animation: boost 3s infinite alternate; /* Slower animation */
    background: radial-gradient(circle at center, rgba(192, 192, 192, 0.15) 0%, transparent 100%);
    transition: all 0.4s ease;
    will-change: opacity;
}

/* Add the text via a pseudo-element */
.ai-boost::after {
    content: "AI Accelerated";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(50%, -50%);
    font-size: 1.2rem;
    font-weight: 600;
    color: #F6F6F6;
    text-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.ai-boost.accelerated::after {
    opacity: 1;
    animation: textSpeedEffect 1s infinite alternate;
    background: linear-gradient(90deg, #c0c0c0, #d0d0d0, #e0e0e0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
    letter-spacing: 1px;
}

/* When hovering the gear or its container, reveal the text */
.gear-simulation:hover .ai-boost::after {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.8));
}

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

@keyframes rotate-ccw {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes boost {
    0% { 
        opacity: 0.3;
        box-shadow: 0 0 15px rgba(192, 192, 192, 0.2);
    }
    100% { 
        opacity: 0.8;
        box-shadow: 0 0 40px rgba(208, 208, 208, 0.4);
    }
}

/* Speed text effect */
@keyframes textSpeedEffect {
    0% {
        transform: translate(20%, -50%) scale(1);
        filter: blur(0px);
    }
    100% {
        transform: translate(20%, -50%) scale(1.05);
        filter: blur(1px);
    }
}

/* Duplicate boost animation removed - using the first definition */

.speed-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.5s ease;
}

.speed-particles.fade-out {
    opacity: 0;
}

.speed-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: linear-gradient(to right, #c0c0c0, #e0e0e0);
    border-radius: 50%;
    opacity: 0.8;
    animation: particleMove 1.5s infinite linear;
}

@keyframes particleMove {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(360deg);
        opacity: 0;
    }
}

.gear-simulation:hover .gear {
    filter: blur(1px) brightness(1.2);
    will-change: transform;
}

.gear-simulation:hover .gear::before {
    animation: teethBlur 0.5s forwards;
}

@keyframes teethBlur {
    to {
        filter: blur(2px) drop-shadow(0 0 5px rgba(192, 192, 192, 0.8));
    }
}

.gear-simulation:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(192, 192, 192, 0.6) 10deg,
        transparent 20deg,
        transparent 180deg,
        rgba(192, 192, 192, 0.6) 190deg,
        transparent 200deg
    );
    border-radius: 50%;
    z-index: -2;
    animation: rotateStreak 1s linear infinite;
    opacity: 0.7;
}

@keyframes rotateStreak {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hero-text h2 {
    font-size: 24px;
    margin-bottom: 30px;
}

.mission-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.mission-box h2 {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Silver Metallic Gradient */
.silver-gradient {
    background: linear-gradient(135deg,
        #707070 0%,
        #a8a8a8 20%,
        #c0c0c0 35%,
        #e8e8e8 50%,
        #d0d0d0 65%,
        #b8b8b8 80%,
        #808080 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #c0c0c0; /* Fallback color */
    font-weight: 700; /* Ultra-bold weight for header */
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.02em;
    display: inline;
    text-shadow: 0 2px 10px rgba(192, 192, 192, 0.2); /* Subtle glow effect */
}

/* Override display for h2 elements with silver-gradient to prevent inline behavior */
h2.silver-gradient {
    display: block;
}

.silver-gradient h1 {
    background: linear-gradient(135deg,
        #707070 0%,
        #a8a8a8 20%,
        #c0c0c0 35%,
        #e8e8e8 50%,
        #d0d0d0 65%,
        #b8b8b8 80%,
        #808080 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #c0c0c0; /* Fallback color */
    font-weight: 600; /* Ultra-bold weight for header */
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.02em;
    display: inline-block;
    text-shadow: 0 2px 10px rgba(192, 192, 192, 0.2); /* Subtle glow effect */
}

/* Ultra-thin no-break styling to keep words together on same line */
.no-break {
    white-space: nowrap;
    display: inline-block;
}

/* Header logo specific ultra-bold styling */
.logo .silver-gradient {
    font-weight: 600 !important; /* Ultra-bold for header logo */
    font-size: 28px; /* Larger text for header */
    letter-spacing: -0.02em; /* Tighter spacing for bold text */
    background: linear-gradient(135deg,
        #909090 0%,
        #b8b8b8 15%,
        #d0d0d0 30%,
        #f0f0f0 45%,
        #ffffff 50%,
        #f0f0f0 55%,
        #d0d0d0 70%,
        #b8b8b8 85%,
        #909090 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(192, 192, 192, 0.4)); /* Enhanced silver effect */
    transition: all 0.3s ease;
}

.logo .silver-gradient:hover {
    filter: drop-shadow(0 3px 8px rgba(192, 192, 192, 0.6));
    transform: scale(1.02);
}

.buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
    position: relative;
    font-family: 'Inter', sans-serif;
}

.primary-btn {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    color: #000000;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-weight: 700;
    letter-spacing: 0.1px;
    text-transform: uppercase;
    font-size: 14px;
    padding: 16px 36px;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
}

.secondary-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

.primary-btn:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.secondary-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

/* Problem Statement Section */
.problem {
    background: transparent;
    color: #e0e0e0;
    padding: 10vh 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.problem-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.problem-content {
    position: relative;
    z-index: 2;
}

.section-label {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-bottom: 30px;
    text-transform: uppercase;
    position: relative;
    transition: all 0.4s ease;
    /* Ultra-thin metallic silver effect - enhanced visibility */
    background: linear-gradient(135deg,
        #808080 0%,
        #a0a0a0 10%,
        #c0c0c0 25%,
        #d8d8d8 40%,
        #f0f0f0 50%,
        #d8d8d8 60%,
        #c0c0c0 75%,
        #a0a0a0 90%,
        #808080 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    isolation: isolate;
    filter: brightness(1.2) contrast(1.1);
}

.section-label:hover {
    filter: brightness(1.3) contrast(1.2);
    transform: translateY(-1px);
}

/* Background layer */
.section-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(192, 192, 192, 0.02) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(192, 192, 192, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    z-index: -1;
}

.problem h2 {
    font-size: 32px;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: #e0e0e0;
    animation: ultrathinFadeIn 0.8s ease-out;
    text-shadow: 0 2px 20px rgba(192, 192, 192, 0.08);
}

@keyframes ultrathinFadeIn {
    from {
        opacity: 1; /* Start visible to prevent hiding */
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.problem-details {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 60px;
    margin-top: 48px;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
}

.problem-item {
    flex: 1;
    max-width: 320px;
    min-height: 280px;
    padding: 40px 28px 36px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    will-change: transform, box-shadow;
    position: relative;
    overflow: hidden;
    animation: ultrathinFadeIn 0.8s ease-out backwards;
    animation-delay: calc(var(--delay, 0) * 200ms);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.problem-item[data-delay="0"] { --delay: 0; }
.problem-item[data-delay="1"] { --delay: 1; }
.problem-item[data-delay="2"] { --delay: 2; }

.problem-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(192, 192, 192, 0.2) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.problem-item::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(192, 192, 192, 0.15),
        rgba(176, 176, 176, 0.05),
        transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.problem-item:hover {
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(10px);
    border-color: rgba(192, 192, 192, 0.12);
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(192, 192, 192, 0.05);
}

.problem-item:hover::before {
    opacity: 1;
}

.problem-item:hover::after {
    opacity: 0.5;
}

.problem-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    color: #c0c0c0;
    opacity: 0.7;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    animation: ultrathinIconFloat 6s ease-in-out infinite;
    animation-delay: calc(var(--delay, 0) * 200ms);
}

.problem-item:hover .problem-icon {
    opacity: 0.9;
    transform: translateY(-2px) scale(1.1);
    color: #d0d0d0;
}

.problem-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px rgba(192, 192, 192, 0.1));
}

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

.problem-text {
    font-size: 17px;
    color: #f0f0f0;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0.01em;
    margin-bottom: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.problem-metric {
    font-size: 13px;
    color: #808080;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 6px 12px;
    background: rgba(192, 192, 192, 0.05);
    border-radius: 20px;
    display: inline-block;
    margin: 0 auto;
    border: 1px solid rgba(192, 192, 192, 0.08);
    transition: all 0.3s ease;
}

.problem-item:hover .problem-metric {
    background: rgba(192, 192, 192, 0.08);
    border-color: rgba(192, 192, 192, 0.12);
    color: #a0a0a0;
}

/* Solution Section */
.solution {
    background: rgba(26, 26, 26, 0.3);
    color: #e0e0e0;
    padding: 10vh 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.solution h2 {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.revolutionize {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.solution-visual {
    margin: 60px 0 80px 0;
}

.solution-comparison {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
    margin: 40px auto;
    max-width: 1200px;
    overflow: hidden;
    width: 100%;
}

.comparison-item {
    padding: 32px;
    border-radius: 20px;
    width: 300px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    animation: fadeInUp 0.8s ease-out;
    opacity: 1;
    visibility: visible;
}

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

.traditional {
    background-color: rgba(255, 255, 255, 0.03); /* Fallback */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    opacity: 0.85;
    visibility: visible;
    min-height: 250px; /* Ensure minimum height */
    transform: scale(0.98); /* Slightly smaller */
}

.fainite {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.08) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(192, 192, 192, 0.25);
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(192, 192, 192, 0.12),
                0 0 80px rgba(192, 192, 192, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                inset 0 -1px 0 rgba(192, 192, 192, 0.1);
    animation-delay: 0.2s;
    min-height: 250px; /* Same height as traditional */
    transform: scale(1.02); /* Slightly larger */
    z-index: 2; /* Ensure it's above traditional */
}

.fainite:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(192, 192, 192, 0.5),
        rgba(208, 208, 208, 0.6),
        rgba(192, 192, 192, 0.5),
        transparent);
    opacity: 0.8;
    animation: shimmer 3s ease-in-out infinite;
}

/* Add a subtle glow effect */
.fainite::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg,
        rgba(192, 192, 192, 0.15) 0%,
        transparent 40%,
        transparent 60%,
        rgba(192, 192, 192, 0.1) 100%);
    border-radius: 20px;
    z-index: -1;
    opacity: 0.6;
    animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

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

/* Hover effects for comparison items */
.comparison-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.traditional:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-2px) scale(0.98); /* Minimal hover effect */
    opacity: 0.9;
}

.fainite:hover {
    border-color: rgba(192, 192, 192, 0.35);
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.12) 0%, rgba(0, 0, 0, 0.45) 100%);
    box-shadow: 0 16px 50px rgba(192, 192, 192, 0.18),
                0 0 100px rgba(192, 192, 192, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-5px) scale(1.03);
}

.comparison-header {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.01px;
    text-transform: uppercase;
    opacity: 0.85;
    color: rgba(255, 255, 255, 0.9);
}

.comparison-time {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    line-height: 1;
}

.traditional .comparison-time {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    opacity: 1;
    font-size: 32px;
}

.fainite .comparison-time {
    background: linear-gradient(135deg,
        #a0a0a0 0%, #c0c0c0 20%, #e8e8e8 40%,
        #f0f0f0 50%, #e8e8e8 60%, #c0c0c0 80%, #a0a0a0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 32px;
    text-shadow: 0 0 20px rgba(192, 192, 192, 0.3);
    position: relative;
    animation: shine-text 4s ease-in-out infinite;
}

@keyframes shine-text {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

/* Recommended badge for FAInite */
.recommended-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(135deg,
        rgba(192, 192, 192, 0.2) 0%,
        rgba(208, 208, 208, 0.3) 50%,
        rgba(192, 192, 192, 0.2) 100%);
    color: #f0f0f0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 2px 8px rgba(192, 192, 192, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: pulse-badge 3s ease-in-out infinite;
    z-index: 10;
}

@keyframes pulse-badge {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.comparison-vs {
    font-size: 20px;
    font-weight: 600;
    color: #b0b0b0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-bars {
    display: flex;
    height: 24px;
    gap: 3px;
    width: 100%;
    margin-bottom: 20px;
}

/* Engineering Simulation Styles */
.simulation-visualization {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    position: relative;
    filter: contrast(0.95);
}

.simulation-wrapper {
    position: relative;
    width: 240px;
    height: 120px;
}

.simulation-box {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    overflow: hidden;
    background-color: #1a1a1a;
    border: 1px solid rgba(192, 192, 192, 0.08);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.simulation-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* The main simulation visual */
.simulation-viz {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    background: #1a1a1a;
}

/* Grid pattern for simulation */
.simulation-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(192, 192, 192, 0.15) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(192, 192, 192, 0.15) 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.3;
    z-index: 1;
}

/* 3D object being simulated (represented as a simple shape) */
.simulation-object {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 40px;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.4), rgba(192, 192, 192, 0.6));
    border-radius: 2px;
    z-index: 3;
    transition: transform 0.3s ease;
    border: 1px solid rgba(192, 192, 192, 0.2);
}

.simulation-box:hover .simulation-object {
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}

/* Mesh for simulation object */
.simulation-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
    background-size: 5px 5px;
    z-index: 4;
    border-radius: 4px;
}

/* Enhanced stress field styling */
.stress-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s ease;
}

/* Traditional (slow) stress field */
.slow .stress-field {
    filter: blur(4px);
    opacity: 0.6;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(128, 128, 128, 0.05) 0%,
        rgba(128, 128, 128, 0.2) 40%,
        rgba(160, 160, 160, 0.3) 60%,
        rgba(128, 128, 128, 0.1) 100%
    );
    animation: pulse-slow 6s infinite alternate;
}

/* FAInite (fast) stress field */
.fast .stress-field {
    filter: blur(8px);
    opacity: 0.8;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(192, 192, 192, 0.2) 0%,
        rgba(208, 208, 208, 0.5) 30%,
        rgba(224, 224, 224, 0.7) 50%,
        rgba(192, 192, 192, 0.3) 80%,
        rgba(192, 192, 192, 0.1) 100%
    );
    animation: pulse-fast 1s infinite alternate;
    mix-blend-mode: screen;
}

.fast .simulation-box:hover .stress-field {
    opacity: 0.9;
    filter: blur(6px);
}

/* Force vectors container */
.force-vectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none; /* Allow clicks to pass through */
}
  
/* Enhanced styling for the force vector arrows */
.vector.right-vector {
    position: absolute;
    height: 3px;
    background: white;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
    z-index: 10;
    transform-origin: 0 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 2px 2px 0;
}
  
/* Arrow head */
.vector.right-vector::after {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: white;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.7));
}
  
/* Hover effects */
.simulation-box:hover .vector.right-vector {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 12px rgba(99, 102, 241, 0.5);
}
  
.simulation-box:hover .vector.right-vector::after {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}
  
/* Slow simulation vector styling */
.slow .vector.right-vector {
    opacity: 0.7;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

/* Simulation info overlay */
.simulation-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 8px 12px;
    background: rgba(26, 26, 26, 0.85);
    border-radius: 6px;
    font-size: 11px;
    color: #d0d0d0;
    z-index: 10;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    opacity: 0 !important;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.simulation-box:hover .simulation-info {
    opacity: 1 !important;
    transform: translateY(0);
    pointer-events: auto;
}

.info-item {
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
    animation: pulse-text 1.5s infinite alternate;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.info-item.success {
    color: #10b981;
    font-weight: 600;
    animation: none;
}

.info-data {
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 2px;
    font-weight: 600;
}

.info-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
    margin-bottom: 2px;
}

.progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 3s linear, background-color 0.5s ease;
    background: #808080;
}

.slow-progress {
    background: #808080 !important;
}

.fast-progress {
    background: #c0c0c0 !important;
}

/* Heatmap coloring for simulation object */
.simulation-heatmap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(176, 176, 176, 0.5) 0%,
        rgba(208, 208, 208, 0.5) 50%,
        rgba(192, 192, 192, 0.5) 100%);
    mix-blend-mode: overlay;
    z-index: 5;
    border-radius: 2px;
    opacity: 0.6;
}

/* Animations */
@keyframes vector-pulse {
    0% { opacity: 0.7; box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); }
    100% { opacity: 1; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
}

@keyframes pulse-text {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes pulse-slow {
    0% { opacity: 0.6; transform: scale(0.98); }
    100% { opacity: 0.8; transform: scale(1); }
}

@keyframes pulse-fast {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0.9; transform: scale(1.05); }
}

@keyframes mesh-follow-complex {
    0% { background-size: 5px 5px; }
    25% { background-size: 5.4px 4.6px; }
    50% { background-size: 4.7px 5.3px; }
    75% { background-size: 5.3px 4.7px; }
    100% { background-size: 4.9px 5.1px; }
}

@keyframes hotspot-pulse {
    0% { opacity: 0.7; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

@keyframes object-deform-complex {
    0% { transform: translate(-50%, -50%) scale(1, 1) skew(0deg, 0deg); }
    25% { transform: translate(-50%, -50%) scale(1.08, 0.92) skew(3deg, 0deg); }
    50% { transform: translate(-50%, -50%) scale(0.94, 1.06) skew(-2deg, 1deg); }
    75% { transform: translate(-50%, -50%) scale(1.06, 0.94) skew(1deg, -1deg); }
    100% { transform: translate(-50%, -50%) scale(0.98, 1.02) skew(-1deg, 0deg); }
}

@keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes load {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

@keyframes flash {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Stress hotspot styling */
.stress-hotspot {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
    z-index: 2;
}

/* Animation for the fast simulation object */
.fast .simulation-object {
    animation: object-deform-complex 2s infinite alternate-reverse;
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.3);
}

/* Animation for the fast simulation mesh */
.fast .simulation-mesh {
    animation: mesh-follow-complex 2s infinite alternate-reverse;
}

.bar {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 0.5px solid rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

.traditional .bar {
    animation: load 3.5s ease-in-out infinite; /* Slower animation */
    opacity: 0.7;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.25));
    border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.traditional .b2 {
    animation-delay: 0.3s;
}

.traditional .b3 {
    animation-delay: 0.6s;
}

.fainite .bar {
    animation: flash 1.5s ease-in-out infinite; /* Faster animation */
    background: linear-gradient(90deg,
        rgba(160, 160, 160, 0.3),
        rgba(192, 192, 192, 0.5),
        rgba(208, 208, 208, 0.6),
        rgba(192, 192, 192, 0.5),
        rgba(160, 160, 160, 0.3));
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.2),
                inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.fainite .b1 {
    animation-delay: 0s;
}

.fainite .b2 {
    animation-delay: 0.15s;
}

.fainite .b3 {
    animation-delay: 0.3s;
}

.tech-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
    margin-bottom: 0;
}


.tech-badge {
    background: rgba(192, 192, 192, 0.08);
    border: 1px solid rgba(192, 192, 192, 0.2);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #c0c0c0;
    transition: transform 0.3s ease;
    will-change: transform;
}

.tech-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.2);
    background: rgba(192, 192, 192, 0.12);
}

/* Stats Section */
.stats {
    background: rgba(26, 26, 26, 0.3);
    /* padding:  0; */
    position: relative;
    overflow: hidden;
    text-align: center;
    z-index: 1;
}

.stats .section-label {
    margin-bottom: 20px;
}

.stats h2 {
    font-size: 32px;
    margin-bottom: 45px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.stats p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.stats-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    overflow: visible;
    width: 100%;
}

.stat-item {
    flex: 1 1 300px;
    padding: 48px;
    background: rgba(255, 255, 255, 0.02);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin: 0px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 400px;
    min-width: 250px;
    min-height: 320px;
    will-change: transform;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.stat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    z-index: 10;
    position: relative;
}

.stat-number {
    font-size: 36px;
    font-weight: 600;
    color: #c0c0c0;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.stat-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 16px 0;
    letter-spacing: -0.01em;
}

.stat-description {
    font-size: 20px;
    color: #909090;
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 350;
}

/* Parallel tasks visualization - Ultrathin professional style */
.parallel-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 15px;
    overflow: hidden;
}

#parallelTasks {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.parallel-count {
    font-size: 22px;
    font-weight: 100;
    color: #c0c0c0;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
}

/* Clock visualization styles */
.clock-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.clock-svg {
    filter: drop-shadow(0 0 6px rgba(220, 220, 220, 0.4));
}

.time-display {
    display: block;
    font-size: 22px;
    font-weight: 100;
    color: #808080;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

/* Design recommendations visualization styles */
.design-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.design-svg {
    filter: drop-shadow(0 0 6px rgba(220, 220, 220, 0.4));
}

.design-count {
    display: block;
    font-size: 22px;
    font-weight: 100;
    color: #808080;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
}

.design-frames {
    transition: all 0.5s ease;
}

/* Clock animation */
@keyframes ultrathinClockPulse {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(220, 220, 220, 0.5));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(230, 230, 230, 0.6));
    }
}

/* Design recommendations animation */
@keyframes ultrathinDesignPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(220, 220, 220, 0.5));
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
        filter: drop-shadow(0 0 8px rgba(230, 230, 230, 0.7));
    }
}

/* Parallel tasks animation */
@keyframes ultrathinParallelPulse {
    0%, 100% {
        opacity: 0.9;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.05);
    }
}

/* Duplicate ultrathinFadeIn removed - using first definition */

@keyframes ultrathinFlow {
    0% {
        transform: translateY(var(--y-offset, 0)) translateX(-100%);
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(var(--y-offset, 0)) translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .parallel-visual {
        height: 35px;
        margin-top: 10px;
    }

    .parallel-count {
        font-size: 28px;
    }

    .clock-visual {
        margin-bottom: 5px;
    }

    .clock-svg {
        width: 45px;
        height: 45px;
    }

    .design-visual {
        margin-bottom: 5px;
    }

    .design-svg {
        width: 60px;
        height: 45px;
    }

    .design-count {
        font-size: 24px;
    }
}

/* Trusted By Section */
.trusted-by {
    background: rgba(26, 26, 26, 0.3);
    color: #e0e0e0;
    padding: 10vh 0 80px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.trusted-by h2 {
    font-size: 24px;
    margin: 20px 0 48px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.partners-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 20px auto;
    max-width: 1200px;
}

.partner-item {
    flex: 0 1 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-logo-placeholder {
    width: 300px;
    height: 150px;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 20px;
}

.partner-logo-placeholder:hover {
    transform: scale(1.10);
}

.partner-logo-placeholder span {
    color: #64748b;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.partner-logo-placeholder img {
    max-width: 160px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.7);
    transition: all 0.3s ease;
}

.partner-logo-placeholder:hover img {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.05);
}

/* Demo Video Section */
.demo-video {
    background: rgba(26, 26, 26, 0.3);
    color: #e0e0e0;
    padding: 10vh 0;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.demo-video h2 {
    font-size: 32px;
    margin: 20px 0 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.demo-video p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 48px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.video-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 20px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.video-wrapper:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

/* Responsive adjustments for video */
@media (max-width: 768px) {
    .demo-video h2 {
        font-size: 28px;
    }

    .demo-video p {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .video-container {
        max-width: 100%;
        padding: 0 16px;
    }

    .video-wrapper {
        border-radius: 12px;
    }

    .video-wrapper iframe {
        border-radius: 12px;
    }
}

/* Team Section */
.team {
    background: transparent;
    color: #e0e0e0;
    padding: 10vh 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.team::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 0.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.08) 80%,
        transparent 100%);
    opacity: 0.5;
}

.team-header {
    margin-bottom: 60px;
}

.team h2 {
    font-size: 32px;
    margin: 20px 0 32px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.team-mantra {
    font-size: 16px;
    margin-bottom: 20px;
    color: #94a3b8;
    font-weight: 600;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 48px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    justify-content: center;
    justify-items: center;
    overflow: hidden;
    width: 100%;
}

.team-member {
    width: 100%;
    min-width: 280px;
    max-width: 320px;
    min-height: 380px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 0 auto;
    cursor: pointer;
    color: #f0f0f0;
    /* Removed backdrop-filter for performance */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    animation: fadeInUp 0.8s ease-out, ensureVisible 0s 1.5s forwards;
    animation-fill-mode: both;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
}

/* Staggered animation for team members - reduced delays */
.team-member:nth-child(1) { animation-delay: 0.05s; }
.team-member:nth-child(2) { animation-delay: 0.1s; }
.team-member:nth-child(3) { animation-delay: 0.15s; }
.team-member:nth-child(4) { animation-delay: 0.2s; }
.team-member:nth-child(5) { animation-delay: 0.25s; }
.team-member:nth-child(6) { animation-delay: 0.3s; }

/* Ensure team members are always visible as fallback */
body .team-member {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keep animation but ensure visibility */
@supports (animation: fadeInUp 0.8s) {
    .team-member {
        animation: fadeInUp 0.8s ease-out, ensureVisible 0s 1.5s forwards;
        animation-fill-mode: both;
    }
}

.team-member.expanded {
    width: 100%;
    max-width: 320px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    margin: 0 auto;
}

.team-member:not(.expanded):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.12);
}

.team-member:hover img {
    filter: grayscale(0%) contrast(1.05) brightness(1);
}

/* Fix image cropping issue */
.team-member img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #0a0a0a;
    /* Positioned to show full face without cutting top */
    object-position: center 7.5%;
    filter: grayscale(100%) contrast(1.05) brightness(0.95);
    transition: filter 0.4s ease;
    border-radius: 20px 20px 0 0;
}

/* Ensure bio is hidden by default */
.team-member .bio {
    display: none;
}

/* Ensure bio is shown when team member is expanded */
.team-member.expanded .bio {
    display: block !important;
}

.team-info {
    padding: 20px 24px;
    text-align: left;
    background: transparent;
    border-top: 0.5px solid rgba(255, 255, 255, 0.05);
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.team-info h3 {
    font-size: 20px; /* Bigger size for names */
    margin-bottom: 4px;
    font-weight: 600; /* Ultra-bold for names */
    letter-spacing: 0.5px; /* Tighter spacing for bold text */
    /* text-transform: uppercase; */
}

.team-info h4 {
    font-size: 16px; /* Bigger size for titles */
    color: rgba(255, 255, 255, 0.85); /* Brighter for better visibility */
    margin-top: 4px;
    font-weight: 600; /* Ultra-bold for titles */
    letter-spacing: 0.04em; /* Tighter spacing for bold text */
    margin-bottom: -10px;
}

.team-info h5 {
    font-size: 14px; /* Bigger size for subtitles */
    color: rgba(255, 255, 255, 0.65); /* Slightly brighter */
    margin-bottom: 8px;
    font-weight: 600; /* Bold but not ultra-bold for hierarchy */
    letter-spacing: 0.03em;
    line-height: 1.5;
}

.linkedin-link {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #909090;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.linkedin-link:hover {
    color: #c0c0c0;
    transform: translateX(2px);
}

.linkedin-icon {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    fill: currentColor;
    opacity: 0.7;
}

.bio {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #909090;
    font-weight: 600;
}

.bio p {
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

/* Contact Section */
.contact {
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.4) 0%, rgba(26, 26, 26, 0.6) 100%);
    color: #e0e0e0;
    padding: 10vh 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.contact h2 {
    font-size: 32px;
    margin: 20px 0 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.contact p {
    font-size: 20px;
    /* max-width: 800px; */
    margin: 0 auto 48px;
    color: #b0b0b0;
    font-weight: 350;
    line-height: 1.8;
}


.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.contact-form {
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(10px);
    border: 0.5px solid rgba(192, 192, 192, 0.15);
    border-radius: 16px;
    padding: 56px;
    max-width: 680px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    position: relative;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
                rgba(192, 192, 192, 0.03) 0%,
                transparent 50%,
                rgba(192, 192, 192, 0.01) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
    pointer-events: none;
}

.contact-form:hover::before {
    opacity: 1;
}

.contact-form:hover {
    border-color: rgba(192, 192, 192, 0.2);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.form-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.form-group {
    flex: 1;
    margin-bottom: 24px;
    text-align: left;
    position: relative;
}

.form-row .form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #f0f0f0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font-size: 16px;
    transition: all 0.25s ease;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0;
}

/* Make textarea not resizable */
.form-group textarea {
    resize: none;
    min-height: 120px;
    line-height: 1.5;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05),
                inset 0 1px 2px rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #606060;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.error-field {
    border-color: rgba(255, 128, 128, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(255, 128, 128, 0.1) !important;
    background-color: rgba(255, 128, 128, 0.02) !important;
}

/* Error message styling */
.error-message {
    color: rgba(255, 128, 128, 0.9);
    font-size: 12px;
    margin-top: 6px;
    font-weight: 600;
    letter-spacing: 0.3px;
    animation: ultrathinShake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes ultrathinShake {
    0%, 100% { transform: translateX(0); opacity: 0; }
    15% { opacity: 1; }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
    85% { opacity: 1; }
}

/* Focus style for error fields to help user correction */
.error-field:focus {
    border-color: #c0c0c0 !important;
    box-shadow: 0 0 0 2px rgba(192, 192, 192, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Add required field indication (subtle asterisk) */
.form-group label.required::after {
    content: '*';
    color: #c0c0c0;
    margin-left: 3px;
    opacity: 0.8;
    font-size: 10px;
    vertical-align: super;
}

/* Footer */
footer {
    background: rgba(0, 0, 0, 0.9);
    color: #f5f5f5;
    padding: 48px 0;
    text-align: center;
    border-top: 0.5px solid rgba(255, 255, 255, 0.12);
    position: relative;
    z-index: 1;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.footer-links {
    display: flex;
    list-style: none;
}

.footer-links li {
    margin-left: 20px;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #e0e0e0;
}

.copyright {
    margin-top: 20px;
    font-size: 12px;
    color: #707070;
}

/* Animation for elements entering viewport */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Responsive Design */
@media (max-width: 992px) {
    .partners-grid {
        gap: 40px;
    }
    
    .partner-logo-placeholder {
        width: 160px;
        height: 70px;
    }
    
    .hero-content {
        flex-direction: column;
    }

    .hero-text, .mission-box {
        width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .team-grid {
        flex-direction: column;
        align-items: center; /* Added to center cards if their width is not 100% */
    }

    .team-member,
    .team-member.expanded { /* Apply to both normal and expanded states */
        flex-basis: auto;   /* Allow height to be determined by content in a column layout */
        width: 90%;         /* Make cards take up a significant portion of the screen width */
        max-width: 450px;   /* Prevent cards from becoming too wide, e.g., on tablets in portrait. Adjust as needed. */
        border-radius: 20px;
    }

    .solution-comparison {
        flex-direction: column;
        gap: 20px;
    }

    .comparison-item {
        width: 100%;
        max-width: 320px;
        padding: 28px;
        border-radius: 20px;
        min-height: 280px; /* Ensure space for visualization */
    }

    /* Fix solution comparison layout on mobile */
    .solution-comparison {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        margin: 30px 0 !important;
    }

    .comparison-vs {
        margin: 15px 0;
        font-size: 12px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .stats-container {
        flex-direction: column;
        align-items: center;
    }

    .stat-item {
        margin-bottom: 30px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .partners-grid {
        gap: 20px;
    }
    
    .partner-logo-placeholder {
        width: 140px;
        height: 70px;
        padding: 15px;
    }
    
    .partner-logo-placeholder img {
        max-width: 120px;
        max-height: 60px;
    }
    
    .hamburger-menu {
        display: flex;
    }


    .nav-links {
        position: fixed;
        top: 60px;
        right: 0;
        width: 280px;
        max-width: 80vw;
        height: calc(100vh - 60px);
        overflow-y: auto;
        overflow-x: hidden;
        background: #1a1a1a;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.320, 1);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
        border-left: 1px solid rgba(192, 192, 192, 0.1);
        visibility: hidden;
        opacity: 0;
        z-index: 1001;
        display: flex !important;
        isolation: isolate;
    }

    .nav-links.active {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }

    .nav-links li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid rgba(192, 192, 192, 0.05);
        opacity: 0;
        animation: none;
        list-style: none;
        position: relative;
        pointer-events: auto;
    }

    .nav-links.active li {
        animation: ultrathinFadeInRight 0.5s ease forwards;
        animation-delay: calc(var(--i) * 0.08s);
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .nav-links li:nth-child(1) { --i: 0; }
    .nav-links li:nth-child(2) { --i: 1; }
    .nav-links li:nth-child(3) { --i: 2; }
    .nav-links li:nth-child(4) { --i: 3; }
    .nav-links li:nth-child(5) { --i: 4; }

    @keyframes ultrathinFadeInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .nav-links a {
        font-size: 17px;
        padding: 24px 30px;
        display: block;
        width: 100%;
        color: rgba(192, 192, 192, 0.9);
        font-weight: 600;
        letter-spacing: 0.08em;
        transition: all 0.3s ease;
        position: relative;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        z-index: 10;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }

    .nav-links a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 0;
        background: rgba(192, 192, 192, 0.6);
        transition: height 0.3s ease;
        transform: translateY(-50%);
    }

    .nav-links a:hover,
    .nav-links a:active,
    .nav-links a:focus {
        background: rgba(192, 192, 192, 0.08);
        color: rgba(192, 192, 192, 1);
        padding-left: 40px;
        outline: none;
    }

    .nav-links a:hover::before,
    .nav-links a:active::before {
        height: 60%;
    }

    /* Mobile menu scrollbar inherits global ultra-thin styling */

    .hero-text h1 {
        font-size: 36px;
    }

    .problem-details {
        flex-direction: column;
        align-items: center;
    }

    .problem-item {
        margin-bottom: 20px;
    }

    .tech-badges {
        flex-direction: column;
        align-items: center;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-links {
        margin-top: 20px;
    }

    .footer-links li:first-child {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    header {
        padding: 10px 0;
        min-height: 60px;
        z-index: 1000;
    }

    nav {
        justify-content: space-between;
        min-height: 60px;
    }

    .logo {
        margin-right: auto;
    }

    .logo-img {
        height: 50px;
        margin-right: 0;
    }

    .hamburger-menu {
        margin-left: 20px;
    }
}

/* Enhanced container for larger screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
        padding: 0 40px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
        padding: 0 60px;
    }
}

/* Increase vertical spacing between sections for larger screens */
@media (min-width: 1400px) {
    section {
        padding: 10vh 0;
    }
    
    .hero {
        padding: 160px 0 120px;
    }
    
    /* Add more horizontal space in hero content */
    .hero-content {
        gap: 60px;
    }
    
    /* Increase section heading sizes */
    section h2 {
        font-size: 42px;
        margin-bottom: 30px;
    }
    
    /* Add more space between problem items */
    .problem-details {
        gap: 60px;
    }
    
    /* Increase width of problem items */
    .problem-item {
        max-width: 240px;
    }
    
    /* More breathing room between comparison items */
    .solution-comparison {
        gap: 50px;
    }
    
    .comparison-item {
        width: 350px;
        padding: 36px;
        border-radius: 24px;
    }
    
    /* More space for tech badges */
    .tech-badges {
        gap: 25px;
        margin-top: 60px;
    }
    
    .tech-badge {
        padding: 10px 20px;
        font-size: 16px;
    }
    
    /* Increase stats spacing */
    .stats-container {
        gap: 60px;
    }
    
    .stat-item {
        padding: 60px;
        max-width: 450px;
    }
    
    /* More space between team members */
    .team-grid {
        gap: 50px;
    }
    
    /* Enhanced contact form with more padding */
    .contact-form {
        padding: 60px;
    }
}

/* Increased whitespace for form elements */
@media (min-width: 1400px) {
    .form-group {
        margin-bottom: 30px;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 16px 20px;
        font-size: 18px;
    }
    
    .btn {
        padding: 16px 32px;
        font-size: 18px;
    }
}

/* Enhanced simulation box size for better visibility */
@media (min-width: 1400px) {
    .simulation-wrapper {
        width: 280px;
        height: 140px;
    }
}

/* More whitespace for team bio content */
@media (min-width: 1400px) {
    .team-info {
        padding: 30px;
    }
    
    .bio p {
        margin-bottom: 20px;
        line-height: 1.8;
    }
}

/* Improved overall typography for larger screens */
@media (min-width: 1400px) {
    .hero-text h1 {
        font-size: 54px;
        line-height: 1.3;
    }

    .mission-box p {
        font-size: 20px;
        line-height: 1.8;
        margin-bottom: 25px;
        font-weight: 350;
    }
    
    .solution p {
        font-size: 20px;
        line-height: 1.8;
        margin-bottom: 50px;
        max-width: 900px;
        margin: 0 auto 32px;
        font-weight: 350;
    }
    
    .stat-number {
        font-size: 64px;
    }

    .stat-description {
        font-size: 20px;
        line-height: 1.8;
    }
}


/* Modal Styles */
/* Enhanced Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.85);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.modal.show {
    opacity: 1;
}

.modal-content {
    position: relative;
    background: linear-gradient(135deg, #1e1e2f 0%, #0f172a 100%);
    margin: 8% auto;
    padding: 0;
    width: 90%;
    max-width: 520px;
    border-radius: 16px;
    border: 1px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(192, 192, 192, 0.2);
    transform: translateY(-30px) scale(0.95);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.modal.show .modal-content {
    transform: translateY(0) scale(1);
}

.modal-header {
    padding: 16px 20px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.close-modal, .close-btn {
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-modal {
    color: rgba(255, 255, 255, 0.5);
    font-size: 28px;
    font-weight: 600;
    padding: 0 8px;
    border-radius: 50%;
}

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

.modal-body {
    padding: 30px 40px 40px;
    text-align: center;
}

.success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    background: linear-gradient(135deg, #b0b0b0 0%, #d0d0d0 50%, #e0e0e0 100%);
    border-radius: 50%;
    font-size: 36px;
    color: #1a1a1a;
    margin-bottom: 24px;
    box-shadow: 0 0 30px rgba(176, 176, 176, 0.6);
    animation: pulse-glow 2s infinite alternate;
    position: relative;
    overflow: hidden;
}

.success-icon::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -30%;
    width: 60%;
    height: 200%;
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(30deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    from { transform: translateX(-100%) rotate(30deg); }
    to { transform: translateX(200%) rotate(30deg); }
}

/* Duplicate pulse-glow removed - using first definition */

.modal h2 {
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    /* Inherits metallic effect from global h2 styling */
}

.modal p {
    margin-bottom: 16px;
    color: rgba(224, 224, 224, 0.8);
    line-height: 1.7;
    font-size: 17px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.close-btn {
    margin-top: 30px;
    padding: 14px 32px;
    background: linear-gradient(to right, #c0c0c0, #e5e5e5);
    color: #000000;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(192, 192, 192, 0.3);
}

.close-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(192, 192, 192, 0.5);
    background: linear-gradient(to right, #e5e5e5, #f0f0f0);
}

.close-btn:active {
    transform: translateY(0);
}

/* Rebranding Banner Notification - Clean & Minimal - Follows User on Scroll */
.rebranding-banner {
    position: fixed !important; /* Force fixed positioning to follow user */
    top: 0 !important; /* Always at top of viewport */
    left: 0;
    width: 100%;
    /* Solid, opaque background - no transparency */
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    background-color: #121212; /* Fallback solid color */
    border-bottom: 1px solid rgba(192, 192, 192, 0.25);
    z-index: 99999 !important; /* Above everything on the site */
    padding: 12px 20px;
    text-align: center;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
    pointer-events: none; /* Allow clicks to pass through when hidden */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); /* Stronger shadow for prominence */
    /* Removed backdrop-filter for full opacity */
}

.rebranding-banner.show {
    opacity: 1 !important; /* Fully opaque when visible */
    transform: translateY(0) !important; /* Force no transform when visible */
    pointer-events: auto; /* Enable interactions when visible */
}

.rebranding-banner.hide {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.banner-content {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #f0f0f0; /* Brighter, more visible text */
    opacity: 1; /* Ensure full visibility */
}

.banner-content .brand-name-old {
    color: rgba(192, 192, 192, 0.7); /* Slightly more visible than before */
    text-decoration: line-through;
    text-decoration-color: rgba(192, 192, 192, 0.5);
    text-decoration-thickness: 1px;
}

/* Adjust header position when banner is visible - Banner pushes header down */
body.banner-active header {
    top: 45px !important; /* Force header below banner */
    transition: top 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

/* Ensure banner stays visible during header scroll animations */
body.banner-active .rebranding-banner {
    transform: translateY(0) !important; /* Override any inherited transforms */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .rebranding-banner {
        padding: 10px 15px;
    }

    .banner-content {
        font-size: 14px;
    }

    body.banner-active header {
        top: 42px !important; /* Force header below banner on mobile */
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .modal-body {
        padding: 25px 20px 30px;
    }
    
    .success-icon {
        width: 70px;
        height: 70px;
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    .modal h2 {
        font-size: 24px;
    }
    
    .modal p {
        font-size: 16px;
    }
    
    .close-btn {
        padding: 12px 24px;
        font-size: 15px;
        width: 100%;
        margin-top: 20px;
    }
}

/* Mobile Animation Optimizations */
@media (max-width: 768px) {
    /* Simulation panels for mobile - always visible on tap */
    .simulation-info {
        opacity: 0 !important;
        pointer-events: none;
    }
    
    .simulation-box.mobile-active .simulation-info {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto;
    }
    
    .gear {
        animation: none !important;
        transition: none !important;
    }
    
    .gear-simulation:hover .gear::before {
        animation: none !important;
    }
    
    .gear-teeth {
        background: none !important;
    }
    
    .stress-field {
        filter: none !important;
        opacity: 0.6 !important;
        background: radial-gradient(
            circle at 50% 50%,
            rgba(192, 192, 192, 0.2) 0%,
            rgba(208, 208, 208, 0.3) 60%,
            transparent 100%
        ) !important;
        animation: none !important;
    }
    
    .simulation-object {
        animation: none !important;
        transition: transform 0.3s ease !important;
    }
    
    .simulation-mesh {
        animation: none !important;
    }
    
    .simulation-box:active {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    }
    
    .simulation-box:active .simulation-info {
        opacity: 1;
        transform: translateY(0);
    }
    
    .tech-badge:active {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(192, 192, 192, 0.3);
        background: rgba(192, 192, 192, 0.2);
    }
    
    .mission-box:active {
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
    }
    
    .team-member:not(.expanded):active {
        transform: translateY(-5px) scale(1.01);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .progress-bar {
        transition: width 1s linear, background-color 0.3s ease !important;
    }
    
    .speed-particles {
        display: none !important;
    }
    
    .ai-boost {
        animation: none !important;
        background: radial-gradient(circle at center, rgba(192, 192, 192, 0.2) 0%, transparent 70%) !important;
    }

    .ai-boost.accelerated::after {
        animation: none !important; /* Suppress text animation on mobile */
    }
    
    .btn {
        padding: 16px 28px;
        margin-bottom: 10px;
    }
}

.touch-active .simulation-info {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.touch-active .force-arrow {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) !important;
}/* ========================================
   COMPREHENSIVE MOBILE FIXES - ULTRA RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    /* Fix comparison items visibility and layout on mobile */
    .comparison-item {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        animation: none !important;
        transform: none !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        padding: 28px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .traditional, .fainite {
        opacity: 1 !important;
        visibility: visible !important;
        min-height: 200px !important;
    }

    .comparison-time {
        font-size: 32px !important;
        font-weight: 600 !important;
        margin-bottom: 16px !important;
        line-height: 1 !important;
        color: #fff !important;
    }


    .comparison-vs {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin: 20px 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-align: center !important;
        display: block !important;
    }

    .solution-comparison {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 20px 10px !important;
    }

    /* Fix mission box layout on mobile */
    .mission-box {
        width: 100% !important;
        margin: 20px !important;
        padding: 25px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-sizing: border-box !important;
    }

    .mission-box h2 {
        font-size: 30px !important;
        font-weight: 600 !important;
        margin-bottom: 30px !important;
        color: #fff !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    .mission-box p {
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
        color: rgba(255, 255, 255, 0.95) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Enable silver gradient text on mobile */
    .mission-box .silver-gradient {
        background: linear-gradient(135deg,
            #707070 0%,
            #a8a8a8 20%,
            #c0c0c0 35%,
            #e8e8e8 50%,
            #d0d0d0 65%,
            #b8b8b8 80%,
            #808080 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: #c0c0c0 !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 10px rgba(192, 192, 192, 0.2) !important;
        display: inline !important;
    }

    /* Problem section mobile styles */
    .problem-details {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }

    .problem-item {
        width: 100% !important;
        max-width: 320px !important;
        padding: 24px !important;
        margin-bottom: 15px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
    }

    .problem-text {
        font-size: 17px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    .problem-metric {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #fff !important;
        margin-top: 10px !important;
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.15em !important;
    }

    /* Fix section titles to have silver gradient on mobile */
    .section-label {
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        font-weight: 600 !important;
        text-shadow: none !important;
        filter: brightness(1.2) contrast(1.1) !important;
        display: inline-block !important;
        isolation: isolate !important;
    }

    /* Fix gray text size changing on scroll */
    /* p, span, div {
        font-size: inherit !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    } */

    /* Ensure paragraphs have proper spacing on mobile */
    p {
        margin-bottom: 20px !important;
        font-weight: 500 !important;
        font-size: 18px !important;
    }

    /* Section-specific paragraph spacing to match web proportions */
    .solution p {
        font-size: 18px !important;
        margin-bottom: 26px !important;
    }

    .stats p {
        font-size: 18px !important;
        margin-bottom: 40px !important;
    }

    .stat-item {
        padding: 65px 0px 80px !important;
        min-height: 380px !important;
        margin-bottom: 30px !important;
    }

    .stat-number {
        min-height: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .design-visual, .parallel-visual, .clock-visual {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .contact p {
        font-size: 18px !important;
        margin-bottom: 40px !important;
    }

    /* Prevent text size changes during scroll */
    body {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* Ensure animations work on mobile */
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }

    .animated {
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* Core viewport fixes */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 14px !important;
    }

    /* Universal container fixes */
    .container, .section, .hero {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* Header fixes */
    header {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        padding: 10px 0 !important;
        background: rgba(10, 10, 10, 0.98) !important;
        z-index: 9999 !important;
        height: 60px !important;
    }

    nav {
        padding: 0 15px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .logo .silver-gradient {
        display: inline-block !important;
        font-size: 40px !important;
        font-weight: 600 !important;
    }

    /* Mobile menu */
    .hamburger-menu {
        display: none !important;
        z-index: 10001 !important;
    }

    .nav-links {
        position: fixed !important;
        top: 60px !important;
        right: -100% !important;
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        background: #0a0a0a !important;
        flex-direction: column !important;
        padding: 20px !important;
        transition: right 0.3s ease !important;
        z-index: 10000 !important;
    }

    .nav-links.active {
        right: 0 !important;
    }

    .nav-links a {
        padding: 15px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* Content sections */
    .hero {
        padding: 80px 15px 40px !important;
        margin-top: 60px !important;
    }

    .hero h1 {
        font-size: 31px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    .section h2 {
        font-size: 30px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }

    /* Team grid */
    .team-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .team-member {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Comparison grid */
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Buttons */
    .buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn {
        width: 65% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* Forms */
    .form-group input,
    .form-group textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }

    /* Simplify animations for mobile */
    .gear-simulation {
        display: none !important; /* Hide gear only */
    }

    #fem-mesh-canvas {
        opacity: 0.5; /* Dimmer on mobile for better readability */
    }

    /* Simplified mobile simulation visualization */
    .simulation-box {
        display: flex !important;
        background: rgba(20, 20, 20, 0.95) !important;
        border: 1px solid rgba(192, 192, 192, 0.15) !important;
        min-height: 100px !important;
        padding: 15px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Simplified simulation visualization for mobile */
    .simulation-visualization {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: 100px !important;
        margin: 15px 0 !important;
    }

    .simulation-wrapper {
        display: flex !important;
        width: 100% !important;
        max-width: 150px !important;
        height: 80px !important;
        margin: 0 auto !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Simulation grid and object for mobile */
    .simulation-viz {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .simulation-grid {
        display: none !important; /* Hide grid on mobile for cleaner look */
    }

    .simulation-object {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 50px !important;
        height: 50px !important;
        background: rgba(192, 192, 192, 0.15) !important;
        border: 2px solid rgba(192, 192, 192, 0.4) !important;
        border-radius: 8px !important;
        display: block !important;
    }

    .simulation-mesh {
        display: none !important; /* Hide mesh pattern on mobile */
    }

    .simulation-heatmap {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0.6 !important;
    }

    /* Clean mobile animations - simple pulses */
    .slow .simulation-heatmap {
        background: radial-gradient(circle at center,
            rgba(255, 100, 100, 0.4) 0%,
            transparent 60%) !important;
        animation: none !important; /* Disable animation for cleaner look */
    }

    .fast .simulation-heatmap {
        background: radial-gradient(circle at center,
            rgba(100, 255, 100, 0.5) 0%,
            transparent 60%) !important;
        animation: pulse-fast-mobile 1.5s ease-in-out infinite !important;
    }

    /* Ensure clean mobile comparison cards */
    .comparison-item {
        min-height: 200px !important;
        padding: 20px !important;
    }

    /* VS separator on mobile */
    .comparison-vs {
        margin: 20px 0 !important;
        font-size: 20px !important;
        opacity: 0.6 !important;
    }

    /* Comparison headers and times on mobile */
    .comparison-header {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        opacity: 0.9 !important;
    }

    .comparison-time {
        font-size: 29px !important;
        font-weight: 600 !important;
        margin-bottom: 15px !important;
        background: linear-gradient(135deg, #c0c0c0, #ffffff) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    /* Clean progress bars for mobile */
    .slow .progress-bar {
        animation: slow-progress 4s ease-out infinite !important;
        background: linear-gradient(90deg, rgba(255, 100, 100, 0.8), rgba(255, 150, 50, 0.6)) !important;
    }

    .fast .progress-bar {
        animation: fast-progress 1s ease-out infinite !important;
        background: linear-gradient(90deg, rgba(100, 255, 100, 0.8), rgba(50, 200, 150, 0.6)) !important;
    }

    @keyframes slow-progress {
        0% { width: 0; }
        100% { width: 100%; }
    }

    @keyframes fast-progress {
        0% { width: 0; }
        100% { width: 100%; }
    }

    /* Hide stress field on mobile - using simpler heatmap instead */
    .stress-field {
        display: none !important;
    }

    @keyframes pulse-slow-mobile {
        0%, 100% { opacity: 0.4; transform: scale(0.9); }
        50% { opacity: 0.7; transform: scale(1.1); }
    }

    @keyframes pulse-fast-mobile {
        0%, 100% { opacity: 0.5; transform: scale(0.95); }
        50% { opacity: 0.9; transform: scale(1.05); }
    }

    /* Hide force vectors on mobile - too cluttered */
    .force-vectors {
        display: none !important;
    }

    /* Simplified simulation info for mobile */
    .simulation-info {
        position: absolute !important;
        bottom: 5px !important;
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
        opacity: 1 !important;
        display: block !important;
        text-align: center !important;
        font-size: 11px !important;
        color: rgba(192, 192, 192, 0.8) !important;
        opacity: 1 !important;
        display: block !important;
    }

    .info-item {
        margin-bottom: 3px !important;
    }

    .info-progress {
        width: 80% !important;
        height: 2px !important;
        background: rgba(192, 192, 192, 0.1) !important;
        border-radius: 2px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    .progress-bar {
        height: 100% !important;
        border-radius: 2px !important;
        transition: width 0.3s ease !important;
    }

    .slow-progress {
        background: rgba(255, 100, 100, 0.5) !important;
        width: 15% !important;
        animation: slow-load 3s ease-in-out infinite !important;
    }

    .fast-progress {
        background: rgba(100, 255, 100, 0.7) !important;
        width: 90% !important;
        animation: fast-load 0.5s ease-in-out !important;
    }

    @keyframes slow-load {
        0% { width: 15%; }
        50% { width: 45%; }
        100% { width: 15%; }
    }

    @keyframes fast-load {
        0% { width: 0%; }
        100% { width: 90%; }
    }

    /* Text overflow fixes */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Tablet specific (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 100% !important;
        padding: 0 30px !important;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .comparison-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* Team section hr styling */
.team-info hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(192, 192, 192, 0.3) 20%, 
        rgba(192, 192, 192, 0.5) 50%, 
        rgba(192, 192, 192, 0.3) 80%, 
        transparent 100%);
    margin: 12px 0;
}