.hex-container {
    --hex-label-dist: 225px;
}

.hero .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

.hero-blob,
.hex-bg span,
.scroll-dot,
.avatar-ring,
.avatar-dot,
.pricing-card::after {
    animation: none !important;
    will-change: auto !important;
}

.hex-tip-btn[data-tip="0"] {
    transform: translate(-50%, -50%) rotate(180deg) translateX(var(--hex-label-dist)) rotate(-180deg);
}

.hex-tip-btn[data-tip="1"] {
    transform: translate(-50%, -50%) rotate(240deg) translateX(var(--hex-label-dist)) rotate(-240deg);
}

.hex-tip-btn[data-tip="2"] {
    transform: translate(-50%, -50%) rotate(300deg) translateX(var(--hex-label-dist)) rotate(-300deg);
}

.hex-tip-btn[data-tip="3"] {
    transform: translate(-50%, -50%) rotate(360deg) translateX(var(--hex-label-dist)) rotate(-360deg);
}

.hex-tip-btn[data-tip="4"] {
    transform: translate(-50%, -50%) rotate(420deg) translateX(var(--hex-label-dist)) rotate(-420deg);
}

.hex-tip-btn[data-tip="5"] {
    transform: translate(-50%, -50%) rotate(480deg) translateX(var(--hex-label-dist)) rotate(-480deg);
}

@media (max-width: 1040px) {
    .hex-container {
        --hex-label-dist: 195px;
    }
}

@media (max-width: 768px) {
    .hex-container {
        --hex-label-dist: 172px;
    }
}

@media (max-width: 520px) {
    .hex-container {
        --hex-label-dist: min(148px, 32vw);
    }
}

@media (max-width: 480px) {
    .hex-container {
        --hex-label-dist: min(102px, 30vw);
    }
}