/* ════════════════════════════════════════════════════════════════════════════
   GOLDEN RATIO RESPONSIVE SYSTEM
   ϕ = 1.618033988749895
   Golden Ratio based responsive system for fluid, elastic layouts
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Golden Ratio Constants */
  --phi: 1.618033988749895;
  --phi-inverse: 0.618033988749895;
  --phi-square: 2.618033988749895;
  --phi-cube: 4.23606797749979;
  
  /* Golden Ratio Spacing Scale */
  --space-0: 0;
  --space-1: 0.236rem;    /* φ⁻³ */
  --space-2: 0.382rem;    /* φ⁻² */
  --space-3: 0.618rem;    /* φ⁻¹ */
  --space-4: 1rem;        /* φ⁰ = 1rem base */
  --space-5: 1.618rem;    /* φ¹ */
  --space-6: 2.618rem;    /* φ² */
  --space-7: 4.236rem;    /* φ³ */
  --space-8: 6.854rem;    /* φ⁴ */
  --space-9: 11.09rem;    /* φ⁵ */
  
  /* Fluid Typography Scale (Golden Ratio based) */
  --text-xs: clamp(0.618rem, 0.618rem + 0.1vw, 0.75rem);
  --text-sm: clamp(0.75rem, 0.75rem + 0.15vw, 0.875rem);
  --text-base: clamp(1rem, 1rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.125rem + 0.3vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.25rem + 0.4vw, 1.618rem);
  --text-2xl: clamp(1.5rem, 1.5rem + 0.618vw, 2.618rem);
  --text-3xl: clamp(1.875rem, 1.875rem + 1vw, 4.236rem);
  --text-4xl: clamp(2.5rem, 2.5rem + 1.618vw, 6.854rem);
  --text-5xl: clamp(3.375rem, 3.375rem + 2.618vw, 11.09rem);
  
  /* Golden Ratio Line Heights */
  --leading-tight: 1.17082;      /* φ⁻¹ */
  --leading-snug: 1.38197;       /* φ⁻⁰·⁵ */
  --leading-normal: 1.61803;     /* φ¹ */
  --leading-relaxed: 1.90211;    /* φ¹·⁵ */
  --leading-loose: 2.61803;      /* φ² */
  
  /* Golden Ratio Container Widths */
  --container-xs: 38.2vw;      /* φ⁻¹ * 100vw */
  --container-sm: 50vw;        /* 50% */
  --container-md: 61.8vw;      /* φ⁻¹ * 100vw */
  --container-lg: 76.4vw;      /* φ⁻¹ * 1.25 * 100vw */
  --container-xl: 85.4vw;      /* φ⁻¹ * 1.4 * 100vw */
  --container-full: 100vw;
  
  /* Golden Ratio Aspect Ratios */
  --aspect-square: 1;
  --aspect-portrait: 0.618;      /* φ⁻¹ */
  --aspect-landscape: 1.618;     /* φ */
  --aspect-golden: 1.618;        /* φ */
  --aspect-golden-inverse: 0.618; /* φ⁻¹ */
  --aspect-4-3: 1.333;
  --aspect-16-9: 1.778;
  --aspect-21-9: 2.333;
  --aspect-9-16: 0.5625;
  --aspect-2-3: 0.667;
  --aspect-3-2: 1.5;
  --aspect-5-4: 1.25;
  --aspect-4-5: 0.8;
  
  /* Fluid Spacing (Golden Ratio based) */
  --space-fluid-xs: clamp(0.236rem, 0.236rem + 0.1vw, 0.382rem);
  --space-fluid-sm: clamp(0.382rem, 0.382rem + 0.2vw, 0.618rem);
  --space-fluid-md: clamp(0.618rem, 0.618rem + 0.3vw, 1rem);
  --space-fluid-lg: clamp(1rem, 1rem + 0.618vw, 1.618rem);
  --space-fluid-xl: clamp(1.618rem, 1.618rem + 1vw, 2.618rem);
  --space-fluid-2xl: clamp(1.618rem, 1.618rem + 1.618vw, 4.236rem);
  --space-fluid-3xl: clamp(2.618rem, 2.618rem + 2.618vw, 6.854rem);
  
  /* Golden Ratio Breakpoints */
  --bp-xs: 320px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  --bp-3xl: 1920px;
  
  /* Fluid Breakpoints using Golden Ratio */
  --bp-fluid-sm: clamp(320px, 30vw, 480px);
  --bp-fluid-md: clamp(480px, 47.6vw, 768px);
  --bp-fluid-lg: clamp(768px, 47.6vw, 1024px);
  --bp-fluid-xl: clamp(1024px, 47.6vw, 1280px);
  
  /* Golden Ratio Grid */
  --grid-cols-phi: repeat(auto-fit, minmax(236px, 1fr));
  --grid-cols-phi-sm: repeat(auto-fit, minmax(180px, 1fr));
  --grid-cols-phi-lg: repeat(auto-fit, minmax(300px, 1fr));
  
  /* Golden Ratio Z-Index Scale */
  --z-0: 0;
  --z-1: 1;
  --z-2: 2;
  --z-3: 3;
  --z-4: 5;
  --z-5: 8;
  --z-6: 13;
  --z-7: 21;
  --z-8: 34;
  --z-9: 55;
  --z-10: 89;
  --z-11: 144;
  --z-11: 233;
  --z-12: 377;
  --z-13: 610;
  --z-14: 987;
  --z-15: 1597;
  
  /* Golden Ratio Transition Durations */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 162ms;       /* 100ms * φ⁻¹ */
  --duration-smooth: 262ms;       /* 100ms * φ⁻⁰·⁵ */
  --duration-normal: 382ms;       /* 100ms * φ⁻⁰ */
  --duration-slow: 618ms;         /* 100ms * φ⁰·⁵ */
  --duration-slower: 1000ms;      /* 100ms * φ */
  --duration-slowest: 1618ms;     /* 100ms * φ² */
  
  /* Golden Ratio Easing */
  --ease-phi: cubic-bezier(0.618, 0, 0.382, 1);
  --ease-phi-in: cubic-bezier(0.618, 0, 1, 1);
  --ease-phi-out: cubic-bezier(0, 0, 0.382, 1);
  --ease-phi-in-out: cubic-bezier(0.618, 0, 0.382, 1);
  --ease-golden: cubic-bezier(0.618, 0.382, 0.382, 0.618);
}

/* ════════════════════════════════════════════════════════════════════════════
   GOLDEN RATIO UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Aspect Ratio Classes */
.aspect-square { aspect-ratio: 1; }
.aspect-portrait { aspect-ratio: 0.618; }
.aspect-landscape { aspect-ratio: 1.618; }
.aspect-golden { aspect-ratio: 1.618; }
.aspect-golden-inverse { aspect-ratio: 0.618; }
.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-16-9 { aspect-ratio: 16/9; }
.aspect-21-9 { aspect-ratio: 21/9; }
.aspect-9-16 { aspect-ratio: 9/16; }
.aspect-4-5 { aspect-ratio: 4/5; }
.aspect-5-4 { aspect-ratio: 5/4; }
.aspect-3-4 { aspect-ratio: 3/4; }
.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-2-3 { aspect-ratio: 2/3; }
.aspect-3-2 { aspect-ratio: 3/2; }

/* Fluid Aspect Ratios */
.aspect-fluid-square { aspect-ratio: 1; }
.aspect-fluid-portrait { aspect-ratio: clamp(0.5, 0.618, 0.75); }
.aspect-fluid-landscape { aspect-ratio: clamp(1.33, 1.618, 1.778); }
.aspect-fluid-golden { aspect-ratio: clamp(1.5, 1.618, 1.778); }

/* Spacing Classes */
.space-0 { padding: 0; margin: 0; }
.space-1 { padding: var(--space-1); margin: var(--space-1); }
.space-2 { padding: var(--space-2); margin: var(--space-2); }
.space-3 { padding: var(--space-3); margin: var(--space-3); }
.space-4 { padding: var(--space-4); margin: var(--space-4); }
.space-5 { padding: var(--space-5); margin: var(--space-5); }
.space-6 { padding: var(--space-6); margin: var(--space-6); }
.space-7 { padding: var(--space-7); margin: var(--space-7); }
.space-8 { padding: var(--space-8); margin: var(--space-8); }
.space-9 { padding: var(--space-9); margin: var(--space-9); }

/* Fluid Spacing */
.p-fluid-xs { padding: var(--space-fluid-xs); }
.p-fluid-sm { padding: var(--space-fluid-sm); }
.p-fluid-md { padding: var(--space-fluid-md); }
.p-fluid-lg { padding: var(--space-fluid-lg); }
.p-fluid-xl { padding: var(--space-fluid-xl); }
.p-fluid-2xl { padding: var(--space-fluid-2xl); }
.p-fluid-3xl { padding: var(--space-fluid-3xl); }

/* Margin Utilities */
.m-fluid-xs { margin: var(--space-fluid-xs); }
.m-fluid-sm { margin: var(--space-fluid-sm); }
.m-fluid-md { margin: var(--space-fluid-md); }
.m-fluid-lg { margin: var(--space-fluid-lg); }
.m-fluid-xl { margin: var(--space-fluid-xl); }

/* Gap Utilities */
.gap-fluid-xs { gap: var(--space-fluid-xs); }
.gap-fluid-sm { gap: var(--space-fluid-sm); }
.gap-fluid-md { gap: var(--space-fluid-md); }
.gap-fluid-lg { gap: var(--space-fluid-lg); }
.gap-fluid-xl { gap: var(--space-fluid-xl); }

/* Typography Scale */
.text-xs { font-size: var(--text-xs); line-height: var(--leading-normal); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-base { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.text-xl { font-size: var(--text-xl); line-height: var(--leading-relaxed); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--leading-tight); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--leading-tight); }
.text-5xl { font-size: var(--text-5xl); line-height: var(--leading-tight); }

/* Fluid Typography */
.text-fluid-xs { font-size: clamp(0.618rem, 0.618rem + 0.1vw, 0.75rem); }
.text-fluid-sm { font-size: clamp(0.75rem, 0.75rem + 0.15vw, 0.875rem); }
.text-fluid-base { font-size: clamp(1rem, 1rem + 0.2vw, 1.125rem); }
.text-fluid-lg { font-size: clamp(1.125rem, 1.125rem + 0.3vw, 1.375rem); }
.text-fluid-xl { font-size: clamp(1.25rem, 1.25rem + 0.4vw, 1.618rem); }
.text-fluid-2xl { font-size: clamp(1.5rem, 1.5rem + 0.618vw, 2.618rem); }
.text-fluid-3xl { font-size: clamp(1.875rem, 1.875rem + 1vw, 4.236rem); }
.text-fluid-4xl { font-size: clamp(2.5rem, 2.5rem + 1.618vw, 6.854rem); }
.text-fluid-5xl { font-size: clamp(3.375rem, 3.375rem + 2.618vw, 11.09rem); }

/* Golden Ratio Container Widths */
.container-phi { width: 61.8%; max-width: 1280px; margin: 0 auto; }
.container-phi-inverse { width: 38.2%; }
.container-phi-sm { width: 38.2%; max-width: 480px; }
.container-phi-md { width: 61.8%; max-width: 768px; }
.container-phi-lg { width: 100%; max-width: 1280px; }
.container-phi-xl { width: 100%; max-width: 1536px; }

/* Golden Ratio Grid System */
.grid-phi { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: var(--space-4); }
.grid-phi-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.grid-phi-md { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: var(--space-5); }
.grid-phi-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.grid-phi-xl { display: grid; grid-template-columns: repeat(auto-fit, minmax(382px, 1fr)); gap: var(--space-7); }

/* Golden Ratio Flexbox */
.flex-phi { display: flex; gap: var(--space-4); }
.flex-phi-center { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.flex-phi-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.flex-phi-column { display: flex; flex-direction: column; gap: var(--space-4); }
.flex-phi-column-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

/* Golden Ratio Aspect Ratio Containers */
.aspect-phi { aspect-ratio: 1.618; }
.aspect-phi-inverse { aspect-ratio: 0.618; }
.aspect-square { aspect-ratio: 1; }
.aspect-portrait { aspect-ratio: 0.75; }
.aspect-landscape { aspect-ratio: 1.618; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-cinema { aspect-ratio: 21/9; }

/* Fluid Aspect Ratios */
.aspect-fluid-square { aspect-ratio: 1; }
.aspect-fluid-portrait { aspect-ratio: clamp(0.5, 0.618, 0.75); }
.aspect-fluid-landscape { aspect-ratio: clamp(1.33, 1.618, 1.778); }
.aspect-fluid-golden { aspect-ratio: clamp(1.5, 1.618, 1.778); }

/* Golden Ratio Grid System */
.grid-phi { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: var(--space-4); }
.grid-phi-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.grid-phi-md { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: var(--space-5); }
.grid-phi-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.grid-phi-xl { display: grid; grid-template-columns: repeat(auto-fit, minmax(382px, 1fr)); gap: var(--space-7); }

/* Responsive Grid Variants */
@media (max-width: 480px) {
  .grid-phi { grid-template-columns: 1fr; gap: var(--space-3); }
  .grid-phi-sm { grid-template-columns: 1fr; gap: var(--space-2); }
}

@media (min-width: 481px) and (max-width: 768px) {
  .grid-phi { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .grid-phi-sm { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-phi { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .grid-phi-sm { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .grid-phi-md { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .grid-phi { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
  .grid-phi-sm { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .grid-phi-md { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .grid-phi-lg { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

@media (min-width: 1441px) {
  .grid-phi { grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
  .grid-phi-sm { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .grid-phi-md { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
  .grid-phi-lg { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .grid-phi-xl { grid-template-columns: repeat(4, 1fr); gap: var(--space-7); }
}

/* Fluid Container */
.container-fluid {
  width: 100%;
  max-width: 100%;
  padding: 0 var(--space-fluid-md);
  margin: 0 auto;
}

.container-phi-narrow {
  width: 38.2%;
  max-width: 618px;
  margin: 0 auto;
}

.container-phi-wide {
  width: 61.8%;
  max-width: 1236px;
  margin: 0 auto;
}

.container-phi-full {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* Golden Ratio Typography Classes */
.text-phi-xs { font-size: clamp(0.618rem, 0.618rem + 0.1vw, 0.75rem); line-height: 1.618; }
.text-phi-sm { font-size: clamp(0.75rem, 0.75rem + 0.15vw, 0.875rem); line-height: 1.618; }
.text-phi-base { font-size: clamp(1rem, 1rem + 0.2vw, 1.125rem); line-height: 1.618; }
.text-phi-lg { font-size: clamp(1.125rem, 1.125rem + 0.3vw, 1.375rem); line-height: 1.618; }
.text-phi-xl { font-size: clamp(1.25rem, 1.25rem + 0.4vw, 1.618rem); line-height: 1.618; }
.text-phi-2xl { font-size: clamp(1.5rem, 1.5rem + 0.618vw, 2.618rem); line-height: 1.618; }
.text-phi-3xl { font-size: clamp(1.875rem, 1.875rem + 1vw, 4.236rem); line-height: 1.382; }
.text-phi-4xl { font-size: clamp(2.5rem, 2.5rem + 1.618vw, 6.854rem); line-height: 1.236; }
.text-phi-5xl { font-size: clamp(3.375rem, 3.375rem + 2.618vw, 11.09rem); line-height: 1.170; }

/* Golden Ratio Line Heights */
.leading-phi-tight { line-height: 1.17082; }
.leading-phi-snug { line-height: 1.38197; }
.text-phi-normal { line-height: 1.61803; }
.text-phi-relaxed { line-height: 1.90211; }
.text-phi-loose { line-height: 2.61803; }

/* Golden Ratio Transition Durations */
.transition-phi-instant { transition-duration: 0ms; }
.transition-phi-fast { transition-duration: 100ms; }
.transition-phi-normal { transition-duration: 162ms; }
.transition-phi-smooth { transition-duration: 262ms; }
.transition-phi-normal-phi { transition-duration: 382ms; }
.transition-phi-slow { transition-duration: 618ms; }
.transition-phi-slower { transition-duration: 1000ms; }
.transition-phi-slowest { transition-duration: 1618ms; }

/* Golden Ratio Easing */
.ease-phi { transition-timing-function: cubic-bezier(0.618, 0, 0.382, 1); }
.ease-phi-in { transition-timing-function: cubic-bezier(0.618, 0, 1, 1); }
.ease-phi-out { transition-timing-function: cubic-bezier(0, 0, 0.382, 1); }
.ease-phi-in-out { transition-timing-function: cubic-bezier(0.618, 0, 0.382, 1); }
.ease-golden { transition-timing-function: cubic-bezier(0.618, 0.382, 0.382, 0.618); }

/* Golden Ratio Z-Index */
.z-phi-0 { z-index: 0; }
.z-phi-1 { z-index: 1; }
.z-phi-2 { z-index: 2; }
.z-phi-3 { z-index: 3; }
.z-phi-4 { z-index: 5; }
.z-phi-5 { z-index: 8; }
.z-phi-6 { z-index: 13; }
.z-phi-7 { z-index: 21; }
.z-phi-8 { z-index: 34; }
.z-phi-9 { z-index: 55; }
.z-phi-10 { z-index: 89; }
.z-phi-11 { z-index: 144; }
.z-phi-11 { z-index: 233; }
.z-phi-12 { z-index: 377; }
.z-phi-13 { z-index: 610; }
.z-phi-14 { z-index: 987; }
.z-phi-15 { z-index: 1597; }

/* Fluid Width Utilities */
.w-fluid-xs { width: clamp(100px, 18.2vw, 200px); }
.w-fluid-sm { width: clamp(150px, 27.3vw, 300px); }
.w-fluid-md { width: clamp(200px, 38.2vw, 400px); }
.w-fluid-lg { width: clamp(300px, 50vw, 600px); }
.w-fluid-xl { width: clamp(400px, 61.8vw, 800px); }
.w-fluid-2xl { width: clamp(600px, 100vw, 1200px); }

/* Fluid Height */
.h-fluid-xs { height: clamp(100px, 18.2vw, 200px); }
.h-fluid-sm { height: clamp(150px, 27.3vw, 300px); }
.h-fluid-md { height: clamp(200px, 38.2vw, 400px); }
.h-fluid-lg { height: clamp(300px, 50vw, 600px); }
.h-fluid-xl { height: clamp(400px, 61.8vw, 800px); }

/* Golden Ratio Border Radius Scale */
.rounded-phi-none { border-radius: 0; }
.rounded-phi-sm { border-radius: calc(var(--space-1) * 0.618); }
.rounded-phi { border-radius: calc(var(--space-2) * 0.618); }
.rounded-phi-md { border-radius: calc(var(--space-3) * 0.618); }
.rounded-phi-lg { border-radius: calc(var(--space-4) * 0.618); }
.rounded-phi-xl { border-radius: calc(var(--space-5) * 0.618); }
.rounded-phi-2xl { border-radius: calc(var(--space-6) * 0.618); }
.rounded-phi-full { border-radius: 9999px; }

/* Shadow Scale */
.shadow-phi-xs { box-shadow: 0 0.236rem 0.382rem rgba(0,0,0,0.0618); }
.shadow-phi-sm { box-shadow: 0 0.382rem 0.618rem rgba(0,0,0,0.075); }
.shadow-phi { box-shadow: 0 0.618rem 1rem rgba(0,0,0,0.0868); }
.shadow-phi-md { box-shadow: 0 1rem 1.618rem rgba(0,0,0,0.0972); }
.shadow-phi-lg { box-shadow: 0 1.618rem 2.618rem rgba(0,0,0,0.108); }
.shadow-phi-xl { box-shadow: 0 2.618rem 4.236rem rgba(0,0,0,0.117); }
.shadow-phi-2xl { box-shadow: 0 4.236rem 6.854rem rgba(0,0,0,0.125); }

/* Fluid Responsive Breakpoints */
@media (max-width: 480px) {
  :root {
    --space-fluid-md: clamp(0.382rem, 0.618rem + 0.5vw, 0.75rem);
    --space-fluid-lg: clamp(0.618rem, 1rem + 0.8vw, 1.25rem);
    --space-fluid-xl: clamp(1rem, 1.618rem + 1.2vw, 2rem);
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --space-fluid-md: clamp(0.618rem, 0.8vw + 0.618rem, 1rem);
    --space-fluid-lg: clamp(1rem, 1.2vw + 1rem, 1.618rem);
    --space-fluid-xl: clamp(1.618rem, 2vw + 1.618rem, 2.618rem);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --space-fluid-md: clamp(0.75rem, 1vw + 0.618rem, 1.125rem);
    --space-fluid-lg: clamp(1.25rem, 1.2vw + 1.25rem, 1.875rem);
    --space-fluid-xl: clamp(1.875rem, 2vw + 1.875rem, 3.125rem);
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  :root {
    --space-fluid-md: 1rem;
    --space-fluid-lg: 1.618rem;
    --space-fluid-xl: 2.618rem;
  }
}

@media (min-width: 1441px) {
  :root {
    --space-fluid-md: 1.125rem;
    --space-fluid-lg: 1.875rem;
    --space-fluid-xl: 3rem;
  }
}

/* Fluid Container Widths */
@media (max-width: 480px) {
  .container-phi { width: 94%; max-width: 100%; }
  .container-phi-wide { width: 98%; max-width: 100%; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .container-phi { width: 88%; max-width: 680px; }
  .container-phi-wide { width: 94%; max-width: 720px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .container-phi { width: 82%; max-width: 900px; }
  .container-phi-wide { width: 90%; max-width: 980px; }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .container-phi { width: 76%; max-width: 1140px; }
  .container-phi-wide { width: 84%; max-width: 1260px; }
}

@media (min-width: 1441px) {
  .container-phi { width: 70%; max-width: 1340px; }
  .container-phi-wide { width: 78%; max-width: 1500px; }
}

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

/* Focus Visible with Golden Ratio Outline */
:focus-visible {
  outline: calc(2px * 0.618) solid var(--primary, #0891B2);
  outline-offset: calc(2px * 0.618);
}

/* Selection Styling */
::selection {
  background: var(--primary, #0891B2);
  color: white;
}

/* Scrollbar Styling with Golden Ratio */
::-webkit-scrollbar {
  width: calc(8px * 0.618);
  height: calc(8px * 0.618);
}

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

::-webkit-scrollbar-thumb {
  background: var(--primary, #0891B2);
  border-radius: calc(4px * 0.618);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark, #067896);
}