/* About Us Widget */

#aboutus {
  /* CSS Variables */
  --color-blue-600: oklch(.546 .245 262.881);
  --color-purple-600: oklch(.558 .288 302.321);
  --color-gray-50: oklch(.985 .002 247.839);
  --color-gray-600: oklch(.446 .03 256.802);
  --color-gray-700: oklch(.373 .034 259.733);
  --color-gray-900: oklch(.21 .034 264.665);
  --color-white: #fff;
  --spacing: .25rem;
  --container-4xl: 56rem;
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --leading-tight: 1.25;
  --leading-relaxed: 1.625;
  --radius-2xl: 1rem;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-color: initial;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-gradient-position: to right in oklab;
  --tw-gradient-from: #0000;
  --tw-gradient-via: #0000;
  --tw-gradient-to: #0000;
  --tw-gradient-stops: initial;
  --tw-gradient-via-stops: initial;
  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;
}

/* Layout classes */
#aboutus {
  /* Header spacing - responsive top margin to avoid fixed header overlap */
  margin-top: 4rem; /* Default: 64px */
}

#aboutus .min-h-screen {
  min-height: 100vh;
}

#aboutus .bg-white {
  background-color: var(--color-white);
}

#aboutus .max-w-4xl {
  max-width: var(--container-4xl);
}

#aboutus .mx-auto {
  margin-inline: auto;
}

#aboutus .text-center {
  text-align: center;
}

/* Spacing */
#aboutus .py-12 {
  padding-block: calc(var(--spacing) * 12);
}

#aboutus .px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

#aboutus .mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}

#aboutus .mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

#aboutus .mb-12 {
  margin-bottom: calc(var(--spacing) * 12);
}

#aboutus .mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}

#aboutus .mt-16 {
  margin-top: calc(var(--spacing) * 16);
}

#aboutus .p-6 {
  padding: calc(var(--spacing) * 6);
}

/* Typography */
#aboutus .text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl--line-height);
}

#aboutus .text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}

#aboutus .text-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

#aboutus .text-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

#aboutus .text-base {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}

#aboutus .font-semibold {
  font-weight: var(--font-weight-semibold);
}

#aboutus .leading-tight {
  line-height: var(--leading-tight);
}

#aboutus .leading-relaxed {
  line-height: var(--leading-relaxed);
}

/* Colors */
#aboutus .text-gray-900 {
  color: var(--color-gray-900);
}

#aboutus .text-gray-700 {
  color: var(--color-gray-700);
}

#aboutus .text-gray-600 {
  color: var(--color-gray-600);
}

#aboutus .bg-gray-50 {
  background-color: var(--color-gray-50);
}

/* Gradient line */
#aboutus .w-20 {
  width: calc(var(--spacing) * 20);
}

#aboutus .h-1 {
  height: calc(var(--spacing) * 1);
}

#aboutus .bg-gradient-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}

#aboutus .bg-gradient-to-r.from-blue-600.to-purple-600 {
  --tw-gradient-from: var(--color-blue-600);
  --tw-gradient-to: var(--color-purple-600);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  background-image: linear-gradient(to right, var(--color-blue-600), var(--color-purple-600));
}

/* Grid layout */
#aboutus .grid {
  display: grid;
}

#aboutus .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

#aboutus .gap-6 {
  gap: calc(var(--spacing) * 6);
}

/* Border radius */
#aboutus .rounded-xl {
  border-radius: var(--radius-2xl);
}

/* Prose styles */
#aboutus .prose {
  color: var(--color-gray-700);
  max-width: 65ch;
}

#aboutus .prose-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

#aboutus .max-w-none {
  max-width: none;
}

#aboutus .space-y-6 > :not(:last-child) {
  margin-bottom: calc(var(--spacing) * 6);
}

/* Transitions and hover effects */
#aboutus .transition-all {
  transition-property: all;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

#aboutus .duration-300 {
  transition-duration: .3s;
}

/* Optimized hover effects for feature cards - only after they've appeared */
.features-animate-on-scroll.features-visible .p-6 {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.6s ease, transform 0.6s ease !important;
}

.features-animate-on-scroll.features-visible .p-6:hover {
  background-color: var(--color-white) !important;
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

#aboutus .hover\:bg-white:hover {
  background-color: var(--color-white);
}

#aboutus .hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* Responsive breakpoints */
@media (width >= 40rem) {
  /* Tablet spacing from header */
  #aboutus {
    margin-top: 5rem; /* Tablet: 80px */
  }
  #aboutus .sm\:py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  
  #aboutus .sm\:px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  
  #aboutus .sm\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }
  
  #aboutus .sm\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }
  
  #aboutus .sm\:text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }
  
  #aboutus .sm\:text-lg {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }
  
  #aboutus .sm\:mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  
  #aboutus .sm\:mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  
  #aboutus .sm\:mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  
  #aboutus .sm\:mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }
  
  #aboutus .sm\:w-24 {
    width: calc(var(--spacing) * 24);
  }
  
  #aboutus .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  #aboutus .sm\:gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  
  #aboutus .sm\:space-y-8 > :not(:last-child) {
    margin-bottom: calc(var(--spacing) * 8);
  }
}

@media (width >= 48rem) {
  /* Desktop spacing from header */
  #aboutus {
    margin-top: 6rem; /* Desktop: 96px */
  }
  #aboutus .md\:py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  
  #aboutus .md\:px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  
  #aboutus .md\:text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
  }
  
  #aboutus .md\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }
  
  #aboutus .md\:mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
  
  #aboutus .md\:mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }
}

@media (width >= 64rem) {
  /* Large desktop spacing from header */
  #aboutus {
    margin-top: 5rem;
  }
  #aboutus .lg\:py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  
  #aboutus .lg\:px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  
  #aboutus .lg\:text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
  }
  
  #aboutus .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Animation System - Main Content */
#aboutus.animate-on-scroll .text-center { opacity: 0; transform: translateY(30px); }
#aboutus.animate-on-scroll h1 { opacity: 0; transform: translateY(30px); }
#aboutus.animate-on-scroll .bg-gradient-to-r { opacity: 0; transform: scaleX(0); transform-origin: center; }
#aboutus.animate-on-scroll .prose { opacity: 0; transform: translateY(30px); }

#aboutus.animate-on-scroll.visible .text-center { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; }
#aboutus.animate-on-scroll.visible h1 { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s; }
#aboutus.animate-on-scroll.visible .bg-gradient-to-r { opacity: 1; transform: scaleX(1); transform-origin: center; transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s; }
#aboutus.animate-on-scroll.visible .prose { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s; }

/* Animation System - Features Section */
.features-animate-on-scroll h2 { opacity: 0; transform: translateY(30px); }
.features-animate-on-scroll .p-6:nth-child(1) { opacity: 0; transform: translateY(50px); }
.features-animate-on-scroll .p-6:nth-child(2) { opacity: 0; transform: translateY(50px); }
.features-animate-on-scroll .p-6:nth-child(3) { opacity: 0; transform: translateY(50px); }
.features-animate-on-scroll .p-6:nth-child(4) { opacity: 0; transform: translateY(50px); }
.features-animate-on-scroll .p-6:nth-child(5) { opacity: 0; transform: translateY(50px); }
.features-animate-on-scroll .p-6:nth-child(6) { opacity: 0; transform: translateY(50px); }

.features-animate-on-scroll.features-visible h2 { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; }
.features-animate-on-scroll.features-visible .p-6:nth-child(1) { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s, background-color 0.2s ease, box-shadow 0.2s ease; }
.features-animate-on-scroll.features-visible .p-6:nth-child(2) { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s, background-color 0.2s ease, box-shadow 0.2s ease; }
.features-animate-on-scroll.features-visible .p-6:nth-child(3) { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s, background-color 0.2s ease, box-shadow 0.2s ease; }
.features-animate-on-scroll.features-visible .p-6:nth-child(4) { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 1.0s, transform 0.6s ease 1.0s, background-color 0.2s ease, box-shadow 0.2s ease; }
.features-animate-on-scroll.features-visible .p-6:nth-child(5) { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 1.2s, transform 0.6s ease 1.2s, background-color 0.2s ease, box-shadow 0.2s ease; }
.features-animate-on-scroll.features-visible .p-6:nth-child(6) { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 1.4s, transform 0.6s ease 1.4s, background-color 0.2s ease, box-shadow 0.2s ease; }

/* Second phase: lift cards slightly after appearing */
.features-animate-on-scroll.features-visible .p-6:nth-child(1) { animation: liftCard 0.4s ease 1.8s forwards; }
.features-animate-on-scroll.features-visible .p-6:nth-child(2) { animation: liftCard 0.4s ease 2.0s forwards; }
.features-animate-on-scroll.features-visible .p-6:nth-child(3) { animation: liftCard 0.4s ease 2.2s forwards; }
.features-animate-on-scroll.features-visible .p-6:nth-child(4) { animation: liftCard 0.4s ease 2.4s forwards; }
.features-animate-on-scroll.features-visible .p-6:nth-child(5) { animation: liftCard 0.4s ease 2.6s forwards; }
.features-animate-on-scroll.features-visible .p-6:nth-child(6) { animation: liftCard 0.4s ease 2.8s forwards; }

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