/* Business Growth Modules Widget Styles */

/* Animation classes */
.animate-in {
    animation: enter var(--tw-duration, .15s) var(--tw-ease, ease);
}

.fade-in-0 {
    --tw-enter-opacity: 0;
}

.slide-in-from-bottom-2 {
    --tw-enter-translate-y: calc(2 * var(--spacing));
}

.zoom-in-95 {
    --tw-enter-scale: .95;
}

/* Initial hidden state for animation */
.business-section.animate-on-scroll {
    opacity: 0;
}

.business-section.animate-on-scroll .business-title {
    opacity: 0;
    transform: none;
}

.business-section.animate-on-scroll .business-description {
    opacity: 0;
    transform: none;
}

.business-section.animate-on-scroll .business-grid {
    opacity: 0;
    transform: none;
}

.business-section.animate-on-scroll .business-module {
    opacity: 0;
    transform: none;
}

/* Animated state */
.business-section.animate-on-scroll.visible {
    opacity: 1;
    transition: opacity 0.8s ease;
}

.business-section.animate-on-scroll.visible .business-title {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 0.1s;
}

.business-section.animate-on-scroll.visible .business-description {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 0.3s;
}

.business-section.animate-on-scroll.visible .business-grid {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 0.5s;
}

.business-section.animate-on-scroll.visible .business-module:nth-child(1) {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 0.7s;
}

.business-section.animate-on-scroll.visible .business-module:nth-child(2) {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 0.9s;
}

.business-section.animate-on-scroll.visible .business-module:nth-child(3) {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 1.1s;
}

.business-section.animate-on-scroll.visible .business-module:nth-child(4) {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 1.3s;
}

.business-section.animate-on-scroll.visible .business-module:nth-child(5) {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 1.5s;
}

.business-section.animate-on-scroll.visible .business-module:nth-child(6) {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 1.7s;
}

/* Business Section Styles */
.business-section {
    --color-blue-400: oklch(.707 .165 254.624);
    --color-blue-500: oklch(.623 .214 259.815);
    --color-blue-600: oklch(.546 .245 262.881);
    --color-blue-700: oklch(.488 .243 264.376);
    --color-purple-200: oklch(.902 .063 306.703);
    --color-purple-400: oklch(.714 .203 305.504);
    --color-purple-500: oklch(.627 .265 303.9);
    --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-800: oklch(.278 .033 256.848);
    --color-gray-900: oklch(.21 .034 264.665);
    --color-white: #fff;
    --spacing: .25rem;
    --container-6xl: 72rem;
    --container-4xl: 56rem;
    --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;
    --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-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-xl: calc(var(--radius) + 4px);
    --radius-full: 3.40282e38px;
    --tw-ease: cubic-bezier(.4, 0, .2, 1);
    --tw-duration: .5s;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scale-z: 1;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: #0000001a;
    --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;
    --radius: .625rem;
}

.business-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--spacing) * 12) calc(var(--spacing) * 4);
    background-color: transparent;
    overflow: hidden;
}

@media (min-width: 640px) {
    .business-section {
        padding: calc(var(--spacing) * 16) calc(var(--spacing) * 6);
    }
}

@media (min-width: 768px) {
    .business-section {
        padding: calc(var(--spacing) * 20) calc(var(--spacing) * 8);
    }
}

@media (min-width: 1024px) {
    .business-section {
        padding: calc(var(--spacing) * 24) calc(var(--spacing) * 10);
    }
}

.business-container {
    max-width: var(--container-6xl);
    margin: 0 auto;
    width: 100%;
}

.business-content {
    text-align: center;
    max-width: var(--container-4xl);
    margin: 0 auto;
}

.business-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: calc(var(--spacing) * 4);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
    opacity: 1;
    transform: none;
}

@media (min-width: 640px) {
    .business-title {
        font-size: var(--text-4xl);
        margin-bottom: calc(var(--spacing) * 5);
    }
}

@media (min-width: 768px) {
    .business-title {
        font-size: var(--text-5xl);
    }
}

@media (min-width: 1024px) {
    .business-title {
        font-size: var(--text-6xl);
    }
}

.business-description {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    margin-bottom: calc(var(--spacing) * 8);
    line-height: var(--leading-relaxed);
    padding: 0 calc(var(--spacing) * 4);
    opacity: 1;
    transform: none;
}

@media (min-width: 640px) {
    .business-description {
        font-size: var(--text-lg);
        margin-bottom: calc(var(--spacing) * 10);
        padding: 0;
    }
}

@media (min-width: 768px) {
    .business-description {
        font-size: var(--text-xl);
        margin-bottom: calc(var(--spacing) * 12);
    }
}

.business-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) * 6);
    margin-top: calc(var(--spacing) * 8);
    opacity: 1;
}

@media (min-width: 640px) {
    .business-grid {
        gap: calc(var(--spacing) * 8);
        margin-top: calc(var(--spacing) * 10);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .business-grid {
        margin-top: calc(var(--spacing) * 12);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .business-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.business-module {
    padding: calc(var(--spacing) * 6);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    transition-property: background-color, box-shadow, transform;
    transition-timing-function: var(--tw-ease);
    transition-duration: var(--tw-duration);
    opacity: 1;
    transform: none;
}

@media (min-width: 640px) {
    .business-module {
        padding: calc(var(--spacing) * 8);
    }
}

/* Hover Effects */
.business-module:hover {
    background-color: var(--color-white);
    --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);
    transform: translateY(-4px);
    transition-duration: 1.5s;
}

.business-module-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--color-blue-500), var(--color-purple-500));
    opacity: 0;
    border-radius: var(--radius-xl);
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease);
    transition-duration: var(--tw-duration);
    transform: scale(0.8);
}

.business-module:hover .business-module-gradient {
    opacity: 0.1;
    transform: scale(1);
}

.business-module-indicator {
    position: absolute;
    top: calc(var(--spacing) * 3);
    right: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    background: linear-gradient(to bottom right, var(--color-blue-400), var(--color-purple-400));
    border-radius: var(--radius-full);
    opacity: 0.8;
    transform: scale(1.01352);
    animation: pulse 2s ease-in-out infinite;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease);
    transition-duration: 1.5s;
}

@media (min-width: 640px) {
    .business-module-indicator {
        top: calc(var(--spacing) * 4);
        right: calc(var(--spacing) * 4);
    }
}

.business-module:hover .business-module-indicator {
    opacity: 1;
    animation: pulse 1s ease-in-out infinite;
}

.business-module-content {
    position: relative;
    z-index: 10;
}

.business-module-subtitle {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-blue-600);
    margin-bottom: calc(var(--spacing) * 3);
    transition-property: color;
    transition-timing-function: var(--tw-ease);
    transition-duration: .3s;
}

@media (min-width: 640px) {
    .business-module-subtitle {
        font-size: var(--text-2xl);
        margin-bottom: calc(var(--spacing) * 4);
    }
}

.business-module:hover .business-module-subtitle {
    color: var(--color-blue-700);
}

.business-module-title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    margin-bottom: calc(var(--spacing) * 3);
    transition-property: color;
    transition-timing-function: var(--tw-ease);
    transition-duration: .3s;
}

@media (min-width: 640px) {
    .business-module-title {
        font-size: var(--text-lg);
    }
}

.business-module:hover .business-module-title {
    color: var(--color-gray-800);
}

.business-module-description {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    transition-property: color;
    transition-timing-function: var(--tw-ease);
    transition-duration: .3s;
}

@media (min-width: 640px) {
    .business-module-description {
        font-size: var(--text-base);
    }
}

.business-module:hover .business-module-description {
    color: var(--color-gray-700);
}

.business-module-accent {
    position: absolute;
    bottom: calc(var(--spacing) * -1);
    left: calc(var(--spacing) * -1);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    background: linear-gradient(to top right, var(--color-blue-200), var(--color-purple-200));
    border-radius: var(--radius-full);
    opacity: 0;
    transform: translateX(1.59723px) translateY(-13.9931px) scale(1.08993);
    transition-property: opacity;
    transition-timing-function: var(--tw-ease);
    transition-duration: 1.5s;
}

@media (min-width: 640px) {
    .business-module-accent {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
    }
}

.business-module:hover .business-module-accent {
    opacity: 0.4;
}

/* Utility Classes */
.min-h-screen {
    min-height: 100vh;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

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

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    inset: 0;
}

.z-10 {
    z-index: 10;
}

.overflow-hidden {
    overflow: hidden;
}

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

.w-full {
    width: 100%;
}

.group:hover .group-hover\:opacity-10 {
    opacity: 0.1;
}

.group:hover .group-hover\:opacity-60 {
    opacity: 0.6;
}

.group:hover .group-hover\:opacity-30 {
    opacity: 0.3;
}

.group:hover .group-hover\:text-blue-700 {
    color: var(--color-blue-700);
}

.group:hover .group-hover\:text-gray-800 {
    color: var(--color-gray-800);
}

.group:hover .group-hover\:text-gray-700 {
    color: var(--color-gray-700);
}

.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease);
    transition-duration: var(--tw-duration);
}

.transition-colors {
    transition-property: color;
    transition-timing-function: var(--tw-ease);
    transition-duration: .3s;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease);
    transition-duration: .3s;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: var(--tw-ease);
    transition-duration: var(--tw-duration);
}

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

.duration-500 {
    transition-duration: var(--tw-duration);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

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

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

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--color-blue-500), var(--color-purple-500));
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--color-blue-400), var(--color-purple-400));
}

.bg-gradient-to-tr {
    background-image: linear-gradient(to top right, var(--color-blue-200), var(--color-purple-200));
}

.from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --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));
}

.to-purple-500 {
    --tw-gradient-to: var(--color-purple-500);
    --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));
}

.from-blue-400 {
    --tw-gradient-from: var(--color-blue-400);
    --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));
}

.to-purple-400 {
    --tw-gradient-to: var(--color-purple-400);
    --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));
}

.from-blue-200 {
    --tw-gradient-from: var(--color-blue-200);
    --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));
}

.to-purple-200 {
    --tw-gradient-to: var(--color-purple-200);
    --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));
}

.text-blue-600 {
    color: var(--color-blue-600);
}

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

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

.text-gray-800 {
    color: var(--color-gray-800);
}

.text-gray-900 {
    color: var(--color-gray-900);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

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

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

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

.shadow-lg {
    --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);
}

.opacity-0 {
    opacity: 0;
}

.opacity-10 {
    opacity: 0.1;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-60 {
    opacity: 0.6;
}

.scale-0\.8 {
    transform: scale(0.8);
}

.scale-1 {
    transform: scale(1);
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}