/* ============================================
   PHILOSOPHY SECTION - BALANCED FIX
   Desktop: Professional size | Mobile: Proper visibility
   ============================================ */

/* Desktop - Professional Size (Not too big) */
@media (min-width: 769px) {
  /* Section padding */
  section.px-6.py-24.md\:py-48.bg-zinc-950 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  
  /* Grid layout - Balanced columns */
  section.bg-zinc-950 .max-w-7xl.grid.lg\:grid-cols-2 {
    grid-template-columns: 45% 55% !important;
    gap: 4rem !important;
    align-items: center !important;
  }
  
  /* Right column container */
  section.bg-zinc-950 .relative.reveal.reveal-delay-2 {
    width: 100% !important;
    max-width: 550px !important;
  }
  
  /* Main black container - Reasonable size */
  section.bg-zinc-950 .relative.bg-zinc-900.aspect-square {
    width: 100% !important;
    max-width: 550px !important;
    aspect-ratio: 1 / 1 !important;
  }
  
  /* Inner padding */
  section.bg-zinc-950 .relative.h-full.w-full.bg-\[\#0a0a0a\] {
    padding: 3rem !important;
  }
  
  /* Placeholder elements */
  section.bg-zinc-950 .space-y-4 .h-2 {
    height: 0.5rem !important;
  }
  
  section.bg-zinc-950 .space-y-4 .h-16 {
    height: 4.5rem !important;
  }
  
  section.bg-zinc-950 .space-y-4 .w-24 {
    width: 7rem !important;
  }
  
  /* Grid boxes */
  section.bg-zinc-950 .grid.grid-cols-3 {
    gap: 1.5rem !important;
  }
  
  section.bg-zinc-950 .grid.grid-cols-3 .aspect-square {
    min-height: 90px !important;
  }
  
  /* Orange button bar */
  section.bg-zinc-950 .h-20 {
    height: 5.5rem !important;
  }
  
  /* Lighthouse Score Card - Proportional */
  section.bg-zinc-950 .absolute.top-12.-left-12.bg-white {
    padding: 2.5rem !important;
    top: 3rem !important;
    left: -3.5rem !important;
    min-width: 200px !important;
  }
  
  /* Score label */
  section.bg-zinc-950 .absolute.top-12.-left-12.bg-white .text-xs {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: 0.1em !important;
  }
  
  /* Score number */
  section.bg-zinc-950 .absolute.top-12.-left-12.bg-white .text-6xl {
    font-size: 5rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }
}

/* Large Desktop - Slightly bigger */
@media (min-width: 1400px) {
  section.bg-zinc-950 .relative.reveal.reveal-delay-2 {
    max-width: 600px !important;
  }
  
  section.bg-zinc-950 .relative.bg-zinc-900.aspect-square {
    max-width: 600px !important;
  }
  
  section.bg-zinc-950 .relative.h-full.w-full.bg-\[\#0a0a0a\] {
    padding: 3.5rem !important;
  }
  
  section.bg-zinc-950 .absolute.top-12.-left-12.bg-white {
    padding: 3rem !important;
  }
  
  section.bg-zinc-950 .absolute.top-12.-left-12.bg-white .text-6xl {
    font-size: 5.5rem !important;
  }
}

/* Mobile - Proper Visibility */
@media (max-width: 768px) {
  /* Section spacing */
  section.bg-zinc-950 {
    padding: 3rem 1.5rem !important;
  }
  
  /* Stack layout */
  section.bg-zinc-950 .max-w-7xl.grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  
  /* Container size on mobile */
  section.bg-zinc-950 .relative.reveal.reveal-delay-2 {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  
  section.bg-zinc-950 .relative.bg-zinc-900.aspect-square {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Inner padding on mobile */
  section.bg-zinc-950 .relative.h-full.w-full.bg-\[\#0a0a0a\] {
    padding: 2rem !important;
  }
  
  /* Placeholder elements - mobile size */
  section.bg-zinc-950 .space-y-4 {
    gap: 1rem !important;
  }
  
  section.bg-zinc-950 .space-y-4 .h-2 {
    height: 0.4rem !important;
  }
  
  section.bg-zinc-950 .space-y-4 .h-16 {
    height: 3.5rem !important;
  }
  
  section.bg-zinc-950 .space-y-4 .w-24 {
    width: 5rem !important;
  }
  
  /* Grid boxes on mobile */
  section.bg-zinc-950 .grid.grid-cols-3 {
    gap: 1rem !important;
  }
  
  section.bg-zinc-950 .grid.grid-cols-3 .aspect-square {
    min-height: 60px !important;
  }
  
  /* Orange bar on mobile */
  section.bg-zinc-950 .h-20 {
    height: 4rem !important;
  }
  
  /* Lighthouse card on mobile - smaller */
  section.bg-zinc-950 .absolute.top-12.-left-12.bg-white {
    padding: 1.5rem !important;
    top: 1.5rem !important;
    left: -2rem !important;
    min-width: 140px !important;
  }
  
  section.bg-zinc-950 .absolute.top-12.-left-12.bg-white .text-xs {
    font-size: 0.6rem !important;
    margin-bottom: 0.3rem !important;
  }
  
  section.bg-zinc-950 .absolute.top-12.-left-12.bg-white .text-6xl {
    font-size: 3rem !important;
  }
  
  /* Text content on mobile */
  section.bg-zinc-950 .text-6xl,
  section.bg-zinc-950 .md\:text-8xl {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  section.bg-zinc-950 .text-xl {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  section.bg-zinc-950 .text-4xl {
    font-size: 1.5rem !important;
  }
  
  /* Stats grid on mobile */
  section.bg-zinc-950 .grid.grid-cols-2 {
    gap: 2rem !important;
  }
}