@font-face {
    font-family: Byrd;
    src: url("../fonts/byrd-bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Turbo Jungle";
    src: url("../fonts/Turbo%20Jungle.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: BoobFont;
    src: url("../fonts/boob.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-blue: #335C94;
    --primary-cyan: #7FE5E4;
    --primary-light: #DCF8FC;
    --primary-dark: #316491;
    --primary-indigo: #316491;
    --primary-violet: #316491;
    --bg-primary: #0a0224;
    --bg-secondary: #23272f;
    --bg-card: rgba(35, 39, 47, 0.8);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-navbar: rgba(51, 92, 148, 0.8);
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-blue: #8128f5;
    --text-cyan: #8128f5;
    --text-light: #DCF8FC;
    --text-indigo: #335C94;
    --text-violet: #335C94;
    --text-dark: #316491;
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-blue: #335C94;
    --border-cyan: #7FE5E4;
    --border-light: #DCF8FC;
    --glow-blue: rgba(51, 92, 148, 0.4);
    --glow-cyan: rgba(127, 229, 228, 0.4);
    --glow-light: rgba(220, 248, 252, 0.4);
    --shine-color: rgba(51, 92, 148, 0.1);
    --success-color: #10b981;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    --btn-buy-bg: rgba(51, 92, 148, 0.2);
    --btn-buy-bg-hover: rgba(51, 92, 148, 0.3);
    --btn-buy-border: rgba(51, 92, 148, 0.3);
    --btn-buy-border-hover: rgba(51, 92, 148, 0.5);
    --btn-buy-shadow: rgba(51, 92, 148, 0.3);
    --btn-buy-shadow-hover: rgba(51, 92, 148, 0.4);
    --btn-buy-shine: rgba(51, 92, 148, 0.2);
    --text-marketcap: #8128f5;
    --text-volume: #8128f5;
    --text-liquidity: #8128f5;
    --text-fdv: #8128f5;
    --text-supply: #8128f5;
    --text-tokenomics-marketcap: #8128f5;
    --text-tokenomics-priceusd: #8128f5;
    --text-hero-priceusd: #8128f5;
    --text-hero-pricenative: #8128f5;
    --text-hero-change: #8128f5;
    --btn-secondary-bg: rgba(134, 56, 185, 0.2);
    --btn-secondary-bg-hover: rgba(134, 56, 185, 0.3);
    --btn-secondary-border: rgba(134, 56, 185, 0.3);
    --btn-secondary-border-hover: rgba(134, 56, 185, 0.5);
    --btn-secondary-shadow: rgba(134, 56, 185, 0.3);
    --btn-secondary-shadow-hover: rgba(134, 56, 185, 0.4);
    --btn-secondary-shine: rgba(134, 56, 185, 0.2);
    --notif-green: #22c55e;
    --buba-blue: #335C94;
    --buba-blue-light: #4A7BB8;
    --buba-blue-dark: #2A4A7A;
    --buba-cyan: #7FE5E4;
    --buba-cyan-light: #9FEDEC;
    --buba-cyan-dark: #5FD5D4;
    --buba-highlight: #DCF8FC;
    --buba-highlight-light: #E8FBFD;
    --buba-highlight-dark: #C0F0F5;
    --buba-space: #316491;
    --buba-space-light: #4A7BB8;
    --buba-space-dark: #1E4A6B;
    --buba-gradient-main: linear-gradient(90deg, #335C94 0%, #7FE5E4 100%);
    --buba-gradient-accent: linear-gradient(90deg, #316491 0%, #DCF8FC 100%);
    --buba-gradient-blue: linear-gradient(90deg, #2A4A7A 0%, #4A7BB8 100%);
    --accent-primary: #8638B9;
    --accent-secondary: #EA71CE;
    --font-main: 'BoobFont', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
    margin: 0px;
}

body,
html,
* {
    color: var(--text-marketcap) !important;
}

html {
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: "Turbo Jungle", Byrd, Inter, sans-serif;
    background-color: rgb(240, 242, 245);
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

@keyframes flash-update {
    0% {
        color: inherit;
        transform: scale(1);
    }

    50% {
        color: rgb(34, 211, 238);
        transform: scale(1.02);
    }

    100% {
        color: inherit;
        transform: scale(1);
    }
}

.flash-update {
    animation: 0.5s ease-in-out 0s 1 normal none running flash-update;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse;
}

@keyframes flashGreen {
    0% {
        color: inherit;
        transform: scale(1);
    }

    50% {
        color: rgb(34, 197, 94);
        transform: scale(1.05);
    }

    100% {
        color: inherit;
        transform: scale(1);
    }
}

.flash-green {
    animation: 0.6s ease-in-out 0s 1 normal none running flashGreen;
}

@keyframes flashRed {
    0% {
        color: inherit;
        transform: scale(1);
    }

    50% {
        color: rgb(239, 68, 68);
        transform: scale(1.05);
    }

    100% {
        color: inherit;
        transform: scale(1);
    }
}

.flash-red {
    animation: 0.6s ease-in-out 0s 1 normal none running flashRed;
}

.font-inter {
    font-family: "Turbo Jungle", Byrd, Inter, sans-serif;
}

.backdrop-blur-md {
    backdrop-filter: blur(12px);
}

.bg-gradient-to-r {
    background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-clip-text {
    background-clip: text;
}

.text-transparent {
    color: transparent;
}

.shadow-\[0_0_32px_0_\#22d3ee55\] {
    box-shadow: rgba(34, 211, 238, 0.33) 0px 0px 32px 0px;
}

.loading-data {
    color: rgb(34, 211, 238);
    font-style: italic;
    animation: 2s ease 0s infinite normal none running pulse;
}

@media (max-width: 768px) {
    .text-5xl {
        font-size: 2.5rem;
    }

    .text-6xl {
        font-size: 3rem;
    }

    .text-4xl {
        font-size: 2rem;
    }

    .text-3xl {
        font-size: 1.5rem;
    }
}

.notification {
    min-width: 320px;
    max-width: 400px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 1;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal forwards running notif-in-top;
    z-index: 2147483647 !important;
    position: fixed !important;
    inset: 20px 20px auto auto !important;
    transform: none !important;
    pointer-events: auto !important;
    color: rgb(26, 26, 26) !important;
}

.notification .fas,
.notification .fa,
.notification .fab,
.notification .far {
    color: rgb(255, 255, 255) !important;
}

.notification p,
.notification span,
.notification div {
    color: rgb(255, 255, 255) !important;
}

@keyframes notif-in-top {
    0% {
        opacity: 0;
        transform: translateX(100%) translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px) translateY(0px);
    }
}

.notification.success {
    background: linear-gradient(90deg, rgb(16, 185, 129) 80%, rgb(5, 150, 105) 100%);
    color: rgb(255, 255, 255);
    border-left: 4px solid rgb(16, 185, 129);
}

.notification.error {
    background: linear-gradient(90deg, rgb(239, 68, 68) 80%, rgb(220, 38, 38) 100%);
    color: rgb(255, 255, 255);
    border-left: 4px solid rgb(239, 68, 68);
}

.notification.info {
    background: linear-gradient(90deg, rgb(59, 130, 246) 80%, rgb(37, 99, 235) 100%);
    color: rgb(255, 255, 255);
    border-left: 4px solid rgb(59, 130, 246);
}

.notification .notif-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.notification .notif-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 2px;
    border-radius: 4px;
}

.notification .notif-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .notification {
        min-width: auto;
        max-width: none;
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
    }

    .notification .notif-icon {
        font-size: 1rem;
    }

    .notification .notif-close {
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .button {
        min-width: 240px;
        padding: 10px 20px;
        height: 44px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .button {
        min-width: 200px;
        padding: 8px 16px;
        height: 40px;
        font-size: 13px;
    }

    .button .state p span {
        font-size: 12px;
    }
}

@keyframes notif-out {
    0% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
}

@keyframes shine-green {
    0% {
        box-shadow: 0 0 0 0 var(--notif-green);
    }

    50% {
        box-shadow: 0 0 24px 8px var(--notif-green);
    }

    100% {
        box-shadow: 0 0 0 0 var(--notif-green);
    }
}

.shake-notif {
    animation: 0.5s ease 0s 1 normal none running shake-notif;
}

.notification.success {
    background: linear-gradient(90deg, rgb(16, 185, 129) 80%, rgb(5, 150, 105) 100%);
    color: rgb(255, 255, 255);
    border-left: 4px solid rgb(16, 185, 129);
}

.notification.error {
    background: linear-gradient(90deg, rgb(239, 68, 68) 80%, rgb(220, 38, 38) 100%);
    color: rgb(255, 255, 255);
    border-left: 4px solid rgb(239, 68, 68);
}

.notification.info {
    background: linear-gradient(90deg, rgb(59, 130, 246) 80%, rgb(37, 99, 235) 100%);
    color: rgb(255, 255, 255);
    border-left: 4px solid rgb(59, 130, 246);
}

.card,
.contract-address-card {
    transition: transform 0.4s, box-shadow 0.4s;
    cursor: pointer;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.card:hover,
.contract-address-card:hover {
    transform: scale(0.97);
    box-shadow: 0 0 40px 8px var(--glow-green);
}

.card:active,
.contract-address-card:active {
    transform: scale(0.95);
}

.card svg,
.contract-address-card svg {
    transition: transform 0.4s;
}

.card:hover svg,
.contract-address-card:hover svg {
    transform: scale(1.05);
}

.card::before,
.contract-address-card::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--shine-color), transparent);
    transition: left 0.5s;
    pointer-events: none;
}

.card:hover::before,
.contract-address-card:hover::before {
    left: 100%;
}

#market-marketcap {
    color: var(--text-marketcap);
}

#market-volume24h {
    color: var(--text-volume);
}

#market-liquidity {
    color: var(--text-liquidity);
}

#fdv {
    color: var(--text-fdv);
}

#tokenomics-supply {
    color: var(--text-supply);
}

#tokenomics-marketcap {
    color: var(--text-tokenomics-marketcap);
}

#tokenomics-priceusd {
    color: var(--text-tokenomics-priceusd);
}

#price-usd {
    color: var(--text-hero-priceusd);
}

#price-native {
    color: var(--text-hero-pricenative);
}

#price-change-24h {
    color: var(--text-hero-change);
}

.btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    cursor: pointer;
    width: 150px;
    height: 50px;
    background: linear-gradient(135deg, var(--btn-buy-bg) 0%, rgba(238, 34, 180, 0.1) 100%);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 1px solid var(--btn-buy-border);
    transition: 0.3s;
    font-family: "Turbo Jungle", Byrd, Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
    position: relative;
    overflow: hidden;
    color: rgb(255, 255, 255) !important;
}

nav .btn-buy {
    width: auto;
    height: 40px;
    padding: 0px 20px;
    font-size: 13px;
    border-radius: 20px;
}

.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    cursor: pointer;
    width: 150px;
    height: 50px;
    background: linear-gradient(135deg, var(--btn-secondary-bg) 0%, rgba(238, 34, 180, 0.1) 100%);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 1px solid var(--btn-secondary-border);
    transition: 0.3s;
    font-family: "Turbo Jungle", Byrd, Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
    position: relative;
    overflow: hidden;
    color: rgb(255, 255, 255) !important;
}

.btn-secondary::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--btn-secondary-shine), transparent);
    transition: left 0.5s;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--btn-secondary-shadow), 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: var(--btn-secondary-border-hover);
}

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

.btn-secondary:active {
    transform: translateY(0px);
    box-shadow: 0 4px 15px var(--btn-secondary-shadow-hover), 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--btn-secondary-shine), 0 8px 25px var(--btn-secondary-shadow), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-buy::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--btn-buy-shine), transparent);
    transition: left 0.5s;
}

.btn-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--btn-buy-shadow), 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: var(--btn-buy-border-hover);
}

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

.btn-buy:active {
    transform: translateY(0px);
    box-shadow: 0 4px 15px var(--btn-buy-shadow-hover), 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-buy:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--btn-buy-shine), 0 8px 25px var(--btn-buy-shadow), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.parallax-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.1s ease-out;
    will-change: transform;
    pointer-events: none;
    z-index: -10;
}

.hero-parallax-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -10;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    will-change: transform;
    transition: transform 0.05s ease-out;
    pointer-events: none;
    transform: translate3d(0px, 0px, 0px);
}

.static-layer {
    z-index: 10;
    pointer-events: none;
    transform: translate3d(0px, 0px, 0px) !important;
    transition: none !important;
}

.static-layer:hover {
    transform: translate3d(0px, 0px, 0px) !important;
}

.mouse-parallax {
    transform: translate3d(0px, 0px, 0px) scale(1.2);
    pointer-events: none;
    transition: transform 0.05s ease-out;
    transform-origin: center center;
}

.mouse-parallax:hover {
    transform: translate3d(0px, 0px, 0px);
}

.layer-9 {
    z-index: 2;
    transform: translate3d(0px, 0px, 0px);
}

.layer-10 {
    z-index: 1;
    transform: translate3d(0px, 0px, 0px);
}

.parallax-container {
    position: relative;
    overflow: visible;
    /* Ubah dari hidden ke visible */
}

.parallax-layer {
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.hero-parallax-container {
    transform: translateZ(0px);
}

.parallax-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.navbar-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    background: rgba(17, 24, 39, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 30px;
}

.navbar-overlay .nav-content {
    max-width: 72rem;
    margin: 0px auto;
    padding: 0px 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
}

.hero-fullscreen {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    /* Ubah dari hidden ke visible */
}

.hero-fullscreen .hero-content {
    padding-top: 120px;
    padding-bottom: 80px;
    z-index: 10;
    position: relative;
}

.marquee-outer-container {
    margin: 2.5rem auto;
    position: relative;
    overflow: visible;
    /* Ubah dari hidden ke visible */
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0px 1rem;
    box-sizing: border-box;
}

.marquee-row {
    overflow: visible;
    /* Ubah dari hidden ke visible */
}

.marquee-content-wrapper {
    display: inline-block;
    white-space: nowrap;
    font-size: 0px;
    will-change: transform;
}

.marquee-item {
    display: inline-block;
    margin-right: 1.2rem;
}

.marquee-image {
    height: 240px;
    width: 240px;
    object-fit: cover;
    border-radius: 0.375rem;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--bg-card);
    border: 2px solid var(--border-primary);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.marquee-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.marquee-image::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--shine-color), transparent);
    transition: left 0.5s;
    z-index: 2;
}

.marquee-image:hover {
    transform: translateY(-4px) scale(1.05);
    border-color: var(--border-fuchsia);
    box-shadow: 0 8px 25px var(--glow-purple), 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.marquee-image:hover img {
    transform: scale(1.2);
}

.marquee-image:hover::before {
    left: 100%;
}

.marquee-image:active {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px var(--glow-purple), 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.marquee-image:active img {
    transform: scale(1.15);
}

.marquee-image:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--shine-color), 0 8px 25px var(--glow-purple), 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .marquee-image {
        height: 180px;
        width: 180px;
        margin-right: 0.9rem;
    }
}

@media (max-width: 640px) {
    .marquee-image {
        height: 120px;
        width: 120px;
        margin-right: 0.6rem;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-in-image {
    animation: 0.5s ease-out 0s 1 normal forwards running fadeIn;
}

.btn-social img {
    transition: filter 0.3s;
}

.btn-social:hover img {
    filter: none;
}

.navbar-overlay:has(.btn-social:hover) .btn-social:not(:hover) img {
    opacity: 0.3;
    transform: scale(0.9);
}

.twitter-embed-container {
    background: var(--buba-space-light, #0A0A8A);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    padding: 1.5rem;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.twitter-embed-container:hover {
    transform: translateY(-2px);
    box-shadow: rgba(127, 229, 228, 0.2) 0px 8px 25px;
    border-color: var(--border-fuchsia, #7FE5E4);
}

.twitter-tweet {
    width: 100% !important;
    max-width: 500px !important;
    /* Sesuaikan dengan ukuran baru */
}

.twitter-tweet iframe {
    border-radius: 0.5rem;
    transform: scale(1);
    /* Hapus scale agar ukuran asli terlihat */
    transform-origin: center center;
    width: 100% !important;
    max-width: 500px !important;
    /* Sesuaikan dengan ukuran baru */
}

.twitter-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    color: var(--text-primary, #fff);
    font-size: 1rem;
    min-height: 200px;
    background: var(--buba-space-light, #0A0A8A);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    padding: 2rem;
    transition: 0.3s;
}

.twitter-loading .animate-spin {
    animation: 1s linear 0s infinite normal none running spin;
    border-color: rgb(127, 229, 228) transparent transparent;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.twitter-loading span {
    animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.twitter-tweet.hidden {
    display: none !important;
}

.twitter-loading.hidden {
    display: none !important;
}

.twitter-loading::before {
    content: "";
    width: 40px;
    height: 40px;
    border-right-color: ;
    border-right-style: ;
    border-right-width: ;
    border-bottom-color: ;
    border-bottom-style: ;
    border-bottom-width: ;
    border-left-color: ;
    border-left-style: ;
    border-left-width: ;
    border-image-source: ;
    border-image-slice: ;
    border-image-width: ;
    border-image-outset: ;
    border-image-repeat: ;
    border-top: 3px solid var(--buba-blue, #335C94);
    border-radius: 50%;
    animation: 1s linear 0s infinite normal none running spin;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.twitter-embed-container .rss-feed-content {
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
    border-radius: 0.75rem;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--buba-space-light, #0A0A8A) !important;
}

.twitter-embed-container .rss-feed-content h3 {
    font-weight: bold;
    margin: 0px 0px 0.5rem;
    font-size: 1.1rem;
    color: var(--buba-blue, #335C94) !important;
}

.twitter-embed-container .rss-feed-content p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0px 0px 1rem;
    flex-grow: 1;
    color: var(--text-primary, #fff) !important;
}

.twitter-embed-container .rss-feed-content a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    transition: color 0.3s;
    color: var(--buba-blue, #335C94) !important;
}

.twitter-embed-container .rss-feed-content a:hover {
    color: var(--buba-highlight, #DCF8FC) !important;
}

@media (max-width: 1024px) {
    .twitter-embed-container {
        padding: 1rem;
    }

    .twitter-loading {
        min-height: 150px;
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .twitter-embed-container {
        padding: 0.75rem;
    }

    .twitter-loading {
        min-height: 120px;
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .twitter-loading {
        min-height: 100px;
        font-size: 0.75rem;
        gap: 0.5rem;
    }

    .twitter-loading::before {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
}

@media (min-width: 1200px) {
    .max-w-5xl {
        max-width: 1200px;
    }

    .max-w-6xl {
        max-width: 1280px;
    }

    .hero-content h1 {
        font-size: 4.5rem;
        line-height: 1.1;
    }

    .grid[class*="grid-cols-3"] {
        gap: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-content h1 {
        font-size: 3.5rem;
        line-height: 1.2;
    }

    .hero-content {
        padding: 1.5rem;
    }

    .twitter-embed-container {
        min-height: 400px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .hero-content h1 {
        font-size: 2.5rem;
        line-height: 1.3;
    }

    .hero-content {
        padding: 1rem;
        gap: 1.5rem;
    }

    .contract-address-card {
        padding: 1rem;
        font-size: 0.875rem;
    }

    .card {
        padding: 1.5rem;
    }

    .twitter-embed-container {
        padding: 0.75rem;
        min-height: 350px;
    }

    .twitter-loading {
        height: 300px;
        font-size: 0.875rem;
    }

    .nav-content {
        padding: 0.75rem 1rem;
    }

    .btn-buy {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 479px) {
    .hero-content h1 {
        font-size: 2rem;
        line-height: 1.4;
    }

    .hero-content {
        padding: 0.75rem;
        gap: 1rem;
    }

    .contract-address-card {
        padding: 0.75rem;
        font-size: 0.75rem;
    }

    .contract-address-card .flex.items-center {
        padding: 0.5rem;
        font-size: 0.875rem;
    }

    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .card {
        padding: 1rem;
    }

    .twitter-embed-container {
        padding: 0.5rem;
        min-height: 280px;
    }

    .twitter-loading {
        height: 250px;
        font-size: 0.75rem;
    }

    .nav-content {
        padding: 0.5rem 0.75rem;
    }

    .nav-content .flex.items-center.gap-3 {
        gap: 0.5rem;
    }

    .nav-content .flex.items-center.gap-3 span {
        font-size: 1.25rem;
    }

    .nav-content .flex.items-center.gap-3 img {
        width: 2rem;
        height: 2rem;
    }

    .btn-buy {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .marquee-image {
        height: 100px;
        width: 100px;
        margin-right: 0.5rem;
    }
}

@media (max-width: 359px) {
    .hero-content h1 {
        font-size: 1.75rem;
    }

    .contract-address-card {
        font-size: 0.625rem;
        padding: 0.5rem;
    }

    .card div {
        font-size: 1.25rem !important;
    }

    .twitter-loading {
        height: 200px;
        font-size: 0.625rem;
    }

    .btn-buy {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }

    section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (max-width: 768px) {

    .btn-buy,
    .btn-secondary {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
}

@media (max-width: 640px) {
    .text-gray-400 {
        color: rgb(209, 213, 219);
    }

    section h2 {
        margin-bottom: 1.5rem;
        padding: 0px 0.5rem;
    }

    section p {
        padding: 0px 0.5rem;
        margin-bottom: 2rem;
    }

    .card .text-gray-400 {
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    body {
        overflow-x: hidden;
    }

    * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .contract-address-card .flex.items-center span {
        word-break: break-all;
        font-size: 0.75rem;
        line-height: 1.2;
    }

    .marquee-outer-container {
        will-change: transform;
        transform: translateZ(0px);
    }
}

.text-sm,
.text-xs,
small,
.text-muted,
.text-gray-400,
.text-gray-300 {
    color: rgb(255, 255, 255) !important;
}

.buba-features-section {
    padding: 64px 0px 32px;
    background: var(--buba-space);
}

.buba-features-grid {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.buba-feature-card {
    overflow: visible;
    width: 190px;
    height: 254px;
}

.buba-feature-card .content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 300ms;
    box-shadow: rgba(0, 0, 0, 0.933) 0px 0px 10px 1px;
    border-radius: 5px;
}

.buba-feature-card .front,
.buba-feature-card .back {
    background-color: var(--buba-space-light, #0A0A8A);
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 5px;
    overflow: hidden;
}

.buba-feature-card .back {
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.buba-feature-card .back::before {
    position: absolute;
    content: " ";
    display: block;
    width: 160px;
    height: 160%;
    background: linear-gradient(90deg, transparent, var(--buba-blue), var(--buba-blue), var(--buba-blue), var(--buba-blue), transparent);
    animation: 5000ms linear 0s infinite normal none running rotation_481;
}

.buba-feature-card .back-content-buba {
    position: absolute;
    width: 99%;
    height: 99%;
    background-color: var(--buba-space-light, #0A0A8A);
    border-radius: 5px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.buba-feature-card:hover .content {
    transform: rotateY(180deg);
}

@keyframes rotation_481 {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.buba-feature-card .front {
    transform: rotateY(180deg);
    color: white;
}

.buba-feature-card .front-content-buba {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.buba-feature-card .badge {
    background-color: rgba(0, 0, 0, 0.333);
    padding: 2px 10px;
    border-radius: 10px;
    backdrop-filter: blur(2px);
    width: fit-content;
}

.buba-feature-card .description {
    box-shadow: rgba(0, 0, 0, 0.533) 0px 0px 10px 5px;
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

.buba-feature-card .title {
    font-size: 11px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
}

.buba-feature-card .title p {
    width: 50%;
}

.buba-feature-card .card-footer {
    color: rgba(255, 255, 255, 0.533);
    margin-top: 5px;
    font-size: 8px;
}

.buba-feature-card .buba-feature-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.buba-feature-card .circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--buba-blue, #335C94);
    position: relative;
    filter: blur(15px);
    animation: 2600ms linear 0s infinite normal none running floating;
}

.buba-feature-card #bottom {
    background-color: var(--buba-highlight, #DCF8FC);
    left: 50px;
    top: 0px;
    width: 150px;
    height: 150px;
    animation-delay: -800ms;
}

.buba-feature-card #right {
    background-color: var(--buba-blue-dark, #2A4A7A);
    left: 160px;
    top: -80px;
    width: 30px;
    height: 30px;
    animation-delay: -1800ms;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 900px) {
    .buba-features-grid {
        gap: 1.2rem;
    }

    .buba-feature-card {
        width: 170px;
        height: 230px;
    }
}

@media (max-width: 600px) {
    .buba-features-section {
        padding: 32px 0px 16px;
    }

    .buba-features-grid {
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
    }

    .buba-feature-card {
        width: 95vw;
        max-width: 320px;
        height: 200px;
    }
}

.uiverse-flip-section {
    padding: 48px 0px 32px;
    background: transparent;
}

.uiverse-flip-grid {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.uiverse-flip-card {
    overflow: visible;
    width: 190px;
    height: 254px;
    perspective: 1000px;
    border-radius: 12px;
}

.uiverse-flip-content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 300ms;
    box-shadow: rgba(0, 0, 0, 0.933) 0px 0px 10px 1px;
    border-radius: 12px;
    position: relative;
}

.uiverse-flip-card:hover .uiverse-flip-content {
    transform: rotateY(180deg);
}

.uiverse-flip-front,
.uiverse-flip-back {
    background-color: var(--buba-space-light, #0A0A8A);
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

.uiverse-flip-front {
    z-index: 2;
    color: white;
}

.uiverse-flip-front-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 18px 0px 10px;
    gap: 0px;
}

.uiverse-flip-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60%;
    min-height: 80px;
}

.uiverse-flip-card-body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 40%;
    min-height: 40px;
    padding-top: 8px;
}

.uiverse-flip-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 0.5rem;
}

.uiverse-flip-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.uiverse-flip-icon {
    font-size: 3rem;
    color: var(--buba-blue, #335C94) !important;
    text-shadow: none !important;
}

.uiverse-flip-title {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--buba-blue, #335C94);
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    white-space: normal;
    max-width: 90%;
    display: block;
}

.uiverse-flip-back {
    transform: rotateY(180deg);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiverse-flip-back::before {
    position: absolute;
    content: " ";
    display: block;
    width: 160px;
    height: 160%;
    border: 6px solid var(--buba-blue, #335C94);
    background: linear-gradient(90deg, transparent, var(--buba-blue, #335C94), var(--buba-blue, #335C94), var(--buba-blue, #335C94), var(--buba-blue, #335C94), transparent);
    animation: 2.5s linear 0s infinite normal none running rotation_481;
    z-index: 1;
    opacity: 0.7;
}

@keyframes rotation_481 {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.uiverse-flip-back-content {
    position: absolute;
    width: 99%;
    height: 99%;
    background-color: var(--buba-space-light, #0A0A8A);
    border-radius: 5px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    z-index: 2;
}

.uiverse-flip-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

.uiverse-flip-overlay {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 18px 12px 16px;
    background: linear-gradient(0deg, rgba(10, 10, 42, 0.97) 80%, rgba(10, 10, 42, 0.2) 100%);
    color: var(--buba-highlight, #DCF8FC);
    border-radius: 0px 0px 5px 5px;
    text-align: left;
    z-index: 2;
}

.uiverse-flip-overlay h3 {
    font-weight: bold;
    margin: 0px 0px 6px;
    font-size: 1.1rem;
    color: var(--buba-blue, #335C94) !important;
}

.uiverse-flip-overlay p {
    font-size: 0.72rem;
    margin: 0px;
    color: rgb(255, 255, 255) !important;
}

.fas,
.fa,
.fab,
.far {
    color: inherit !important;
}

.fas.text-\[#FFD700\],
.fa.text-\[#FFD700\],
.fab.text-\[#FFD700\],
.far.text-\[#FFD700\] {
    color: rgb(255, 215, 0) !important;
}

.uiverse-flip-icon .fas,
.uiverse-flip-icon .fa,
.uiverse-flip-icon .fab,
.uiverse-flip-icon .far {
    color: rgb(255, 215, 0) !important;
}

.card .fas,
.card .fa,
.card .fab,
.card .far {
    color: rgb(255, 215, 0) !important;
}

.uiverse-flip-icon .fa-lock {
    margin-top: 12px;
    font-size: 2.6rem;
}

@media (max-width: 600px) {
    .uiverse-flip-card-img {
        min-height: 56px;
    }

    .uiverse-flip-card-body {
        min-height: 28px;
    }

    .uiverse-flip-title {
        font-size: 1rem;
    }
}

.btn-social img,
.btn-buy img,
.btn-secondary img {
    filter: brightness(0) invert(1) !important;
}

.primary-gradient-overlay {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 35%;
    background: linear-gradient(360deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0.0) 100%);
    opacity: 1;
    pointer-events: none;
    z-index: 10;
}

.tweet-images {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tweet-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.tweet-image-container:hover {
    transform: scale(1.02);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
}

.tweet-image {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.tweet-image:hover {
    transform: scale(1.05);
}

.tweet-images:has(.tweet-image-container:nth-child(2)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.tweet-images:has(.tweet-image-container:nth-child(3)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.tweet-images:has(.tweet-image-container:nth-child(3)) .tweet-image-container:last-child {
    grid-column: 1 / -1;
}

.tweet-images:has(.tweet-image-container:nth-child(4)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.tweet-image-container::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: 1.5s ease 0s infinite normal none running shimmer;
    z-index: 1;
}

.tweet-image-container img[src] {
    position: relative;
    z-index: 2;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media (max-width: 768px) {
    .tweet-image {
        max-height: 150px;
    }

    .tweet-images:has(.tweet-image-container:nth-child(2)),
    .tweet-images:has(.tweet-image-container:nth-child(3)),
    .tweet-images:has(.tweet-image-container:nth-child(4)) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tweet-image {
        max-height: 120px;
    }

    .tweet-image-container {
        margin-bottom: 0.25rem;
    }
}

.hide-loader::before {
    display: none !important;
}

.twitter-loading {
    transition: opacity 0.3s, transform 0.3s;
}

.shimmer-effect {
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent) 0% 0% / 200% 100%;
    animation: 2s ease 0s infinite normal none running shimmer;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0px;
    }

    100% {
        background-position: 200% 0px;
    }
}

.twitter-loading .animate-spin {
    box-shadow: rgba(168, 85, 247, 0.3) 0px 0px 20px;
}

.twitter-loading .animate-ping {
    animation: 1.5s cubic-bezier(0, 0, 0.2, 1) 0s infinite normal none running ping;
}

@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.twitter-loading .animate-pulse {
    animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.navbar-overlay {
    transition: 0.3s;
}

.navbar-overlay.navbar-transparent {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

.navbar-overlay {
    backdrop-filter: none !important;
}

.navbar-overlay .nav-content {
    transition: 0.3s;
}

.navbar-overlay.navbar-compact .nav-content {
    min-height: 2.5rem;
    transform: scale(0.8);
    transform-origin: center center;
}

@font-face {
    font-family: byrd;
    src: url("../fonts/byrd-bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: byrd-bold;
    src: url("../fonts/byrd-bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

.button {
    --primary: #8B5CF6;
    --neutral-1: #A78BFA;
    --neutral-2: #7C3AED;
    --radius: 12px;
    cursor: pointer;
    border-radius: var(--radius);
    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 1px;
    border: none;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0.5px 0.5px 1px, rgba(0, 0, 0, 0.2) 0px 10px 20px, rgba(0, 0, 0, 0.05) 0px 4px 5px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.3s;
    min-width: 280px;
    padding: 12px 24px;
    height: 48px;
    font-family: byrd-bold, byrd, "Galano Grotesque", Poppins, Montserrat, sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
}

.button:hover {
    transform: scale(1.02);
    box-shadow: rgba(139, 92, 246, 0.3) 0px 0px 1px 2px, rgba(139, 92, 246, 0.2) 0px 15px 30px, rgba(139, 92, 246, 0.1) 0px 10px 3px -3px;
}

.button:active {
    transform: scale(1);
    box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 1px 2px, rgba(0, 0, 0, 0.2) 0px 10px 3px -3px;
}

.button::after {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: var(--radius);
    border: 2.5px solid transparent;
    background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box, linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)) border-box;
    z-index: 0;
    transition: 0.4s;
}

.button:hover::after {
    transform: scale(1.05, 1.1);
    box-shadow: rgb(255, 255, 255) 0px -1px 3px 0px inset;
}

.button::before {
    content: "";
    inset: 7px 6px 6px;
    position: absolute;
    background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
    border-radius: 30px;
    filter: blur(0.5px);
    z-index: 2;
}

.state p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.state .icon {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    transform: scale(1.25);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.state .icon svg {
    overflow: visible;
}

.outline {
    position: absolute;
    border-radius: inherit;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s;
    inset: -2px -3.5px;
}

.outline::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: conic-gradient(from 180deg, transparent 60%, white 80%, transparent 100%);
    animation: 2s linear 0s infinite normal none paused spin;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.button:hover .outline {
    opacity: 1;
}

.button:hover .outline::before {
    animation-play-state: running;
}

.button:hover {
    box-shadow: rgba(139, 92, 246, 0.3) 0px 0px 20px, rgba(139, 92, 246, 0.2) 0px 0px 40px, rgba(139, 92, 246, 0.1) 0px 0px 60px;
}

.state p span {
    display: block;
    opacity: 0;
    animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}

.button:hover p span {
    opacity: 1;
    animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
}

.button:focus p span {
    opacity: 1;
    animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
}

@keyframes wave {
    30% {
        opacity: 1;
        transform: translateY(4px) translateX(0px) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px) translateX(0px) rotate(0deg);
        color: rgb(139, 92, 246);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px) translateX(5px) rotate(-90deg);
        color: rgb(139, 92, 246);
        filter: blur(5px);
    }

    30% {
        opacity: 1;
        transform: translateY(4px) translateX(0px) rotate(0deg);
        filter: blur(0px);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px) translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
}

@keyframes disapear {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(5px) translateY(20px);
        color: var(--primary);
        filter: blur(5px);
    }
}

.state--default .icon svg {
    animation: 0.6s ease 0s 1 normal forwards running land;
}

.button:hover .state--default .icon {
    transform: rotate(45deg) scale(1.25);
}

.button:focus .state--default svg {
    animation: 0.8s linear 0s 1 normal forwards running takeOff;
}

.button:focus .state--default .icon {
    transform: rotate(0deg) scale(1.25);
}

@keyframes takeOff {
    0% {
        opacity: 1;
    }

    60% {
        opacity: 1;
        transform: translateX(70px) rotate(45deg) scale(2);
    }

    100% {
        opacity: 0;
        transform: translateX(160px) rotate(45deg) scale(0);
    }
}

@keyframes land {
    0% {
        transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
        opacity: 0;
        filter: blur(3px);
    }

    100% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
}

.state--default .icon::before {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    width: 0px;
    left: -5px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}

.button:focus .state--default .icon::before {
    animation: 0.8s linear 0s 1 normal forwards running contrail;
}

@keyframes contrail {
    0% {
        width: 0px;
        opacity: 1;
    }

    8% {
        width: 15px;
    }

    60% {
        opacity: 0.7;
        width: 80px;
    }

    100% {
        opacity: 0;
        width: 160px;
    }
}

.state {
    padding-left: 29px;
    z-index: 2;
    display: flex;
    position: relative;
}

.state--default span:nth-child(4) {
    margin-right: 5px;
}

.state--sent {
    display: none;
}

.state--sent svg {
    transform: scale(1.25);
    margin-right: 8px;
}

.button:focus .state--default {
    position: absolute;
}

.button:focus .state--sent {
    display: flex;
}

.button:focus .state--sent span {
    opacity: 0;
    animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}

.button:focus .state--sent .icon svg {
    opacity: 0;
    animation: 1.2s ease 0.8s 1 normal forwards running appear;
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(4) rotate(-40deg);
        color: var(--primary);
        filter: blur(4px);
    }

    30% {
        opacity: 1;
        transform: scale(0.6);
        filter: blur(1px);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.meme-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    cursor: pointer;
    will-change: transform;
    transform: translateZ(0px);
    contain: layout style paint;
}

.meme-card:hover {
    transform: translateY(-3px) translateZ(0px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 25px;
    border-color: rgba(19, 68, 179, 0.5);
}

.meme-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    contain: layout style paint;
}

.meme-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s, filter 0.3s;
    will-change: transform;
    transform: translateZ(0px);
    contain: layout style paint;
}

.meme-card:hover .meme-image {
    transform: scale(1.03) translateZ(0px);
    filter: brightness(1.05) contrast(1.05);
}

.meme-card:focus {
    outline: rgba(19, 68, 179, 0.6) solid 2px;
    outline-offset: 2px;
}

.masonry-container {
    display: flex;
    gap: 1rem;
    contain: layout style paint;
}

.masonry-column {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    contain: layout style paint;
}

@media (max-width: 767px) {
    .masonry-container {
        flex-direction: column;
    }

    .masonry-column {
        flex: 0 0 auto;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .masonry-container {
        gap: 0.75rem;
    }

    .masonry-column {
        gap: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .masonry-container {
        gap: 1.5rem;
    }

    .masonry-column {
        gap: 1.5rem;
    }
}

* {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.allow-select {
    user-select: text;
}

* {
    -webkit-user-drag: none;
}

.contract-address-display {
    margin-bottom: 0.5rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.contract-address-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 24px;
    height: 48px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 280px;
    font-family: byrd-bold, byrd, "Galano Grotesque", Poppins, Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 1px;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0.5px 0.5px 1px, rgba(0, 0, 0, 0.2) 0px 10px 20px, rgba(0, 0, 0, 0.05) 0px 4px 5px 0px;
}

.contract-address-box:hover {
    transform: scale(1.02);
    box-shadow: rgba(139, 92, 246, 0.3) 0px 0px 1px 2px, rgba(139, 92, 246, 0.2) 0px 15px 30px, rgba(139, 92, 246, 0.1) 0px 10px 3px -3px;
    border-color: rgba(139, 92, 246, 0.5);
}

.contract-address-box::before {
    content: "";
    inset: 7px 6px 6px;
    position: absolute;
    background: linear-gradient(to top, rgba(167, 139, 250, 0.1), rgba(124, 58, 237, 0.1));
    border-radius: 30px;
    filter: blur(0.5px);
    z-index: 2;
}

@media (max-width: 768px) {
    .contract-address-box {
        padding: 0.75rem 1rem;
        min-width: auto;
        width: 100%;
    }
}

#floating-button {
    display: none;
    /* Hidden by default */
}

/* Floating button only visible in PFP section */
.floating-button-pfp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    cursor: pointer;
    display: none;
    /* Hidden by default, shown by JavaScript */
    animation: slideInFromRight 1s ease-out;
}

/* Animation masuk dari kanan */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* AO Falling Animation */
.ao-falling-container {
    position: fixed;
    top: -200px;
    right: 50px;
    z-index: 9998;
    pointer-events: none;
    display: none;
}

.ao-falling-image {
    width: 200px;
    height: 200px;
    object-fit: contain;
    animation: aoFalling 2s linear forwards;
}

@keyframes aoFalling {
    0% {
        transform: translateY(0) scale(1.5);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) scale(0.3);
        opacity: 0;
    }
}

.floating-character {
    width: 600px;
    height: 600px;
    object-fit: contain;
    transition: 0.3s;
}

.floating-character:hover {
    filter: brightness(1.2) contrast(1.1) saturate(1.2);
}


@media (max-width: 768px) {
    .floating-character {
        width: 480px;
        height: 480px;
    }
}

@media (max-width: 480px) {
    .floating-character {
        width: 360px;
        height: 360px;
    }
}

.overlapping-section {
    position: relative;
    z-index: 100;
}

.overlap-container {
    max-width: 1200px;
    margin: 0px auto;
    padding: 80px 20px;
    position: relative;
}

.overlap-content {
    text-align: center;
    color: white;
}

.overlap-title {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: white;
}

.overlap-subtitle {
    font-size: 1.5rem;
    color: rgb(129, 40, 245);
    margin-bottom: 3rem;
    font-weight: 300;
    letter-spacing: 2px;
}

.overlap-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(127, 229, 228, 0.1), transparent);
    transition: left 0.5s;
}

.feature-item:hover {
    transform: translateY(-10px);
    box-shadow: rgba(127, 229, 228, 0.2) 0px 20px 40px;
    border-color: rgba(127, 229, 228, 0.5);
}

.feature-item:hover::before {
    left: 100%;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(rgba(127, 229, 228, 0.5) 0px 0px 10px);
}

.feature-item h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(129, 40, 245);
    margin-bottom: 0.5rem;
}

.feature-item p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.5;
}

.overlapping-section {
    opacity: 0;
    transform: translateY(50px);
    transition: 0.8s;
}

.overlapping-section.visible {
    opacity: 1;
    transform: translateY(0px);
}

@media (max-width: 768px) {
    .overlap-title {
        font-size: 2.5rem;
    }

    .overlap-subtitle {
        font-size: 1.2rem;
    }

    .overlap-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-item {
        padding: 1.5rem;
    }

    .feature-icon {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .overlap-title {
        font-size: 2rem;
    }

    .overlap-subtitle {
        font-size: 1rem;
    }

    .overlap-container {
        padding: 60px 15px;
    }
}

.sticky-hero {
    position: sticky;
    top: 0px;
    height: 100vh;
    z-index: 100;
    background: linear-gradient(135deg, rgba(2, 5, 98, 0.8) 0%, rgba(127, 229, 228, 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* Ubah dari hidden ke visible */
    transform: translateZ(0px);
    will-change: transform;
}

.hero-content {
    position: relative;
    z-index: 110;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0px 20px;
}

.hero-text {
    margin-bottom: 2rem;
}

.hero-title {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: white;
}

.hero-logo {
    width: 100%;
    max-width: 600px;
    height: auto;
    filter: drop-shadow(rgba(51, 92, 148, 0.5) 0px 0px 20px);
    transition: filter 0.3s;
    transform: translateY(-100vh) scale(2);
    opacity: 0;
    will-change: transform;
}

.hero-logo.animate-fall {
    animation: 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 1 normal forwards running fallDownBounce;
}

@keyframes fallDownBounce {
    0% {
        transform: translateY(-100vh) scale(2);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        transform: translateY(20px) scale(1.9);
    }

    80% {
        transform: translateY(-10px) scale(2.1);
    }

    100% {
        transform: translateY(0px) scale(2);
        opacity: 1;
    }
}

.hero-logo:hover {
    filter: drop-shadow(rgba(127, 229, 228, 0.8) 0px 0px 30px);
    transform: scale(1.02);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: rgb(129, 40, 245);
    margin-bottom: 2rem;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0px auto;
}

@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero-buttons {
        gap: 0.5rem;
    }
}

.btn-primary,
.btn-secondary {
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, rgb(127, 229, 228) 0%, rgb(220, 248, 252) 100%);
    color: white;
    border: none;
}

.btn-secondary {
    background: transparent;
    color: rgb(129, 40, 245);
    border: 2px solid rgb(129, 40, 245);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: rgba(127, 229, 228, 0.3) 0px 10px 20px;
}

.btn-secondary:hover {
    background: rgba(127, 229, 228, 0.1);
    transform: translateY(-2px);
}

.overlapping-section {
    position: relative;
    z-index: 200;
    background: transparent;
    backdrop-filter: blur(10px);
    transition: 0.3s;
    display: none;
}

.overlapping-section.over-hero {
    background: rgba(2, 5, 98, 0.1);
    backdrop-filter: blur(20px);
    display: block;
}

.overlap-container {
    max-width: 1200px;
    margin: 0px auto;
    padding: 80px 20px;
    position: relative;
}

.overlap-content {
    text-align: center;
    color: white;
}

.overlap-title {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: white;
}

.overlap-subtitle {
    font-size: 1.5rem;
    color: rgb(129, 40, 245);
    margin-bottom: 3rem;
    font-weight: 300;
    letter-spacing: 2px;
}

.overlap-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(127, 229, 228, 0.1), transparent);
    transition: left 0.5s;
}

.feature-item:hover {
    transform: translateY(-10px);
    box-shadow: rgba(127, 229, 228, 0.2) 0px 20px 40px;
    border-color: rgba(127, 229, 228, 0.5);
}

.feature-item:hover::before {
    left: 100%;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(rgba(127, 229, 228, 0.5) 0px 0px 10px);
}

.feature-item h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(129, 40, 245);
    margin-bottom: 0.5rem;
}

.feature-item p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.5;
}

.content-section {
    position: relative;
    z-index: 500;
    background: transparent;
    margin-top: 2rem;
}

.content-section.transition-ready {
    transition: opacity 0.2s;
}

.content-section.over-hero {
    background: transparent;
}

.meme-section {
    background: transparent;
    margin-top: 2rem;
}

.meme-section.over-hero {
    background: transparent;
}

section:not(.sticky-hero) {
    position: relative;
    z-index: 50;
    margin-top: 1rem;
}

section:not(.sticky-hero):first-of-type {
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-logo {
        max-width: 420px;
        width: 420px;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .overlap-title {
        font-size: 2.5rem;
    }

    .overlap-subtitle {
        font-size: 1.2rem;
    }

    .overlap-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-item {
        padding: 1.5rem;
    }

    .feature-icon {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-logo {
        max-width: 350px;
        width: 350px;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .overlap-title {
        font-size: 2rem;
    }

    .overlap-subtitle {
        font-size: 1rem;
    }

    .overlap-container {
        padding: 60px 15px;
    }
}

.hero-parallax-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 50;
}

.parallax-layer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.05s ease-out;
    transform: scale(1.2);
}

.mouse-parallax {
    transform: translate3d(0px, 0px, 0px) scale(1.2);
    pointer-events: none;
    transition: transform 0.05s ease-out;
    transform-origin: center center;
}

.layer-9 {
    z-index: 2;
}

.layer-10 {
    z-index: 1;
}

.navbar-footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 9999;
    background: transparent;
    margin-bottom: 0px;
    /* Hapus margin bottom */
    padding: 5px 0px;
    transition: 0.3s;
}

.navbar-footer .nav-content {
    max-width: 95%;
    margin: 0px auto;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-footer .btn-social {
    color: white;
    text-decoration: none;
    transition: 0.3s;
    text-shadow: rgba(127, 229, 228, 0.6) 0px 0px 8px, rgba(0, 0, 0, 0.5) 0px 1px 2px;
    filter: drop-shadow(rgba(127, 229, 228, 0.3) 0px 0px 5px);
}

.navbar-footer .btn-social:hover {
    transform: translateY(-2px);
    text-shadow: rgba(127, 229, 228, 0.9) 0px 0px 12px, rgba(0, 0, 0, 0.7) 0px 1px 3px;
    filter: drop-shadow(rgba(127, 229, 228, 0.5) 0px 0px 8px);
}

.navbar-footer .btn-buy {
    background: linear-gradient(135deg, rgba(127, 229, 228, 0.8) 0%, rgba(220, 248, 252, 0.8) 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(127, 229, 228, 0.4) 0px 2px 8px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;
    border: 1px solid rgba(127, 229, 228, 0.3);
}

.navbar-footer .btn-buy:hover {
    transform: translateY(-2px);
    box-shadow: rgba(127, 229, 228, 0.6) 0px 5px 15px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset;
    background: linear-gradient(135deg, rgba(127, 229, 228, 0.95) 0%, rgba(220, 248, 252, 0.95) 100%);
    border-color: rgba(127, 229, 228, 0.5);
}

@media (max-width: 1024px) {
    .navbar-footer .nav-content {
        max-width: 98%;
        padding: 0px 15px;
    }

    .navbar-footer .flex.items-center.gap-4 {
        gap: 12px;
    }

    .navbar-footer .bg-gray-800 {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Tombol menggunakan styling default tanpa modifikasi */
}

@media (max-width: 768px) {
    .navbar-footer .nav-content {
        padding: 0px 15px;
        flex-direction: column;
        gap: 15px;
    }

    .navbar-footer .nav-content>div {
        width: 100%;
        justify-content: center;
    }

    .navbar-footer .nav-content>div:first-child {
        order: 2;
    }

    .navbar-footer .nav-content>div:last-child {
        order: 1;
    }

    .navbar-footer .btn-buy {
        padding: 6px 12px;
        font-size: 0.9rem;
    }

    .navbar-footer .flex.items-center.gap-4 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .navbar-footer .bg-gray-800 {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    /* Tombol menggunakan styling default tanpa modifikasi */
}

@media (max-width: 480px) {
    .navbar-footer {
        padding: 8px 0px;
    }

    .navbar-footer .nav-content {
        padding: 0px 10px;
        gap: 12px;
    }

    .navbar-footer .nav-content>div {
        gap: 8px;
    }

    .navbar-footer img {
        width: 16px;
        height: 16px;
    }

    .navbar-footer .w-20 {
        width: 3rem !important;
        height: 3rem !important;
    }

    .navbar-footer .bg-gray-800 {
        padding: 6px 8px;
        font-size: 0.7rem;
        max-width: 120px;
    }

    /* Tombol menggunakan styling default tanpa modifikasi */

    .navbar-footer .w-7 {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

@media (max-width: 360px) {
    .navbar-footer {
        padding: 6px 0px;
    }

    .navbar-footer .nav-content {
        padding: 0px 8px;
        gap: 10px;
    }

    .navbar-footer .nav-content>div {
        gap: 6px;
    }

    .navbar-footer .w-20 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .navbar-footer .bg-gray-800 {
        padding: 4px 6px;
        font-size: 0.65rem;
        max-width: 100px;
    }

    /* Tombol menggunakan styling default tanpa modifikasi */

    .navbar-footer .w-7 {
        width: 1rem !important;
        height: 1rem !important;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .navbar-footer {
        padding: 4px 0px;
    }

    .navbar-footer .nav-content {
        gap: 8px;
    }

    .navbar-footer .nav-content>div {
        gap: 6px;
    }

    .navbar-footer .w-20 {
        width: 2rem !important;
        height: 2rem !important;
    }

    .navbar-footer .bg-gray-800 {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    /* Tombol menggunakan styling default tanpa modifikasi */

    .twitter-divider-image {
        top: -80px;
        min-height: 80px;
        /* Tinggi minimum untuk landscape mobile */
        object-fit: cover;
    }
}

.hero-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(0px);
    transition: 0.3s;
    z-index: 200;
    pointer-events: none;
}

.hero-overlay.active {
    background: rgba(2, 5, 98, 0.1);
    backdrop-filter: blur(8px);
}

.content-section {
    position: relative;
    z-index: 300;
    transition: none;
    opacity: 1;
    background: none transparent !important;
    backdrop-filter: none !important;
}

.content-section.transition-ready {
    transition: opacity 0.2s;
    backdrop-filter: none !important;
    /* background: #120225 !important; */
}

.content-section.over-hero {
    transition: opacity 0.2s;
    background: none transparent !important;
    backdrop-filter: none !important;
}

.meme-section {
    transition: none;
    opacity: 1;
    background: none transparent !important;
    backdrop-filter: none !important;
}

.meme-section.over-hero {
    transition: opacity 0.2s;
    background: none transparent !important;
    backdrop-filter: none !important;
}

section:not(.sticky-hero) {
    position: relative;
    z-index: 300;
    transition: none;
    opacity: 1;
    backdrop-filter: none !important;
    background: none transparent !important;
}

.hero-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.2s, -webkit-backdrop-filter 0.2s;
    z-index: 200;
    pointer-events: none;
}

.hero-overlay.active {
    background: rgba(2, 5, 98, 0.1);
}

/* Divider image styling baru - terintegrasi dengan universe section */
.divider-image-standalone {
    position: absolute;
    top: -50%;
    /* Overlap ke atas section universe */
    left: 50%;
    transform: translateX(-50%);
    /* Center horizontal */
    width: 100%;
    /* max-width: 1200px; */
    /* Sesuaikan dengan container universe */
    height: auto;
    object-fit: contain;
    object-position: center center;
    z-index: 50;
    /* Di atas background universe tapi di bawah content */
    pointer-events: none;
    display: block;
}

.divider-image-standalone.scrolled {
    /* transform: translateX(-50%); */
    /* Hapus efek zoom saat scroll */
}

.divider-image-top {
    z-index: 60;
    /* Z-index lebih tinggi dari divider-image-standalone (50) */
    transition: filter 0.3s ease;
}

/* Efek glow ungu cerah pada gambar im1.png saat hover area interaksi */

/* Overlay interaksi yang mengikuti posisi gambar */
.im1-interactive-overlay {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 65;
    pointer-events: none;
    /* Non-interactive overlay */
    transition: all 0.3s ease;
}

/* Area interaksi di tengah overlay - bentuk persegi sama sisi */
.im1-interactive-overlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(3) rotate(8deg);
    width: 80px;
    height: 120px;
    /* Ukuran tetap untuk persegi sama sisi */
    background: transparent;
    border: none;
    border-radius: 8px;
    pointer-events: auto;
    /* Hanya area ini yang interactive */
    cursor: pointer;
    transition: all 0.3s ease;
}

.im1-interactive-overlay:hover::before {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Efek glow ungu cerah pada gambar im1.png saat hover area interaksi - REDUCED 70% */
.im1-interactive-overlay:hover~.divider-image-standalone.divider-image-top,
.im1-interactive-overlay:hover~.divider-image-top {
    filter:
        drop-shadow(0 0 6px rgba(139, 92, 246, 0.3)) drop-shadow(0 0 12px rgba(168, 85, 247, 0.3)) drop-shadow(0 0 18px rgba(192, 132, 252, 0.3)) drop-shadow(0 0 24px rgba(221, 214, 254, 0.3)) brightness(1.03);
}

/* Alternatif dengan JavaScript untuk memastikan efek bekerja - REDUCED 70% */
.divider-image-top.glow-effect {
    filter:
        drop-shadow(0 0 6px rgba(139, 92, 246, 0.3)) drop-shadow(0 0 12px rgba(168, 85, 247, 0.3)) drop-shadow(0 0 18px rgba(192, 132, 252, 0.3)) drop-shadow(0 0 24px rgba(221, 214, 254, 0.3)) brightness(1.03);
}

/* Responsive untuk overlay */
@media (max-width: 768px) {
    .im1-interactive-overlay {
        top: -100px;
        height: 200px;
        /* Sesuaikan dengan tinggi gambar di mobile */
    }

    .im1-interactive-overlay::before {
        width: 70px;
        height: 70px;
        transform: translate(-50%, -50%) scale(2.3) rotate(9deg);
        /* Persegi sama sisi untuk tablet dengan scale dan rotate */
    }
}

@media (max-width: 480px) {
    .im1-interactive-overlay {
        top: -9%;
        height: 150px;
        /* Sesuaikan dengan tinggi gambar di mobile kecil */
    }

    .im1-interactive-overlay::before {
        width: 60px;
        height: 60px;
        transform: translate(-50%, -50%) scale(2.3) rotate(9deg);
        /* Persegi sama sisi untuk mobile dengan scale dan rotate */
    }
}

@media (max-width: 360px) {
    .im1-interactive-overlay::before {
        width: 50px;
        height: 50px;
        transform: translate(-50%, -50%) scale(2.3) rotate(9deg);
        /* Persegi sama sisi untuk mobile kecil dengan scale dan rotate */
    }
}



/* Tooltip untuk area interaksi im1 */
.im1-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.im1-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive tooltip */
@media (max-width: 768px) {
    .im1-tooltip {
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .im1-tooltip {
        font-size: 11px;
        padding: 5px 8px;
    }

    .im1-area-indicator::before {
        font-size: 10px;
    }

    .im1-area-indicator {
        width: 25%;
        height: 25%;
    }
}

@media (max-width: 360px) {
    .im1-area-indicator::before {
        font-size: 9px;
    }

    .im1-area-indicator {
        width: 30%;
        height: 30%;
    }
}


/* Efek hover tambahan untuk area interaksi */
.im1-interactive-area:hover {
    cursor: pointer;
    filter: brightness(1.1);
}


.section-bg-video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: visible;
    /* Ubah dari hidden ke visible */
}

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 120%;
    min-height: 120%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
    will-change: transform;
    transition: none;
}

@media (max-width: 768px) {
    .divider-image-standalone {
        top: -100px;
        /* Overlap lebih kecil untuk mobile */
        max-width: 100%;
    }

    .bg-video {
        min-width: 130%;
        min-height: 130%;
    }
}

@media (max-width: 480px) {
    .divider-image-standalone {
        top: -9%;
        /* Overlap lebih kecil untuk mobile kecil */
        max-width: 100%;
    }

    .bg-video {
        min-width: 160%;
        min-height: 160%;
    }
}

.buba-universe-section {
    /* position: relative; */
    padding-top: 15vh !important;
    padding: 100px;
    /* Reduced padding top since no overlap */
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(2, 5, 98, 0.1) 0%, rgba(127, 229, 228, 0.1) 100%);
    backdrop-filter: blur(10px);
    z-index: 10;
    margin-top: 0;
    /* Removed negative margin - no overlap */
    overflow: visible;
}

.universe-container {
    margin-top: 10vh !important;
    justify-content: center;
    display: block;
    align-items: center;
    position: relative;
    z-index: 60;
    max-width: 1200px;
    margin: 0px auto;
    text-align: center;
    will-change: transform;
}

.universe-title {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.universe-title.animate {
    opacity: 1;
    transform: translateY(0px) scale(1);
}

.universe-subtitle {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

.universe-subtitle.animate {
    opacity: 1;
    transform: translateY(0px) scale(1);
}

.universe-cards {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    transition: 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

.universe-cards.animate {
    opacity: 1;
    transform: translateY(0px) scale(1);
}

.card-hologram-container {
    opacity: 0;
    transform: translateY(50px) scale(0.8) rotateY(15deg);
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card-hologram-container.animate {
    opacity: 1;
    transform: translateY(0px) scale(1) rotateY(0deg);
}

.card-hologram-container:nth-child(1) {
    transition-delay: 0.1s;
}

.card-hologram-container:nth-child(2) {
    transition-delay: 0.2s;
}

.card-hologram-container:nth-child(3) {
    transition-delay: 0.3s;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.3) rotateY(45deg);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-20px) scale(1.1) rotateY(0deg);
    }

    70% {
        transform: translateY(10px) scale(0.95) rotateY(0deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1) rotateY(0deg);
    }
}

@keyframes bounceInTitle {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.5) rotateX(45deg);
    }

    50% {
        opacity: 0.9;
        transform: translateY(-30px) scale(1.2) rotateX(0deg);
    }

    70% {
        transform: translateY(15px) scale(0.9) rotateX(0deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1) rotateX(0deg);
    }
}

.card-hologram-container.animate {
    animation: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 1 normal forwards running bounceIn;
}

.universe-title.animate {
    animation: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 1 normal forwards running bounceInTitle;
}

.buba-universe-section {
    overflow: visible;
    /* Ubah dari hidden ke visible */
    position: relative;
    transform: translateZ(0px);
    will-change: transform;
}


.universe-title {
    will-change: transform;
    transform-origin: center center;
}

.universe-subtitle {
    will-change: transform;
    transform-origin: center center;
}

.universe-cards {
    will-change: transform;
    transform-origin: center center;
}

.card-hologram-container {
    will-change: transform;
    transform-origin: center center;
}

.universe-parallax-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    /* background: linear-gradient(135deg, rgba(51, 92, 148, 0.1) 0%, rgba(127, 229, 228, 0.05) 50%, rgba(51, 92, 148, 0.1) 100%); */
    /* z-index: 1; */
    will-change: transform;
}

.universe-parallax-particles {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    will-change: transform;
    pointer-events: none;
}

.universe-parallax-particles::before,
.universe-parallax-particles::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(127, 229, 228, 0.3);
    border-radius: 50%;
    animation: 6s ease-in-out 0s infinite normal none running float;
}

.universe-parallax-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.universe-parallax-particles::after {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 0.8;
    }
}


.universe-title {
    will-change: transform;
}

.universe-subtitle {
    will-change: transform;
}

.universe-cards {
    will-change: transform;
}

.card-hologram-container {
    will-change: transform;
}

.card-hologram-container:hover {
    transform: translateY(-10px) scale(1.05);
    transition: 0.3s;
}

.universe-card {
    transition: 0.3s;
}

.card-hologram-container:hover .universe-card {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 40px;
}

.hologram-overlay {
    transition: 0.3s;
}

.card-hologram-container:hover .hologram-overlay {
    transform: translateY(-5px);
}

.universe-title {
    font-size: 4rem;
    /* margin-bottom: 1rem; */
    color: white;
}

h2.universe-title {
    color: white !important;
}

.universe-subtitle {
    font-size: 1.5rem;
    color: rgb(255 255 255) !important;
    margin-bottom: 4rem;
    letter-spacing: 2px;
}

.universe-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.universe-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: visible;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 40px;
    perspective: 1200px;
}

.universe-card:hover {
    transform: perspective(1200px) rotateX(45deg) translateZ(-100px);
    box-shadow: rgba(127, 229, 228, 0.3) 0px 30px 60px;
}

.universe-card::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 30%;
    background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, transparent 100%);
    border-radius: 20px 20px 0px 0px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

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

.card-background {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    transform-style: preserve-3d;
}

.bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.universe-card:hover .bg-image {
    transform: scale(1.1);
    filter: brightness(0.7) blur(1px);
}

@keyframes hologramFloat {

    0%,
    100% {
        transform: translateY(0px) scale(1);
        filter: drop-shadow(rgba(127, 229, 228, 0.8) 0px 0px 20px) drop-shadow(rgba(127, 229, 228, 0.4) 0px 0px 40px) brightness(1.2) contrast(1.1);
    }

    50% {
        transform: translateY(-15px) scale(1.05);
        filter: drop-shadow(rgb(127, 229, 228) 0px 0px 30px) drop-shadow(rgba(127, 229, 228, 0.6) 0px 0px 60px) brightness(1.4) contrast(1.2);
    }
}

@media (max-width: 768px) {
    .universe-title {
        font-size: 2.5rem;
    }

    .universe-subtitle {
        font-size: 1.2rem;
    }

    .universe-cards {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .universe-card {
        max-width: 350px;
        margin: 0px auto;
    }
}

@media (max-width: 480px) {
    .universe-title {
        font-size: 2rem;
    }

    .universe-subtitle {
        font-size: 1rem;
    }

    .buba-universe-section {
        padding: 60px 15px;
        min-height: 80vh;
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .buba-universe-section {
        padding: 60px 15px;
        min-height: 70vh;
        margin-top: 0;
    }
}

.hologram-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateY(50px) scale(0.6);
}

.hologram-image {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
    filter: drop-shadow(rgba(127, 229, 228, 0.8) 0px 0px 20px) drop-shadow(rgba(127, 229, 228, 0.4) 0px 0px 40px) brightness(1.2) contrast(1.1);
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    animation: 3s ease-in-out 0s infinite normal none running hologramFloat;
}

.universe-card.card-1:hover~.hologram-1,
.universe-card.card-2:hover~.hologram-2,
.universe-card.card-3:hover~.hologram-3 {
    opacity: 1;
    transform: translateY(-20px) scale(0.59);
}

.universe-card.card-1:hover~.hologram-1 .hologram-image,
.universe-card.card-2:hover~.hologram-2 .hologram-image,
.universe-card.card-3:hover~.hologram-3 .hologram-image {
    animation: 2s ease-in-out 0s infinite normal none running hologramFloat;
}

.card-hologram-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hologram-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateY(50px) scale(0.9);
}

.hologram-image {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
    filter: drop-shadow(rgba(127, 229, 228, 0.8) 0px 0px 20px) drop-shadow(rgba(127, 229, 228, 0.4) 0px 0px 40px) brightness(1.2) contrast(1.1);
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    animation: 3s ease-in-out 0s infinite normal none running hologramFloat;
}

.universe-card.card-1:hover~.hologram-1,
.universe-card.card-2:hover~.hologram-2,
.universe-card.card-3:hover~.hologram-3 {
    opacity: 1;
    transform: translateY(-20px) scale(0.885);
}

.universe-card.card-1:hover~.hologram-1 .hologram-image,
.universe-card.card-2:hover~.hologram-2 .hologram-image,
.universe-card.card-3:hover~.hologram-3 .hologram-image {
    animation: 2s ease-in-out 0s infinite normal none running hologramFloat;
}

.btn-3d {
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-base {
    width: 160px;
    height: 50px;
    background: rgba(127, 229, 228, 0.1);
    border-radius: 25px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.1) 2px 3px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-shadow {
    position: absolute;
    width: 148px;
    height: 38px;
    background: rgb(0, 0, 0);
    border-radius: 19px;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    z-index: 10;
    filter: blur(1px);
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-label {
    position: absolute;
    width: 148px;
    height: 38px;
    background: linear-gradient(rgb(127, 229, 228), rgb(127, 229, 228));
    border-radius: 19px;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    box-shadow: rgb(127, 229, 228) 0px 4px 2px inset, rgb(127, 229, 228) 0px -4px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-text {
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 14px;
    text-shadow: rgba(0, 0, 0, 0.8) 0px 2px 4px;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-3d-icon {
    width: 16px;
    height: 16px;
    fill: rgb(255, 255, 255);
    filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 2px 4px);
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large-base {
    width: 220px;
    height: 50px;
    background: rgba(127, 229, 228, 0.1);
    border-radius: 25px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.1) 2px 3px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large-shadow {
    position: absolute;
    width: 204px;
    height: 38px;
    background: rgb(0, 0, 0);
    border-radius: 19px;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    z-index: 10;
    filter: blur(1px);
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large-label {
    position: absolute;
    width: 204px;
    height: 38px;
    background: linear-gradient(rgb(127, 229, 228), rgb(127, 229, 228));
    border-radius: 19px;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    box-shadow: rgb(127, 229, 228) 0px 4px 2px inset, rgb(127, 229, 228) 0px -4px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large-text {
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 18px;
    text-shadow: none;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-3d:hover .btn-3d-text {
    font-size: 15px;
    text-shadow: rgba(0, 0, 0, 0.6) 0px 3px 3px;
}

.btn-3d:hover .btn-3d-icon {
    width: 18px;
    height: 18px;
    filter: drop-shadow(rgba(0, 0, 0, 0.6) 0px 3px 3px);
}

.btn-3d-large:hover .btn-3d-large-text {
    font-size: 20px;
    text-shadow: rgba(0, 0, 0, 0.6) 0px 3px 3px;
}

.btn-3d:active .btn-3d-text {
    font-size: 13px;
}

.btn-3d:active .btn-3d-icon {
    width: 14px;
    height: 14px;
}

.btn-3d-large:active .btn-3d-large-text {
    font-size: 17px;
}

.btn-3d:hover .btn-3d-base {
    transform: scale(1.05);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.2) 4px 6px 10px;
}

.btn-3d:hover .btn-3d-shadow {
    filter: blur(2px);
    transform: translateX(-50%) scale(1.02);
}

.btn-3d:hover .btn-3d-label {
    box-shadow: rgb(127, 229, 228) 0px 6px 3px inset, rgb(127, 229, 228) 0px -6px 2px inset, rgba(0, 0, 0, 0.2) 0px 0px 4px;
    transform: translateX(-50%) translateY(-2px);
}

.btn-3d:hover .btn-3d-icon {
    width: 36px;
    height: 36px;
    filter: drop-shadow(rgba(0, 0, 0, 0.6) 0px 3px 3px);
}

.btn-3d:active .btn-3d-label {
    box-shadow: rgba(127, 229, 228, 0.5) 0px 4px 2px inset, rgba(127, 229, 228, 0.5) 0px -4px 2px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px;
    transform: translateX(-50%) translateY(0px);
}

.btn-3d:active .btn-3d-icon {
    width: 30px;
    height: 30px;
}

.btn-3d-large {
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large-base {
    width: 160px;
    height: 160px;
    background: rgba(127, 229, 228, 0.1);
    border-radius: 50%;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.1) 2px 3px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large-shadow {
    position: absolute;
    width: 144px;
    height: 144px;
    background: rgb(0, 0, 0);
    border-radius: 50%;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    z-index: 10;
    filter: blur(1px);
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large-label {
    position: absolute;
    width: 144px;
    height: 144px;
    background: linear-gradient(rgb(127, 229, 228), rgb(127, 229, 228));
    border-radius: 50%;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    box-shadow: rgb(127, 229, 228) 0px 4px 2px inset, rgb(127, 229, 228) 0px -4px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large-icon {
    width: 48px;
    height: 48px;
    fill: rgb(232, 251, 253);
    filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 2px 2px);
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-3d-large:hover .btn-3d-large-base {
    transform: scale(1.05);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.2) 4px 6px 10px;
}

.btn-3d-large:hover .btn-3d-large-shadow {
    filter: blur(2px);
    transform: translateX(-50%) scale(1.02);
}

.btn-3d-large:hover .btn-3d-large-label {
    box-shadow: rgb(127, 229, 228) 0px 6px 3px inset, rgb(127, 229, 228) 0px -6px 2px inset, rgba(0, 0, 0, 0.2) 0px 0px 4px;
    transform: translateX(-50%) translateY(-2px);
}

.btn-3d-large:hover .btn-3d-large-icon {
    width: 54px;
    height: 54px;
    filter: drop-shadow(rgba(0, 0, 0, 0.6) 0px 3px 3px);
}

.btn-3d-large:active .btn-3d-large-label {
    box-shadow: rgba(127, 229, 228, 0.5) 0px 4px 2px inset, rgba(127, 229, 228, 0.5) 0px -4px 2px inset, rgba(0, 0, 0, 0.1) 0px 0px 2px;
    transform: translateX(-50%) translateY(0px);
}

.btn-3d-large:active .btn-3d-large-icon {
    width: 42px;
    height: 42px;
}

.smoke-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(156, 163, 175, 0.8) 0%, rgba(75, 85, 99, 0.4) 50%, transparent 100%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(var(--x), var(--y)) scale(0);
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: smokeFloat;
    animation-timeline: auto;
    animation-range: normal;
    animation-delay: var(--delay);
}

@keyframes smokeFloat {
    0% {
        transform: translate(var(--x), var(--y)) scale(0);
        opacity: 1;
    }

    50% {
        transform: translate(calc(var(--x) * 2), calc(var(--y) * 2)) scale(1.5);
        opacity: 0.8;
    }

    100% {
        transform: translate(calc(var(--x) * 4), calc(var(--y) * 4)) scale(0);
        opacity: 0;
    }
}

.explosion-active {
    animation: 0.5s ease-out 0s 1 normal none running explosionPulse;
}

@keyframes explosionPulse {
    0% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(rgb(236, 72, 153) 0px 0px 0px);
    }

    50% {
        transform: scale(2.5);
        filter: brightness(3) drop-shadow(rgb(236, 72, 153) 0px 0px 30px);
    }

    100% {
        transform: scale(3);
        filter: brightness(2) drop-shadow(rgb(236, 72, 153) 0px 0px 20px);
    }
}

.Btn {
    position: relative;
    width: 150px;
    height: 55px;
    border-radius: 45px;
    border: none;
    background-color: rgb(51, 92, 148);
    box-shadow: rgba(51, 92, 148, 0.3) 0px 10px 10px inset, rgba(5, 5, 5, 0.21) 0px 5px 10px, rgba(134, 56, 185, 0.5) 0px -10px 10px inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
    color: white !important;
}

.Btn::before {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: rgba(250, 250, 250, 0.68);
    content: "";
    filter: blur(1px);
    top: 7px;
    border-radius: 50%;
}

.Btn::after {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: rgba(250, 250, 250, 0.137);
    content: "";
    filter: blur(1px);
    bottom: 7px;
    border-radius: 50%;
}

.Btn:hover {
    animation: 0.9s ease 0s 1 normal both running jello-horizontal;
    box-shadow: rgba(51, 92, 148, 0.4) 0px 10px 15px inset, rgba(5, 5, 5, 0.3) 0px 8px 15px, rgba(134, 56, 185, 0.6) 0px -12px 15px inset;
}

.Btn:active {
    transform: scale(0.95);
    box-shadow: rgba(51, 92, 148, 0.3) 0px 5px 8px inset, rgba(5, 5, 5, 0.2) 0px 3px 8px, rgba(134, 56, 185, 0.4) 0px -6px 8px inset;
}

.Btn-large {
    width: 180px;
    height: 55px;
    font-size: 16px;
    border-radius: 45px;
    background-color: rgb(51, 92, 148);
    color: white !important;
}

.Btn-large::before {
    top: 8px;
}

.Btn-large::after {
    bottom: 8px;
}

.Btn-small {
    width: 120px;
    height: 45px;
    font-size: 14px;
    border-radius: 35px;
    background-color: rgb(51, 92, 148);
    color: white !important;
}

.Btn-small::before {
    top: 6px;
}

.Btn-small::after {
    bottom: 6px;
}

.Btn-copy {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(51, 92, 148);
    color: white !important;
}

.Btn-copy::before {
    width: 60%;
    height: 1px;
    top: 6px;
}

.Btn-copy::after {
    width: 60%;
    height: 1px;
    bottom: 6px;
}

.Btn-copy i {
    font-size: 18px;
    color: white !important;
}

.Btn-copy.success {
    background-color: rgb(16, 185, 129);
    box-shadow: rgba(16, 185, 129, 0.3) 0px 10px 10px inset, rgba(5, 5, 5, 0.21) 0px 5px 10px, rgba(5, 150, 105, 0.5) 0px -10px 10px inset;
}

.Btn-copy.success:hover {
    box-shadow: rgba(16, 185, 129, 0.4) 0px 10px 15px inset, rgba(5, 5, 5, 0.3) 0px 8px 15px, rgba(5, 150, 105, 0.6) 0px -12px 15px inset;
}

.Btn * {
    color: white !important;
}

.Btn-large * {
    color: white !important;
}

.Btn-small * {
    color: white !important;
}

.Btn-copy * {
    color: white !important;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

.btn-3d,
.btn-3d-base,
.btn-3d-shadow,
.btn-3d-label,
.btn-3d-text,
.btn-3d-icon,
.btn-3d-large,
.btn-3d-large-base,
.btn-3d-large-shadow,
.btn-3d-large-label,
.btn-3d-large-text,
.btn-3d-large-icon {
    display: none !important;
}

footer {
    position: relative;
    z-index: 100;
    background: transparent;
    padding: 1rem 0px;
    margin-top: auto;
}

footer .container {
    max-width: 1200px;
    margin: 0px auto;
    padding: 0px 1rem;
}

footer p {
    color: white;
    font-size: 0.75rem;
    font-family: "Courier New", monospace;
    text-align: center;
    margin: 0px;
}

@media (max-width: 768px) {
    footer {
        padding: 0.75rem 0px;
    }

    footer p {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 0.5rem 0px;
    }

    footer p {
        font-size: 0.65rem;
    }
}

.twitter-divider-image {
    position: absolute;
    top: -300px;
    left: 0px;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Ubah dari contain ke cover untuk memenuhi section */
    object-position: center center;
    z-index: 1;
    pointer-events: none;
    display: block;
    min-height: 200px;
    /* Pastikan ada tinggi minimum */
}

.twitter-title,
.twitter-subtitle,
.twitter-cards {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.twitter-card-container {
    opacity: 1;
    transform: translateY(30px) scale(0.95);
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.twitter-card {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateZ(0px);
    position: relative;
    width: 100%;
    min-height: 400px;
    /* Tinggi minimum untuk menjaga tatanan */
    height: auto;
    /* Mengikuti tinggi Twitter embed jika lebih besar */
    border-radius: 20px;
    background: transparent;
    /* Full transparan */
    backdrop-filter: none;
    /* Hapus blur */
    border: none;
    /* Hapus border */
    box-shadow: none;
    /* Hapus bayangan */
    overflow: visible;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-out;
    perspective: 1200px;
}

.twitter-title.animate,
.twitter-subtitle.animate,
.twitter-cards.animate {
    opacity: 1;
    transform: translateY(0px) scale(1);
}

.twitter-card-container.animate {
    opacity: 1;
    transform: translateY(0px) scale(1);
}

.twitter-card-container:nth-child(1) {
    transition-delay: 0.1s;
}

.twitter-card-container:nth-child(2) {
    transition-delay: 0.2s;
}

.twitter-card-container:nth-child(3) {
    transition-delay: 0.3s;
}

.twitter-card-container:nth-child(4) {
    transition-delay: 0.4s;
}

.twitter-card-container:nth-child(5) {
    transition-delay: 0.5s;
}

.twitter-card-container:nth-child(6) {
    transition-delay: 0.6s;
}

@keyframes bounceInTwitter {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8) rotateX(-15deg);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1.05) rotateX(5deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1) rotateX(0deg);
    }
}

@keyframes bounceInTwitterTitle {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9) rotateY(-10deg);
    }

    50% {
        opacity: 0.9;
        transform: translateY(-5px) scale(1.02) rotateY(2deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1) rotateY(0deg);
    }
}

.twitter-card-container.animate {
    animation: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 1 normal forwards running bounceInTwitter;
}

.twitter-title.animate {
    animation: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 1 normal forwards running bounceInTwitterTitle;
}

.buba-twitter-section {
    position: relative !important;
    /* padding: 100px 20px; */
    background: linear-gradient(135deg, rgba(127, 229, 228, 0.1) 0%, rgba(49, 100, 145, 0.05) 100%);
    backdrop-filter: blur(10px);
    z-index: 100;
    transform: translateZ(0px);
    will-change: transform;
    margin-top: 100px !important;
    margin-bottom: calc(40vh - 80px);
    /* Tambah margin bottom untuk section PFP fixed */
}

.twitter-container {
    max-width: 1200px;
    margin: 0px auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.twitter-title {
    font-size: 4rem;
    /* margin-bottom: 1rem; */
    color: white;
}

h2.twitter-title {
    color: white !important;
}

.twitter-subtitle {
    font-size: 1.5rem;
    color: rgb(255, 255, 255) !important;
    margin-bottom: 4rem;
    letter-spacing: 2px;
}

.twitter-cards {
    display: flex;
    grid-template-columns: repeat(auto-fit, 500px);
    /* Fixed width for Twitter cards */
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
    justify-content: center;
    /* Center the grid items */
    align-items: center;
}

.twitter-card-container {
    position: relative;
    width: 500px;
    /* Ubah sesuai dengan width JavaScript */
    /* Match Twitter embed width */
    max-width: 100%;
    min-height: 450px;
    /* Tinggi minimum untuk menjaga tatanan */
    height: auto;
    /* Mengikuti tinggi Twitter embed jika lebih besar */
    margin: 0 auto;
    /* Center the container */
}

.twitter-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.twitter-card-link:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

.twitter-card-link:focus {
    outline: none;
    text-decoration: none;
    color: inherit;
}

/* Twitter card hover effect with consistent overlay area */
.twitter-card {
    position: relative;
    /* Default state - no hover effect */
}

.twitter-card-hover-overlay {
    position: fixed;
    /* Posisi akan diatur oleh JavaScript */
    z-index: 5;
    pointer-events: auto;
    /* Overlay transparan untuk hover detection */
    background: transparent;
    border: none;
    /* Overlay TIDAK mengikuti transform 3D card */
}

.twitter-card.hover-effect-active {
    transform: perspective(1200px) rotateX(30deg) translateZ(-70px);
    box-shadow: none;
    /* Hapus bayangan hover */
    z-index: 10;
    /* Lebih tinggi dari overlay */
}

/* Pastikan overlay tetap di posisi yang benar saat card 3D */
/* Overlay sekarang menggunakan position: fixed dan tidak perlu transform: none */

.twitter-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 20;
    opacity: 1;
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    width: 100%;
    max-width: 280px;
    height: auto;
    min-height: 150px;
}

.twitter-card:hover~.twitter-placeholder {
    opacity: 0;
    transform: translate(-50%, -50%);
}

.twitter-blockquote-overlay.loaded~.twitter-placeholder {
    opacity: 0;
    pointer-events: none;
}

.twitter-blockquote-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8) translateY(50px);
    width: 100%;
    max-width: 280px;
    height: auto;
    min-height: 150px;
    opacity: 0;
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 15;
    pointer-events: none;
}

.twitter-blockquote-overlay.loaded {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.twitter-card:hover~.twitter-blockquote-overlay.loaded {
    transform: translate(-50%, -50%) scale(1);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
    border-style: solid;
    border-color: rgb(127, 229, 228) rgba(127, 229, 228, 0.3) rgba(127, 229, 228, 0.3);
    border-image: initial;
    border-radius: 50%;
    animation: 1s linear 0s infinite normal none running spin;
    margin-bottom: 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.twitter-loading span {
    color: rgb(129, 40, 245);
    font-size: 0.9rem;
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transform-style: preserve-3d;
    transition: 0.3s;
}

.placeholder-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(0.3);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.placeholder-content:hover .placeholder-logo {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(rgba(127, 229, 228, 0.3) 0px 10px 20px);
}

.placeholder-text {
    color: rgb(255, 255, 255) !important;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    transition: 0.3s;
    text-shadow: rgba(127, 229, 228, 0.3) 0px 2px 4px;
}

a .placeholder-text,
a:visited .placeholder-text,
a:link .placeholder-text,
a:hover .placeholder-text {
    color: rgb(255, 255, 255) !important;
}

.placeholder-content:hover .placeholder-text {
    transform: translateY(-2px);
    text-shadow: rgba(127, 229, 228, 0.5) 0px 4px 8px;
    color: rgb(255, 255, 255) !important;
}

.twitter-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 500px;
    /* Sesuaikan dengan width JavaScript */
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    z-index: 15;
}

.twitter-embed.loaded {
    opacity: 1;
}

.twitter-card:hover .twitter-embed.loaded {
    transform: translate(-50%, -50%) scale(1);
    z-index: 25;
}

.twitter-embed iframe {
    border: none;
    border-radius: 20px;
    transform: scale(1);
    /* Hapus scale agar ukuran asli terlihat */
    transform-origin: center center;
    width: 100% !important;
    max-width: 500px !important;
    /* Sesuaikan dengan ukuran baru */
}

.twitter-embed .twitter-tweet {
    border: none;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(129, 40, 245);
    font-size: 0.9rem;
    line-height: 1.4;
    transform-style: flat;
    transform: none;
    width: 100% !important;
    height: 100% !important;
}

.twitter-embed .twitter-tweet p {
    color: rgb(129, 40, 245);
    margin-bottom: 10px;
    font-weight: 500;
    transform-style: flat;
}

.twitter-embed .twitter-tweet a {
    color: rgb(129, 40, 245);
    text-decoration: none;
    opacity: 0.8;
    transform-style: flat;
}

.twitter-embed .twitter-tweet a:hover {
    opacity: 1;
    text-decoration: underline;
}

.twitter-card:hover .twitter-embed .twitter-tweet {
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
}

@media (max-width: 768px) {
    .twitter-title {
        font-size: 3rem;
    }

    .twitter-subtitle {
        font-size: 1.2rem;
    }

    .twitter-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-divider-image {
        top: -200px;
        min-height: 150px;
        /* Tinggi minimum untuk tablet */
        object-fit: cover;
    }

    .twitter-card {
        min-height: 350px;
        /* Tinggi minimum untuk tablet */
        height: auto;
        /* Mengikuti tinggi Twitter embed jika lebih besar */
        /* Removed aspect-ratio to allow natural height */
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-card-container {
        width: 100%;
        /* Full width on tablet */
        max-width: 500px;
        min-height: 350px;
        /* Tinggi minimum untuk tablet */
        height: auto;
        /* Mengikuti tinggi Twitter embed jika lebih besar */
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-card-link:hover {
        transform: translateY(-2px);
    }

    .twitter-card {
        transition: transform 0.6s ease-out;
    }

    .twitter-card.hover-effect-active {
        transform: perspective(1000px) rotateX(20deg) translateZ(-50px);
        box-shadow: none;
        /* Hapus bayangan hover */
        z-index: 10;
        /* Lebih tinggi dari overlay */
    }

    .twitter-card-hover-overlay {
        /* Overlay transparan untuk hover detection */
        background: transparent;
        border: none;
        /* Tinggi akan diatur oleh JavaScript */
    }

    .buba-twitter-section {
        margin-top: -60px !important;
        /* Margin yang lebih normal untuk tablet */
        padding: 80px 20px;
    }
}

@media (max-width: 480px) {
    .twitter-title {
        font-size: 2.5rem;
    }

    .twitter-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .buba-twitter-section {
        padding: 60px 15px;
        margin-top: -40px !important;
        /* Margin yang lebih normal untuk mobile */
    }

    .twitter-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-card {
        min-height: 300px;
        /* Tinggi minimum untuk mobile */
        height: auto;
        /* Mengikuti tinggi Twitter embed jika lebih besar */
        /* Removed aspect-ratio to allow natural height */
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-card-container {
        width: 100%;
        /* Full width on mobile */
        max-width: 500px;
        min-height: 300px;
        /* Tinggi minimum untuk mobile */
        height: auto;
        /* Mengikuti tinggi Twitter embed jika lebih besar */
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-card-link:hover {
        transform: translateY(-1px);
    }

    .twitter-card {
        transition: transform 0.6s ease-out;
    }

    .twitter-card.hover-effect-active {
        transform: perspective(800px) rotateX(15deg) translateZ(-30px);
        box-shadow: none;
        /* Hapus bayangan hover */
        z-index: 10;
        /* Lebih tinggi dari overlay */
    }

    .twitter-card-hover-overlay {
        /* Overlay transparan untuk hover detection */
        background: transparent;
        border: none;
        /* Tinggi akan diatur oleh JavaScript */
    }

    .twitter-placeholder {
        font-size: 0.9rem;
    }

    .twitter-placeholder i {
        font-size: 2rem;
    }

    .twitter-divider-image {
        top: -150px;
        min-height: 120px;
        /* Tinggi minimum untuk mobile */
        object-fit: cover;
    }
}

@media (max-width: 360px) {
    .twitter-title {
        font-size: 2rem;
    }

    .twitter-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    .twitter-cards {
        gap: 0.8rem;
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-card {
        min-height: 250px;
        /* Tinggi minimum untuk small mobile */
        height: auto;
        /* Mengikuti tinggi Twitter embed jika lebih besar */
        /* Removed aspect-ratio to allow natural height */
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-card-container {
        width: 100%;
        /* Full width on small mobile */
        max-width: 500px;
        min-height: 250px;
        /* Tinggi minimum untuk small mobile */
        height: auto;
        /* Mengikuti tinggi Twitter embed jika lebih besar */
        padding: 0;
        /* Padding 0 saat responsive */
    }

    .twitter-card-link:hover {
        transform: translateY(-0.5px);
    }

    .twitter-card {
        transition: transform 0.5s ease-out;
    }

    .twitter-card.hover-effect-active {
        transform: perspective(600px) rotateX(10deg) translateZ(-20px);
        box-shadow: none;
        /* Hapus bayangan hover */
        z-index: 10;
        /* Lebih tinggi dari overlay */
    }

    .twitter-placeholder {
        font-size: 0.8rem;
    }

    .twitter-placeholder i {
        font-size: 1.5rem;
    }

    .twitter-divider-image {
        top: -100px;
        min-height: 100px;
        /* Tinggi minimum untuk mobile kecil */
        object-fit: cover;
    }

    .buba-twitter-section {
        margin-top: -30px !important;
        /* Margin yang lebih normal untuk mobile kecil */
        padding: 40px 10px;
    }
}

.buba-pfp-generator-section {
    position: relative;
    /* Kembalikan ke fixed agar menempel ke bottom */
    bottom: 0;
    /* Posisikan di bottom screen */
    left: 0;
    right: 0;
    padding: 120px 20px;
    padding-bottom: calc(120px + 80px);
    /* Padding untuk navbar footer */
    overflow: visible;
    /* Ubah dari hidden ke visible agar gambar tidak terpotong */
    display: flex;
    align-items: center;
    /* Vertikal center content */
    margin-bottom: 0;
    /* Pastikan tidak ada margin bottom */
    z-index: 100;
    /* Z-index yang lebih rendah */
    background: transparent;
    /* Transparan di desktop */
    /* Background gradient */
    backdrop-filter: none;
    /* Hapus blur di desktop */
}

/* Responsive background untuk PFP generator section */
@media (max-width: 1024px) {
    .buba-pfp-generator-section {
        background: linear-gradient(135deg, rgba(2, 5, 98, 0.1) 0%, rgba(127, 229, 228, 0.1) 100%);
        backdrop-filter: blur(10px);
    }
}

@media (max-width: 768px) {
    .buba-pfp-generator-section {
        background: linear-gradient(135deg, rgba(2, 5, 98, 0.15) 0%, rgba(127, 229, 228, 0.15) 100%);
        backdrop-filter: blur(15px);
    }
}

@media (max-width: 480px) {
    .buba-pfp-generator-section {
        background: linear-gradient(135deg, rgba(2, 5, 98, 0.2) 0%, rgba(127, 229, 228, 0.2) 100%);
        backdrop-filter: blur(20px);
    }
}

@media (max-width: 360px) {
    .buba-pfp-generator-section {
        background: linear-gradient(135deg, rgba(2, 5, 98, 0.25) 0%, rgba(127, 229, 228, 0.25) 100%);
        backdrop-filter: blur(25px);
    }
}

.pfp-generator-container {
    max-width: 1200px;
    margin: 0px auto;
    text-align: center;
    z-index: 10;
    width: 100%;
    /* Memastikan container mengambil full width */
}

.pfp-glass-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 2rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px inset;
    position: relative;
    overflow: hidden;
    /* Kembalikan ke hidden untuk container yang rapi */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: fit-content;
    max-width: 100%;
    margin: 0px auto;
}

.pfp-glass-container::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
}

.pfp-glass-container::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 1px;
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.pfp-generator-title {
    font-size: 4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: white !important;
}

.pfp-generator-subtitle {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    opacity: 0.8;
    color: white !important;
}

.pfp-preview-container {
    display: flex;
    justify-content: center;
}

.pfp-preview-box {
    position: relative;
    width: 300px;
    height: 300px;
    background: rgb(255, 255, 255);
    border: 2px solid rgb(221, 221, 221);
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
    overflow: hidden;
    /* Kembalikan ke hidden untuk preview box yang rapi */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.pfp-preview-box:hover {
    transform: scale(1.02);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
}

.pfp-preview-box.flipping {
    animation: 0.8s ease-in-out 0s 1 normal none running flipBox;
}

.pfp-preview-box.shake-animation {
    animation: shakeRandom 0.1s ease-in-out infinite;
}

@keyframes flipBox {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes shakeRandom {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -1px) rotate(-0.5deg);
    }

    20% {
        transform: translate(1px, 1px) rotate(0.5deg);
    }

    30% {
        transform: translate(-1px, 1px) rotate(-0.3deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(0.3deg);
    }

    50% {
        transform: translate(-0.5px, 0.5px) rotate(-0.2deg);
    }

    60% {
        transform: translate(0.5px, -0.5px) rotate(0.2deg);
    }

    70% {
        transform: translate(-0.5px, -0.5px) rotate(-0.1deg);
    }

    80% {
        transform: translate(0.5px, 0.5px) rotate(0.1deg);
    }

    90% {
        transform: translate(-0.2px, 0.2px) rotate(-0.05deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.pfp-random-animation {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgb(240, 240, 240), rgb(202, 202, 202));
    border-radius: 20px;
    z-index: 10;
}

.pfp-random-animation img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: 15px;
    animation: 0.5s ease-in-out 0s infinite normal none running randomShuffle;
    opacity: 0.9;
}

@keyframes randomShuffle {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

.pfp-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Kembalikan ke cover untuk preview yang rapi */
    display: none;
    transition: 0.3s;
}

.pfp-preview-image.show {
    display: block;
}

.pfp-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgb(102, 102, 102);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    padding: 2rem;
}

.pfp-preview-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.pfp-preview-placeholder.hide {
    display: none;
}

.pfp-action-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pfp-btn {
    position: relative;
    width: 150px;
    height: 55px;
    border-radius: 45px;
    border: none;
    background-color: rgb(51, 92, 148);
    box-shadow: rgba(51, 92, 148, 0.3) 0px 10px 10px inset, rgba(5, 5, 5, 0.21) 0px 5px 10px, rgba(134, 56, 185, 0.5) 0px -10px 10px inset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: 0.3s;
    gap: 0.5rem;
    color: white !important;
}

.pfp-btn::before {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: rgba(250, 250, 250, 0.68);
    content: "";
    filter: blur(1px);
    top: 7px;
    border-radius: 50%;
}

.pfp-btn::after {
    width: 70%;
    height: 2px;
    position: absolute;
    background-color: rgba(250, 250, 250, 0.137);
    content: "";
    filter: blur(1px);
    bottom: 7px;
    border-radius: 50%;
}

.pfp-btn:hover {
    animation: 0.9s ease 0s 1 normal both running jello-horizontal;
    box-shadow: rgba(51, 92, 148, 0.4) 0px 10px 15px inset, rgba(5, 5, 5, 0.3) 0px 8px 15px, rgba(134, 56, 185, 0.6) 0px -12px 15px inset;
}

.pfp-btn:active {
    transform: scale(0.95);
    box-shadow: rgba(51, 92, 148, 0.3) 0px 5px 8px inset, rgba(5, 5, 5, 0.2) 0px 3px 8px, rgba(134, 56, 185, 0.4) 0px -6px 8px inset;
}

.pfp-btn:disabled {
    background-color: rgb(102, 102, 102);
    cursor: not-allowed;
    box-shadow: rgba(102, 102, 102, 0.3) 0px 5px 8px inset, rgba(5, 5, 5, 0.2) 0px 3px 8px, rgba(102, 102, 102, 0.4) 0px -6px 8px inset;
    color: rgb(153, 153, 153) !important;
}

.pfp-btn:disabled:hover {
    animation: auto ease 0s 1 normal none running none;
    transform: none;
}

.pfp-btn:disabled::before,
.pfp-btn:disabled::after {
    display: none;
}

.pfp-btn * {
    color: white !important;
}

.pfp-btn i {
    color: white !important;
}

.pfp-btn span {
    color: white !important;
}

@media (max-width: 1024px) {
    .pfp-generator-title {
        font-size: 3rem;
        color: white !important;
    }

    .pfp-generator-subtitle {
        font-size: 1.25rem;
    }

    .pfp-preview-box {
        width: 250px;
        height: 250px;
    }

    .pfp-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        min-width: 150px;
    }

    .pfp-glass-container {
        padding: 1.5rem;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .pfp-generator-title {
        font-size: 2.5rem;
        color: white !important;
    }

    .pfp-generator-subtitle {
        font-size: 1rem;
    }

    .pfp-preview-box {
        width: 200px;
        height: 200px;
    }

    .pfp-action-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .pfp-btn {
        width: 100%;
        max-width: 250px;
    }

    .pfp-glass-container {
        padding: 1rem;
        gap: 1rem;
        border-radius: 20px;
    }
}

.absolute-bg-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
}

.absolute-fire-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.absolute-fire-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.5s;
}

.absolute-paint-bg {
    position: absolute;
    bottom: 0px;
    left: 10vh;
    z-index: 3;
    pointer-events: none;
}

.absolute-paint-image {
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 300px;
    display: block;
    opacity: 0;
    transition: opacity 0.5s;
    transform: scale(1.5);
}

.see-image-container {
    position: absolute;
    top: 20px;
    left: -100px;
    z-index: 10;
    pointer-events: none;
    transition: left 0.8s;
}

.see-image {
    width: auto;
    height: auto;
    max-width: 600px;
    max-height: 600px;
    display: block;
    opacity: 0;
    transition: opacity 0.5s;
}

.absolute-bg-container.show .absolute-fire-image,
.absolute-bg-container.show .absolute-paint-image {
    opacity: 1;
}

.see-image-container.show {
    left: 20px;
}

.see-image-container.show .see-image {
    opacity: 1;
}

@media (max-width: 768px) {
    .absolute-paint-image {
        max-width: 200px;
        max-height: 200px;
        transform: scale(1.5);
    }

    .see-image-container {
        left: -80px;
    }

    .see-image-container.show {
        left: 15px;
    }

    .see-image {
        max-width: 500px;
        max-height: 500px;
    }
}

@media (max-width: 480px) {
    .pfp-title {
        font-size: 2rem;
    }

    .pfp-subtitle {
        font-size: 1rem;
    }

    .absolute-paint-image {
        max-width: 150px;
        max-height: 150px;
        transform: scale(1.5);
    }

    .see-image-container {
        left: -60px;
    }

    .see-image-container.show {
        left: 10px;
    }

    .see-image {
        max-width: 400px;
        max-height: 400px;
    }
}

.animate-bounce-out-up {
    animation: 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s 1 normal forwards running bounceOutUp;
}

@keyframes bounceOutUp {
    20% {
        transform: translateY(-10px);
    }

    40%,
    45% {
        opacity: 1;
        transform: translateY(20px);
    }

    100% {
        opacity: 0;
        transform: translateY(-100vh);
    }
}

#hero-logo-parallax-wrapper {
    transform: scale(2);
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.hero-logo.animate-fall {
    animation: 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 1 normal forwards running fallDownBounce;
}

.hero-logo {
    width: 100%;
    max-width: 600px;
    height: auto;
    filter: drop-shadow(rgba(51, 92, 148, 0.5) 0px 0px 20px);
    transition: filter 0.3s;
    transform: translateY(-100vh) scale(2);
    opacity: 0;
    will-change: transform;
}

/* Responsive styling untuk hero logo */
@media (max-width: 1024px) {
    .hero-logo {
        max-width: 400px;
        filter: drop-shadow(rgba(51, 92, 148, 0.4) 0px 0px 15px);
    }
}

@media (max-width: 768px) {
    .hero-logo {
        max-width: 300px;
        filter: drop-shadow(rgba(51, 92, 148, 0.3) 0px 0px 12px);
    }
}

@media (max-width: 480px) {
    .hero-logo {
        max-width: 200px;
        filter: drop-shadow(rgba(51, 92, 148, 0.25) 0px 0px 10px);
    }
}

@media (max-width: 360px) {
    .hero-logo {
        max-width: 150px;
        filter: drop-shadow(rgba(51, 92, 148, 0.2) 0px 0px 8px);
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .hero-logo {
        max-width: 250px;
        filter: drop-shadow(rgba(51, 92, 148, 0.3) 0px 0px 10px);
    }
}

#hero-logo-parallax-wrapper {
    transform: scale(2);
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Responsive styling untuk hero logo parallax wrapper */
@media (max-width: 1024px) {
    #hero-logo-parallax-wrapper {
        transform: scale(1.5);
    }
}

@media (max-width: 768px) {
    #hero-logo-parallax-wrapper {
        transform: scale(1.2);
    }
}

@media (max-width: 480px) {
    #hero-logo-parallax-wrapper {
        transform: scale(0.9);
    }
}

@media (max-width: 360px) {
    #hero-logo-parallax-wrapper {
        transform: scale(0.7);
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    #hero-logo-parallax-wrapper {
        transform: scale(1);
    }
}

.hero-logo.animate-fall {
    animation: 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 1 normal forwards running fallDownSimple;
}

@keyframes fallDownSimple {
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.section-bg-image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: visible;
    /* Ubah dari hidden ke visible */
}

.bg-image-replacement {
    overflow: visible;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* position: absolute; */
    top: 50%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
}

.bg-video {
    width: 100%;
    height: 100%;
}

.uiverse::before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 3;
    inset: 0px;
    border-radius: 24px;
    box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse .wrapper {
    mask-image: -webkit-radial-gradient(center, white, black);
    overflow: hidden;
    border-radius: 24px;
    min-width: 132px;
    padding: 12px 0px;
}

.uiverse .wrapper span {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.uiverse:hover {
    --duration: 1400ms;
}

.uiverse .wrapper .circle {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    filter: blur(var(--blur, 8px));
    background: var(--background, transparent);
    transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
    animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1,
.uiverse .wrapper .circle.circle-9,
.uiverse .wrapper .circle.circle-10 {
    --background: var(--c-color-4);
}

.uiverse .wrapper .circle.circle-3,
.uiverse .wrapper .circle.circle-4 {
    --background: var(--c-color-2);
    --blur: 14px;
}

.uiverse .wrapper .circle.circle-5,
.uiverse .wrapper .circle.circle-6 {
    --background: var(--c-color-3);
    --blur: 16px;
}

.uiverse .wrapper .circle.circle-2,
.uiverse .wrapper .circle.circle-7,
.uiverse .wrapper .circle.circle-8,
.uiverse .wrapper .circle.circle-11,
.uiverse .wrapper .circle.circle-12 {
    --background: var(--c-color-1);
    --blur: 12px;
}

.uiverse .wrapper .circle.circle-1 {
    --x: 0;
    --y: -40px;
    --animation: circle-1;
}

.uiverse .wrapper .circle.circle-2 {
    --x: 92px;
    --y: 8px;
    --animation: circle-2;
}

.uiverse .wrapper .circle.circle-3 {
    --x: -12px;
    --y: -12px;
    --animation: circle-3;
}

.uiverse .wrapper .circle.circle-4 {
    --x: 80px;
    --y: -12px;
    --animation: circle-4;
}

.uiverse .wrapper .circle.circle-5 {
    --x: 12px;
    --y: -4px;
    --animation: circle-5;
}

.uiverse .wrapper .circle.circle-6 {
    --x: 56px;
    --y: 16px;
    --animation: circle-6;
}

.uiverse .wrapper .circle.circle-7 {
    --x: 8px;
    --y: 28px;
    --animation: circle-7;
}

.uiverse .wrapper .circle.circle-8 {
    --x: 28px;
    --y: -4px;
    --animation: circle-8;
}

.uiverse .wrapper .circle.circle-9 {
    --x: 20px;
    --y: -12px;
    --animation: circle-9;
}

.uiverse .wrapper .circle.circle-10 {
    --x: 64px;
    --y: 16px;
    --animation: circle-10;
}

.uiverse .wrapper .circle.circle-11 {
    --x: 4px;
    --y: 4px;
    --animation: circle-11;
}

.uiverse .wrapper .circle.circle-12 {
    --blur: 14px;
    --x: 52px;
    --y: 4px;
    --animation: circle-12;
}

@keyframes circle-1 {
    33% {
        transform: translate(0px, 16px) translateZ(0px);
    }

    66% {
        transform: translate(12px, 64px) translateZ(0px);
    }
}

@keyframes circle-2 {
    33% {
        transform: translate(80px, -10px) translateZ(0px);
    }

    66% {
        transform: translate(72px, -48px) translateZ(0px);
    }
}

@keyframes circle-3 {
    33% {
        transform: translate(20px, 12px) translateZ(0px);
    }

    66% {
        transform: translate(12px, 4px) translateZ(0px);
    }
}

@keyframes circle-4 {
    33% {
        transform: translate(76px, -12px) translateZ(0px);
    }

    66% {
        transform: translate(112px, -8px) translateZ(0px);
    }
}

@keyframes circle-5 {
    33% {
        transform: translate(84px, 28px) translateZ(0px);
    }

    66% {
        transform: translate(40px, -32px) translateZ(0px);
    }
}

@keyframes circle-6 {
    33% {
        transform: translate(28px, -16px) translateZ(0px);
    }

    66% {
        transform: translate(76px, -56px) translateZ(0px);
    }
}

@keyframes circle-7 {
    33% {
        transform: translate(8px, 28px) translateZ(0px);
    }

    66% {
        transform: translate(20px, -60px) translateZ(0px);
    }
}

@keyframes circle-8 {
    33% {
        transform: translate(32px, -4px) translateZ(0px);
    }

    66% {
        transform: translate(56px, -20px) translateZ(0px);
    }
}

@keyframes circle-9 {
    33% {
        transform: translate(20px, -12px) translateZ(0px);
    }

    66% {
        transform: translate(80px, -8px) translateZ(0px);
    }
}

@keyframes circle-10 {
    33% {
        transform: translate(68px, 20px) translateZ(0px);
    }

    66% {
        transform: translate(100px, 28px) translateZ(0px);
    }
}

@keyframes circle-11 {
    33% {
        transform: translate(4px, 4px) translateZ(0px);
    }

    66% {
        transform: translate(68px, 20px) translateZ(0px);
    }
}

@keyframes circle-12 {
    33% {
        transform: translate(56px, 0px) translateZ(0px);
    }

    66% {
        transform: translate(60px, -32px) translateZ(0px);
    }
}

.uiverse.uiverse-icon {
    border-radius: 50%;
}

.uiverse.uiverse-icon::before {
    border-radius: 50%;
}

.uiverse.uiverse-icon .wrapper {
    border-radius: 50%;
    min-width: 48px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

.uiverse-btn::before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 3;
    inset: 0px;
    border-radius: 28px;
    box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse-btn .wrapper {
    mask-image: -webkit-radial-gradient(center, white, black);
    overflow: hidden;
    border-radius: 26px;
    min-width: 132px;
    padding: 12px 0px;
}

.uiverse-btn .wrapper span,
.uiverse-btn .wrapper i {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.uiverse-btn:hover {
    --duration: 1400ms;
}

.uiverse-btn .wrapper .circle {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    filter: blur(var(--blur, 8px));
    background: var(--background, transparent);
    transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
    animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse-btn .wrapper .circle.circle-1,
.uiverse-btn .wrapper .circle.circle-9,
.uiverse-btn .wrapper .circle.circle-10 {
    --background: var(--c-color-4);
}

.uiverse-btn .wrapper .circle.circle-3,
.uiverse-btn .wrapper .circle.circle-4 {
    --background: var(--c-color-2);
    --blur: 14px;
}

.uiverse-btn .wrapper .circle.circle-5,
.uiverse-btn .wrapper .circle.circle-6 {
    --background: var(--c-color-3);
    --blur: 16px;
}

.uiverse-btn .wrapper .circle.circle-2,
.uiverse-btn .wrapper .circle.circle-7,
.uiverse-btn .wrapper .circle.circle-8,
.uiverse-btn .wrapper .circle.circle-11,
.uiverse-btn .wrapper .circle.circle-12 {
    --background: var(--c-color-1);
    --blur: 12px;
}

.uiverse-btn .wrapper .circle.circle-1 {
    --x: 0;
    --y: -40px;
    --animation: circle-1;
}

.uiverse-btn .wrapper .circle.circle-2 {
    --x: 92px;
    --y: 8px;
    --animation: circle-2;
}

.uiverse-btn .wrapper .circle.circle-3 {
    --x: -12px;
    --y: -12px;
    --animation: circle-3;
}

.uiverse-btn .wrapper .circle.circle-4 {
    --x: 80px;
    --y: -12px;
    --animation: circle-4;
}

.uiverse-btn .wrapper .circle.circle-5 {
    --x: 12px;
    --y: -4px;
    --animation: circle-5;
}

.uiverse-btn .wrapper .circle.circle-6 {
    --x: 56px;
    --y: 16px;
    --animation: circle-6;
}

.uiverse-btn .wrapper .circle.circle-7 {
    --x: 8px;
    --y: 28px;
    --animation: circle-7;
}

.uiverse-btn .wrapper .circle.circle-8 {
    --x: 28px;
    --y: -4px;
    --animation: circle-8;
}

.uiverse-btn .wrapper .circle.circle-9 {
    --x: 20px;
    --y: -12px;
    --animation: circle-9;
}

.uiverse-btn .wrapper .circle.circle-10 {
    --x: 64px;
    --y: 16px;
    --animation: circle-10;
}

.uiverse-btn .wrapper .circle.circle-11 {
    --x: 4px;
    --y: 4px;
    --animation: circle-11;
}

.uiverse-btn .wrapper .circle.circle-12 {
    --blur: 14px;
    --x: 52px;
    --y: 4px;
    --animation: circle-12;
}

@keyframes circle-1 {
    33% {
        transform: translate(0px, 16px) translateZ(0px);
    }

    66% {
        transform: translate(12px, 64px) translateZ(0px);
    }
}

@keyframes circle-2 {
    33% {
        transform: translate(80px, -10px) translateZ(0px);
    }

    66% {
        transform: translate(72px, -48px) translateZ(0px);
    }
}

@keyframes circle-3 {
    33% {
        transform: translate(20px, 12px) translateZ(0px);
    }

    66% {
        transform: translate(12px, 4px) translateZ(0px);
    }
}

@keyframes circle-4 {
    33% {
        transform: translate(76px, -12px) translateZ(0px);
    }

    66% {
        transform: translate(112px, -8px) translateZ(0px);
    }
}

@keyframes circle-5 {
    33% {
        transform: translate(84px, 28px) translateZ(0px);
    }

    66% {
        transform: translate(40px, -32px) translateZ(0px);
    }
}

@keyframes circle-6 {
    33% {
        transform: translate(28px, -16px) translateZ(0px);
    }

    66% {
        transform: translate(76px, -56px) translateZ(0px);
    }
}

@keyframes circle-7 {
    33% {
        transform: translate(8px, 28px) translateZ(0px);
    }

    66% {
        transform: translate(20px, -60px) translateZ(0px);
    }
}

@keyframes circle-8 {
    33% {
        transform: translate(32px, -4px) translateZ(0px);
    }

    66% {
        transform: translate(56px, -20px) translateZ(0px);
    }
}

@keyframes circle-9 {
    33% {
        transform: translate(20px, -12px) translateZ(0px);
    }

    66% {
        transform: translate(80px, -8px) translateZ(0px);
    }
}

@keyframes circle-10 {
    33% {
        transform: translate(68px, 20px) translateZ(0px);
    }

    66% {
        transform: translate(100px, 28px) translateZ(0px);
    }
}

@keyframes circle-11 {
    33% {
        transform: translate(4px, 4px) translateZ(0px);
    }

    66% {
        transform: translate(68px, 20px) translateZ(0px);
    }
}

@keyframes circle-12 {
    33% {
        transform: translate(56px, 0px) translateZ(0px);
    }

    66% {
        transform: translate(60px, -32px) translateZ(0px);
    }
}

.uiverse-btn.uiverse-btn-icon {
    border-radius: 50%;
}

.uiverse-btn.uiverse-btn-icon::before {
    border-radius: 50%;
}

.uiverse-btn.uiverse-btn-icon .wrapper {
    border-radius: 50%;
    min-width: 48px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

.uiverse-btn {
    --duration: 7s;
    --easing: linear;
    --c-color-1: #ffd58c;
    --c-color-2: #69a5ff;
    --c-color-3: #c29fff;
    --c-color-4: rgba(140, 232, 255, 0.7);
    --c-shadow: rgba(99, 85, 255, 0.59);
    --c-shadow-inset-top: rgba(132, 156, 255, 0.9);
    --c-shadow-inset-bottom: rgba(62, 145, 255, 0.614);
    --c-radial-inner: #2637a4;
    --c-radial-outer: #5f64ea;
    --c-color: #ffffff;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    outline: none;
    position: relative;
    cursor: pointer;
    border: none;
    display: table;
    border-radius: 24px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: var(--c-color);
    background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
    box-shadow: 0 0 14px var(--c-shadow);
}

.uiverse-btn::before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 3;
    inset: 0px;
    border-radius: 28px;
    box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse-btn .wrapper {
    mask-image: -webkit-radial-gradient(center, white, black);
    overflow: hidden;
    border-radius: 26px;
    min-width: 132px;
    padding: 12px 0px;
}

.uiverse-btn .wrapper span,
.uiverse-btn .wrapper i {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.uiverse-btn:hover {
    --duration: 1400ms;
}

.uiverse-btn .wrapper .circle {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    filter: blur(var(--blur, 8px));
    background: var(--background, transparent);
    transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
    animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse-btn .wrapper .circle.circle-1,
.uiverse-btn .wrapper .circle.circle-9,
.uiverse-btn .wrapper .circle.circle-10 {
    --background: var(--c-color-4);
}

.uiverse-btn .wrapper .circle.circle-3,
.uiverse-btn .wrapper .circle.circle-4 {
    --background: var(--c-color-2);
    --blur: 14px;
}

.uiverse-btn .wrapper .circle.circle-5,
.uiverse-btn .wrapper .circle.circle-6 {
    --background: var(--c-color-3);
    --blur: 16px;
}

.uiverse-btn .wrapper .circle.circle-2,
.uiverse-btn .wrapper .circle.circle-7,
.uiverse-btn .wrapper .circle.circle-8,
.uiverse-btn .wrapper .circle.circle-11,
.uiverse-btn .wrapper .circle.circle-12 {
    --background: var(--c-color-1);
    --blur: 12px;
}

.uiverse-btn .wrapper .circle.circle-1 {
    --x: 0;
    --y: -40px;
    --animation: circle-1;
}

.uiverse-btn .wrapper .circle.circle-2 {
    --x: 92px;
    --y: 8px;
    --animation: circle-2;
}

.uiverse-btn .wrapper .circle.circle-3 {
    --x: -12px;
    --y: -12px;
    --animation: circle-3;
}

.uiverse-btn .wrapper .circle.circle-4 {
    --x: 80px;
    --y: -12px;
    --animation: circle-4;
}

.uiverse-btn .wrapper .circle.circle-5 {
    --x: 12px;
    --y: -4px;
    --animation: circle-5;
}

.uiverse-btn .wrapper .circle.circle-6 {
    --x: 56px;
    --y: 16px;
    --animation: circle-6;
}

.uiverse-btn .wrapper .circle.circle-7 {
    --x: 8px;
    --y: 28px;
    --animation: circle-7;
}

.uiverse-btn .wrapper .circle.circle-8 {
    --x: 28px;
    --y: -4px;
    --animation: circle-8;
}

.uiverse-btn .wrapper .circle.circle-9 {
    --x: 20px;
    --y: -12px;
    --animation: circle-9;
}

.uiverse-btn .wrapper .circle.circle-10 {
    --x: 64px;
    --y: 16px;
    --animation: circle-10;
}

.uiverse-btn .wrapper .circle.circle-11 {
    --x: 4px;
    --y: 4px;
    --animation: circle-11;
}

.uiverse-btn .wrapper .circle.circle-12 {
    --blur: 14px;
    --x: 52px;
    --y: 4px;
    --animation: circle-12;
}

@keyframes circle-1 {
    33% {
        transform: translate(0px, 16px) translateZ(0px);
    }

    66% {
        transform: translate(12px, 64px) translateZ(0px);
    }
}

@keyframes circle-2 {
    33% {
        transform: translate(80px, -10px) translateZ(0px);
    }

    66% {
        transform: translate(72px, -48px) translateZ(0px);
    }
}

@keyframes circle-3 {
    33% {
        transform: translate(20px, 12px) translateZ(0px);
    }

    66% {
        transform: translate(12px, 4px) translateZ(0px);
    }
}

@keyframes circle-4 {
    33% {
        transform: translate(76px, -12px) translateZ(0px);
    }

    66% {
        transform: translate(112px, -8px) translateZ(0px);
    }
}

@keyframes circle-5 {
    33% {
        transform: translate(84px, 28px) translateZ(0px);
    }

    66% {
        transform: translate(40px, -32px) translateZ(0px);
    }
}

@keyframes circle-6 {
    33% {
        transform: translate(28px, -16px) translateZ(0px);
    }

    66% {
        transform: translate(76px, -56px) translateZ(0px);
    }
}

@keyframes circle-7 {
    33% {
        transform: translate(8px, 28px) translateZ(0px);
    }

    66% {
        transform: translate(20px, -60px) translateZ(0px);
    }
}

@keyframes circle-8 {
    33% {
        transform: translate(32px, -4px) translateZ(0px);
    }

    66% {
        transform: translate(56px, -20px) translateZ(0px);
    }
}

@keyframes circle-9 {
    33% {
        transform: translate(20px, -12px) translateZ(0px);
    }

    66% {
        transform: translate(80px, -8px) translateZ(0px);
    }
}

@keyframes circle-10 {
    33% {
        transform: translate(68px, 20px) translateZ(0px);
    }

    66% {
        transform: translate(100px, 28px) translateZ(0px);
    }
}

@keyframes circle-11 {
    33% {
        transform: translate(4px, 4px) translateZ(0px);
    }

    66% {
        transform: translate(68px, 20px) translateZ(0px);
    }
}

@keyframes circle-12 {
    33% {
        transform: translate(56px, 0px) translateZ(0px);
    }

    66% {
        transform: translate(60px, -32px) translateZ(0px);
    }
}

.uiverse-btn.uiverse-btn-icon {
    border-radius: 50%;
}

.uiverse-btn.uiverse-btn-icon::before {
    border-radius: 50%;
}

.uiverse-btn.uiverse-btn-icon .wrapper {
    border-radius: 50%;
    min-width: 48px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

@font-face {
    font-family: BoobFont;
    src: url("../fonts/boob.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-main: 'BoobFont', sans-serif;
}

body {
    font-family: var(--font-main);
}

h1,
h2,
h3,
h4,
h5,
h6,
.universe-title,
.twitter-title,
.pfp-generator-title,
.pfp-generator-subtitle,
.universe-subtitle,
.twitter-subtitle,
.uiverse-btn {
    font-family: var(--font-main) !important;
}

.universe-title,
.twitter-title,
.pfp-generator-title {
    text-shadow: rgb(18, 3, 42) -3px -3px 0px, rgb(18, 3, 42) 3px -3px 0px, rgb(18, 3, 42) -3px 3px 0px, rgb(18, 3, 42) 3px 3px 0px, rgb(0, 0, 0) -6px 6px 0px;
}