@supports (backdrop-filter: blur(12px)) {
    .header {
        background-color: rgba(255, 255, 255, 0.88);
        backdrop-filter: saturate(180%) blur(12px);
    }
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
}

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

.btn--light:hover {
    background-color: var(--color-bg-mint);
}

.btn--trial:hover {
    background-color: var(--color-trial-dark);
}

.btn .icon--nudge {
    transition: transform var(--transition-fast);
}

.btn:hover .icon--nudge {
    transform: translateX(3px);
}

.nav__link,
.footer__link {
    transition: color var(--transition-fast);
}

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

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

.footer__credit:hover .footer__credit-logo {
    opacity: 0.8;
}

.hero__visual::before,
.about__media::before {
    content: "";
    position: absolute;
    inset: 12% 6% 6% 14%;
    z-index: 0;
    border-radius: var(--radius-2xl);
    background: radial-gradient(closest-side, rgba(110, 182, 51, 0.22), rgba(110, 182, 51, 0));
    pointer-events: none;
}

.hero__video,
.about__browser {
    z-index: 1;
    box-shadow: var(--shadow-frame);
}

.about-float {
    box-shadow: var(--shadow-float);
}

.avoid__shot {
    box-shadow: var(--shadow-frame);
}

.feature-card,
.testimonial,
.audience__item {
    box-shadow: var(--shadow-card);
}

.plans__card {
    box-shadow: var(--shadow-raised);
}

.segmented__input:checked + .segmented__label {
    box-shadow: 0 1px 3px rgba(15, 27, 23, 0.12);
}

.segmented__input:checked:focus-visible + .segmented__label {
    box-shadow: var(--focus-ring), 0 1px 3px rgba(15, 27, 23, 0.12);
}

.segmented__label {
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.logos__item img,
.clients__item img {
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter var(--transition-base), opacity var(--transition-base);
}

.feature-card__media img {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
    .feature-card:hover .feature-card__media img {
        transform: scale(1.06);
    }

    .logos__item:hover img,
    .clients__item:hover img {
        filter: none;
        opacity: 1;
    }
}

.whatsapp-float {
    box-shadow: var(--shadow-float);
    transition: background-color var(--transition-fast);
}

.whatsapp-float:hover {
    background-color: var(--color-primary-dark);
}

.audience__item {
    background-image: linear-gradient(var(--color-primary), var(--color-primary));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                border-color 0.3s ease,
                color 0.2s ease;
}

.audience__item::before {
    transition: background-color 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
    .audience__item:hover {
        background-size: 100% 100%;
        border-color: var(--color-primary);
        color: var(--color-text-on-primary);
        transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                    border-color 0.3s ease,
                    color 0.2s ease 0.15s;
    }

    .audience__item:hover::before {
        background-color: var(--color-on-primary-tint);
        color: var(--color-text-on-primary);
    }
}

.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 45%);
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: repeating-linear-gradient(-60deg, rgba(110, 182, 51, 0.09) 0 2px, rgba(110, 182, 51, 0) 2px 16px);
    -webkit-mask-image: radial-gradient(130% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, 0) 68%);
    mask-image: radial-gradient(130% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, 0) 68%);
    pointer-events: none;
}

.footer::after {
    content: "";
    position: absolute;
    top: -35%;
    left: -15%;
    z-index: -1;
    width: 55%;
    height: 120%;
    background: radial-gradient(closest-side, rgba(110, 182, 51, 0.12), rgba(110, 182, 51, 0));
    pointer-events: none;
}

.breadcrumb__link {
    transition: color var(--transition-fast);
}

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

.channel,
.check-option,
.help-playlist__item {
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

a.channel:hover {
    background-color: var(--color-bg-mint);
    border-color: var(--color-primary);
}

a.channel:hover .icon-tile {
    background-color: var(--color-bg);
}

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

.help-playlist__item:not([aria-current="true"]):hover {
    background-color: var(--color-bg);
    border-color: var(--color-border-strong);
}

.help-player__frame {
    box-shadow: var(--shadow-frame);
}

.contact-form-card {
    box-shadow: var(--shadow-raised);
}

.help-manual {
    box-shadow: var(--shadow-card);
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(110, 182, 51, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(110, 182, 51, 0); }
    100% { box-shadow: 0 0 0 0 rgba(110, 182, 51, 0); }
}

@keyframes priceUpdate {
    from { background-color: var(--color-accent-soft); }
    to   { background-color: var(--color-bg-soft); }
}

.about-float--status {
    animation: floatIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}

.about-float--live {
    animation: floatIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
}

.live-dot {
    animation: livePulse 2s ease-out infinite;
}

.plans__price.is-updated {
    animation: priceUpdate 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}

.eco__frame {
    box-shadow: var(--shadow-frame);
}

.eco__net {
    background-image: radial-gradient(rgba(10, 42, 32, 0.07) 1px, rgba(10, 42, 32, 0) 1.2px);
    background-size: 22px 22px;
}

.eco__list:focus-within {
    box-shadow: var(--shadow-raised);
}