body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    /*font-weight: <weight>;*/
    font-style: normal;
    color: var(--color-dark-grey);
    font-display: swap;
}
/* Define CSS custom properties for Tailwind theme colors */
:root {
    --color-primary: #C34D8B;
    --color-secondary: #A14CA9;
    --color-secondary-accent: #9B4CAE;
    --color-accent: #804BC4;
    --color-dark-grey: rgba(51, 51, 51, 0.6);
    --color-gradient: linear-gradient(
            90deg,
            var(--color-primary) 0%,
            var(--color-secondary) 33%,
            var(--color-secondary-accent) 55%,
            var(--color-accent) 100%
    );
}

/* Define Tailwind utility classes for custom colors */
.bg-primary {
    background-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}

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

.text-secondary {
    color: var(--color-secondary);
}

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

.text-accent {
    color: var(--color-accent);
}

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

.text-secondary-accent {
    color: var(--color-secondary-accent);
}

.text-dark-grey {
    color: var(--color-dark-grey);
}

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

/* Primary color opacity variants */
.bg-primary\/10 { background-color: rgba(195, 77, 139, 0.1); }
.bg-primary\/20 { background-color: rgba(195, 77, 139, 0.2); }
.bg-primary\/30 { background-color: rgba(195, 77, 139, 0.3); }
.bg-primary\/40 { background-color: rgba(195, 77, 139, 0.4); }
.bg-primary\/50 { background-color: rgba(195, 77, 139, 0.5); }
.bg-primary\/60 { background-color: rgba(195, 77, 139, 0.6); }
.bg-primary\/70 { background-color: rgba(195, 77, 139, 0.7); }
.bg-primary\/80 { background-color: rgba(195, 77, 139, 0.8); }
.bg-primary\/90 { background-color: rgba(195, 77, 139, 0.9); }

.text-primary\/10 { color: rgba(195, 77, 139, 0.1); }
.text-primary\/20 { color: rgba(195, 77, 139, 0.2); }
.text-primary\/30 { color: rgba(195, 77, 139, 0.3); }
.text-primary\/40 { color: rgba(195, 77, 139, 0.4); }
.text-primary\/50 { color: rgba(195, 77, 139, 0.5); }
.text-primary\/60 { color: rgba(195, 77, 139, 0.6); }
.text-primary\/70 { color: rgba(195, 77, 139, 0.7); }
.text-primary\/80 { color: rgba(195, 77, 139, 0.8); }
.text-primary\/90 { color: rgba(195, 77, 139, 0.9); }

/* Secondary color opacity variants */
.bg-secondary\/10 { background-color: rgba(161, 76, 169, 0.1); }
.bg-secondary\/20 { background-color: rgba(161, 76, 169, 0.2); }
.bg-secondary\/30 { background-color: rgba(161, 76, 169, 0.3); }
.bg-secondary\/40 { background-color: rgba(161, 76, 169, 0.4); }
.bg-secondary\/50 { background-color: rgba(161, 76, 169, 0.5); }
.bg-secondary\/60 { background-color: rgba(161, 76, 169, 0.6); }
.bg-secondary\/70 { background-color: rgba(161, 76, 169, 0.7); }
.bg-secondary\/80 { background-color: rgba(161, 76, 169, 0.8); }
.bg-secondary\/90 { background-color: rgba(161, 76, 169, 0.9); }

.text-secondary\/10 { color: rgba(161, 76, 169, 0.1); }
.text-secondary\/20 { color: rgba(161, 76, 169, 0.2); }
.text-secondary\/30 { color: rgba(161, 76, 169, 0.3); }
.text-secondary\/40 { color: rgba(161, 76, 169, 0.4); }
.text-secondary\/50 { color: rgba(161, 76, 169, 0.5); }
.text-secondary\/60 { color: rgba(161, 76, 169, 0.6); }
.text-secondary\/70 { color: rgba(161, 76, 169, 0.7); }
.text-secondary\/80 { color: rgba(161, 76, 169, 0.8); }
.text-secondary\/90 { color: rgba(161, 76, 169, 0.9); }

/* Accent color opacity variants */
.bg-accent\/10 { background-color: rgba(128, 75, 196, 0.1); }
.bg-accent\/20 { background-color: rgba(128, 75, 196, 0.2); }
.bg-accent\/30 { background-color: rgba(128, 75, 196, 0.3); }
.bg-accent\/40 { background-color: rgba(128, 75, 196, 0.4); }
.bg-accent\/50 { background-color: rgba(128, 75, 196, 0.5); }
.bg-accent\/60 { background-color: rgba(128, 75, 196, 0.6); }
.bg-accent\/70 { background-color: rgba(128, 75, 196, 0.7); }
.bg-accent\/80 { background-color: rgba(128, 75, 196, 0.8); }
.bg-accent\/90 { background-color: rgba(128, 75, 196, 0.9); }

.text-accent\/10 { color: rgba(128, 75, 196, 0.1); }
.text-accent\/20 { color: rgba(128, 75, 196, 0.2); }
.text-accent\/30 { color: rgba(128, 75, 196, 0.3); }
.text-accent\/40 { color: rgba(128, 75, 196, 0.4); }
.text-accent\/50 { color: rgba(128, 75, 196, 0.5); }
.text-accent\/60 { color: rgba(128, 75, 196, 0.6); }
.text-accent\/70 { color: rgba(128, 75, 196, 0.7); }
.text-accent\/80 { color: rgba(128, 75, 196, 0.8); }
.text-accent\/90 { color: rgba(128, 75, 196, 0.9); }

/* Hover states */
.hover\:bg-primary:hover {
    background-color: var(--color-primary);
}

.hover\:text-primary:hover {
    color: var(--color-primary);
}

.hover\:bg-secondary:hover {
    background-color: var(--color-secondary);
}

.hover\:text-secondary:hover {
    color: var(--color-secondary);
}

.hover\:bg-accent:hover {
    background-color: var(--color-accent);
}

.hover\:text-accent:hover {
    color: var(--color-accent);
}

.hover\:text-white:hover {
    color: white;
}

/* Border colors */
.border-primary {
    border-color: var(--color-primary);
}

.border-secondary {
    border-color: var(--color-secondary);
}

.border-accent {
    border-color: var(--color-accent);
}

/* Ring colors for focus states */
.ring-primary {
    --tw-ring-color: var(--color-primary);
}

.ring-secondary {
    --tw-ring-color: var(--color-secondary);
}

.ring-accent {
    --tw-ring-color: var(--color-accent);
}

/* Gradient utilities */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-bl {
    background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
}

.bg-gradient-to-tr {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.bg-gradient-to-tl {
    background-image: linear-gradient(to top left, var(--tw-gradient-stops));
}

.from-primary {
    --tw-gradient-from: var(--color-primary);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary {
    --tw-gradient-from: var(--color-secondary);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-accent {
    --tw-gradient-from: var(--color-accent);
    --tw-gradient-to: rgba(128, 75, 196, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary {
    --tw-gradient-to: var(--color-primary);
}

.to-secondary {
    --tw-gradient-to: var(--color-secondary);
}

.to-accent {
    --tw-gradient-to: var(--color-accent);
}

.via-primary {
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--color-primary), var(--tw-gradient-to);
}

.via-secondary {
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--color-secondary), var(--tw-gradient-to);
}

.via-accent {
    --tw-gradient-to: rgba(128, 75, 196, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--color-accent), var(--tw-gradient-to);
}

.via-secondary-accent {
    --tw-gradient-to: rgba(155, 76, 174, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--color-secondary-accent), var(--tw-gradient-to);
}

/* Primary gradient opacity variants */
.from-primary\/10 {
    --tw-gradient-from: rgba(195, 77, 139, 0.1);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/20 {
    --tw-gradient-from: rgba(195, 77, 139, 0.2);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/30 {
    --tw-gradient-from: rgba(195, 77, 139, 0.3);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/40 {
    --tw-gradient-from: rgba(195, 77, 139, 0.4);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/50 {
    --tw-gradient-from: rgba(195, 77, 139, 0.5);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/60 {
    --tw-gradient-from: rgba(195, 77, 139, 0.6);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/70 {
    --tw-gradient-from: rgba(195, 77, 139, 0.7);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/80 {
    --tw-gradient-from: rgba(195, 77, 139, 0.8);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/90 {
    --tw-gradient-from: rgba(195, 77, 139, 0.9);
    --tw-gradient-to: rgba(195, 77, 139, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Secondary gradient opacity variants */
.from-secondary\/10 {
    --tw-gradient-from: rgba(161, 76, 169, 0.1);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/20 {
    --tw-gradient-from: rgba(161, 76, 169, 0.2);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/30 {
    --tw-gradient-from: rgba(161, 76, 169, 0.3);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/40 {
    --tw-gradient-from: rgba(161, 76, 169, 0.4);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/50 {
    --tw-gradient-from: rgba(161, 76, 169, 0.5);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/60 {
    --tw-gradient-from: rgba(161, 76, 169, 0.6);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/70 {
    --tw-gradient-from: rgba(161, 76, 169, 0.7);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/80 {
    --tw-gradient-from: rgba(161, 76, 169, 0.8);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/90 {
    --tw-gradient-from: rgba(161, 76, 169, 0.9);
    --tw-gradient-to: rgba(161, 76, 169, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* To secondary gradient opacity variants */
.to-secondary\/10 {
    --tw-gradient-to: rgba(161, 76, 169, 0.1);
}

.to-secondary\/20 {
    --tw-gradient-to: rgba(161, 76, 169, 0.2);
}

.to-secondary\/30 {
    --tw-gradient-to: rgba(161, 76, 169, 0.3);
}

.to-secondary\/40 {
    --tw-gradient-to: rgba(161, 76, 169, 0.4);
}

.to-secondary\/50 {
    --tw-gradient-to: rgba(161, 76, 169, 0.5);
}

.to-secondary\/60 {
    --tw-gradient-to: rgba(161, 76, 169, 0.6);
}

.to-secondary\/70 {
    --tw-gradient-to: rgba(161, 76, 169, 0.7);
}

.to-secondary\/80 {
    --tw-gradient-to: rgba(161, 76, 169, 0.8);
}

.to-secondary\/90 {
    --tw-gradient-to: rgba(161, 76, 169, 0.9);
}

.focus\:ring-primary:focus {
    --tw-ring-color: var(--color-primary);
}

.focus\:ring-secondary:focus {
    --tw-ring-color: var(--color-secondary);
}

.focus\:ring-accent:focus {
    --tw-ring-color: var(--color-accent);
}

.rounded-left {
    border-radius: 5rem 5rem 5rem 20rem;
}

.rounded-right {
    border-radius: 5rem 5rem 20rem 5rem;
}

header img {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.blob {
    position: fixed;
    z-index: -1;
}

.roadmap-container {
    perspective: 1000px;
}

.stage {
    transition: all 0.3s ease;
}

.stage:hover {
    transform: translateY(-5px) scale(1.05);
}

.stage-dot {
    transition: all 0.3s ease;
}

.moving-figure {
    transition: left 0.1s ease-out;
}

.stage-text {
    transition: all 0.3s ease;
}

#blob-1 {
    top: -500px;
    left: -500px;
}

#blob-2 {
    bottom: -200px;
    left: 50dvw;
    transform: translateX(-50%);
}

#blob-3 {
    top: -100px;
    right: -100px;
}

/* Hero Light Styles */
.hero-light {
    position: relative;
}

.hero-light .container {
    position: relative;
    z-index: 2;
}

/* Grid layout for hero-light */
.hero-light .grid {
    min-height: 50vh;
}

.hero-light .bg-white\/90 {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-light .bg-white\/20 {
    background: rgba(255, 255, 255, 0.2);
}

.hero-light .border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}


/* Gradient backgrounds for hero-light */
.hero-light .bg-gradient-to-br {
    background: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary), var(--color-accent));
}

.hero-light .bg-gradient-to-r {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-accent));
}

/* Button styling for better contrast */
.hero-light .bg-white {
    background-color: rgba(255, 255, 255, 0.95);
}


/* Enhanced shadow for hero-light images */
.hero-light img {
    
}

/* Portfolio Section Styles */
.portfolio-section {
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
}

.portfolio-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.portfolio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.portfolio-card:hover::before {
    left: 100%;
}

.result-bar {
    position: relative;
    overflow: hidden;
    width: 0%;
    transition: width 1s ease-out;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    min-width: 0;
}

.result-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.counter {
    background: linear-gradient(45deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .portfolio-card {
        margin-bottom: 1rem;
    }
    
    .result-item {
        margin-bottom: 1rem;
    }
}

/* Page Transition Styles */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #C34D8B, #A14CA9, #9B4CAE, #804BC4);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Ensure smooth transitions for all sections */
main > section, 
header, 
footer {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Prevent body scroll during transitions */
body.transitioning {
    overflow: hidden;
}

/* Enhanced animation performance */
main > section, 
header, 
footer {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#main-content {
    padding-top: 100px;
}

.hero-light {
    padding-bottom: 100px;
}

/* Screen Reader Only Content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Focus indicators */
.focus\:ring-2:focus {
    --tw-ring-width: 2px;
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: var(--color-accent);
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-offset-color), var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-primary {
        color: #000;
    }
    
    .text-accent {
        color: #0000ff;
    }
    
    .bg-primary {
        background-color: #ffff00;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .portfolio-card::before {
        display: none;
    }
    
    .result-bar::after {
        display: none;
    }
}

#btn-more-content {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* Value Proposition Block Styles */
.value-proposition {
    position: relative;
    overflow: hidden;
}

.value-proposition::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.value-proposition .container {
    position: relative;
    z-index: 1;
}

/* Value proposition chips styling */
.value-proposition .chip {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.value-proposition .chip::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(195, 77, 139, 0.1), transparent);
    transition: left 0.5s;
}

.value-proposition .chip:hover::before {
    left: 100%;
}

.value-proposition .chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(195, 77, 139, 0.15);
    border-color: var(--color-primary);
}

.value-proposition .text-gray-600 {
    color: #4b5563; /* Sufficient contrast ratio */
}

.value-proposition .chip {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.value-proposition .chip:hover {
    background-color: #fef7ff;
}

/* Focus states for accessibility */
.value-proposition .chip:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* High contrast mode support for value proposition */
@media (prefers-contrast: high) {
    .value-proposition h2 {
        color: #000000;
    }
    
    .value-proposition .text-gray-600 {
        color: #000000;
    }
    
    .value-proposition .chip {
        background-color: #ffffff;
        border-color: #000000;
        color: #000000;
    }
}

/* Reduced motion support for value proposition */
@media (prefers-reduced-motion: reduce) {
    .value-proposition .chip::before {
        display: none;
    }
    
    .value-proposition .chip:hover {
        transform: none;
    }
}