/* Shared styles across all pages */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors */
  --color-black: #000000;
  --color-cyan-bluish-gray: #abb8c3;
  --color-white: #ffffff;
  --color-pale-pink: #f78da7;
  --color-vivid-red: #cf2e2e;
  --color-luminous-vivid-orange: #ff6900;
  --color-luminous-vivid-amber: #fcb900;
  --color-light-green-cyan: #7bdcb5;
  --color-vivid-green-cyan: #00d084;
  --color-pale-cyan-blue: #8ed1fc;
  --color-vivid-cyan-blue: #0693e3;
  --color-vivid-purple: #9b51e0;
  --color-primary: #35e697;
  --color-secondary: #3896b6;
  --color-dark: #333333;
  --color-font: #666666;
  --color-transparent: transparent;
  
  /* Gradients */
  --gradient-vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
  --gradient-light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
  --gradient-luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
  --gradient-luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
  --gradient-very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
  --gradient-cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
  --gradient-blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
  --gradient-blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
  --gradient-luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
  --gradient-pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
  --gradient-electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
  --gradient-midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background: #fafafa;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 80% 20%, rgba(255, 193, 7, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 60% 40%, rgba(255, 152, 0, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 40% 60%, rgba(255, 193, 7, 0.04) 0%, transparent 35%),
        radial-gradient(circle at 20% 80%, rgba(255, 152, 0, 0.05) 0%, transparent 30%);
    pointer-events: none;
    z-index: -1;
    animation: gentle-pulse 8s ease-in-out infinite;
}

@keyframes gentle-pulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}
/* Hero section background */
#vanta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--gradient-midnight);
}

/* Gradient backgrounds */
.gradient-primary {
    background: var(--gradient-luminous-vivid-amber-to-luminous-vivid-orange);
}

.gradient-secondary {
    background: var(--gradient-vivid-cyan-blue-to-vivid-purple);
}

.gradient-accent {
    background: var(--gradient-light-green-cyan-to-vivid-green-cyan);
}

.gradient-warm {
    background: var(--gradient-luminous-dusk);
}

.gradient-cool {
    background: var(--gradient-cool-to-warm-spectrum);
}
/* Custom utility classes */
.bg-primary {
    background-color: var(--color-primary);
}

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

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

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

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

/* Pulse animations */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

@keyframes pulse-fast {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pulse-fast {
    animation: pulse-fast 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 3D Transform Effects */
.transform-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.rotate-3d:hover {
    transform: rotateY(5deg) rotateX(5deg);
    transition: transform 0.3s ease;
}

/* Enhanced button styles with gradients - Completely Redesigned */
.btn-gradient {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;
}

.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn-gradient:hover::before {
    left: 100%;
}

.btn-gradient:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #92400e 100%);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-gradient:active {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

/* Button Icon Styles */
.btn-gradient i {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.btn-gradient:hover i {
    transform: scale(1.1) rotate(5deg);
}

/* Responsive Button Styles */
@media (max-width: 768px) {
    .btn-gradient {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
        min-height: 50px;
        border-radius: 14px;
    }
    
    .btn-gradient i {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .btn-gradient {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        min-height: 48px;
        border-radius: 12px;
    }
    
    .btn-gradient i {
        width: 16px;
        height: 16px;
    }
}

/* Icon animations */
.icon-hover {
    transition: all 0.3s ease;
    display: inline-block;
}

.icon-hover:hover {
    transform: scale(1.2) rotate(10deg);
}
/* Enhanced 3D Card Effects */
.card-3d {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, 
        rgba(255, 255, 255, 0.3), 
        rgba(255, 255, 255, 0.1), 
        rgba(255, 255, 255, 0.3));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.card-3d:hover {
    transform: translateY(-15px) rotateY(5deg) rotateX(5deg) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.card-3d:hover::before {
    opacity: 1;
}

.card-3d-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
}

/* Solar background animations */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Solar Benefits Section Styles */
.solar-benefits-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.7) 100%);
    position: relative;
    overflow: hidden;
}

.solar-benefits-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 10% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 165, 0, 0.1) 0%, transparent 20%);
    opacity: 0.5;
    pointer-events: none;
}

.solar-title {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #ff8c00, #ff6b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(255, 140, 0, 0.2);
}

.solar-card-3d {
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateZ(0);
    z-index: 1;
}

.solar-card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, 
        rgba(255, 255, 255, 0.4), 
        rgba(255, 255, 255, 0.1), 
        rgba(255, 255, 255, 0.4));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.solar-card-3d::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.2) 0%, 
        rgba(255, 165, 0, 0.1) 30%, 
        transparent 70%);
    transform: rotate(30deg);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: -1;
}

.solar-card-3d:hover {
    transform: translateY(-15px) rotateY(8deg) rotateX(8deg) scale(1.03);
    box-shadow: 0 20px 40px rgba(255, 165, 0, 0.25);
}

.solar-card-3d:hover::before {
    opacity: 1;
}

.solar-card-3d:hover::after {
    opacity: 0.8;
}

.solar-icon-container {
    position: relative;
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.solar-card-3d:hover .solar-icon-container {
    transform: scale(1.15) rotateY(10deg) rotateX(10deg);
}

.solar-icon {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.solar-card-3d:hover .solar-icon {
    filter: drop-shadow(0 8px 16px rgba(255, 165, 0, 0.3)) brightness(1.1);
    transform: scale(1.1);
}

.solar-card-title {
    position: relative;
    transition: all 0.3s ease;
}

.solar-card-3d:hover .solar-card-title {
    color: #ff6b00;
    text-shadow: 0 2px 4px rgba(255, 107, 0, 0.2);
}

/* Solar glow effect for cards */
.solar-glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%), 
        rgba(255, 215, 0, 0.3) 0%, 
        rgba(255, 165, 0, 0.1) 30%, 
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.solar-card-3d:hover .solar-glow-effect {
    opacity: 0.6;
}
/* Solar energy themed cards */
.solar-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.solar-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(252, 185, 0, 0.1) 0%, 
        rgba(255, 105, 0, 0.05) 30%, 
        transparent 70%);
    transform: rotate(30deg);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.solar-card:hover::after {
    opacity: 1;
}

.solar-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(252, 185, 0, 0.2);
}

/* Section transitions */
.section-enter {
    opacity: 0;
    transform: translateY(50px) rotateX(10deg);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-enter.visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* Floating elements */
.floating {
    animation: float 6s ease-in-out infinite;
}

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

/* Glow effects */
.glow {
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.5);
}

.glow-blue {
    box-shadow: 0 0 20px rgba(6, 147, 227, 0.5);
}

.glow-purple {
    box-shadow: 0 0 20px rgba(155, 81, 224, 0.5);
}

/* Solar energy particle effects */
.solar-particle {
    position: absolute;
    background: var(--color-luminous-vivid-amber);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.solar-particle.animate {
    animation: particle-float 3s ease-out forwards;
}

@keyframes particle-float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(0);
        opacity: 0;
    }
}

/* Parallax scrolling effects */
.parallax-element {
    transform: translateZ(0);
    transition: transform 0.1s linear;
}
/* Cursor follower effect */
.cursor-follower {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-luminous-vivid-amber);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease;
}

.cursor-follower.expand {
    width: 40px;
    height: 40px;
    background: rgba(252, 185, 0, 0.1);
}
/* Hero 3D Sun Effect */
.hero-3d {
    perspective: 1000px;
    overflow: hidden;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), 
                url('https://huggingface.co/spaces/gabrielliservizi/solemio-solar/resolve/main/images/sole.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 30%,
        rgba(255, 255, 255, 0) 70%
    );
    opacity: 0;
    animation: sun-glow 3s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}
@keyframes sun-glow {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.3);
    }
}
.sun-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 165, 0, 0.4) 0%,
        rgba(255, 165, 0, 0.3) 30%,
        rgba(255, 165, 0, 0.2) 60%,
        rgba(255, 165, 0, 0) 80%
    );
    opacity: 0.9;
    animation: sun-pulse 6s ease-in-out infinite alternate;
}
@keyframes sun-pulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}
.sun-ray {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0) 60%
    );
    transform-origin: center top;
    animation: rotate-ray 20s linear infinite;
    opacity: 0.8;
    pointer-events: none;
}
.sun-ray:nth-child(2) {
    animation-delay: -5s;
    opacity: 0.6;
}

.sun-ray:nth-child(3) {
    animation-delay: -10s;
    opacity: 0.4;
}
@keyframes rotate-ray {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}
.hero-title {
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    transform: translateZ(50px);
}

.hero-subtitle {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    transform: translateZ(30px);
}

/* Hero CTA Button - Completely Redesigned */
.hero-cta-button {
    display: inline-block;
    position: relative;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    border-radius: 16px;
    padding: 0;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    overflow: hidden;
    animation: hero-cta-pulse 2s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.hero-cta-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

.hero-cta-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    position: relative;
    z-index: 2;
}

.hero-cta-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hero-cta-icon i {
    width: 20px;
    height: 20px;
    color: white;
    animation: icon-bounce 1.5s ease-in-out infinite;
}

.hero-cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: white;
}

.hero-cta-main {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-cta-sub {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-cta-arrow {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hero-cta-arrow i {
    width: 16px;
    height: 16px;
    color: white;
    transition: transform 0.3s ease;
}

.hero-cta-button:hover .hero-cta-arrow {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(5px);
}

.hero-cta-button:hover .hero-cta-arrow i {
    transform: translateX(3px);
}

.hero-cta-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hero-cta-button:hover .hero-cta-glow {
    opacity: 1;
}

@keyframes hero-cta-pulse {
    0%, 100% {
        box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 8px 35px rgba(245, 158, 11, 0.6), 0 0 0 10px rgba(245, 158, 11, 0.1);
    }
}

@keyframes icon-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Desktop - Position button to bottom right corner */
@media (min-width: 769px) {
    .hero-cta-button {
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        z-index: 10;
    }
    
    .hero-container {
        position: relative;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-cta-content {
        padding: 0.875rem 1.25rem;
        gap: 0.5rem;
    }
    
    .hero-cta-icon {
        width: 35px;
        height: 35px;
    }
    
    .hero-cta-icon i {
        width: 18px;
        height: 18px;
    }
    
    .hero-cta-main {
        font-size: 1.125rem;
    }
    
    .hero-cta-sub {
        font-size: 0.8rem;
    }
    
    .hero-cta-arrow {
        width: 28px;
        height: 28px;
    }
    
    .hero-cta-arrow i {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .hero-cta-content {
        padding: 1rem 1.5rem;
        gap: 0.5rem;
    }
    
    .hero-cta-main {
        font-size: 1.125rem;
    }
    
    .hero-cta-sub {
        font-size: 0.8rem;
    }
}
/* FAQ Section - Completely Redesigned */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.faq-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.faq-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.faq-card:hover::before {
    opacity: 1;
}

.faq-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
}

.faq-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-icon-wrapper {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.faq-icon-main {
    width: 24px;
    height: 24px;
    color: white;
    transition: transform 0.3s ease;
}

.faq-card:hover .faq-icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.faq-card:hover .faq-icon-main {
    transform: rotate(5deg);
}

.faq-content {
    flex: 1;
    min-width: 0;
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.faq-card:hover .faq-question {
    color: #d97706;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

.faq-answer.active {
    max-height: 500px;
    opacity: 1;
    padding-top: 1rem;
}

.faq-answer p {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 0.5rem;
}

.faq-toggle {
    width: 40px;
    height: 40px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-chevron {
    width: 20px;
    height: 20px;
    color: #d97706;
    transition: transform 0.3s ease;
}

.faq-card.active .faq-chevron {
    transform: rotate(180deg);
}

.faq-card.active .faq-toggle {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.faq-card.active .faq-chevron {
    color: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Add padding to prevent fixed buttons from overlapping footer */
    body {
        padding-bottom: 120px;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .faq-header {
        padding: 1.25rem;
        gap: 0.75rem;
    }
    
    .faq-icon-wrapper {
        width: 45px;
        height: 45px;
    }
    
    .faq-icon-main {
        width: 22px;
        height: 22px;
    }
    
    .faq-question {
        font-size: 1rem;
    }
    
    .faq-toggle {
        width: 35px;
        height: 35px;
    }
    
    .faq-chevron {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .faq-header {
        padding: 1rem;
        gap: 0.5rem;
    }
    
    .faq-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .faq-icon-main {
        width: 20px;
        height: 20px;
    }
    
    .faq-question {
        font-size: 0.95rem;
    }
}

/* Enhanced 3D Solar Cards */
.card-3d-solar {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateZ(0);
}

.card-3d-solar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, 
        rgba(255, 255, 255, 0.3), 
        rgba(255, 255, 255, 0.1), 
        rgba(255, 255, 255, 0.3));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.card-3d-solar:hover {
    transform: translateY(-15px) rotateY(8deg) rotateX(8deg) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
.card-3d-solar:hover::before {
    opacity: 1;
}

.solar-icon {
    position: relative;
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    perspective: 1000px;
}
.card-3d-solar:hover .solar-icon {
    transform: scale(1.1) rotateY(15deg) rotateX(15deg);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}
.solar-icon::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, 
        rgba(252, 185, 0, 0.3) 0%, 
        rgba(255, 105, 0, 0.1) 40%, 
        transparent 70%);
    z-index: -1;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.card-3d-solar:hover .solar-icon::after {
    opacity: 0.9;
    animation: solar-glow 1.5s ease-in-out infinite alternate;
}
@keyframes solar-glow {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* Enhanced CTA Cards */
.cta-card {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
    background: white;
    border: 2px solid transparent;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(252, 185, 0, 0.1) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.cta-card:hover::before {
    opacity: 1;
}

.cta-card:hover {
    border-color: rgba(252, 185, 0, 0.3);
}

.cta-icon-container {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-card:hover .cta-icon-container {
    transform: scale(1.15) rotateY(360deg);
}

.cta-icon {
    transition: all 0.4s ease;
}

.cta-card:hover .cta-icon {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Global Sun Ray Effect for all sections */
.sun-ray-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 165, 0, 0.08) 30deg,
        transparent 60deg,
        rgba(255, 165, 0, 0.08) 90deg,
        transparent 120deg,
        rgba(255, 165, 0, 0.08) 150deg,
        transparent 180deg,
        rgba(255, 152, 0, 0.06) 210deg,
        transparent 240deg,
        rgba(255, 152, 0, 0.06) 270deg,
        transparent 300deg,
        rgba(255, 152, 0, 0.06) 330deg,
        transparent 360deg
    );
    transform-origin: center center;
    animation: rotate-global-ray 40s linear infinite;
    pointer-events: none;
}

.sun-ray-cta:nth-child(2) {
    animation-delay: -13s;
    opacity: 0.6;
}

.sun-ray-cta:nth-child(3) {
    animation-delay: -26s;
    opacity: 0.4;
}

@keyframes rotate-global-ray {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* Enhanced Form Card */
.form-card-enhanced {
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(252, 185, 0, 0.1);
    transition: all 0.4s ease;
}

.form-card-enhanced::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(252, 185, 0, 0.05) 60deg,
        transparent 120deg,
        rgba(252, 185, 0, 0.05) 180deg,
        transparent 240deg,
        rgba(252, 185, 0, 0.05) 300deg,
        transparent 360deg
    );
    animation: rotate-slow 20s linear infinite;
    pointer-events: none;
}

@keyframes rotate-slow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Enhanced Form Inputs */
.form-input-enhanced {
    background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
    transition: all 0.3s ease;
    position: relative;
    font-size: 1.125rem;
}

.form-input-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(252, 185, 0, 0.6);
}

.form-input-enhanced:focus {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(252, 185, 0, 0.3);
    border-color: #f59e0b;
}

/* Form Groups */
.form-group {
    position: relative;
    animation: slideInUp 0.6s ease-out;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }

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

/* Privacy Section */
.privacy-section {
    animation: slideInUp 0.6s ease-out 0.4s both;
    position: relative;
    overflow: hidden;
}

.privacy-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.1), transparent);
    animation: shimmer 3s infinite;
}

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

/* Custom Checkbox */
.checkbox-custom {
    position: relative;
    transition: all 0.3s ease;
}

.privacy-checkbox:checked + .checkbox-custom {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #d97706;
    transform: scale(1.1);
}

.privacy-checkbox:checked + .checkbox-custom i {
    opacity: 1;
    transform: scale(1.2);
}

/* Submit Section */
.submit-section {
    animation: slideInUp 0.6s ease-out 0.5s both;
    position: relative;
}

/* Form Animations */
#consultation-form {
    position: relative;
}

#consultation-form::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 165, 0, 0.05) 60deg,
        transparent 120deg,
        rgba(255, 165, 0, 0.05) 180deg,
        transparent 240deg,
        rgba(255, 165, 0, 0.05) 300deg,
        transparent 360deg
    );
    animation: rotate-slow 20s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Enhanced FAQ Items */
.faq-item {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #f59e0b 0%, #ea580c 100%);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-item:hover::before {
    transform: scaleY(1);
}

.faq-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.faq-question {
    transition: color 0.3s ease;
}

.faq-item:hover .faq-question {
    color: #ea580c;
}

.faq-answer {
    transition: all 0.4s ease;
    max-height: 0;
    overflow: hidden;
}

.faq-answer:not(.hidden) {
    max-height: 500px;
    margin-top: 1rem;
}

/* Enhanced Benefit Cards */
.benefit-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    padding: 2rem;
}

.benefit-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.benefit-card:hover .benefit-title {
    color: #ea580c;
}

.benefit-card:hover .benefit-description {
    color: #6b7280;
}

.benefit-title {
    transition: color 0.3s ease;
    color: #111827;
    margin-bottom: 0.5rem;
}

.benefit-description {
    transition: color 0.3s ease;
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Enhanced Offer Cards */
.card-3d-solar,
.card-3d {
    position: relative;
}

.card-3d-solar::after,
.card-3d::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(252, 185, 0, 0.15) 0%,
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-3d-solar:hover::after,
.card-3d:hover::after {
    opacity: 1;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .cta-card {
        padding: 1.5rem !important;
    }
    
    .cta-icon {
        width: 60px !important;
        height: 60px !important;
    }
    
    .form-card-enhanced {
        padding: 1.5rem !important;
    }
    
    .gradient-text {
        font-size: 1.875rem !important;
    }
    
    .benefit-card {
        padding: 1.5rem !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
}

@media (max-width: 640px) {
    .sun-ray-cta {
        display: none;
    }
    
    .cta-card:hover {
        transform: translateY(-5px);
    }
    
    .card-3d-solar:hover,
    .card-3d:hover {
        transform: translateY(-8px) scale(1.02);
    }
}

/* Mobile Floating CTA */
.mobile-cta-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    z-index: 9998;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 165, 0, 0.2);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.mobile-cta-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.mobile-cta-item {
    display: flex;
    align-items: center;
    flex: 1;
}

.mobile-cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    color: white;
    text-decoration: none;
    border-radius: 16px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulse-mobile-cta 2s infinite;
    width: 100%;
    min-height: 65px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.mobile-cta-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.mobile-cta-link:hover::before {
    left: 100%;
}

.mobile-cta-link:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #92400e 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

.mobile-cta-link i {
    width: 18px;
    height: 18px;
}

@keyframes pulse-mobile-cta {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 105, 0, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 105, 0, 0.7), 0 0 0 8px rgba(255, 105, 0, 0.1);
    }
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulse-whatsapp 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-icon {
    width: 32px;
    height: 32px;
    color: white;
    stroke-width: 2;
}

@keyframes pulse-whatsapp {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7), 0 0 0 10px rgba(37, 211, 102, 0.1);
    }
}


/* Gradient Text Variations */
.gradient-text-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.gradient-text-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Feature Items Animation */
.feature-item {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInLeft 0.6s ease-out forwards;
}

.feature-item:nth-child(1) {
    animation-delay: 0.1s;
}

.feature-item:nth-child(2) {
    animation-delay: 0.3s;
}

.feature-item:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.feature-item:hover {
    transform: translateX(10px);
    transition: transform 0.3s ease;
}

/* Enhanced Other Offers Section */
.bg-gradient-to-br {
    position: relative;
}

/* Improved hover effects for cards in Other Offers */
.hover\:-translate-y-2:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Better text contrast on gradients */
.text-blue-100,
.text-purple-100 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Enhanced button on cards */
.btn-gradient.text-white {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Benefits Section Enhanced */
.benefits-section {
    position: relative;
}

.benefits-title {
    animation: fadeInUp 0.8s ease-out;
}

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

/* Mobile-specific WhatsApp button */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
    }
    
    .whatsapp-icon {
        width: 28px;
        height: 28px;
    }
    
    .mobile-cta-container {
        display: flex;
        bottom: 20px;
        left: 20px;
    }
}

@media (min-width: 769px) {
    .mobile-cta-container {
        display: none;
    }
}

@media (max-width: 640px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
    
    .whatsapp-icon {
        width: 24px;
        height: 24px;
    }
}

/* Enhanced accessibility */
.cta-card:focus,
.btn-gradient:focus,
.whatsapp-float:focus {
    outline: 3px solid rgba(252, 185, 0, 0.5);
    outline-offset: 2px;
}

/* Smooth scrolling enhancement */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Loading state for images */
img {
    transition: opacity 0.3s ease;
}

img:not([src]) {
    opacity: 0;
}

/* Print optimization */
@media print {
    .whatsapp-float,
    .sun-ray-cta {
        display: none;
    }
}