@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;800;900&display=swap');

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

*, *::before, *::after {
    font-family: 'Unbounded', sans-serif !important;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}

b, strong {
    font-weight: 900;
}

body {
    overflow-x: hidden;
    background-color: #FAFAFC;
    font-weight: 700;
}

::-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);
}

.reveal-zoom {
    opacity: 0;
    transform: scale(0.86) translateY(50px);
    transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-spring);
    will-change: opacity, transform;
}

.reveal-up {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity 0.75s var(--ease-smooth), transform 0.75s var(--ease-spring);
    will-change: opacity, transform;
}

.reveal-zoom.is-visible,
.reveal-up.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.delay-1 { transition-delay: 0.07s; }
.delay-2 { transition-delay: 0.14s; }
.delay-3 { transition-delay: 0.21s; }
.delay-4 { transition-delay: 0.28s; }
.delay-5 { transition-delay: 0.35s; }

@keyframes morph-icon-1 {
    0%, 100% { 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%; }
}

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

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

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

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

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

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

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

@media (hover: hover) and (pointer: fine) {
    .animated-card:hover {
        transform: translateY(-10px) scale(1.02);
        border-color: var(--brand-orange) !important;
        box-shadow: 0 24px 48px rgba(252, 63, 29, 0.16);
    }
    .animated-card:hover .plumpy-icon-wrapper {
        transform: scale(1.16) rotate(5deg);
        box-shadow: 0 14px 28px var(--brand-orange-glow);
    }
}

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

input[type=range]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    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.2);
}

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

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

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

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

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.hero-badge-anim {
    animation: pulse-badge 3.5s infinite ease-in-out;
}