/**
 * VertaBridge Complete Stylesheet - Orange Theme
 * Redesign + Premium Animations + Logo Color Match
 */

/* ========================================
   CSS VARIABLES (Design Tokens) - ORANGE THEME
   ======================================== */
:root {
    /* Brand Colors - Matched to Logo */
    --color-primary: #FF6B35;        /* Logo Orange */
    --color-primary-dark: #E55527;   /* Darker Orange */
    --color-primary-light: #FF8C5F;  /* Lighter Orange */
    --color-secondary: #FFB088;      /* Soft Orange/Peach */
    
    /* Neutral Colors */
    --color-dark: #0B0F19;
    --color-light: #F8FAFC;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Typography */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-orange: 0 10px 30px rgba(255, 107, 53, 0.3);
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-base: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
}

/* ========================================
   DARK THEME VARIABLES
   ======================================== */
:root[data-theme="dark"] {
    /* Backgrounds - Dark Theme */
    --bg-primary: #0B0F19;
    --bg-secondary: #151922;
    --bg-tertiary: #1F2937;
    --bg-card: #1a1f2e;
    
    /* Text Colors - Dark Theme */
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    
    /* Gray Scale Inversion */
    --color-gray-50: #1F2937;
    --color-gray-100: #374151;
    --color-gray-200: #4B5563;
    --color-gray-300: #6B7280;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #D1D5DB;
    --color-gray-600: #E5E7EB;
    --color-gray-700: #F3F4F6;
    --color-gray-800: #F9FAFB;
    --color-gray-900: #FFFFFF;
    
    /* Borders */
    --border-color: #374151;
    
    /* Shadows - Adjusted for dark */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* ========================================
   BASE STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-gray-900);
    background-color: white;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

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

/* ========================================
   GRADIENT TEXT - ORANGE THEME
   ======================================== */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-animated {
    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-secondary),
        var(--color-primary)
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

.gradient-wave {
    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-secondary),
        var(--color-primary),
        var(--color-secondary)
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-wave 4s ease infinite;
}

/* Fix for hero text reveal with gradient */
.hero-text-reveal.gradient-wave {
    opacity: 0 ;
    transform: translateY(100%) rotateX(-90deg);
    transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Parent gradient-wave fix */
.hero-text-line.gradient-wave .hero-text-reveal {
    opacity: 0 ;
    transform: translateY(100%) rotateX(-90deg);
    transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Ensure gradient animation still works after reveal */
.hero-text-reveal.gradient-wave {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes gradient-wave {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer-text {
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-secondary) 25%,
        #ffffff 50%,
        var(--color-secondary) 75%,
        var(--color-primary) 100%
    );
    background-size: 1000px 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* Ken Burns Effect */
@keyframes ken-burns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.ken-burns {
    animation: ken-burns 20s ease-out infinite alternate;
}

/* Image Reveal */
@keyframes image-reveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

.image-reveal {
    animation: image-reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Delay Classes */
.delay-100 { animation-delay: 0.1s; opacity: 0; }
.delay-200 { animation-delay: 0.2s; opacity: 0; }
.delay-300 { animation-delay: 0.3s; opacity: 0; }
.delay-400 { animation-delay: 0.4s; opacity: 0; }
.delay-500 { animation-delay: 0.5s; opacity: 0; }
.delay-600 { animation-delay: 0.6s; opacity: 0; }

/* Stagger Animation */
.stagger-1 { animation-delay: 0.1s; opacity: 0; }
.stagger-2 { animation-delay: 0.2s; opacity: 0; }
.stagger-3 { animation-delay: 0.3s; opacity: 0; }
.stagger-4 { animation-delay: 0.4s; opacity: 0; }
.stagger-5 { animation-delay: 0.5s; opacity: 0; }
.stagger-6 { animation-delay: 0.6s; opacity: 0; }

.lazy-animate {
    opacity: 0;
}

.reveal-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================
   HOVER EFFECTS
   ======================================== */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.hover-scale {
    transition: transform var(--transition-base);
}

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

/* ========================================
   BUTTONS - ORANGE THEME
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    cursor: pointer;
    border: none;
    outline: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
}

.btn-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    position: relative;
    overflow: hidden;
}

.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--transition-slow);
}

.btn-gradient:hover::before {
    left: 100%;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
}

/* Magnetic Button */
.magnetic-button {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.magnetic-button:hover {
    transform: scale(1.05);
}

/* Glow Button */
.glow-button {
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.4),
                    0 0 40px rgba(255, 107, 53, 0.2),
                    0 0 60px rgba(255, 107, 53, 0.1);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 107, 53, 0.6),
                    0 0 60px rgba(255, 107, 53, 0.4),
                    0 0 90px rgba(255, 107, 53, 0.2);
    }
}

/* Ripple Effect */
.ripple-container {
    position: relative;
    overflow: hidden;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    animation: ripple 0.6s ease-out;
}

/* ========================================
   CARDS
   ======================================== */
.card {
    background-color: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* 3D Tilt Card */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.tilt-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg) scale(1.02);
}

/* Card Stack Effect */
.card-stack {
    position: relative;
}

.card-stack::before,
.card-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    background: white;
    border-radius: inherit;
    z-index: -1;
    transition: transform 0.3s ease;
}

.card-stack::before {
    transform: translate(-4px, -4px);
    opacity: 0.5;
}

.card-stack::after {
    transform: translate(-8px, -8px);
    opacity: 0.25;
}

.card-stack:hover::before {
    transform: translate(-8px, -8px);
}

.card-stack:hover::after {
    transform: translate(-12px, -12px);
}

/* ========================================
   IMAGE EFFECTS
   ======================================== */
.image-overlay {
    position: relative;
    overflow: hidden;
}

.image-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.7) 0%, rgba(255, 176, 136, 0.7) 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.image-overlay:hover::after {
    opacity: 1;
}

.image-zoom {
    overflow: hidden;
}

.image-zoom img {
    transition: transform var(--transition-slow);
}

.image-zoom:hover img {
    transform: scale(1.1);
}

.premium-image {
    filter: grayscale(100%);
    transition: filter 0.6s cubic-bezier(0.43, 0.13, 0.23, 0.96);
}

.premium-image:hover {
    filter: grayscale(0%);
}

/* ========================================
   NAVIGATION
   ======================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-gray-100);
    transition: var(--transition-base);
}

.navbar.scrolled {
    box-shadow: var(--shadow-md);
}

/* ========================================
   SCROLL PROGRESS BAR - ORANGE
   ======================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    z-index: 9999;
    transition: width 0.1s ease;
}

/* ========================================
   CURSOR TRAIL - ORANGE
   ======================================== */
@keyframes cursor-trail {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.cursor-trail {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.8), transparent);
    pointer-events: none;
    animation: cursor-trail 0.6s ease-out forwards;
    z-index: 9999;
}

/* ========================================
   PARTICLE EFFECT - ORANGE
   ======================================== */
@keyframes particle-float {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(50px);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 107, 53, 0.6);
    border-radius: 50%;
    animation: particle-float 8s linear infinite;
}

.particle:nth-child(2) { animation-delay: 2s; left: 20%; }
.particle:nth-child(3) { animation-delay: 4s; left: 40%; }
.particle:nth-child(4) { animation-delay: 6s; left: 60%; }
.particle:nth-child(5) { animation-delay: 1s; left: 80%; }

/* ========================================
   MORPHING BORDERS - ORANGE ACCENT
   ======================================== */
@keyframes border-dance {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

.morphing-border {
    animation: border-dance 8s ease-in-out infinite;
}

/* ========================================
   STATS & COUNTERS
   ======================================== */
.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    color: var(--color-gray-600);
    margin-top: 0.5rem;
}

@keyframes stat-reveal {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.stat-animate {
    animation: stat-reveal 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

/* ========================================
   FORMS
   ======================================== */
.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-family: var(--font-family);
    font-size: 1rem;
    transition: var(--transition-base);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

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

/* ========================================
   UTILITY CLASSES
   ======================================== */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .stat-number {
        font-size: 2rem;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   PREMIUM MOBILE MENU
   ======================================== */
#mobile-menu-panel {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

#mobile-menu-panel a {
    position: relative;
    overflow: hidden;
}

#mobile-menu-panel a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

#mobile-menu-panel a:hover::before {
    transform: scaleY(1);
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .navbar,
    .scroll-progress,
    .cursor-trail,
    .particle {
        display: none !important;
    }
}
/* ========================================
   CUSTOM CURSOR - PREMIUM ORANGE
   ======================================== */

/* Default cursor'u gizle */
* {
    cursor: none !important;
}

/* Custom cursor circle */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    mix-blend-mode: difference; /* Arka plana göre renk değişimi */
}

/* Cursor visible when moving */
.custom-cursor.active {
    opacity: 1;
}

/* Outer ring */
.cursor-ring {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 107, 53, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
}

.cursor-ring.active {
    opacity: 1;
}

/* Hover state - büyür */
.custom-cursor.hover {
    transform: translate(-50%, -50%) scale(1.5);
    background: var(--color-primary);
}

.cursor-ring.hover {
    transform: translate(-50%, -50%) scale(1.8);
    border-color: var(--color-primary);
}

/* Clickable elementlerde pointer cursor */
a, button, input, textarea, select,
[role="button"], .cursor-pointer {
    cursor: pointer !important;
}

/* Mobile'da cursor'u gizle */
@media (max-width: 768px) {
    .custom-cursor,
    .cursor-ring {
        display: none !important;
    }
    
    * {
        cursor: auto !important;
    }
}

/* ========================================
   HERO SECTION - PREMIUM ANIMATIONS
   ======================================== */

/* Gradient Mesh Background (SİLİNEN KISIM) */
.gradient-mesh {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 176, 136, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(255, 107, 53, 0.08) 0%, transparent 50%);
    animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

/* Floating Geometric Shapes (SİLİNEN KISIM) */
.floating-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.shape {
    position: absolute;
    opacity: 0.1;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 10%;
    left: 10%;
    animation: float-1 20s ease-in-out infinite;
}

.shape-2 {
    width: 200px;
    height: 200px;
    background: var(--color-primary);
    border-radius: 50%;
    top: 60%;
    right: 15%;
    animation: float-2 15s ease-in-out infinite;
}

.shape-3 {
    width: 150px;
    height: 150px;
    background: var(--color-secondary);
    border-radius: 20% 80% 80% 20% / 80% 20% 80% 20%;
    bottom: 20%;
    left: 70%;
    animation: float-3 18s ease-in-out infinite;
}

@keyframes float-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

@keyframes float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, 40px) scale(1.2); }
}

@keyframes float-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -40px) rotate(180deg); }
}

/* Text Split Reveal Animation - DÜZELTİLMİŞ HALİ */
.hero-text-line {
    display: block;
    overflow: hidden;
    perspective: 1200px;
    padding-bottom: 0.15em;
    line-height: 1.15;
    perspective-origin: center bottom;
}

.hero-text-reveal {
    display: inline-block;
    opacity: 0;
    /* BAŞLANGIÇ POZİSYONU (Pat pat yok) */
    transform: rotateX(-90deg); 
    transform-origin: bottom center;
    transition: all 1.4s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform, opacity;
}

/* Gradient Fix */
.hero-text-reveal.gradient-wave {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtitle Fade In (GERİ EKLENDİ) */
.hero-subtitle {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* CTA Buttons Stagger (GERİ EKLENDİ) */
.hero-cta {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Trust Badges (GERİ EKLENDİ) */
.trust-badge {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Scroll Indicator (GERİ EKLENDİ) */
.scroll-indicator {
    opacity: 0;
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    animation: gentle-bounce 2s ease-in-out infinite 2s;
}

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

.scroll-dot {
    animation: scroll-bounce 2s ease-in-out infinite;
}

@keyframes scroll-dot-move {
    0%, 100% { 
        transform: translateY(0); 
        opacity: 1;
    }
    50% { 
        transform: translateY(12px); 
        opacity: 0.3;
    }
}

@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

/* Pulse animation for icons */
@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.trust-badge i {
    animation: icon-pulse 2s ease-in-out infinite;
}

/* ========================================
   CINEMATIC ENHANCEMENTS
   ======================================== */

/* Page Load Animation */
body {
    animation: page-fade-in 0.5s ease-out;
}

@keyframes page-fade-in {
    from { 
        opacity: 0;
    }
    to { 
        opacity: 1;
    }
}

/* Smooth Scroll Enhancement */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Better font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Prevent FOUC (Flash of Unstyled Content) */
.hero-text-reveal,
.hero-subtitle,
.hero-cta,
.trust-badge,
.scroll-indicator {
    will-change: opacity, transform;
}
/* ========================================
   PREMIUM BUTTON INTERACTIONS
   ======================================== */

/* Enhanced Button Hover - Lift + Glow */
.bg-gray-900,
.border-2.border-gray-900 {
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.bg-gray-900:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(255, 107, 53, 0.5);
}

.border-2.border-gray-900:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
    background-color: rgba(255, 107, 53, 0.05);
}

/* Button Shine Effect */
.bg-gray-900::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.bg-gray-900:hover::before {
    left: 100%;
}

/* Icon Animation on Hover */
.group:hover .ri-arrow-right-line {
    animation: arrow-bounce 0.6s ease infinite;
}

@keyframes arrow-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* Service Card Links - Animated Underline */
.text-primary.font-semibold {
    position: relative;
    display: inline-block;
}

.text-primary.font-semibold::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width 0.3s ease;
}

.text-primary.font-semibold:hover::after {
    width: 100%;
}
/* ========================================
   SERVICE CARDS - MAGNETIC HOVER
   ======================================== */

/* Service Cards - Enhanced */
.bg-white.p-8.rounded-xl {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid transparent;
    cursor: pointer;
}

.bg-white.p-8.rounded-xl:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 107, 53, 0.2);
}

/* Icon Pulse on Card Hover */
.bg-white.p-8.rounded-xl:hover i {
    animation: icon-pulse-hover 0.6s ease;
}

@keyframes icon-pulse-hover {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(5deg); }
}

/* Card Background Glow */
.bg-white.p-8.rounded-xl::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.bg-white.p-8.rounded-xl:hover::before {
    opacity: 0.15;
}

/* Ensure cards have position relative */
.bg-white.p-8.rounded-xl {
    position: relative;
}

/* ========================================
   IMAGE HOVER EFFECTS - PREMIUM
   ======================================== */

/* Case Study Images - Zoom & Overlay */
.rounded-xl.overflow-hidden img,
.image-overlay img {
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.rounded-xl.overflow-hidden:hover img,
.image-overlay:hover img {
    transform: scale(1.15) rotate(2deg);
}

/* Color Overlay on Hover */
.rounded-xl.overflow-hidden,
.shadow-xl.hover-lift {
    position: relative;
    overflow: hidden;
}

.rounded-xl.overflow-hidden::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 107, 53, 0.8) 0%,
        rgba(255, 176, 136, 0.6) 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.rounded-xl.overflow-hidden:hover::after {
    opacity: 1;
}

/* Ensure content stays above overlay */
.rounded-xl.overflow-hidden > div {
    position: relative;
    z-index: 2;
}

/* Featured Case Study - Parallax Effect */
.shadow-xl.hover-lift {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shadow-xl.hover-lift:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

/* ========================================
   CASE STUDY CARDS - ADVANCED HOVER
   ======================================== */

/* Case Study Card Container */
.bg-white.rounded-xl.overflow-hidden.shadow-lg {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.bg-white.rounded-xl.overflow-hidden.shadow-lg:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* Image Container Height Consistency */
.bg-white.rounded-xl.overflow-hidden.shadow-lg img {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bg-white.rounded-xl.overflow-hidden.shadow-lg:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* Read More Link Animation */
.bg-white.rounded-xl.overflow-hidden.shadow-lg .ri-arrow-right-line {
    transition: transform 0.3s ease;
}

.bg-white.rounded-xl.overflow-hidden.shadow-lg:hover .ri-arrow-right-line {
    transform: translateX(5px);
}

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

/* Navbar Links - Animated Underline */
nav a.text-primary {
    position: relative;
    transition: color 0.3s ease;
}

nav a.text-primary::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

nav a.text-primary:hover::after {
    width: 80%;
}

/* Navbar Scroll Shadow - Smooth */
.navbar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.98);
}

/* Footer Links Hover */
footer a {
    position: relative;
    transition: all 0.3s ease;
}

footer a:hover {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* Social Icons Hover */
footer .ri-linkedin-line,
footer .ri-twitter-line,
footer .ri-mail-line {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

footer a:hover .ri-linkedin-line,
footer a:hover .ri-twitter-line,
footer a:hover .ri-mail-line {
    transform: scale(1.2) rotate(5deg);
    color: var(--color-primary);
}

/* ========================================
   SMOOTH SCROLL REVEALS
   ======================================== */

/* Section Headers - Fade In */
section h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

/* Ensure sections are visible */
section {
    overflow: hidden;
}

/* Add subtle background on alternate sections */
section:nth-child(even):not(.bg-gray-900) {
    background: linear-gradient(
        180deg,
        rgba(255, 107, 53, 0.02) 0%,
        transparent 100%
    ) !important;
}

/* Force dark background for stats */
section.bg-gray-900 {
    background-color: #111827 !important;
}


/* ========================================
   PREMIUM TYPOGRAPHY SYSTEM
   ======================================== */

/* Font Family Variables */
:root {
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-accent: 'Space Grotesk', monospace;
}

/* Apply Fonts */
body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em; /* Tighter tracking for headers */
}

/* Hero Title - Extra Bold */
section h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Numbers & Stats - Accent Font */
.stat-number,
[data-count] {
    font-family: var(--font-accent);
    font-weight: 700;
}

/* CTA Buttons - Heading Font */
.bg-gray-900,
.border-2.border-gray-900 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Service Card Headings */
.text-2xl.font-bold {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

/* Enhanced Readability */
p {
    font-family: var(--font-body);
    line-height: 1.7;
    letter-spacing: -0.005em;
}

/* Premium Number Style */
.trust-badge {
    font-family: var(--font-body);
    font-weight: 500;
}

/* Featured Text - Accent */
.text-sm.font-semibold.text-primary {
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* ========================================
   ANIMATED SECTION DIVIDERS
   ======================================== */

/* Wave Divider */
.wave-divider {
    position: relative;
    height: 80px;
    overflow: hidden;
}

.wave-divider svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wave-divider.wave-top {
    transform: rotate(180deg);
}

/* Animated Wave */
.wave-animate {
    animation: wave-motion 15s ease-in-out infinite;
}

@keyframes wave-motion {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(-25px) translateY(5px);
    }
}

/* Alternative Divider - Dots */
.dots-divider {
    height: 60px;
    background-image: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.2) 2px,
        transparent 2px
    );
    background-size: 30px 30px;
    background-position: center;
}

/* Gradient Line Divider */
.gradient-divider {
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-primary) 50%,
        transparent 100%
    );
    margin: 4rem 0;
    opacity: 0.3;
}

/* ========================================
   SECTION PROGRESS INDICATORS
   ======================================== */

/* Vertical Progress Line */
.section-progress {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: none; /* Hidden on mobile */
}

@media (min-width: 1024px) {
    .section-progress {
        display: block;
    }
}

.section-progress-item {
    position: relative;
    padding: 15px 0;
    cursor: pointer;
}

.section-progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.3);
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-progress-item:hover .section-progress-dot {
    background: var(--color-primary);
    border-color: white;
    transform: scale(1.4);
}

.section-progress-item.active .section-progress-dot {
    background: var(--color-primary);
    border-color: white;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2);
    transform: scale(1.3);
}

/* Connecting Line */
.section-progress::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 107, 53, 0.3) 20%,
        rgba(255, 107, 53, 0.3) 80%,
        transparent 100%
    );
}

/* Label on Hover */
.section-progress-label {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-900);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}

.section-progress-item:hover .section-progress-label {
    opacity: 1;
    transform: translateY(-50%) translateX(5px);
}

/* ========================================
   PREMIUM LOADING SCREEN
   ======================================== */

/* Loading Screen Container */
.loading-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
}

/* Loading Content */
.loading-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Logo Animation */
/* Loading Icon (smaller, icon only) */
.loading-icon {
    width: 120px;
    height: auto;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInBounce 0.8s ease-out 0.2s forward,
    rotateIcon 3s linear 1s infinite;
}

@keyframes rotateIcon {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Bounce animation for icon */
@keyframes fadeInBounce {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(-20px);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse effect for icon */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.loading-icon {
    animation: fadeInBounce 0.8s ease-out 0.2s forwards, 
               iconPulse 2s ease-in-out 1s infinite;
}

.loading-logo img {
    height: 80px;
    width: auto;
    filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
}

@keyframes logo-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 15px 40px rgba(255, 107, 53, 0.5));
    }
}

/* Loading Bar */
.loading-bar-container {
    width: 200px;
    height: 4px;
    background: rgba(255, 107, 53, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto 20px;
}

.loading-bar {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-secondary),
        var(--color-primary)
    );
    background-size: 200% 100%;
    border-radius: 10px;
    animation: loading-progress 2s ease-in-out infinite;
}

@keyframes loading-progress {
    0% {
        width: 0%;
        background-position: 0% 50%;
    }
    50% {
        width: 70%;
        background-position: 100% 50%;
    }
    100% {
        width: 100%;
        background-position: 0% 50%;
    }
}

/* Loading Text */
.loading-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-gray-600);
    font-weight: 500;
    animation: text-fade 2s ease-in-out infinite;
}

@keyframes text-fade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Background Animation */
.loading-bg-animation {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.loading-particle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.1) 0%,
        transparent 70%
    );
    animation: particle-float-loading 8s ease-in-out infinite;
}

.loading-particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.loading-particle:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
    animation-duration: 10s;
}

.loading-particle:nth-child(3) {
    bottom: 20%;
    left: 50%;
    animation-delay: 4s;
    animation-duration: 12s;
}

@keyframes particle-float-loading {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    33% {
        transform: translate(30px, -30px) scale(1.2);
        opacity: 0.6;
    }
    66% {
        transform: translate(-30px, 30px) scale(0.8);
        opacity: 0.4;
    }
}

/* Page Reveal Animation */
body.loading {
    overflow: hidden;
}

/* ========================================
   ANIMATED STATS COUNTERS
   ======================================== */

/* Stat Numbers - Enhanced */
.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    font-family: var(--font-accent);
    position: relative;
    display: inline-block;
}
/* Dark Background Stats - FORCE WHITE */
.bg-gray-900 .stat-number {
    color: white !important;
}

.bg-gray-900 .stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Counting Animation */
@keyframes count-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.stat-number.counting {
    animation: count-pulse 0.5s ease;
}

/* Plus Sign for Growth Metrics */
.stat-number[data-count]::after {
    content: '+';
    position: absolute;
    right: -20px;
    top: 0;
    font-size: 0.6em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-number.counted::after {
    opacity: 0.6;
}

/* Percentage Sign */
.stat-number[data-count="95"]::after {
    content: '%';
    opacity: 1;
}

/* Label Enhancement */
.stat-label {
    font-size: 1rem;
    color: var(--color-gray-600);
    margin-top: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

/* Dark Background Stats */
    .bg-gray-900 .stat-number {
    color: var(--color-primary) !important;
}

.bg-gray-900 .stat-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .stat-number {
        font-size: 2.5rem;
    }
}

/* ========================================
   FINAL VISUAL POLISH
   ======================================== */

/* Page Transitions */
body {
    transition: opacity 0.3s ease;
}

/* Smooth Link Transitions */
a {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Shadows - Layered */
.shadow-xl {
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1),
        0 0 50px -10px rgba(255, 107, 53, 0.1);
}

.shadow-2xl {
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 15px 30px -15px rgba(0, 0, 0, 0.2),
        0 0 60px -15px rgba(255, 107, 53, 0.15);
}

/* Glassmorphism Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Text Selection */
::selection {
    background-color: var(--color-primary);
    color: white;
}

::-moz-selection {
    background-color: var(--color-primary);
    color: white;
}

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

::-webkit-scrollbar-track {
    background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--color-primary),
        var(--color-secondary)
    );
    border-radius: 10px;
}

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

/* Focus States - Accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Smooth Image Loading */
img {
    transition: opacity 0.3s ease;
}

img:not([src]) {
    opacity: 0;
}

/* Section Spacing Consistency */
section {
    scroll-margin-top: 80px; /* For smooth scroll with fixed nav */
}

/* Enhanced Grid Gaps */
.grid {
    gap: 2rem;
}

@media (min-width: 768px) {
    .grid {
        gap: 2.5rem;
    }
}

/* Better Button States */
button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading States */
.loading-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-100) 50%,
        var(--color-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Print Optimization */
@media print {
    .navbar,
    .section-progress,
    .scroll-progress,
    #mobile-menu,
    footer {
        display: none !important;
    }
    
    section {
        page-break-inside: avoid;
    }
}

/* Performance: GPU Acceleration */
.hover-lift,
.tilt-card,
.custom-cursor,
.cursor-ring,
.hero-text-reveal {
    will-change: transform;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   ENHANCED CONTACT FORM - FIXED
   ======================================== */

/* Form Group Container */
.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

/* Label - Default State */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

/* Enhanced Input Styles */
.form-input,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
}

/* Focus State */
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
    transform: translateY(-2px);
}

/* Focus State - Label Color Change */
.form-group:focus-within .form-label {
    color: var(--color-primary);
}

/* Validation States */
.form-input.valid,
.form-textarea.valid {
    border-color: #10B981;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310B981'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 20px;
    padding-right: 3rem;
}

.form-input.invalid,
.form-textarea.invalid {
    border-color: #EF4444;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EF4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 20px;
    padding-right: 3rem;
}

/* Validation Messages */
.form-message {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: slideDown 0.3s ease;
}

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

.form-message.success {
    color: #10B981;
}

.form-message.error {
    color: #EF4444;
}

/* Select Styling */
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 20px;
    padding-right: 3rem;
}

/* Submit Button Enhancement */
button[type="submit"] {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

button[type="submit"]:active {
    transform: translateY(-1px);
}

/* Loading State */
button[type="submit"].loading {
    pointer-events: none;
}

button[type="submit"].loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid white;
    border-radius: 50%;
    border-top-color: transparent;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Success State */
button[type="submit"].success {
    background-color: #10B981;
}

button[type="submit"].success::before {
    content: '✓';
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translate(0, -50%) scale(0);
    font-size: 1.5rem;
    color: white;
    animation: checkmark-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes checkmark-pop {
    0% {
        transform: translate(0, -50%) scale(0) rotate(0deg);
    }
    100% {
        transform: translate(0, -50%) scale(1) rotate(360deg);
    }
}

/* Character Counter */
.character-counter {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-align: right;
    margin-top: 0.5rem;
    font-weight: 500;
}

.character-counter.warning {
    color: #F59E0B;
}

.character-counter.danger {
    color: #EF4444;
    font-weight: 600;
}

/* Input Hover Effect */
.form-input:hover:not(:focus),
.form-textarea:hover:not(:focus) {
    border-color: var(--color-gray-300);
}

/* Textarea Specific */
.form-textarea {
    min-height: 150px;
    resize: vertical;
}

/* Required Asterisk Styling */
.form-label::after {
    content: ' *';
    color: var(--color-primary);
}

/* Optional Fields - Remove Asterisk */
.form-group.optional .form-label::after {
    content: '';
}

/* Disabled State */
.form-input:disabled,
.form-textarea:disabled {
    background-color: var(--color-gray-100);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   MOBILE OPTIMIZATION
   ======================================== */

/* Mobile-First Responsive Adjustments */
@media (max-width: 768px) {
    
    /* Typography - Mobile Optimized */
    h1 {
        font-size: 2.5rem !important;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }
    
    h2 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    p, li {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    /* Hero Section - Mobile */
    .hero-text-reveal {
        font-size: 2.25rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.125rem !important;
        line-height: 1.6;
    }
    
    /* Buttons - Larger Touch Targets */
    .btn,
    button,
    a.bg-gray-900,
    a.border-2 {
        min-height: 48px;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Service Cards - Mobile Stack */
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3,
    .grid.lg\:grid-cols-3 {
        gap: 1.5rem;
    }
    
    /* Card Hover - Disable on Mobile (Performance) */
    .hover-lift:hover {
        transform: none;
    }
    
    /* Images - Aspect Ratio Fix */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Section Padding - Tighter on Mobile */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    /* Stats - Mobile Layout */
    .stat-number {
        font-size: 2.5rem !important;
    }
    
    .stat-label {
        font-size: 0.875rem;
    }
    
    /* Form - Mobile Optimized */
    .form-input,
    .form-textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 0.875rem;
    }
    
    /* Navigation - Mobile */
    nav {
        padding: 0 1rem;
    }
    
    .navbar {
        height: 70px;
    }
    
    /* Hero - Mobile Spacing */
    .pt-32 {
        padding-top: 6rem !important;
    }
    
    /* CTA Buttons - Stack on Mobile */
    .flex-col.sm\:flex-row {
        gap: 1rem;
    }
    
    /* Trust Badges - Wrap Better */
    .trust-badge {
        font-size: 0.875rem;
    }
    
    /* Dividers - Smaller on Mobile */
    .wave-divider {
        height: 50px;
    }
    
    .dots-divider {
        height: 40px;
    }
    
    /* Footer - Mobile */
    footer {
        padding: 2rem 1rem;
    }
    
    footer .grid {
        gap: 2rem;
    }
}

/* Small Mobile (< 375px) */
@media (max-width: 374px) {
    h1 {
        font-size: 2rem !important;
    }
    
    .hero-text-reveal {
        font-size: 2rem !important;
    }
    
    .btn {
        font-size: 0.875rem;
        padding: 0.75rem 1.25rem;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .min-h-screen {
        min-height: 100vh;
    }
    
    .pt-32 {
        padding-top: 4rem !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger Click Targets */
    a, button, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove Hover Effects on Touch */
    .hover-lift:hover,
    .hover-scale:hover,
    .tilt-card:hover {
        transform: none;
    }
    
    /* Tap Highlight */
    * {
        -webkit-tap-highlight-color: rgba(255, 107, 53, 0.2);
    }
}

/* Prevent Horizontal Scroll */
body {
    overflow-x: hidden;
}

section,
div {
    max-width: 100%;
}

/* Safe Area for iPhone X+ */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Mobile Menu Enhancement */
@media (max-width: 768px) {
    #mobile-menu-panel {
        width: 100%;
        max-width: 100%;
    }
    
    .section-progress {
        display: none !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Image Lazy Loading - Blur Effect */
img {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

img[loading="lazy"] {
    filter: blur(5px);
    opacity: 0.8;
}

img[loading="lazy"].loaded {
    filter: blur(0);
    opacity: 1;
}

/* Reduce Motion for Performance */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Keep essential animations */
    .loading-screen,
    .loading-bar {
        animation: none !important;
    }
}

/* Will-Change Optimization (GPU Acceleration) */
.hero-text-reveal,
.custom-cursor,
.cursor-ring,
.loading-logo,
.hover-lift,
.tilt-card {
    will-change: transform;
}

/* Remove will-change after animation */
.hero-text-reveal.animated,
.hover-lift:not(:hover) {
    will-change: auto;
}

/* Contain Layout Shifts */
.card,
.bg-white.p-8.rounded-xl {
    contain: layout style paint;
}

/* Optimize animations for 60fps */
@keyframes optimized-fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Use transform instead of top/left for animations */
.section-progress-dot,
.trust-badge i {
    transform: translateZ(0);
    backface-visibility: hidden;
}

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

/* Reduce repaints */
.navbar {
    transform: translateZ(0);
    backface-visibility: hidden;
}

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

/* Keyboard Focus Indicators */
*:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255, 107, 53, 0.2);
}

/* Skip to Main Content Link */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1rem 1.5rem;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
}

.skip-to-main:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

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

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }
    
    .btn,
    button {
        border: 2px solid currentColor !important;
    }
}

/* Reduced Transparency for Accessibility */
@media (prefers-reduced-transparency: reduce) {
    * {
        opacity: 1 !important;
        background-color: solid !important;
    }
}

/* Focus within - for form groups */
.form-group:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

/* Aria-label for icon-only buttons */
button[aria-label]:not(:empty),
a[aria-label]:not(:empty) {
    position: relative;
}

/* Loading State Announcement */
[aria-busy="true"] {
    cursor: wait;
}

/* Disabled State */
[disabled],
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Error States for Screen Readers */
[aria-invalid="true"] {
    border-color: #EF4444 !important;
}

/* Required Fields */
[aria-required="true"]::after,
[required]::after {
    content: ' *';
    color: var(--color-primary);
}

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

@media print {
    /* Hide non-essential elements */
    .navbar,
    .section-progress,
    .scroll-progress,
    #mobile-menu,
    .loading-screen,
    .custom-cursor,
    .cursor-ring,
    .wave-divider,
    .dots-divider,
    footer,
    button,
    .btn,
    [role="button"] {
        display: none !important;
    }
    
    /* Reset backgrounds */
    * {
        background: white !important;
        color: black !important;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* Prevent page breaks inside elements */
    section,
    .card,
    .bg-white {
        page-break-inside: avoid;
    }
    
    /* Headers */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    /* Typography */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }
    
    /* Logo */
    .navbar img {
        display: block !important;
        max-width: 150px;
    }
}

/* ========================================
   BROWSER COMPATIBILITY
   ======================================== */

/* IE11 Flexbox fixes */
@media all and (-ms-high-contrast: none) {
    .flex {
        display: -ms-flexbox;
    }
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
    /* Smooth scrolling for Safari */
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix backdrop-filter blur */
    .navbar,
    #mobile-menu-overlay {
        /* stylelint-disable-next-line property-no-vendor-prefix */
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
    /* Fix flexbox in Firefox */
    .grid {
        display: -moz-grid;
    }
}

/* Edge-specific fixes */
@supports (-ms-ime-align: auto) {
    /* Fix grid in Edge */
    .grid {
        display: -ms-grid;
    }
}

/* Older Chrome/Safari gradient fix */
.gradient-text {
    background: linear-gradient(135deg, #FF6B35 0%, #FFB088 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Navbar position is handled by Tailwind utility classes (fixed top-0) */
/* Removed position override that was conflicting with Tailwind */

/* Normalize browser defaults */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix input zoom on iOS */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    font-size: 16px !important;
}

/* Fix button appearance */
button,
.btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ========================================
   FINAL MICRO-ANIMATIONS
   ======================================== */

/* Smooth link transitions */
a {
    transition: color 0.2s ease, transform 0.2s ease;
}

a:active {
    transform: scale(0.98);
}

/* Button press effect */
button:active,
.btn:active {
    transform: scale(0.97);
}

/* Card hover - subtle scale */
.card:hover {
    animation: subtle-pulse 0.6s ease;
}

@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); }
}

/* Input focus - glow effect */
.form-input:focus,
.form-textarea:focus {
    animation: input-glow 0.6s ease;
}

@keyframes input-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); }
    100% { box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1); }
}

/* Navbar scroll animation */
.navbar.scrolled {
    animation: navbar-slide-down 0.3s ease;
}

@keyframes navbar-slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Success notification animation */
@keyframes notification-slide-in {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Logo pulse on hover */
nav img:hover {
    animation: logo-hover-pulse 0.6s ease;
}

@keyframes logo-hover-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Footer link slide */
footer a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

footer a {
    position: relative;
}

footer a:hover::before {
    width: 100%;
}

/* ========================================
   DARK THEME STYLES
   ======================================== */

/* Body Background */
body {
    background-color: white;
    color: var(--color-gray-900);
    transition: background-color 0.3s ease, color 0.3s ease;
}

:root[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Navigation */
:root[data-theme="dark"] .navbar {
    background-color: rgba(11, 15, 25, 0.95);
    border-bottom-color: var(--border-color);
    backdrop-filter: blur(12px);
}

/* Navbar text colors in dark mode */
:root[data-theme="dark"] .navbar .text-gray-900 {
    color: var(--text-primary) !important;
}

/* Mobile menu button in dark mode */
:root[data-theme="dark"] #mobile-menu-btn {
    color: var(--text-primary);
}

:root[data-theme="dark"] #mobile-menu-btn:hover {
    color: var(--color-primary);
}

/* Sections */
:root[data-theme="dark"] section {
    background-color: transparent;
}

:root[data-theme="dark"] .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

:root[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
}

/* Cards */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .bg-white.p-8.rounded-xl {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
}

/* Text Colors */
:root[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .text-gray-600 {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .text-gray-500 {
    color: var(--text-muted) !important;
}

/* Buttons */
:root[data-theme="dark"] .border-2.border-gray-900 {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

:root[data-theme="dark"] .border-2.border-gray-900:hover {
    background-color: rgba(255, 107, 53, 0.1);
}

/* Forms */
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-textarea {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

:root[data-theme="dark"] .form-input:focus,
:root[data-theme="dark"] .form-textarea:focus {
    background-color: var(--bg-tertiary);
}

:root[data-theme="dark"] .form-label {
    color: var(--text-secondary);
}

/* Footer */
:root[data-theme="dark"] footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-color);
}

/* Images */
:root[data-theme="dark"] img {
    opacity: 0.9;
}

/* Mobile Menu */
:root[data-theme="dark"] #mobile-menu-panel {
    background-color: var(--bg-secondary);
}

/* Gradient Mesh */
:root[data-theme="dark"] .gradient-mesh {
    opacity: 0.5;
}

/* Loading Screen */
:root[data-theme="dark"] .loading-screen {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}


/* XXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXX */

/* ========================================
   HERO SECTION - DARK MODE ENHANCEMENTS
   ======================================== */



/* Fallback: If gradient fails, show orange */
:root[data-theme="dark"] .hero-text-reveal.gradient-wave {
    color: var(--color-primary);
}

/* Hero subtitle - lighter gray */
:root[data-theme="dark"] .hero-subtitle {
    color: var(--text-secondary) !important;
}

/* Trust badges - better visibility */
:root[data-theme="dark"] .trust-badge {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .trust-badge i {
    color: var(--color-primary) !important;
}

/* Floating shapes - more subtle in dark */
:root[data-theme="dark"] .shape {
    opacity: 0.05 !important;
}

/* Scroll indicator - white */
:root[data-theme="dark"] .scroll-indicator {
    border-color: var(--text-muted) !important;
}

:root[data-theme="dark"] .scroll-dot {
    background: var(--color-primary) !important;
}

/* Grid pattern - dark theme fix */
:root[data-theme="dark"] .absolute.inset-0 svg[class*="opacity"] {
    opacity: 0.01 !important;
}

/* ========================================
   CARDS - DARK MODE POLISH
   ======================================== */

/* All cards - better contrast */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .bg-white.rounded-xl {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Card hover - glow effect */
:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .bg-white.rounded-xl:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(255, 107, 53, 0.2);
}

/* Service card icons - pop in dark */
:root[data-theme="dark"] .bg-primary\/10 {
    background-color: rgba(255, 107, 53, 0.15) !important;
}

/* Card headings - white */
:root[data-theme="dark"] .text-2xl.font-bold,
:root[data-theme="dark"] .text-xl.font-bold,
:root[data-theme="dark"] h3 {
    color: var(--text-primary) !important;
}

/* Card descriptions */
:root[data-theme="dark"] .text-gray-600 {
    color: var(--text-secondary) !important;
}

/* ========================================
   FORMS - DARK MODE OPTIMIZATION
   ======================================== */

/* Form containers */
:root[data-theme="dark"] .form-group {
    background-color: transparent;
}

/* Inputs - better contrast */
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-textarea,
:root[data-theme="dark"] select.form-input {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Input focus - orange glow */
:root[data-theme="dark"] .form-input:focus,
:root[data-theme="dark"] .form-textarea:focus {
    background-color: var(--bg-secondary) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2) !important;
}

/* Placeholder text */
:root[data-theme="dark"] .form-input::placeholder,
:root[data-theme="dark"] .form-textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* Form labels - lighter */
:root[data-theme="dark"] .form-label {
    color: var(--text-secondary) !important;
}

/* Character counter */
:root[data-theme="dark"] .character-counter {
    color: var(--text-muted) !important;
}

/* Validation states - adjust for dark */
:root[data-theme="dark"] .form-input.valid {
    border-color: #10B981 !important;
}

:root[data-theme="dark"] .form-input.invalid {
    border-color: #EF4444 !important;
}

/* Form messages */
:root[data-theme="dark"] .form-message.success {
    color: #34D399 !important;
}

:root[data-theme="dark"] .form-message.error {
    color: #F87171 !important;
}


/* ========================================
   IMAGES & MEDIA - DARK MODE
   ======================================== */

/* Images - slight dimming */
:root[data-theme="dark"] img:not(.logo-fade):not([class*="vertabridge"]) {
    opacity: 0.9;
    filter: brightness(0.95);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

:root[data-theme="dark"] img:hover {
    opacity: 1;
    filter: brightness(1);
}

/* Logo - keep bright */
:root[data-theme="dark"] img[alt*="Logo"],
:root[data-theme="dark"] img[alt*="VertaBridge"] {
    opacity: 1 !important;
    filter: none !important;
}

/* Team photos - better visibility */
:root[data-theme="dark"] .rounded-full img {
    opacity: 0.95 !important;
    border: 2px solid var(--border-color);
}

/* Image overlays - VERY SUBTLE in dark mode */
:root[data-theme="dark"] .image-overlay::after {
    background: linear-gradient(
        135deg,
        rgba(255, 107, 53, 0.12) 0%,
        rgba(255, 176, 136, 0.08) 100%
    ) !important;
}

/* Hover - gentle increase */
:root[data-theme="dark"] .image-overlay:hover::after {
    background: linear-gradient(
        135deg,
        rgba(255, 107, 53, 0.2) 0%,
        rgba(255, 176, 136, 0.15) 100%
    ) !important;
}

/* ========================================
   CASE STUDY CARDS - DARK MODE COMPLETE FIX
   ======================================== */

/* Step 1: Remove ALL overlays and pseudo-elements */
:root[data-theme="dark"] img::before,
:root[data-theme="dark"] img::after,
:root[data-theme="dark"] .rounded-xl::before,
:root[data-theme="dark"] .rounded-xl::after,
:root[data-theme="dark"] .overflow-hidden::before,
:root[data-theme="dark"] .overflow-hidden::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

/* Step 2: Images - subtle dimming only */
:root[data-theme="dark"] .rounded-xl img,
:root[data-theme="dark"] .overflow-hidden img,
:root[data-theme="dark"] .shadow-lg img {
    filter: brightness(0.9) saturate(1.05) !important;
    opacity: 0.95 !important;
    transition: all 0.4s ease !important;
}

/* Step 3: Hover - restore brightness */
:root[data-theme="dark"] .rounded-xl:hover img,
:root[data-theme="dark"] .overflow-hidden:hover img,
:root[data-theme="dark"] .shadow-lg:hover img {
    filter: brightness(1) saturate(1.1) !important;
    opacity: 1 !important;
}

/* Step 4: Card hover - ONLY border glow */
:root[data-theme="dark"] .bg-white.rounded-xl.overflow-hidden:hover {
    border: 1px solid rgba(255, 107, 53, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(255, 107, 53, 0.2) !important;
}

/* Step 5: Ensure no background overlays */
:root[data-theme="dark"] .rounded-xl,
:root[data-theme="dark"] .overflow-hidden {
    background-image: none !important;
}

/* Step 6: Image containers - no effects */
:root[data-theme="dark"] .rounded-xl > div,
:root[data-theme="dark"] .overflow-hidden > div {
    background: transparent !important;
}

/* ========================================
   HOVER EFFECTS - DARK MODE POLISH
   ======================================== */

/* Link hovers - orange in dark */
:root[data-theme="dark"] a:hover {
    color: var(--color-primary) !important;
}

/* Button hovers - enhanced glow */
:root[data-theme="dark"] .bg-gray-900:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(255, 107, 53, 0.6) !important;
}

/* Secondary buttons */
:root[data-theme="dark"] .border-2:hover {
    background-color: rgba(255, 107, 53, 0.15) !important;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.2);
}

/* Footer hover effects */
:root[data-theme="dark"] footer a:hover {
    color: var(--color-primary) !important;
}

/* Icon hovers */
:root[data-theme="dark"] .ri-linkedin-line:hover,
:root[data-theme="dark"] .ri-twitter-line:hover,
:root[data-theme="dark"] .ri-mail-line:hover {
    color: var(--color-primary) !important;
}

/* ========================================
   MOBILE MENU - DARK MODE
   ======================================== */

/* Mobile menu panel */
:root[data-theme="dark"] #mobile-menu-panel {
    background-color: var(--bg-secondary) !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

/* Mobile menu links */
:root[data-theme="dark"] #mobile-menu-panel a {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] #mobile-menu-panel a:hover {
    background-color: rgba(255, 107, 53, 0.1) !important;
}

/* Mobile menu icons */
:root[data-theme="dark"] #mobile-menu-panel i {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] #mobile-menu-panel a:hover i {
    color: var(--color-primary) !important;
}

/* Mobile menu header */
:root[data-theme="dark"] #mobile-menu-panel .border-b {
    border-color: var(--border-color) !important;
}

/* Mobile menu CTA */
:root[data-theme="dark"] #mobile-menu-panel .bg-gradient-to-r {
    background: var(--color-primary) !important;
}

/* ========================================
   SECTION BACKGROUNDS - DARK MODE
   ======================================== */

/* Alternate sections - subtle difference */
:root[data-theme="dark"] section:nth-child(even):not(.bg-gray-900) {
    background: linear-gradient(
        180deg,
        rgba(255, 107, 53, 0.03) 0%,
        transparent 100%
    ) !important;
}

/* Gray sections - darker */
:root[data-theme="dark"] .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

/* White sections - card color */
:root[data-theme="dark"] section.bg-white {
    background-color: var(--bg-card) !important;
}

/* Dividers - visible but subtle */
:root[data-theme="dark"] .wave-divider svg path {
    fill: rgba(255, 107, 53, 0.08) !important;
}

:root[data-theme="dark"] .dots-divider {
    background-image: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.15) 2px,
        transparent 2px
    ) !important;
}

:root[data-theme="dark"] .gradient-divider {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 107, 53, 0.3) 50%,
        transparent 100%
    ) !important;
    opacity: 0.5;
}

/* Border colors */
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-100 {
    border-color: var(--border-color) !important;
}


/* XXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXX */


/* Smooth theme transition */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* ========================================
   THEME TOGGLE BUTTON - UPDATED
   ======================================== */

.theme-toggle-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-200);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    border-color: var(--color-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

.theme-toggle-btn i {
    position: absolute;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

/* Light mode (show moon) */
.theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: var(--color-gray-700);
}

.theme-icon-light {
    opacity: 0;
    transform: rotate(90deg) scale(0);
    color: var(--color-primary);
}

/* Dark mode (show sun) */
:root[data-theme="dark"] .theme-toggle-btn {
    background: var(--bg-tertiary);
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .theme-icon-dark {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

:root[data-theme="dark"] .theme-icon-light {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: var(--color-primary);
}

/* Mobile size */
.theme-toggle-mobile {
    width: 40px;
    height: 40px;
}

.theme-toggle-mobile i {
    font-size: 1.125rem;
}

/* ========================================
   NAVIGATION LINKS & CTA - ENHANCED
   ======================================== */

/* Center Navigation Links */
.nav-link {
    position: relative;
    color: var(--color-gray-700);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav-link:hover::after {
    width: 80%;
}

/* Dark mode navigation links */
:root[data-theme="dark"] .nav-link {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .nav-link:hover {
    color: var(--color-primary);
}

/* CTA Button - Join Waitlist */
.nav-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    background: var(--color-gray-900);
    color: white;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-cta-btn:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

/* Dark mode CTA button */
:root[data-theme="dark"] .nav-cta-btn {
    background: var(--color-primary);
    color: white;
}

:root[data-theme="dark"] .nav-cta-btn:hover {
    background: var(--color-primary-light);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.5);
}

/* Navbar spacing fix */
.navbar .max-w-7xl > div {
    gap: 1rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .nav-link {
        font-size: 0.875rem;
    }
    
    .nav-cta-btn {
        padding: 0.5rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Smooth theme transition */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Disable transition on theme change for instant feedback */
.theme-transitioning * {
    transition: none !important;
}

/* ========================================
   DARK MODE - FINAL POLISH
   ======================================== */

/* Text selection in dark mode */
:root[data-theme="dark"] ::selection {
    background-color: var(--color-primary);
    color: white;
}

/* Scrollbar in dark mode */
:root[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--color-primary),
        var(--color-secondary)
    );
}

/* Focus states in dark mode */
:root[data-theme="dark"] *:focus-visible {
    outline-color: var(--color-primary) !important;
}

/* Loading screen in dark mode */
:root[data-theme="dark"] .loading-text {
    color: var(--text-secondary) !important;
}

/* 404 page in dark mode */
:root[data-theme="dark"] body {
    background-color: var(--bg-primary);
}

/* Ensure smooth transitions */
:root[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Disable transitions during theme switch */
.theme-transitioning * {
    transition: none !important;
}

/* ========================================
   ENHANCED FOOTER STYLES
   ======================================== */

/* Footer smooth gradient background */
footer.bg-gray-900 {
    background: linear-gradient(180deg, #111827 0%, #0B0F19 100%);
    position: relative;
}

/* Newsletter container */
footer .bg-gray-800\/50 {
    backdrop-filter: blur(10px);
}

/* Newsletter input styling */
footer input[type="email"] {
    transition: all 0.3s ease;
}

footer input[type="email"]:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.1);
}

/* Link arrow animation */
footer .group .ri-arrow-right-s-line {
    transition: all 0.3s ease;
}

/* Trust indicator hover */
footer .flex.items-center.gap-3:hover .w-10 {
    transform: scale(1.1);
}

/* Social icon color change */
footer a:hover i.ri-mail-fill,
footer a:hover i.ri-linkedin-fill,
footer a:hover i.ri-twitter-fill,
footer a:hover i.ri-instagram-fill {
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Bottom links */
footer a[href*="privacy"],
footer a[href*="terms"] {
    position: relative;
}

footer a[href*="privacy"]::after,
footer a[href*="terms"]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

footer a[href*="privacy"]:hover::after,
footer a[href*="terms"]:hover::after {
    width: 100%;
}

/* Dark mode adjustments */
:root[data-theme="dark"] footer {
    background: linear-gradient(180deg, #0B0F19 0%, #050811 100%);
}

:root[data-theme="dark"] footer input[type="email"] {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] footer input[type="email"]:focus {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ========================================
   HOW IT WORKS - ANIMATED TIMELINE
   ======================================== */

/* Timeline Step Container */
.timeline-step {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.timeline-step:nth-child(1) { animation-delay: 0.1s; }
.timeline-step:nth-child(2) { animation-delay: 0.2s; }
.timeline-step:nth-child(3) { animation-delay: 0.3s; }
.timeline-step:nth-child(4) { animation-delay: 0.4s; }
.timeline-step:nth-child(5) { animation-delay: 0.5s; }

/* Step Number Badge */
/* Step Number Badge (DÜZELTİLDİ) */
.step-number {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    
    /* DÜZELTME: Numarayı ortalamak için flex yerine bunu kullan */
    text-align: center;
    line-height: 80px; /* height ile aynı olmalı */
    /* DÜZELTME BİTTİ */

    font-size: 1.75rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.timeline-step:hover .step-number {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
}

/* Pulsing Ring */
/* Pulsing Ring (ORİJİNAL HALİ) */
.step-ring {
    position: absolute;
    
    /* Boyutları ayarla (80px + 16px) */
    width: 96px;
    height: 96px;

    /* Başlangıç pozisyonunu ayarla */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Merkezleme için */

    border: 2px solid var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.timeline-step:hover .step-ring {
    animation-play-state: paused;
    opacity: 0.3;
}

@keyframes pulse-ring {
    0%, 100% {
        /* Hem merkezlemeyi hem scale'i birleştir */
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        /* Hem merkezlemeyi hem scale'i birleştir */
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

/* Step Icon */
.step-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid transparent;
}

.timeline-step:hover .step-icon {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
    background: linear-gradient(135deg, #fff, #FFF5F0);
}

.step-icon i {
    transition: all 0.4s ease;
}

.timeline-step:hover .step-icon i {
    transform: scale(1.15);
}

/* Step Content */
.step-content {
    text-align: center;
}

.step-content h3 {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}

.step-content h3::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width 0.4s ease;
}

.timeline-step:hover .step-content h3::after {
    width: 60%;
}

/* Mobile: Vertical connecting line */
@media (max-width: 1023px) {
    .timeline-step {
        position: relative;
        padding-left: 60px;
    }
    
    .timeline-step::before {
        content: '';
        position: absolute;
        left: 40px;
        top: 80px;
        bottom: -40px;
        width: 2px;
        background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        opacity: 0.2;
    }
    
    .timeline-step:last-child::before {
        display: none;
    }
    
    .step-number,
    .step-icon {
        margin-left: 0;
    }
    
    .step-content {
        text-align: left;
    }
    
    .step-content h3::after {
        left: 0;
        transform: none;
    }
}

/* Dark mode adjustments */
:root[data-theme="dark"] .step-icon {
    background: var(--bg-card);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .timeline-step:hover .step-icon {
    background: linear-gradient(135deg, var(--bg-card), rgba(255, 107, 53, 0.1));
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .step-content h3 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .step-content p {
    color: var(--text-secondary);
}

/* Stats Bar */
.timeline-step + div .grid > div {
    transition: all 0.3s ease;
}

.timeline-step + div .grid > div:hover {
    transform: translateY(-4px);
}

.timeline-step + div .grid > div:hover .text-4xl {
    color: var(--color-primary-light);
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* 3D Tilt Effect */
.timeline-step {
    perspective: 1000px;
}

.timeline-step > div {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

.timeline-step:hover > div {
    transform: rotateY(5deg) rotateX(2deg);
}

/* ========================================
   THE BRIDGE SECTION
   ======================================== */

/* Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), #FFD700, var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-wave 3s ease infinite;
    background-size: 200% auto;
}

/* Bridge Cards */
.bridge-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.bridge-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bridge-card[data-side="left"]::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
}

.bridge-card[data-side="right"]::before {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), transparent);
}

.bridge-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 107, 53, 0.5);
    box-shadow: 0 20px 60px rgba(255, 107, 53, 0.3);
}

.bridge-card:hover::before {
    opacity: 1;
}

/* Bridge Center */
.bridge-center {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 176, 136, 0.2));
    backdrop-filter: blur(10px);
    border: 3px solid var(--color-primary);
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.4);
}

.bridge-logo {
    max-width: 200px;
    margin: 0 auto;
}

/* Pulsing effect */
.bridge-pulse {
    position: absolute;
    inset: -4px;
    border: 2px solid var(--color-primary);
    border-radius: 24px;
    opacity: 0;
    animation: pulse-bridge 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

/* Bouncing Arrows */
@keyframes bounce-horizontal {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

.animate-bounce-horizontal {
    animation: bounce-horizontal 2s ease-in-out infinite;
}

/* Value Proposition Cards */
.value-prop-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem;
    transition: all 0.4s ease;
}

.value-prop-card:hover {
    border-color: rgba(255, 107, 53, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Value Prop Icon */
.value-prop-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
    flex-shrink: 0;
}

/* Dual Benefit Cards */
.dual-benefit-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    transition: all 0.4s ease;
}

.dual-benefit-card[data-audience="vendors"] {
    border-left: 4px solid #3B82F6;
}

.dual-benefit-card[data-audience="enterprises"] {
    border-right: 4px solid #22C55E;
}

.dual-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.dual-benefit-card[data-audience="vendors"]:hover {
    border-left-color: var(--color-primary);
    box-shadow: -4px 12px 40px rgba(59, 130, 246, 0.3);
}

.dual-benefit-card[data-audience="enterprises"]:hover {
    border-right-color: var(--color-primary);
    box-shadow: 4px 12px 40px rgba(34, 197, 94, 0.3);
}

/* Benefit Badge */
.benefit-badge {
    display: inline-block;
    background: rgba(255, 107, 53, 0.2);
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

/* Benefit Icon */
.benefit-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Benefit Arrow */
.benefit-arrow {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary);
    opacity: 0;
    transition: all 0.4s ease;
}

.dual-benefit-card[data-audience="vendors"] .benefit-arrow {
    right: -1rem;
    transform: translateY(-50%);
}

.dual-benefit-card[data-audience="enterprises"] .benefit-arrow {
    left: -1rem;
    transform: translateY(-50%);
}

.dual-benefit-card:hover .benefit-arrow {
    opacity: 1;
}

.dual-benefit-card[data-audience="vendors"]:hover .benefit-arrow {
    right: -1.5rem;
}

.dual-benefit-card[data-audience="enterprises"]:hover .benefit-arrow {
    left: -1.5rem;
}

/* Slow pulse animation */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1);
    }
    50% {
        opacity: 0.15;
        transform: scale(1.1);
    }
}

.animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mobile Adjustments */
@media (max-width: 1023px) {
    .bridge-card,
    .bridge-center {
        margin-bottom: 2rem;
    }

    .benefit-arrow {
        display: none;
    }

    /* Advantages Section - Mobile Optimization */
    #advantages {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    #advantages .text-center.mb-20 {
        margin-bottom: 3rem !important;
    }

    #advantages h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    #advantages .text-xl {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .value-prop-card {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    .value-prop-card .flex.items-start {
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .value-prop-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.75rem !important;
        border-radius: 14px !important;
        margin: 0 auto !important;
    }

    .value-prop-card h3 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }

    .value-prop-card > .flex > .flex-1 {
        text-align: center !important;
    }

    .value-prop-card > .flex > .flex-1 p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    .dual-benefit-card {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }

    .dual-benefit-card[data-audience="vendors"] {
        border-left-width: 3px !important;
    }

    .dual-benefit-card[data-audience="enterprises"] {
        border-right-width: 3px !important;
    }

    .benefit-badge {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .dual-benefit-card p {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }

    #advantages .space-y-16 {
        gap: 2.5rem !important;
    }

    /* Values Section - Mobile Optimization */
    #values {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    #values .text-center.mb-16 {
        margin-bottom: 2rem !important;
    }

    #values h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    #values .text-xl {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    #values .grid.md\\:grid-cols-3 {
        gap: 1.5rem !important;
    }

    #values .bg-white {
        padding: 1.5rem !important;
        text-align: center !important;
    }

    #values .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin-bottom: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #values .w-12.h-12 i {
        font-size: 1.25rem !important;
    }

    #values .grid.md\\:grid-cols-3 h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }

    #values .grid.md\\:grid-cols-3 p {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
    }

    /* Values Stats - Mobile */
    #values .mt-16 {
        margin-top: 2.5rem !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    #values .grid.md\\:grid-cols-4 {
        gap: 1.5rem !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #values .stat-number {
        font-size: 2rem !important;
    }

    #values .stat-label {
        font-size: 0.75rem !important;
    }
}

/* Value Cards with Background Images - HTML Approach */
.value-card-with-bg {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.value-card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.20;
    filter: brightness(0.50);
    transition: all 0.3s ease;
    z-index: 0;
}

.value-card-with-bg:hover .value-card-bg-image {
    opacity: 0.10;
    filter: brightness(0.9);
    transform: scale(1.05);
}

.value-card-with-bg:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.value-card-content {
    position: relative;
    z-index: 1;
}

/* Dark Mode - Value Cards */
:root[data-theme="dark"] .value-card-with-bg {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

:root[data-theme="dark"] .value-card-bg-image {
    opacity: 0.12;
    filter: brightness(0.7);
}

:root[data-theme="dark"] .value-card-with-bg:hover .value-card-bg-image {
    opacity: 0.18;
    filter: brightness(0.8);
}

/* Dark Mode (already dark, just ensure compatibility) */
:root[data-theme="dark"] .bridge-card,
:root[data-theme="dark"] .value-prop-card,
:root[data-theme="dark"] .dual-benefit-card {
    background: rgba(255, 255, 255, 0.03);
}

/* ========================================
   LOGO TEXT STYLING
   ======================================== */

/* Navigation Logo Text */
.logo-text {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

/* Light theme - black text */
:root[data-theme="light"] .logo-text {
    color: #1a1a1a;
}

/* Dark theme - white text */
:root[data-theme="dark"] .logo-text {
    color: #ffffff;
}

/* Hover effect */
.group:hover .logo-text {
    color: var(--color-primary);
}

/* Footer Logo Text */
.logo-text-footer {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: #ffffff;
    transition: all 0.3s ease;
}

/* Footer is always dark, so always white text */
:root[data-theme="light"] .logo-text-footer,
:root[data-theme="dark"] .logo-text-footer {
    color: #ffffff;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .logo-text,
    .logo-text-footer {
        font-size: 1.25rem;
    }
}

/* ========================================
   3D ROTATION FIX - STRONGER INITIAL STATE
   ======================================== */

/* Force initial 3D transform state */
.hero-text-reveal {
    display: inline-block;
    opacity: 0;
    transform: translateY(120%) rotateX(-90deg);
    transform-origin: bottom center;
    transition: all 1.4s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform, opacity;
}

/* Keep gradient animation after reveal */
.hero-text-reveal.gradient-wave {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Ensure perspective on container */
.hero-text-line {
    display: block;
    overflow: hidden;
    perspective: 1200px;
    perspective-origin: center bottom;
}

.aynali-metin {
    transform: scaleX(-1);
    
    /* Bazı tarayıcılar ters dönmüş metni seçmenize izin vermez.
       Bu kod, metnin hala fare ile seçilebilir olmasını sağlar. */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* main-style.css dosyanıza ekleyin */
.footer-ayna-cizgisi {
    /* Sadece masaüstünde (md) görünsün */
    display: none; 
}

@media (min-width: 768px) { /* md: breakpoint */
    .footer-ayna-cizgisi {
        display: block;
        width: 1px;
        background: linear-gradient(180deg, transparent 0%, rgba(107, 114, 128, 0.4) 50%, transparent 100%);
    }
}

/* Footer - Remove default ul padding */
footer ul {
    padding-left: 0;
    list-style: none;
}

/* Footer responsive - Mobile adjustments */
@media (max-width: 767px) {
    footer .grid.grid-cols-2 > div {
        padding: 0 0.5rem;
    }

    footer .grid.grid-cols-2 h3,
    footer .grid.grid-cols-2 h4 {
        font-size: 0.6875rem !important; /* text-xs equivalent */
        letter-spacing: 0.05em !important;
        margin-bottom: 0.75rem !important;
    }

    footer .grid.grid-cols-2 ul {
        font-size: 0.8125rem;
    }

    /* Center logo, logo text and description on mobile */
    footer .md\:col-span-4 {
        text-align: center !important;
    }

    footer .flex.items-center.gap-0,
    footer .flex.items-center.gap-0.mb-4 {
        justify-content: center !important;
    }

    footer .text-gray-400.leading-relaxed {
        text-align: center !important;
    }
}

/* ============================================
   PATH CONTEXT - NAVBAR HIGHLIGHTING
   ============================================ */

/* Navbar Border-Top - Path Indicator */
.navbar-vendors {
    border-top: 3px solid #3B82F6;
    box-shadow: 0 -2px 10px rgba(59, 130, 246, 0.2);
}

.navbar-enterprises {
    border-top: 3px solid #22C55E;
    box-shadow: 0 -2px 10px rgba(34, 197, 94, 0.2);
}

/* Path Badge - Next to "VertaBridge" text */
.path-badge {
    position: relative;
    top: 0.5rem;
    margin-left: 0.5rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
    vertical-align: baseline;
}

.path-badge-vendors {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.15));
    color: #2563EB;
    border: 1.5px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.path-badge-enterprises {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(74, 222, 128, 0.15));
    color: #16A34A;
    border: 1.5px solid rgba(34, 197, 94, 0.3);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

/* Dark Mode Adjustments */
:root[data-theme="dark"] .navbar-vendors {
    border-top-color: #60A5FA;
    box-shadow: 0 -2px 12px rgba(96, 165, 250, 0.3);
}

:root[data-theme="dark"] .navbar-enterprises {
    border-top-color: #4ADE80;
    box-shadow: 0 -2px 12px rgba(74, 222, 128, 0.3);
}

:root[data-theme="dark"] .path-badge-vendors {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(96, 165, 250, 0.25));
    color: #93C5FD;
    border-color: rgba(96, 165, 250, 0.4);
}

:root[data-theme="dark"] .path-badge-enterprises {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(74, 222, 128, 0.25));
    color: #86EFAC;
    border-color: rgba(74, 222, 128, 0.4);
}

/* Mobile - Hide badge on small screens */
@media (max-width: 640px) {
    .path-badge {
        display: none;
    }
}

/* Cross-Path Navigation Links - Simple Text Color */
.nav-link-to-enterprises {
    color: #059669;
    font-weight: 600;
    transition: color 0.2s ease;
}

.nav-link-to-enterprises:hover {
    color: #047857 !important;
}

.nav-link-to-vendors {
    color: #2563EB;
    font-weight: 600;
    transition: color 0.2s ease;
}

.nav-link-to-vendors:hover {
    color: #1D4ED8 !important;
}

/* Dark Mode */
:root[data-theme="dark"] .nav-link-to-enterprises {
    color: #34D399;
}

:root[data-theme="dark"] .nav-link-to-enterprises:hover {
    color: #6EE7B7 !important;
}

:root[data-theme="dark"] .nav-link-to-vendors {
    color: #60A5FA;
}

:root[data-theme="dark"] .nav-link-to-vendors:hover {
    color: #93C5FD !important;
}




/* ============================================
   NAVIGATION ACTIVE & HOVER STYLES
   (Added back from navigation.css with more specific selectors)
   ============================================ */

/* Active page indicator - only for nav-link class */
.nav-link.active,
nav a[aria-current="page"] {
  color: #FF6B35 !important;
  font-weight: 600;
  position: relative;
}

/* Active underline - only for nav-link class */
.nav-link.active::after,
nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FF6B35, #FFB088);
  border-radius: 2px;
}

/* Mobile menu active */
#mobile-menu .active {
  color: #FF6B35 !important;
  background: rgba(255, 107, 53, 0.1);
  border-left: 3px solid #FF6B35;
  padding-left: 17px !important;
}

/* Hover states for navigation links only */
.nav-link:hover {
  color: #FF6B35;
  transition: color 0.2s ease;
}

/* Focus visible for keyboard navigation */
.nav-link:focus-visible {
  outline: 2px solid #FF6B35;
  outline-offset: 4px;
  border-radius: 4px;
}



/* ============================================
   TYPOGRAPHY IMPROVEMENTS - COMPREHENSIVE
   Added: 2025-11-15

   These rules are ADDITIONS only - they don't override existing styles
   ============================================ */

/* 1. WIDOWS AND ORPHANS PREVENTION */
/* Prevents awkward single-line breaks in paragraphs and headings */
p, h1, h2, h3, h4, h5, h6, li, blockquote {
  widows: 3;
  orphans: 3;
}

/* 2. TEXT OVERFLOW PROTECTION */
/* Prevents long words or URLs from breaking layout */
.card-title,
.section-title,
.hero-title,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Ellipsis for single-line truncation */
.text-ellipsis,
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3. WORD BREAK PROTECTION FOR SPECIAL CASES */
/* URLs, emails, long code blocks should break at reasonable points */
.break-words,
pre, code, .code-block {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Prevent break in the middle of numbers or specific strings */
.no-break,
.whitespace-nowrap {
  white-space: nowrap;
}

/* 4. IMPROVED LINE HEIGHTS FOR BETTER READABILITY */
/* These are additions - existing line-heights are preserved via specificity */

/* Body text should have comfortable reading line-height */
p:not([class*="text-"]):not([class*="leading-"]) {
  line-height: 1.7;
}

/* Large text benefits from slightly tighter line-height */
.text-4xl:not([class*="leading-"]),
.text-5xl:not([class*="leading-"]),
.text-6xl:not([class*="leading-"]) {
  line-height: 1.2;
}

/* Medium headings */
h2:not([class*="leading-"]),
h3:not([class*="leading-"]) {
  line-height: 1.3;
}

/* Smaller headings and subheadings */
h4:not([class*="leading-"]),
h5:not([class*="leading-"]),
h6:not([class*="leading-"]) {
  line-height: 1.5;
}

/* 5. RESPONSIVE TYPOGRAPHY IMPROVEMENTS */
/* Ensure text remains readable on all devices */

/* Prevent font boosting on mobile (iOS/Android auto-zoom) */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Improve readability on small screens */
@media (max-width: 640px) {
  /* Touch targets ONLY for specific button classes - NOT generic buttons */
  .btn,
  .button,
  .cta-button,
  [role="button"].btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent tiny text on mobile */
  small, .text-sm, .text-xs {
    font-size: 0.875rem !important; /* 14px minimum */
  }

  /* Ensure paragraphs are readable */
  p {
    font-size: 1rem; /* 16px minimum for body text */
  }
}

/* 6. HEADING-SPECIFIC OPTIMIZATIONS */

/* Prevent headings from being too close to following content */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
  margin-top: 1em;
}

/* First heading doesn't need top margin */
h1:first-child,
h2:first-child,
h3:first-child {
  margin-top: 0;
}

/* Improve heading letter-spacing for better hierarchy */
h1 {
  letter-spacing: -0.02em; /* Slightly tighter for large text */
}

h2, h3 {
  letter-spacing: -0.01em;
}

/* 7. IMPROVED TEXT CONTRAST AND HIERARCHY */

/* Ensure sufficient contrast for small text */
small, .text-sm, .text-xs {
  color: inherit;
  opacity: 0.9; /* Slightly dimmed but still readable */
}

/* Better visual hierarchy for bold text */
strong, b, .font-bold {
  font-weight: 600; /* Slightly less bold for better web rendering */
}

.font-extrabold {
  font-weight: 700;
}

/* 8. PREVENT LAYOUT SHIFT FROM WEB FONTS */

/* Font display strategy for better performance */
@font-face {
  font-display: swap; /* Show fallback font immediately, swap when ready */
}

/* 9. HYPHENATION FOR NARROW COLUMNS */

/* Enable hyphenation for better text flow in narrow containers */
@media (max-width: 640px) {
  p, li {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
  }
}

/* But disable for specific cases where it looks bad */
h1, h2, h3, h4, h5, h6,
code, pre, kbd, samp {
  hyphens: none;
  -webkit-hyphens: none;
  -moz-hyphens: none;
}

/* 10. ACCESSIBILITY IMPROVEMENTS */

/* Better focus visibility for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Ensure text remains visible during font load */
.font-loading {
  visibility: visible;
}

/* 11. PRINT OPTIMIZATIONS */

@media print {
  /* Better typography for printed pages */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }

  /* Prevent widows and orphans in print */
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  /* Avoid page breaks inside important elements */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  p, blockquote, li {
    page-break-inside: avoid;
  }
}

/* 12. SPECIAL CASES - GRADIENT TEXT */

/* Ensure gradient text is accessible and has fallback */
.gradient-text {
  /* Fallback for browsers that don't support background-clip */
  color: #FF6B35;
}

/* Support for background-clip */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* END OF TYPOGRAPHY IMPROVEMENTS */


/* ============================================
   CONTENT HIERARCHY IMPROVEMENTS - COMPREHENSIVE
   Added: 2025-11-15

   These rules are ADDITIONS only - they don't override existing styles
   They use specific selectors to avoid conflicts
   ============================================ */

/* 1. MAX-WIDTH CONSTRAINTS FOR OPTIMAL READING */
/* Optimal line length: 45-75 characters (approximately 65ch) */

/* Prose content wrapper - use class="prose" or "max-w-prose" */
.prose,
.max-w-prose {
  max-width: 65ch; /* Approximately 520px at 16px font */
}

/* Paragraphs in main content areas */
main p:not([class*="max-w"]):not([class*="w-full"]) {
  max-width: 70ch;
}

/* Wider for subheadings and descriptions */
.lead,
.text-lg p,
.hero-subtitle {
  max-width: 75ch;
}

/* Narrower for small text */
.text-sm p,
small p {
  max-width: 60ch;
}

/* Full width for specific cases */
.w-full p,
.full-width p {
  max-width: none;
}

/* 2. ENHANCED SECTION SPACING */
/* Create breathing room between major sections */

/* Large spacing for major sections */
section:not([class*="py-"]) {
  padding-top: 5rem;    /* 80px */
  padding-bottom: 5rem; /* 80px */
}

/* Extra large spacing for hero sections */
.hero-section,
section.hero {
  padding-top: 6rem;     /* 96px */
  padding-bottom: 6rem;  /* 96px */
}

/* Medium spacing for nested sections */
section section {
  padding-top: 3rem;    /* 48px */
  padding-bottom: 3rem; /* 48px */
}

/* Responsive section spacing */
@media (max-width: 768px) {
  section:not([class*="py-"]) {
    padding-top: 3rem;    /* 48px on mobile */
    padding-bottom: 3rem;
  }

  .hero-section,
  section.hero {
    padding-top: 4rem;    /* 64px on mobile */
    padding-bottom: 4rem;
  }
}

/* 3. CONTENT CONTAINER OPTIMIZATIONS */

/* Standard content container */
.content-container,
.container-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Narrow container for focused content */
.container-narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Wide container for rich media */
.container-wide {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Add comfortable padding to all containers */
.container,
.max-w-7xl {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  .container,
  .max-w-7xl {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* 4. HEADING MARGIN OPTIMIZATIONS */
/* Proper spacing above and below headings */

/* Main heading (H1) */
h1 {
  margin-top: 0;
  margin-bottom: 1.5rem; /* 24px */
}

/* Section headings (H2) */
h2 {
  margin-top: 3rem;      /* 48px - breathing room from previous section */
  margin-bottom: 1rem;   /* 16px */
}

/* H2 at start of section doesn't need top margin */
section > h2:first-child,
div > h2:first-child {
  margin-top: 0;
}

/* Subsection headings (H3) */
h3 {
  margin-top: 2rem;      /* 32px */
  margin-bottom: 0.75rem; /* 12px */
}

/* Smaller headings (H4-H6) */
h4, h5, h6 {
  margin-top: 1.5rem;    /* 24px */
  margin-bottom: 0.5rem; /* 8px */
}

/* Headings followed by paragraphs need good spacing */
h1 + p,
h2 + p,
h3 + p {
  margin-top: 0;
}

/* 5. ENHANCED VISUAL SEPARATION */

/* Section dividers */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
  margin: 4rem 0;
}

/* Dark mode section divider */
:root[data-theme="dark"] .section-divider {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

/* Alternating section backgrounds for better separation */
section:nth-child(even):not([class*="bg-"]) {
  background-color: rgba(249, 250, 251, 0.5); /* Very light gray */
}

:root[data-theme="dark"] section:nth-child(even):not([class*="bg-"]) {
  background-color: rgba(31, 41, 55, 0.3); /* Very dark gray */
}

/* Subtle borders between major sections */
section + section:not(.no-border) {
  border-top: 1px solid rgba(229, 231, 235, 0.8); /* Light border */
}

:root[data-theme="dark"] section + section:not(.no-border) {
  border-top: 1px solid rgba(55, 65, 81, 0.6);
}

/* Card-style content blocks */
.content-card {
  background: white;
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}

:root[data-theme="dark"] .content-card {
  background: rgba(31, 41, 55, 0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 6. RESPONSIVE CONTENT SPACING */

/* Stack spacing for vertical content flow */
.content-stack > * + * {
  margin-top: 1.5rem;
}

.content-stack-sm > * + * {
  margin-top: 1rem;
}

.content-stack-lg > * + * {
  margin-top: 2rem;
}

/* Grid gap improvements */
.grid {
  gap: 1.5rem;
}

.grid-tight {
  gap: 1rem;
}

.grid-loose {
  gap: 2rem;
}

/* Responsive grid gaps */
@media (min-width: 768px) {
  .grid {
    gap: 2rem;
  }

  .grid-loose {
    gap: 3rem;
  }
}

/* 7. MOBILE-SPECIFIC CONTENT ADJUSTMENTS */

@media (max-width: 640px) {
  /* Reduce heading sizes slightly on mobile for better fit */
  h1 {
    font-size: 2rem !important; /* Down from 2.5rem */
    line-height: 1.2;
  }

  h2 {
    font-size: 1.5rem !important; /* Down from 2rem */
    line-height: 1.3;
  }

  /* Tighter margins on mobile */
  h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }

  h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }

  /* Paragraphs get full width on mobile */
  main p {
    max-width: none;
  }

  /* Reduce section padding on very small screens */
  section:not([class*="py-"]) {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Content cards less padding on mobile */
  .content-card {
    padding: 1.5rem;
  }
}

/* 8. LIST SPACING IMPROVEMENTS */

/* Better spacing in lists */
ul, ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Nested lists less spacing */
li ul,
li ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* 9. BLOCKQUOTE AND CALLOUT SPACING */

blockquote {
  margin: 2rem 0;
  padding: 1.5rem;
  border-left: 4px solid #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

:root[data-theme="dark"] blockquote {
  background: rgba(255, 107, 53, 0.1);
}

/* Callout boxes */
.callout {
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0.5rem;
  background: rgba(59, 130, 246, 0.05);
  border-left: 4px solid #3B82F6;
}

/* 10. IMPROVED CTA SPACING */

/* CTAs need breathing room */
.cta-section {
  padding: 4rem 0;
  text-align: center;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}

/* 11. TABLE SPACING */

table {
  margin: 2rem 0;
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.75rem 1rem;
  text-align: left;
}

/* 12. FORM SPACING */

form > * + * {
  margin-top: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input,
textarea,
select {
  margin-bottom: 0.5rem;
}

/* 13. IMAGE AND MEDIA SPACING */

/* Images in content get proper spacing */
img {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 100%;
  height: auto;
}

/* Figures with captions */
figure {
  margin: 2rem 0;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(107, 114, 128, 1);
}

/* 14. CODE BLOCK SPACING */

pre {
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

code {
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

/* 15. UTILITY CLASSES FOR MANUAL CONTROL */

/* Spacing utilities that don't conflict with Tailwind */
.spacing-section {
  margin: 4rem 0;
}

.spacing-content {
  margin: 2rem 0;
}

.spacing-element {
  margin: 1rem 0;
}

/* No spacing override */
.no-spacing {
  margin: 0 !important;
  padding: 0 !important;
}

/* END OF CONTENT HIERARCHY IMPROVEMENTS */