/**
 * Ben Live TV - Landing Page Styles
 * Dark gray theme with rainbow HDR accents and light/shadow emphasis
 * Mobile-first responsive design
 */

/* ============================================================================
   Core Imports (Shared across all modern pages)
   ============================================================================ */

@import url('core/_variables.css');
@import url('core/_container-queries.css');
@import url('core/_animations.css');
@import url('core/_utilities.css');

/* ============================================================================
   Component Imports
   ============================================================================ */

@import url('components/_navigation.css');

nav {
  --nav-extra-offset: clamp(0.75rem, 2vh, 1.5rem);
}

/* Design tokens are imported from core/_variables.css above */

/* ============================================================================
   Base Styles & Reset
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  /* Modern viewport units with fallback for mobile browser chrome */
  min-height: 100vh;
  min-height: var(--viewport-height-dynamic, 100dvh);
}

/* Ensure images and media don't cause horizontal scroll */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* ============================================================================
   Background Effects
   ============================================================================ */

/* Subtle animated gradient background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(14, 165, 233, 0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(14, 165, 233, 0.1) 0%, transparent 50%);
}

/* ============================================================================
   Container & Layout
   ============================================================================ */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  width: 100%;
}

/* ============================================================================
   Hero Section
   ============================================================================ */

/* Container context for hero section */
.hero .container {
  container-type: inline-size;
  container-name: hero;
  flex: 1 1 auto;
}

.hero {
  position: relative;
  min-block-size: var(--viewport-height, 100vh);
  min-block-size: var(--viewport-height-small, 100svh);
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl) var(--space-xl);
  overflow: hidden;
}

@supports (height: 100dvh) {
  .hero {
    min-block-size: var(--viewport-height-dynamic, 100dvh);
  }
}

@media (max-height: 820px) and (min-width: 980px) {
  .hero {
    align-items: flex-start;
    padding-top: clamp(2.2rem, 4.5vh, 3.2rem);
    padding-bottom: clamp(1.5rem, 4vh, 2.4rem);
  }

  .hero h1 {
    font-size: clamp(2.6rem, 3.4vw + 0.8rem, 3.9rem);
  }

  .hero h1 {
    margin-bottom: clamp(0.8rem, 1.6vh, 1.4rem);
  }

  .hero-description {
    margin-bottom: clamp(0.9rem, 1.8vh, 1.4rem);
  }

  .hero-cta-section {
    margin-bottom: clamp(1rem, 2vh, 1.6rem);
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .hero {
    padding-top: clamp(3.4rem, 7vh, 4.8rem);
  }
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/noise.png');
  opacity: 0.08;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* Decorative Floating Elements */
.hero-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.float-shape {
  position: absolute;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
  backface-visibility: hidden; /* Prevent flickering */
}

.float-shape-1 {
  width: clamp(100px, 18vw, 220px);
  height: clamp(100px, 18vw, 220px);
  top: clamp(6%, 12vh, 18%);
  right: clamp(4%, 8vw, 14%);
  animation: float1 20s ease-in-out infinite;
}

.float-shape-2 {
  width: clamp(70px, 14vw, 180px);
  height: clamp(70px, 14vw, 180px);
  bottom: clamp(10%, 16vh, 24%);
  left: clamp(4%, 7vw, 12%);
  animation: float2 15s ease-in-out infinite;
}

.float-shape-3 {
  width: clamp(90px, 16vw, 200px);
  height: clamp(90px, 16vw, 200px);
  top: clamp(22%, 30vh, 40%);
  right: clamp(2%, 10vw, 18%);
  animation: float3 18s ease-in-out infinite;
}

.float-shape-4 {
  width: clamp(120px, 20vw, 240px);
  height: clamp(120px, 20vw, 240px);
  bottom: clamp(18%, 20vh, 28%);
  right: clamp(8%, 16vw, 28%);
  animation: float4 22s ease-in-out infinite;
}

.float-shape-5 {
  width: clamp(110px, 18vw, 220px);
  height: clamp(110px, 18vw, 220px);
  bottom: clamp(6%, 12vh, 18%);
  left: clamp(12%, 20vw, 30%);
  animation: float5 24s ease-in-out infinite;
}


.ai-character {
  position: absolute;
  width: clamp(140px, 22vw, 260px);
  height: clamp(140px, 22vw, 260px);
  bottom: clamp(6%, 10vh, 14%);
  right: clamp(0%, 5vw, 8%);
  opacity: 0.6;
  animation: characterFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 8px 32px rgba(59, 130, 246, 0.4));
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

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

@keyframes float2 {
  0%, 100% {
    transform: translate(0, 0) rotate(45deg);
  }
  50% {
    transform: translate(-40px, -40px) rotate(405deg);
  }
}

@keyframes float3 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(40px, 30px) rotate(180deg);
  }
}

@keyframes float4 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-30px, 20px) rotate(-140deg);
  }
}

@keyframes float5 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(28px, -18px) rotate(160deg);
  }
}

@keyframes characterFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

/* Adjust decorative elements on small screens */
@media (max-width: 640px) {
  .float-shape {
    opacity: 0.5; /* Was 0.35 - 43% more visible */
    transform: scale(0.85);
  }

  .ai-character {
    opacity: 0.5; /* Was 0.35 - 43% more visible */
    transform: scale(0.9);
    bottom: clamp(-2%, 6vh, 12%);
    right: clamp(6%, 12vw, 18%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-shape,
  .ai-character {
    animation: none !important;
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 0.6rem);
  padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.8rem, 2vw, 1.2rem);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 2rem;
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  color: var(--primary);
  margin-bottom: clamp(0.25rem, 0.8vh, 0.9rem);
  animation: fadeInUp 0.6s ease-out;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.hero-label svg {
  width: 16px;
  height: 16px;
}

.hero-label:hover {
  transform: translateY(-1px);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.18);
}

.hero-label::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.hero-label:hover::after {
  opacity: 1;
  animation: shimmer 2.4s ease-in-out infinite;
}

.hero h1 {
  font-size: clamp(2.4rem, 4.8vw + 1rem, 5rem);
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: clamp(1rem, 2vh, 2rem);
  animation: fadeInUp 0.6s ease-out 0.1s both;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

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

.hero-description {
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--text-secondary);
  margin-bottom: clamp(1.1rem, 2.2vh, 2rem);
  max-width: 600px;
  line-height: 1.6;
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.hero-cta-section {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

.hero-cta {
  display: flex;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}

.primary-cta {
  justify-content: center; /* Center the primary CTA */
}

.secondary-cta {
  flex-direction: column; /* Stack vertically on mobile */
  align-items: stretch;
  margin-top: 0.5rem;
}

/* ============================================================================
   Buttons
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1vw, 0.6rem);
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  border-radius: clamp(0.4rem, 1vw, 0.6rem);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #0a0f1a;
  box-shadow:
    inset 0 1px 0 var(--light-subtle),
    0 4px 12px var(--shadow-deep);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 var(--light-subtle),
    inset 0 -2px 6px rgba(10, 15, 26, 0.18);
  position: relative;
  overflow: hidden;
  border-radius: 0.9rem;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 -1px 1px rgba(0, 0, 0, 0.35);
  background: rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

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

.btn-accent {
  --btn-accent-1: rgba(34, 211, 238, 0.16);
  --btn-accent-2: rgba(59, 130, 246, 0.18);
  --btn-accent-3: rgba(244, 114, 182, 0.18);
}

.btn-accent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    var(--btn-accent-1),
    var(--btn-accent-2),
    var(--btn-accent-3));
  opacity: 0;
  transform: translateY(20%) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 0;
}

.btn-accent::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(34, 211, 238, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.btn-accent:hover {
  color: color-mix(in oklch, var(--accent-purple) 65%, #f8fbff 30%);
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow:
    0 10px 24px rgba(14, 165, 233, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 14px rgba(123, 97, 255, 0.35);
}

.btn-lab:hover {
  transform: translateY(-2px) rotate(-0.4deg);
}

.btn-qual:hover {
  transform: translateY(-2px) rotate(0.4deg);
}

.btn-lab {
  --btn-accent-1: rgba(34, 211, 238, 0.22);
  --btn-accent-2: rgba(14, 165, 233, 0.24);
  --btn-accent-3: rgba(125, 211, 252, 0.2);
}

.btn-qual {
  --btn-accent-1: rgba(255, 179, 93, 0.22);
  --btn-accent-2: rgba(251, 146, 60, 0.22);
  --btn-accent-3: rgba(253, 186, 116, 0.2);
}

.btn-qual:hover {
  color: color-mix(in oklch, var(--accent-orange) 70%, #f8fbff 20%);
}

.btn-accent:hover::before {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.btn-accent:hover::after {
  opacity: 1;
}

.btn-accent svg,
.btn-accent span {
  position: relative;
  z-index: 1;
}

html[data-theme="light"] .btn-secondary {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 6px rgba(15, 23, 42, 0.08);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .btn-accent:hover {
  color: color-mix(in oklch, var(--accent-purple) 65%, #0f172a 20%);
}

html[data-theme="light"] .btn-qual:hover {
  color: color-mix(in oklch, var(--accent-orange) 70%, #0f172a 20%);
}

html[data-theme="light"] .btn-large {
  background: linear-gradient(135deg,
    rgba(126, 222, 230, 0.85) 0%,
    rgba(122, 232, 210, 0.82) 45%,
    rgba(92, 210, 230, 0.85) 100%);
  color: #0f172a;
}

html[data-theme="light"] .cta-logo-script {
  color: color-mix(in oklch, var(--accent-cyan) 70%, #0f172a 15%);
}

.btn svg {
  width: clamp(16px, 2vw, 20px);
  height: clamp(16px, 2vw, 20px);
}

.btn-large {
  position: relative;
  flex-direction: column;
  gap: clamp(0.4rem, 0.9vw, 0.7rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  min-width: min(100%, 320px);
  background: linear-gradient(135deg,
    rgba(96, 224, 234, 0.95) 0%,
    rgba(88, 232, 206, 0.88) 45%,
    rgba(72, 206, 224, 0.92) 100%);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 1.65rem;
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.32),
    0 0 40px rgba(88, 216, 224, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -8px 18px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  animation: none;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  filter: saturate(1.15) brightness(1.05);
}

.btn-large > * {
  position: relative;
  z-index: 1;
}

.btn-main {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
}

.cta-logo {
  position: relative;
  display: inline-block;
  padding-right: clamp(2.2rem, 6vw, 3.6rem);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 6px rgba(9, 17, 28, 0.4),
    0 0 10px rgba(94, 234, 212, 0.28);
  transform: translate(4px, -6px);
}

.cta-logo-strong {
  font-size: clamp(2.2rem, 6.4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: rotate(-1deg);
  display: inline-block;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

html:not([data-theme="light"]) .cta-logo-strong {
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--accent-green) 60%, #ffffff 40%),
    color-mix(in oklch, var(--accent-cyan) 60%, #ffffff 40%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.55);
  filter: none;
}

.cta-logo-script {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600;
  font-size: clamp(1.7rem, 5.2vw, 2.8rem);
  color: color-mix(in oklch, var(--accent-cyan) 55%, #ffffff 45%);
  position: absolute;
  left: 36%;
  top: 78%;
  transform: translate(-14%, -46%) rotate(-10deg);
  text-shadow:
    0 0 14px color-mix(in oklch, var(--accent-cyan) 55%, transparent),
    0 4px 10px rgba(9, 17, 28, 0.5);
  white-space: nowrap;
  pointer-events: none;
}

.btn-large:hover .cta-logo-strong {
  animation: headerShimmer 2.6s ease-in-out infinite;
}

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

/* Prismatic glass reflection effect */
.btn-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  opacity: 0.4;
  animation: none;
  pointer-events: none;
}

/* Rainbow gradient overlay */
.btn-large::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(123, 97, 255, 0.32) 0%,
    rgba(255, 126, 182, 0.3) 35%,
    rgba(255, 181, 99, 0.28) 65%,
    rgba(59, 130, 246, 0.26) 100%
  );
  background-size: 200% 200%;
  opacity: 0.28;
  animation: none;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 0 40px rgba(59, 130, 246, 0.6),
      0 0 80px rgba(6, 182, 212, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2),
      0 8px 32px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 60px rgba(59, 130, 246, 0.8),
      0 0 120px rgba(6, 182, 212, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.2),
      0 12px 48px rgba(0, 0, 0, 0.4);
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.btn-large:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 0 60px rgba(59, 130, 246, 0.9),
    0 0 120px rgba(6, 182, 212, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 16px 64px rgba(0, 0, 0, 0.5);
  animation: pulseGlow 2.4s ease-in-out infinite;
  filter: saturate(1.35) brightness(1.12);
}

.btn-large:hover::before {
  opacity: 0.6;
  animation: shimmer 2.6s ease-in-out infinite;
}

.btn-large:hover::after {
  opacity: 0.78;
  animation: rainbowShift 4.6s ease-in-out infinite;
}

.btn-large .btn-icon {
  width: clamp(54px, 8.4vw, 72px);
  height: clamp(38px, 5.8vw, 52px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 1;
  color: rgba(11, 21, 34, 0.85);
}

.btn-secondary .btn-icon {
  width: clamp(28px, 4.8vw, 40px);
  height: clamp(28px, 4.8vw, 40px);
}

.btn-subtitle {
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  font-weight: 400;
  opacity: 0.95;
  font-style: italic;
  position: relative;
  z-index: 1;
  color: rgba(9, 17, 28, 0.78);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 -1px 2px rgba(0, 0, 0, 0.28);
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-large,
  .btn-large::before,
  .btn-large::after {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .hero-description {
    margin-bottom: 1.2rem;
  }

  .hero-cta-section {
    gap: 1.1rem;
  }

  .hero {
    padding-top: clamp(3.8rem, 8vh, 5.8rem);
  }
}

/* ============================================================================
   Stats Section
   ============================================================================ */

/* Container context for stats section */
.stats-section .container {
  container-type: inline-size;
  container-name: stats;
}

.stats {
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
  gap: var(--space-md);
  margin: 0;
  padding-block: var(--space-lg);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  inline-size: 100%;
}

/* Container query: 2x2 grid when container >= 640px */
@container stats (min-width: 640px) {
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: start;
    align-content: center;
    justify-items: center;
    max-inline-size: min(820px, 100%);
    margin-inline: auto;
  }

  .stat {
    inline-size: 100%;
  }
}

/* Container query: larger gaps for wider containers */
@container stats (min-width: 900px) {
  .stats {
    gap: var(--space-xl);
    max-inline-size: min(900px, 100%);
  }
}

.stats-section {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .stats-section {
    min-height: 100dvh;
  }
}

.stats-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.stats-section .container {
  position: relative;
  z-index: 1;
}

.stats-orbit {
  position: absolute;
  width: clamp(120px, 22vw, 260px);
  height: clamp(120px, 22vw, 260px);
  top: clamp(8%, 12vh, 20%);
  right: clamp(6%, 10vw, 16%);
  opacity: 0.6;
  animation: float1 20s ease-in-out infinite;
}

.stats-section .ai-character {
  position: absolute;
  width: clamp(160px, 26vw, 300px);
  height: clamp(160px, 26vw, 300px);
  bottom: clamp(34%, 44vh, 52%);
  right: clamp(6%, 12vw, 18%);
  opacity: 0.55;
  filter: drop-shadow(0 10px 36px rgba(59, 130, 246, 0.28));
}

.stats-wave {
  position: absolute;
  width: clamp(160px, 30vw, 340px);
  height: clamp(60px, 12vw, 120px);
  left: clamp(4%, 10vw, 16%);
  opacity: 0.5;
}

.stats-wave-1 {
  bottom: clamp(14%, 20vh, 30%);
  animation: float2 20s ease-in-out infinite;
}

.stats-wave-2 {
  bottom: clamp(6%, 14vh, 22%);
  animation: float5 26s ease-in-out infinite;
}

.stats.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.stat {
  position: relative;
  text-align: center;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: transparent;
  border: none;
  border-radius: clamp(0.75rem, 1.5vw, 1rem);
  box-shadow: none;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Decorative gradient orb background */
.stat::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -20%;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  opacity: 0.04;
  transform: translateY(-50%);
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}

.stat:hover::before {
  opacity: 0.08;
  transform: translateY(-50%) scale(1.1);
}

/* Color-coded gradient orbs */
.stat:nth-child(1)::before {
  background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
}

.stat:nth-child(2)::before {
  background: radial-gradient(circle, var(--accent-orange) 0%, transparent 70%);
}

.stat:nth-child(3)::before {
  background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
}

.stat:nth-child(4)::before {
  background: radial-gradient(circle, var(--accent-green) 0%, transparent 70%);
}

/* Subtle animated border glow on hover */
.stat::after {
  display: none;
}

.stat:hover::after {
  opacity: 0;
}

.stat.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.stat:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 16px 24px rgba(15, 23, 42, 0.18));
}

/* Rainbow colors for each stat */
.stat:nth-child(1) {
  color: var(--accent-cyan);
}

.stat:nth-child(2) {
  color: var(--accent-orange);
}

.stat:nth-child(3) {
  color: var(--accent-purple);
}

.stat:nth-child(4) {
  color: var(--accent-green);
}

.stat:nth-child(1) .stat-value {
  color: var(--accent-cyan);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.25),
    0 0 26px rgba(6, 182, 212, 0.35);
}

.stat:nth-child(2) .stat-value {
  color: var(--accent-orange);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.25),
    0 0 26px rgba(251, 146, 60, 0.35);
}

.stat:nth-child(3) .stat-value {
  color: var(--accent-purple);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.25),
    0 0 26px rgba(59, 130, 246, 0.35);
}

.stat:nth-child(4) .stat-value {
  color: var(--accent-green);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.25),
    0 0 26px rgba(34, 197, 94, 0.35);
}

.stat-value {
  position: relative;
  font-size: clamp(3rem, 6.2vw + 0.4rem, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  z-index: 1;
  display: block;
  transform-style: preserve-3d;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.25);
}

.stat-value::after {
  content: attr(data-value);
  position: absolute;
  left: 0.08em;
  top: 0.12em;
  color: color-mix(in oklch, currentColor 55%, #0f172a 45%);
  opacity: 0.35;
  z-index: -1;
}

.stat.animate-in .stat-value {
  animation: statFloat 6s ease-in-out infinite;
}

.stat:nth-child(2) .stat-value {
  animation-delay: 0.6s;
}

.stat:nth-child(3) .stat-value {
  animation-delay: 1.2s;
}

.stat:nth-child(4) .stat-value {
  animation-delay: 1.8s;
}

.stat-label {
  position: relative;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: var(--text-secondary);
  margin-top: clamp(0.6rem, 1vh, 0.85rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 0.5rem 1.1rem;
  background: rgba(15, 23, 42, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 18px rgba(15, 23, 42, 0.22);
  gap: 0.5rem;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

.stat-bullets {
  margin: clamp(0.8rem, 1.6vh, 1.1rem) auto 0;
  padding: 0;
  list-style: none;
  width: min(100%, 20rem);
  text-align: left;
  color: var(--text-secondary);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  line-height: 1.45;
  display: grid;
  gap: 0.45rem;
}

.stat-bullets li {
  position: relative;
  padding-left: 1.1rem;
}

.stat-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

html[data-theme="light"] .stat-bullets {
  color: #4b5563;
}

html[data-theme="light"] .stat {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="light"] .stat-value::after {
  color: color-mix(in oklch, currentColor 55%, #0f172a 45%);
  opacity: 0.25;
}

html[data-theme="light"] .stat-label {
  background: rgba(248, 250, 252, 0.8);
  border-color: rgba(15, 23, 42, 0.12);
  color: #1f2937;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 10px 18px rgba(15, 23, 42, 0.14);
}

@keyframes statFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    transform: translateY(-6px) rotateX(6deg) rotateZ(-1.5deg);
  }
}

/* ============================================================================
   Section Styles
   ============================================================================ */

.section {
  padding: clamp(3rem, 8vh, 6rem) 0;
  position: relative;
}

.section::before {
  content: '';
  position: absolute;
  top: -2.5rem;
  left: 0;
  right: 0;
  height: 3.5rem;
  background: linear-gradient(180deg, rgba(34, 37, 43, 0), rgba(34, 37, 43, 0.7));
  pointer-events: none;
  z-index: 0;
}

.expertise-section.section::before {
  content: none;
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section-header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vh, 3.5rem);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-header.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.section-title {
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
  font-weight: 700;
  margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
  color: var(--text-primary);
}

.section-title .section-title-text {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .section-title .section-title-text {
  background: linear-gradient(
    135deg,
    oklch(48% 0.24 150),
    oklch(46% 0.24 235)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 20px rgba(15, 23, 42, 0.28);
}

.section-subtitle {
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  line-height: 1.6;
  text-wrap: balance;
}

.expertise-section .section-subtitle {
  max-width: 56ch;
}

.connect-section .section-subtitle {
  max-width: 50ch;
}

@media (min-width: 1100px) {
  .expertise-section .section-subtitle {
    max-width: 68ch;
  }

  .connect-section .section-subtitle {
    max-width: 62ch;
  }
}

.expertise-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(5.5rem, 12vh, 8.5rem);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in oklch, var(--bg-dark) 45%, transparent) 28%,
      var(--bg-dark) 62%
    );
}

.expertise-section::before {
  content: none;
}

.expertise-section .container {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   Advanced Typography - Embossed Glass Effect
   ============================================================================ */

h1, h2, .section-title {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15),    /* Top highlight */
    0 2px 4px rgba(0, 0, 0, 0.3),          /* Depth shadow */
    0 0 20px rgba(255, 255, 255, 0.1);     /* Subtle glow */
  letter-spacing: -0.02em;
  font-weight: 700;
}

.hero h1 {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 2px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(16, 185, 129, 0.15);
}

.gradient {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(16, 185, 129, 0.3),
    0 0 60px rgba(59, 130, 246, 0.2);
}

/* Responsive line breaks */
.optional-break {
  display: none;
}

.no-break {
  white-space: nowrap;
}

@media (max-width: 820px) {
  .optional-break {
    display: inline;
  }

  .section-title,
  .hero h1 {
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
  }

  .section-subtitle {
    max-width: 34ch;
  }

  .hero {
    padding-top: clamp(3.4rem, 7.2vh, 5.4rem);
  }
}

@media (min-width: 560px) and (max-width: 900px) {
  .hero h1 {
    font-size: clamp(2.9rem, 6.6vw + 0.8rem, 4.4rem);
  }
}

@media (max-width: 1180px) and (max-height: 820px) {
  .optional-break {
    display: none;
  }

  .hero h1 {
    max-width: 26ch;
  }
}

@media (min-width: 700px) and (max-width: 900px) {
  .cta-logo {
    padding-right: 3rem;
    transform: translate(2px, -6px);
  }

  .cta-logo-strong {
    font-size: 3.1rem;
  }

  .cta-logo-script {
    font-size: 2.25rem;
    left: 40%;
    top: 76%;
    transform: translate(-18%, -46%) rotate(-10deg);
  }

  .btn-large .btn-icon {
    width: 62px;
    height: 44px;
  }
}

@media (min-width: 720px) {
  .hero-content {
    max-width: min(90vw, 860px);
  }
}

@media (min-width: 900px) {
  .hero h1 {
    max-width: 24ch;
  }
}

@media (min-width: 900px) and (max-height: 820px) {
  .hero {
    padding-top: clamp(3.2rem, 6vh, 4.8rem);
    padding-bottom: clamp(2.2rem, 4.2vh, 3.6rem);
  }

  .hero h1 {
    line-height: 1.06;
    max-width: 30ch;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) and (max-height: 820px) {
  .hero {
    padding-top: clamp(4.8rem, 8.6vh, 6rem);
    padding-bottom: clamp(2.2rem, 4vh, 3.2rem);
  }

  .hero-label {
    margin-bottom: clamp(0.45rem, 1vh, 1.1rem);
    font-size: clamp(0.72rem, 1.2vw, 0.85rem);
    padding: clamp(0.35rem, 0.8vw, 0.5rem) clamp(0.7rem, 1.5vw, 1rem);
  }

  .hero h1 {
    font-size: clamp(2.6rem, 4.4vw + 0.6rem, 4.4rem);
    line-height: 1.08;
  }

  .hero-description {
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: clamp(4.8rem, 13vh, 6.6rem);
  }
}

/* ============================================================================
   Expertise Grid - Container Query Responsive
   ============================================================================ */

/* Container context for component-based responsiveness */
.expertise-section .container {
  container-type: inline-size;
  container-name: expertise;
}

.expertise-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: var(--space-md);
}

/* Container query: 2 columns when container >= 640px */
@container expertise (min-width: 640px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .expertise-card:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    max-inline-size: min(100%, 620px);
    margin-inline: auto;
  }
}

/* Container query: maintain 2 columns for larger containers */
@container expertise (min-width: 900px) {
  .expertise-grid {
    gap: var(--space-lg);
  }
}

.expertise-card {
  background: rgba(42, 47, 56, 0.26);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: clamp(0.75rem, 2vw, 1.25rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(30px);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(0.9rem, 2vw, 1.4rem);
  row-gap: clamp(0.5rem, 1.2vh, 0.8rem);
  align-items: start;
}

html[data-theme="light"] .expertise-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 30px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .expertise-card:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 36px rgba(15, 23, 42, 0.14);
}

.expertise-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.expertise-card:hover {
  background: rgba(42, 47, 56, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(16, 185, 129, 0.2);
  transform: translateY(-4px) scale(1.02);
}

/* Rainbow spectrum for each card */
.expertise-card:nth-child(1) {
  border-color: rgba(16, 185, 129, 0.2);
}

.expertise-card:nth-child(1):hover {
  border-color: var(--accent-green);
}

.expertise-card:nth-child(1) .expertise-icon {
  background: rgba(16, 185, 129, 0.1);
}

.expertise-card:nth-child(1) .expertise-icon svg {
  stroke: var(--accent-green);
}

.expertise-card:nth-child(2) {
  border-color: rgba(168, 85, 247, 0.2);
}

.expertise-card:nth-child(2):hover {
  border-color: var(--accent-purple);
}

.expertise-card:nth-child(2) .expertise-icon {
  background: rgba(168, 85, 247, 0.1);
}

.expertise-card:nth-child(2) .expertise-icon svg {
  stroke: var(--accent-purple);
}

.expertise-card:nth-child(3) {
  border-color: oklch(75% 0.2 65 / 0.2);
}

.expertise-card:nth-child(3):hover {
  border-color: var(--accent-orange);
}

.expertise-card:nth-child(3) .expertise-icon {
  background: oklch(75% 0.2 65 / 0.12);
}

.expertise-card:nth-child(3) .expertise-icon svg {
  stroke: var(--accent-orange);
}

.expertise-card:nth-child(4) {
  border-color: rgba(14, 165, 233, 0.2);
}

.expertise-card:nth-child(4):hover {
  border-color: var(--accent-cyan);
}

.expertise-card:nth-child(4) .expertise-icon {
  background: rgba(14, 165, 233, 0.12);
}

.expertise-card:nth-child(4) .expertise-icon svg {
  stroke: var(--accent-cyan);
}

.expertise-card:nth-child(5) {
  border-color: rgba(59, 130, 246, 0.2);
}

.expertise-card:nth-child(5):hover {
  border-color: var(--accent-blue);
}

.expertise-card:nth-child(5) .expertise-icon {
  background: rgba(59, 130, 246, 0.12);
}

.expertise-card:nth-child(5) .expertise-icon svg {
  stroke: var(--accent-blue);
}

.expertise-icon {
  width: clamp(48px, 8vw, 64px);
  height: clamp(48px, 8vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(0.6rem, 1.5vw, 1rem);
  margin: 0;
  transition: all 0.3s;
  grid-row: 1 / span 2;
}

.expertise-card:hover .expertise-icon {
  transform: scale(1.1) rotate(5deg);
}

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

.expertise-card h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  margin: 0;
  align-self: center;
  grid-column: 2;
}

.expertise-card p {
  color: var(--text-secondary);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.6;
  grid-column: 2;
}

/* ============================================================================
   Connect Section
   ============================================================================ */

.connect-section {
  padding: clamp(3rem, 6vh, 5rem) 0;
  border-top: 1px solid var(--border);
}

.connect-grid {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  flex-wrap: wrap;
}

.connect-link {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 0.85rem);
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: clamp(0.6rem, 1.5vw, 0.9rem);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  transition: all 0.2s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 var(--light-subtle);
}

.connect-link:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.connect-link svg {
  width: clamp(18px, 2vw, 22px);
  height: clamp(18px, 2vw, 22px);
  stroke: var(--primary);
}

/* Branded Social Icon Colors */
.connect-link.linkedin-icon svg,
.connect-link:has(.linkedin-icon) svg {
  stroke: #0A66C2;
  filter: drop-shadow(0 0 8px rgba(10, 102, 194, 0.4));
}

.connect-link:has(.github-icon) svg {
  stroke: #f8fafc;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
}

html[data-theme="light"] .connect-link:has(.github-icon) svg {
  stroke: #0f172a;
  filter: drop-shadow(0 0 8px rgba(15, 23, 42, 0.25));
}

.connect-link:has(.threads-icon) svg {
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
}

.connect-link:has(.email-icon) svg {
  stroke: var(--accent-orange);
  filter: drop-shadow(0 0 8px oklch(75% 0.2 65 / 0.45));
}

.connect-link:has(.promptfolio-icon) svg {
  fill: url(#sparkle-gradient);
  stroke: none;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.5));
  animation: sparkle 4s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.7));
  }
}

/* ============================================================================
   Footer - Logical Properties
   ============================================================================ */

/* Container context for footer responsiveness */
.site-footer .container {
  container-type: inline-size;
  container-name: footer;
}

.site-footer {
  padding-block: var(--space-lg);
  border-block-start: 1px solid var(--border);
}

.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
}

/* Container query: stack footer content on narrow containers */
@container footer (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-sm);
  transition: color var(--duration-fast);
  /* Touch target compliance */
  min-block-size: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
}

.footer-links a:hover {
  color: var(--primary);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Touch target compliance */
  inline-size: var(--touch-target-comfortable);
  block-size: var(--touch-target-comfortable);
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.35);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.8);
}

.theme-toggle:hover {
  color: var(--text-primary);
  border-color: rgba(16, 185, 129, 0.3);
}

.theme-toggle-icon {
  display: inline-flex;
  position: relative;
  width: 18px;
  height: 18px;
}

.theme-toggle-icon svg {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-toggle-icon .icon-sun {
  opacity: 0;
  transform: rotate(-90deg);
}

html[data-theme="light"] .theme-toggle-icon .icon-sun {
  opacity: 1;
  transform: rotate(0deg);
}

html[data-theme="light"] .theme-toggle-icon .icon-moon {
  opacity: 0;
  transform: rotate(90deg);
}

.theme-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-copy {
  color: var(--text-muted);
  font-size: var(--font-xs);
  text-align: center;
}

.footer-tagline {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-style: italic;
  margin-block-end: var(--space-xs);
  text-align: center;
  text-shadow: var(--text-shadow-soft);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Media query fallback for browsers without container query support */
@supports not (container-type: inline-size) {
  /* Stats section fallback */
  @media (min-width: 640px) {
    .stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-lg);
      max-inline-size: min(820px, 100%);
      margin-inline: auto;
    }
  }
  @media (min-width: 900px) {
    .stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-xl);
    }
  }

  /* Expertise section fallback */
  @media (min-width: 640px) {
    .expertise-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 900px) {
    .expertise-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Footer fallback */
  @media (max-width: 480px) {
    .footer-content {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }
  }
}

/* ============================================================================
   Animations
   ============================================================================ */

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

/* ============================================================================
   Scrollbars
   ============================================================================ */

:root {
  --scrollbar-thumb: rgba(148, 163, 184, 0.45);
  --scrollbar-track: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] {
  --scrollbar-thumb: rgba(15, 23, 42, 0.35);
  --scrollbar-track: rgba(15, 23, 42, 0.08);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Icon-specific animations */
@keyframes draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes glow {
  0%, 100% {
    filter: drop-shadow(0 0 4px currentColor);
  }
  50% {
    filter: drop-shadow(0 0 12px currentColor);
  }
}

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

@keyframes rotate3d {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* Apply animations to specific icons */
.qa-icon .checkmark-draw {
  animation: draw 1.5s ease-in-out infinite;
  animation-delay: 0.5s;
}

.ai-icon svg {
  animation: glow 2s ease-in-out infinite;
}

.fullstack-icon svg {
  animation: float 3s ease-in-out infinite;
}

.webxr-icon svg {
  animation: rotate3d 8s linear infinite;
  transform-style: preserve-3d;
}

.comms-icon svg {
  animation: commsGlow 5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.25));
}

@keyframes commsGlow {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.2));
  }
  50% {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.45));
  }
}

/* Staggered animations for expertise cards */
.expertise-card:nth-child(1) {
  animation: fadeInUp 0.8s ease-out 0.1s both;
}

.expertise-card:nth-child(2) {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.expertise-card:nth-child(3) {
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.expertise-card:nth-child(4) {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.expertise-card:nth-child(5) {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

/* Respect user motion preferences */
@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;
  }
}

/* ============================================================================
   Responsive Design (Mobile-First Breakpoints)
   ============================================================================ */

/* Large mobile / Small tablets (640px+) */
@media (min-width: 640px) {
  .secondary-cta {
    flex-direction: row; /* Side by side on larger screens */
    justify-content: center;
  }

  .secondary-cta .btn {
    flex: 0 1 auto; /* Don't grow, but can shrink */
  }

  .btn {
    justify-content: flex-start;
  }
}

/* Small tablets (720px+) */
@media (min-width: 720px) {
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    align-content: center;
    justify-items: center;
    max-width: min(820px, 100%);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vh, 3rem) 0;
  }

  .stat {
    width: 100%;
  }

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

  .expertise-card:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 620px);
    margin: 0 auto;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .hero-cta-section {
    gap: 1.75rem;
  }

  .secondary-cta {
    gap: 1.5rem;
  }

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

  .container {
    max-width: 1200px;
  }

  .stats {
    gap: clamp(1.75rem, 3.2vw, 3rem);
    max-width: min(900px, 100%);
  }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}

/* Ultra-wide / 4K (1920px+) */
@media (min-width: 1920px) {
  .container {
    max-width: 1400px;
  }

  body {
    font-size: 18px;
  }
}

/* 4K displays (3840px+) */
@media (min-width: 3840px) {
  .container {
    max-width: 1600px;
  }

  body {
    font-size: 20px;
  }
}