:root {
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --brand-orange: #fc3f1d;
    --brand-orange-hover: #e02b0c;
    --brand-orange-glow: rgba(252, 63, 29, 0.35);
}

* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.4s var(--ease-spring) forwards;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f7f7f7;
}

::-webkit-scrollbar-thumb {
    background: var(--brand-orange);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-orange-hover);
}

@keyframes morph-icon-1 {
    0% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
    33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; }
    66% { border-radius: 30% 70% 38% 62% / 69% 65% 35% 31%; }
    100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
}

@keyframes morph-icon-2 {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes morph-icon-3 {
    0% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
    50% { border-radius: 68% 32% 60% 40% / 38% 46% 54% 62%; }
    100% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
}

@keyframes morph-icon-4 {
    0% { border-radius: 35% 65% 60% 40% / 55% 35% 65% 45%; }
    50% { border-radius: 58% 42% 35% 65% / 35% 60% 40% 65%; }
    100% { border-radius: 35% 65% 60% 40% / 55% 35% 65% 45%; }
}

@keyframes morph-icon-5 {
    0% { border-radius: 48% 52% 68% 32% / 32% 48% 52% 68%; }
    50% { border-radius: 65% 35% 40% 60% / 60% 35% 65% 40%; }
    100% { border-radius: 48% 52% 68% 32% / 32% 48% 52% 68%; }
}

@keyframes morph-icon-6 {
    0% { border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%; }
    50% { border-radius: 38% 62% 65% 35% / 62% 38% 62% 38%; }
    100% { border-radius: 55% 45% 35% 65% / 45% 55% 45% 55%; }
}

.plumpy-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s var(--ease-spring), background-color 0.4s var(--ease-standard), box-shadow 0.4s var(--ease-standard);
    will-change: border-radius, transform;
}

.plumpy-icon-1 { animation: morph-icon-1 7s infinite ease-in-out; }
.plumpy-icon-2 { animation: morph-icon-2 8.5s infinite ease-in-out; }
.plumpy-icon-3 { animation: morph-icon-3 6.5s infinite ease-in-out; }
.plumpy-icon-4 { animation: morph-icon-4 9s infinite ease-in-out; }
.plumpy-icon-5 { animation: morph-icon-5 7.5s infinite ease-in-out; }
.plumpy-icon-6 { animation: morph-icon-6 8s infinite ease-in-out; }

.animated-card:hover .plumpy-icon-wrapper,
.calc-plat-btn:hover .plumpy-icon-wrapper,
.modal-plat-btn:hover .plumpy-icon-wrapper,
.plumpy-icon-wrapper:hover {
    animation-play-state: paused !important;
    transform: scale(1.16) rotate(5deg) !important;
    box-shadow: 0 14px 28px var(--brand-orange-glow);
}

.animated-card {
    transition: transform 0.5s var(--ease-spring), border-color 0.4s var(--ease-standard), box-shadow 0.4s var(--ease-standard), background-color 0.4s var(--ease-standard);
    will-change: transform, box-shadow;
}

.animated-card:nth-of-type(odd):hover {
    transform: translateY(-10px) scale(1.02) rotate(-1deg);
    border-color: var(--brand-orange) !important;
    box-shadow: 0 24px 48px rgba(252, 63, 29, 0.16);
}

.animated-card:nth-of-type(even):hover {
    transform: translateY(-10px) scale(1.02) rotate(1deg);
    border-color: var(--brand-orange) !important;
    box-shadow: 0 24px 48px rgba(252, 63, 29, 0.16);
}

.faq-icon {
    transition: transform 0.35s var(--ease-spring), color 0.3s;
}

.faq-icon.active {
    transform: rotate(180deg);
    color: var(--brand-orange) !important;
}

.faq-answer {
    transition: all 0.35s var(--ease-out-expo);
}

input[type=range]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-orange);
    cursor: pointer;
    box-shadow: 0 4px 14px var(--brand-orange-glow);
    transition: transform 0.25s var(--ease-spring);
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

.calc-plat-btn {
    transition: all 0.35s var(--ease-spring);
    cursor: pointer;
}

.calc-plat-btn.active {
    border-color: var(--brand-orange) !important;
    background-color: #fff5f3 !important;
    transform: scale(1.03);
    box-shadow: 0 10px 24px rgba(252, 63, 29, 0.15);
}

.modal-plat-btn {
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
}

.modal-plat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.modal-plat-btn.active {
    border-color: var(--brand-orange) !important;
    background-color: #fff5f3 !important;
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(252, 63, 29, 0.15);
}

.mobile-drawer-anim {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px) scale(0.97);
    transition: opacity 0.35s var(--ease-spring), transform 0.35s var(--ease-spring);
    will-change: opacity, transform;
}

.mobile-drawer-anim.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

#mobile-menu-btn i {
    transition: transform 0.35s var(--ease-spring), opacity 0.25s;
}

#mobile-menu-btn:hover {
    transform: scale(1.06);
}