:root {
    color-scheme: light;
    scroll-behavior: smooth;
}

:root.dark {
    color-scheme: dark;
}

body {
    font-family: 'Inter', 'system-ui', sans-serif;
}

.tri-green-color {
    color: #02A725;
}

.tri-blue-color {
    color: #3E7FEB;
}

.tri-red-color {
    color: #F10B0B;
}

/* Tailwind-style utilities for tri-colors */
.text-tri-green-color {
    color: #02A725;
}

.text-tri-blue-color {
    color: #3E7FEB;
}

.text-tri-red-color {
    color: #F10B0B;
}

.bg-tri-green-color {
    background-color: #02A725;
}

.bg-tri-blue-color {
    background-color: #3E7FEB;
}

.bg-tri-red-color {
    background-color: #F10B0B;
}

.border-tri-green-color {
    border-color: #02A725;
}

.border-tri-blue-color {
    border-color: #3E7FEB;
}

.border-tri-red-color {
    border-color: #F10B0B;
}

.hover\:border-tri-green-color\/50:hover {
    border-color: rgba(2, 167, 37, 0.5);
}

.hover\:border-tri-blue-color\/50:hover {
    border-color: rgba(62, 127, 235, 0.5);
}

.hover\:border-tri-red-color\/50:hover {
    border-color: rgba(241, 11, 11, 0.5);
}

.from-tri-green-color {
    --tw-gradient-from: #02A725;
    --tw-gradient-to: rgba(2, 167, 37, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-tri-blue-color {
    --tw-gradient-from: #3E7FEB;
    --tw-gradient-to: rgba(62, 127, 235, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-tri-red-color {
    --tw-gradient-from: #F10B0B;
    --tw-gradient-to: rgba(241, 11, 11, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-tri-green-color {
    --tw-gradient-to: rgba(2, 167, 37, 0);
    --tw-gradient-stops: var(--tw-gradient-from), #02A725, var(--tw-gradient-to);
}

.via-tri-blue-color {
    --tw-gradient-to: rgba(62, 127, 235, 0);
    --tw-gradient-stops: var(--tw-gradient-from), #3E7FEB, var(--tw-gradient-to);
}

.via-tri-red-color {
    --tw-gradient-to: rgba(241, 11, 11, 0);
    --tw-gradient-stops: var(--tw-gradient-from), #F10B0B, var(--tw-gradient-to);
}

.to-tri-green-color {
    --tw-gradient-to: #02A725;
}

.to-tri-blue-color {
    --tw-gradient-to: #3E7FEB;
}

.to-tri-red-color {
    --tw-gradient-to: #F10B0B;
}

.via-tri-green-color\/30 {
    --tw-gradient-to: rgba(2, 167, 37, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(2, 167, 37, 0.3), var(--tw-gradient-to);
}

.via-tri-blue-color\/30 {
    --tw-gradient-to: rgba(62, 127, 235, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(62, 127, 235, 0.3), var(--tw-gradient-to);
}

.via-tri-red-color\/30 {
    --tw-gradient-to: rgba(241, 11, 11, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(241, 11, 11, 0.3), var(--tw-gradient-to);
}

.via-tri-green-color\/50 {
    --tw-gradient-to: rgba(2, 167, 37, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(2, 167, 37, 0.5), var(--tw-gradient-to);
}

.via-tri-blue-color\/50 {
    --tw-gradient-to: rgba(62, 127, 235, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(62, 127, 235, 0.5), var(--tw-gradient-to);
}

.via-tri-red-color\/50 {
    --tw-gradient-to: rgba(241, 11, 11, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(241, 11, 11, 0.5), var(--tw-gradient-to);
}

.dark\:text-tri-green-color:is(.dark *) {
    color: #02A725;
}

.dark\:text-tri-blue-color:is(.dark *) {
    color: #3E7FEB;
}

.dark\:text-tri-red-color:is(.dark *) {
    color: #F10B0B;
}

.dark\:via-tri-green-color\/50:is(.dark *) {
    --tw-gradient-to: rgba(2, 167, 37, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(2, 167, 37, 0.5), var(--tw-gradient-to);
}

.dark\:via-tri-blue-color\/50:is(.dark *) {
    --tw-gradient-to: rgba(62, 127, 235, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(62, 127, 235, 0.5), var(--tw-gradient-to);
}

.dark\:via-tri-red-color\/50:is(.dark *) {
    --tw-gradient-to: rgba(241, 11, 11, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(241, 11, 11, 0.5), var(--tw-gradient-to);
}

.bg-tri-green-color\/10 {
    background-color: rgba(2, 167, 37, 0.1);
}

.bg-tri-blue-color\/10 {
    background-color: rgba(62, 127, 235, 0.1);
}

.bg-tri-red-color\/10 {
    background-color: rgba(241, 11, 11, 0.1);
}

.bg-tri-green-color\/5 {
    background-color: rgba(2, 167, 37, 0.05);
}

.bg-tri-blue-color\/5 {
    background-color: rgba(62, 127, 235, 0.05);
}

.bg-tri-red-color\/5 {
    background-color: rgba(241, 11, 11, 0.05);
}

.dark\:bg-tri-green-color\/10:is(.dark *) {
    background-color: rgba(2, 167, 37, 0.1);
}

.dark\:bg-tri-blue-color\/10:is(.dark *) {
    background-color: rgba(62, 127, 235, 0.1);
}

.dark\:bg-tri-red-color\/10:is(.dark *) {
    background-color: rgba(241, 11, 11, 0.1);
}

.dark\:bg-tri-green-color\/5:is(.dark *) {
    background-color: rgba(2, 167, 37, 0.05);
}

.dark\:bg-tri-blue-color\/5:is(.dark *) {
    background-color: rgba(62, 127, 235, 0.05);
}

.dark\:bg-tri-red-color\/5:is(.dark *) {
    background-color: rgba(241, 11, 11, 0.05);
}

/* Ensure elements are visible by default (fallback for GSAP) */
#welcome-heading,
#welcome-paragraph,
#welcome-cta,
#product h2,
#product .grid>div,
#portfolio h2,
#portfolio .grid>div,
#testimonials h2,
#testimonials .grid>div,
#contact-title-wrapper,
#contact-form-wrapper,
#contact-info-wrapper {
    opacity: 1;
    transform: translateY(0);
}

#product,
#portfolio,
#testimonials,
#contact-us {
    scroll-margin-top: 3rem;
}

/* Enhanced gradient utilities */
.bg-tri-gradient-blue {
    background: linear-gradient(135deg, #3E7FEB 0%, #2563eb 100%);
}

.bg-tri-gradient-green {
    background: linear-gradient(135deg, #02A725 0%, #16a34a 100%);
}

.bg-tri-gradient-red {
    background: linear-gradient(135deg, #F10B0B 0%, #dc2626 100%);
}

/* Enhanced shadow utilities */
.shadow-tri-blue {
    box-shadow: 0 10px 15px -3px rgba(62, 127, 235, 0.1), 0 4px 6px -2px rgba(62, 127, 235, 0.05);
}

.shadow-tri-green {
    box-shadow: 0 10px 15px -3px rgba(2, 167, 37, 0.1), 0 4px 6px -2px rgba(2, 167, 37, 0.05);
}

.shadow-tri-red {
    box-shadow: 0 10px 15px -3px rgba(241, 11, 11, 0.1), 0 4px 6px -2px rgba(241, 11, 11, 0.05);
}

/* Fix for transform/scale hover animations */
* {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
}

/* Enhanced hover animations for portfolio cards */
.hover\:scale-105:hover {
    transform: scale(1.05) !important;
    transition: all 0.3s ease-in-out;
}

.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem) scale(1.05) !important;
    transition: all 0.3s ease-in-out;
}

/* Enhanced hover animations for product cards */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1) !important;
    transition: all 0.3s ease-in-out;
}

.group:hover .group-hover\:rotate-\[-6deg\] {
    transform: scale(1.1) rotate(-6deg) !important;
    transition: all 0.3s ease-in-out;
}

.group:hover .group-hover\:rotate-\[6deg\] {
    transform: scale(1.1) rotate(6deg) !important;
    transition: all 0.3s ease-in-out;
}

/* Portfolio card specific animations */
.portfolio-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}

.portfolio-card:hover {
    transform: translateY(-0.25rem) scale(1.05);
}

/* Dark mode enhanced shadows */
.dark .shadow-tri-blue {
    box-shadow: 0 10px 15px -3px rgba(62, 127, 235, 0.2), 0 4px 6px -2px rgba(62, 127, 235, 0.1);
}

.dark .shadow-tri-green {
    box-shadow: 0 10px 15px -3px rgba(2, 167, 37, 0.2), 0 4px 6px -2px rgba(2, 167, 37, 0.1);
}

.dark .shadow-tri-red {
    box-shadow: 0 10px 15px -3px rgba(241, 11, 11, 0.2), 0 4px 6px -2px rgba(241, 11, 11, 0.1);
}