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

/* Reset and base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

:root {
    --brand-dark: #0a0a0a;
    --brand-dark-secondary: #121212;
    --brand-yellow: #facc15; /* yellow-400 */
    --brand-yellow-dark: #eab308; /* yellow-500 */
    --brand-orange: #ff6b35;
    --brand-purple: #8b5cf6;
    --brand-blue: #06b6d4;
    --gradient-primary: linear-gradient(135deg, #facc15 0%, #ff6b35 50%, #8b5cf6 100%);
    --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --glow-yellow: 0 0 20px rgba(250, 204, 21, 0.3), 0 0 40px rgba(250, 204, 21, 0.2), 0 0 60px rgba(250, 204, 21, 0.1);
}

/* Override any potential conflicts */
.container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.text-center {
    text-align: center !important;
}

.text-white {
    color: #ffffff !important;
}

.bg-brand-dark {
    background-color: var(--brand-dark) !important;
}

body {
    font-family: 'Inter', sans-serif;
    background: #0a0a0a;
    background: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0a 100%);
    background-attachment: fixed;
    color: #e5e7eb !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--brand-dark);
}

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

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

/* Header Styling */
#header {
    transition: all 0.3s ease;
}

#header.scrolled {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.bg-brand-dark-blurry {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nav-link {
    color: #d1d5db;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}

.nav-link:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    transition: width 0.3s ease-in-out;
    border-radius: 2px;
}

.nav-link:hover::after {
    width: 100%;
}

/* Language Switcher */
.language-switcher {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 1rem;
    margin-right: 1rem;
}

/* Better spacing for navigation items */
#header nav > div.hidden.md\\:flex {
    gap: 1.5rem;
}

/* Language switcher positioning fix */
.language-switcher {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0.75rem;
    margin-left: 0.5rem;
    margin-right: 0.75rem;
}

.lang-btn {
    padding: 0.375rem 0.5rem;
    border: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0.6;
}

.lang-btn:hover {
    opacity: 1;
    border-color: rgba(250, 204, 21, 0.3);
    background: rgba(250, 204, 21, 0.1);
}

.lang-btn.active {
    opacity: 1;
    border-color: var(--brand-yellow);
    background: rgba(250, 204, 21, 0.2);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
}

/* Button Styling */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    font-weight: 700;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    transform: translateY(0);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

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

.btn:hover {
    transform: translateY(-2px) scale(1.05);
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--brand-dark);
    font-weight: 800;
    box-shadow: var(--glow-yellow);
    border: 2px solid var(--brand-yellow);
}

.btn-primary:hover {
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.6), 0 0 50px rgba(250, 204, 21, 0.4), 0 0 70px rgba(250, 204, 21, 0.2);
    border-color: var(--brand-orange);
}

/* Header button specific styles - better adaptation for different text lengths */
#header .btn-primary {
    padding: 0.75rem 1.2rem !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    min-width: auto !important;
    width: auto !important;
    flex-shrink: 0 !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* Responsive adjustments for header button */
@media (min-width: 1024px) {
    #header .btn-primary {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

@media (min-width: 1200px) {
    #header .btn-primary {
        padding: 0.75rem 2rem !important;
        font-size: 1rem !important;
    }
}

/* Fix header layout for better element spacing */
#header nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
}

#header .hidden.md\\:flex {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 1.5rem !important;
}

/* Right-side social rail (desktop) */
#social-rail {
    display: none;
}

@media (min-width: 768px) {
    #social-rail { display: flex !important; }
}

.social-rail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--brand-yellow);
    border-radius: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    text-decoration: none;
}

.social-rail-link:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 24px rgba(250,204,21,0.12);
    background: rgba(250,204,21,0.06);
    color: #ffffff;
}

.social-rail-link i {
    color: inherit;
}

/* Normalize social icon SVGs so all three look identical (size / stroke / fill) */
.social-rail-link i, .social-link i {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.social-rail-link i svg, .social-link i svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.8 !important;
}

/* Ensure any icon (SVG or fallback) inside the social rail uses the yellow theme */
#social-rail [data-lucide],
#social-rail [data-lucide] svg,
#social-rail .social-rail-link i {
    color: var(--brand-yellow) !important;
}

/* If lucide fallback content (emoji) is used, make it yellow too */
#social-rail [data-lucide]:empty::before {
    color: var(--brand-yellow) !important;
    font-size: 1.1em !important;
}

/* Make sure injected SVGs render as outlined icons */
#social-rail svg {
    stroke: currentColor !important;
    fill: none !important;
}

/* Ensure header button doesn't break layout */
#header > a.btn {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

/* Hero Section */
/* Hero Section Improvements */
#hero {
    position: relative;
    overflow: hidden;
}

#hero .bg-cover {
    /* Убираем параллакс-свойства для устранения рывков */
    /* will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px; */
    transform: none; /* Убираем любые трансформации */
    background-attachment: fixed; /* Фиксируем фон относительно viewport */
}

.hero-title {
    text-shadow: 0px 4px 15px rgba(0,0,0,0.7), 0 0 30px rgba(250, 204, 21, 0.3);
}

.gradient-text {
    color: #facc15 !important;
    /* Временно убираем gradient эффекты для отображения текста */
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.5) !important;
}

@keyframes glow-pulse {
    0% {
        filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(250, 204, 21, 0.8));
    }
}

.hero-content {
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--brand-yellow);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.3);
}

/* Статистика в Hero */
.stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--brand-yellow);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Section General Styling */
.section-title {
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff !important;
    margin-bottom: 1rem !important;
    text-align: center;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.section-subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem) !important;
    color: #9ca3af !important;
    max-width: 48rem;
    margin: 0 auto !important;
    line-height: 1.8;
    text-align: center;
}

/* Debug styles - добавляем для проверки отображения текста */
h1, h2, h3, h4, h5, h6, p, span, div {
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
}

/* Hero Title Fix */
.hero-title {
    color: #ffffff !important;
    text-shadow: 0px 4px 15px rgba(0,0,0,0.7), 0 0 30px rgba(250, 204, 21, 0.3) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: relative !important;
}

/* General text styles */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

p {
    color: #e5e7eb !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Feature card text fix */
.feature-card-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 0.75rem !important;
}

.feature-card-text {
    color: #9ca3af !important;
    line-height: 1.7;
}

/* Container fixes */
.relative {
    position: relative !important;
}

.z-10 {
    z-index: 10 !important;
}

section {
    position: relative !important;
    z-index: 1 !important;
}

.animate-section {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-section.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Tokenomics Table */
.tokenomics-table {
    border-collapse: separate;
    border-spacing: 0 1rem;
    text-align: left;
    width: 100%;
    table-layout: fixed; /* Фиксируем layout таблицы */
    overflow: hidden; /* Скрываем выходящие за границы эффекты */
}

.tokenomics-table th, .tokenomics-table td {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative; /* Добавляем relative positioning */
    overflow: hidden; /* Скрываем эффекты, выходящие за границы ячейки */
}

.tokenomics-table th {
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%);
}

.tokenomics-table td {
    color: #e5e7eb;
}

.tokenomics-table tr td:first-child, .tokenomics-table tr th:first-child {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
}
.tokenomics-table tr td:last-child, .tokenomics-table tr th:last-child {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.tokenomics-table tr {
    transition: all 0.3s ease;
    isolation: isolate; /* Изолируем контекст для z-index */
}

/* Добавляем более мягкий эффект при hover */
.tokenomics-table tbody tr {
    cursor: pointer;
}

.tokenomics-table tbody tr:hover {
    z-index: 10;
    /* Убираем внешнее свечение, оставляем только внутреннее */
}

.tokenomics-table tbody tr:hover td {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.15) 0%, rgba(255, 107, 53, 0.15) 100%);
    border-color: var(--brand-yellow);
    border-width: 2px; /* Делаем границу толще при hover */
    /* Только внутренние эффекты, без внешнего свечения */
    box-shadow: inset 0 0 15px rgba(250, 204, 21, 0.2);
}

/* Анимация для иконок в таблице */
.tokenomics-table tbody tr:hover .table-icon {
    transform: scale(1.1); /* Уменьшаем увеличение */
    color: #ffffff; /* Меняем только цвет без свечения */
    transition: all 0.3s ease;
}

/* Улучшаем читаемость текста при hover */
.tokenomics-table tbody tr:hover td:nth-child(2) {
    color: #ffffff;
    /* Убираем text-shadow чтобы избежать выхода за границы */
}

.tokenomics-table td:nth-child(2) {
    font-weight: 700;
    color: var(--brand-yellow);
    font-size: 1.125rem;
}

.tokenomics-table td:nth-child(1) {
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-icon {
    color: var(--brand-yellow);
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0; /* Не позволяем иконке сжиматься */
}

/* New Roadmap Infographic */
.roadmap-infographic {
    position: relative;
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
}

.roadmap-infographic::before {
    content: '';
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: linear-gradient(to bottom, #22c55e, #facc15 33%, #f97316 66%, #a855f7);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

.roadmap-phase-container {
    position: relative;
    width: 50%;
    margin-bottom: 3rem;
    animation: slideInPhase 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes slideInPhase {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.roadmap-phase-container:nth-child(even) {
    animation: slideInPhaseRight 0.8s ease-out forwards;
}

@keyframes slideInPhaseRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.roadmap-phase-content {
    background: var(--gradient-dark);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(75, 85, 99, 1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.roadmap-phase-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 20px rgba(250, 204, 21, 0.2);
    border-color: var(--brand-yellow);
}

.roadmap-phase-container:nth-child(odd) {
    left: 0;
    padding-right: 2.5rem;
}
.roadmap-phase-container:nth-child(even) {
    left: 50%;
    padding-left: 2.5rem;
}

.roadmap-phase-content::after {
    content: '';
    position: absolute;
    top: 2rem;
    width: 0;
    height: 0;
    border-style: solid;
}

.roadmap-phase-container:nth-child(odd) .roadmap-phase-content::after {
    right: -15px;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #374151;
}
.roadmap-phase-container:nth-child(even) .roadmap-phase-content::after {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #374151 transparent transparent;
}

.roadmap-phase-icon {
    position: absolute;
    top: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 0 4px var(--brand-dark-secondary), 0 0 20px rgba(0, 0, 0, 0.3);
    animation: pulse-icon 2s infinite;
}

@keyframes pulse-icon {
    0%, 100% {
        box-shadow: 0 0 0 4px var(--brand-dark-secondary), 0 0 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 0 8px var(--brand-dark-secondary), 0 0 25px rgba(0, 0, 0, 0.5);
    }
}

.roadmap-phase-container:nth-child(odd) .roadmap-phase-icon {
    right: -1.5rem;
}

.roadmap-phase-container:nth-child(even) .roadmap-phase-icon {
    left: -1.5rem;
}

.roadmap-phase-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.75rem;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.roadmap-phase-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    color: #d1d5db;
}
.roadmap-phase-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}
.roadmap-phase-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brand-yellow);
    font-weight: bold;
    font-size: 1.1rem;
}

.roadmap-phase-list li:hover {
    color: #ffffff;
}


/* How to Buy Styling */
.buy-step {
    background: var(--gradient-dark);
    padding: 2.5rem 2rem 2rem; /* Увеличиваем верхний отступ для цифры */
    border-radius: 1rem;
    border: 1px solid rgba(75, 85, 99, 0.5);
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    min-height: 280px; /* Минимальная высота для равномерности */
}

.buy-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.buy-step:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--brand-yellow);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 30px rgba(250, 204, 21, 0.3);
}

.buy-step:hover::before {
    opacity: 0.05;
}

.buy-step:hover .buy-step-number {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(250, 204, 21, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.buy-step > * {
    position: relative;
    z-index: 2;
}

.buy-step-number {
    position: absolute;
    top: 0.5rem; /* Сдвигаем ниже */
    left: 0.5rem; /* Позиционируем слева */
    width: 3rem; /* Увеличиваем размер */
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #ff6b35 100%);
    color: #000000; /* Черный цвет для лучшего контраста */
    font-weight: 900;
    font-size: 1.5rem; /* Увеличиваем размер шрифта */
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 6px 20px rgba(250, 204, 21, 0.5), 0 0 0 3px rgba(0, 0, 0, 0.3);
    border: 2px solid #ffffff; /* Добавляем белую рамку */
}

.buy-step-icon {
    width: 3rem;
    height: 3rem;
    color: var(--brand-yellow);
    margin: 0 auto 1rem;
}

.buy-step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

/* Advantage Cards */
.advantage-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(75, 85, 99, 0.3);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #facc15 0%, #ff6b35 50%, #8b5cf6 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.advantage-card:hover::before {
    opacity: 0.05;
}

.advantage-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #facc15;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(250, 204, 21, 0.2);
}

.advantage-card > * {
    position: relative;
    z-index: 2;
}

.advantage-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.1), rgba(255, 107, 53, 0.1));
    color: #facc15;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(255, 107, 53, 0.2));
    box-shadow: 0 10px 20px rgba(250, 204, 21, 0.3);
}

.advantage-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-title {
    background: linear-gradient(135deg, #facc15 0%, #ff6b35 50%, #8b5cf6 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.advantage-text {
    color: #9ca3af;
    line-height: 1.7;
    transition: color 0.3s ease;
}

.advantage-card:hover .advantage-text {
    color: #d1d5db;
}

/* Feature Cards */
.feature-card {
    background: var(--gradient-dark);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(75, 85, 99, 0.3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.feature-card:hover::before {
    opacity: 0.05;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--brand-yellow);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(250, 204, 21, 0.2);
}

.feature-card > * {
    position: relative;
    z-index: 2;
}

.feature-card-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.1), rgba(255, 107, 53, 0.1));
    color: var(--brand-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-card-icon {
    transform: scale(1.1) rotateY(180deg);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(255, 107, 53, 0.2));
    box-shadow: 0 10px 20px rgba(250, 204, 21, 0.3);
}

.feature-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-card-title {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-card-text {
    color: #9ca3af;
    line-height: 1.7;
    transition: color 0.3s ease;
}

.feature-card:hover .feature-card-text {
    color: #d1d5db;
}

/* Advantage Cards */
.advantage-card {
    background: var(--gradient-dark);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(75, 85, 99, 0.3);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.advantage-card:hover::before {
    opacity: 0.05;
}

.advantage-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--brand-yellow);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(250, 204, 21, 0.2);
}

.advantage-card > * {
    position: relative;
    z-index: 2;
}

.advantage-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.1), rgba(255, 107, 53, 0.1));
    color: var(--brand-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-icon {
    transform: scale(1.1) rotateY(180deg);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(255, 107, 53, 0.2));
    box-shadow: 0 10px 20px rgba(250, 204, 21, 0.3);
}

.advantage-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-title {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.advantage-text {
    color: #9ca3af;
    line-height: 1.7;
    transition: color 0.3s ease;
}

.advantage-card:hover .advantage-text {
    color: #d1d5db;
}

/* Additional Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

.floating:nth-child(2) {
    animation-delay: 0.5s;
}

.floating:nth-child(3) {
    animation-delay: 1s;
}

.floating:nth-child(4) {
    animation-delay: 1.5s;
}

/* Social Links */
.social-link {
    color: #6b7280;
    padding: 0.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.social-link:hover {
    color: var(--brand-yellow);
    background: rgba(250, 204, 21, 0.1);
    border-color: var(--brand-yellow);
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.3);
    transform: translateY(-2px);
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    
    .stat-card {
        padding: 1.5rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .feature-card,
    .buy-step {
        padding: 1.5rem;
    }
    
    .btn-lg {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

/* FOMO Section Styles */
.btn-xl {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
}

.btn-xl:hover {
    box-shadow: 0 8px 25px rgba(250, 204, 21, 0.5);
    transform: translateY(-2px);
}

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

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 8px 30px rgba(250, 204, 21, 0.6);
    }
}

/* Additional FOMO effects */
.fomo-highlight {
    background: linear-gradient(45deg, #ff6b35, #facc15, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease-in-out infinite alternate;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .roadmap-infographic::before {
        left: 1rem;
        transform: translateX(0);
    }
    .roadmap-phase-container,
    .roadmap-phase-container:nth-child(even) {
        width: 100%;
        left: 0;
        padding-left: 4rem;
        padding-right: 0;
    }
    .roadmap-phase-content::after {
        left: -15px;
        border-width: 8px 16px 8px 0;
        border-color: transparent #374151 transparent transparent;
    }
    .roadmap-phase-icon {
        left: -1.5rem;
    }
    
    .btn-xl {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* NFT Section Styles */
.nft-showcase-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(250, 204, 21, 0.1));
    border: 1px solid rgba(250, 204, 21, 0.2);
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.nft-showcase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(250, 204, 21, 0.2);
}

.nft-image-container {
    position: relative;
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.nft-preview-image {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    display: block;
}

.nft-glow-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(250, 204, 21, 0.1), transparent);
    animation: rotate 4s linear infinite;
    border-radius: 50%;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.nft-card-info {
    text-align: center;
}

.nft-rarity-badge {
    display: inline-block;
    background: linear-gradient(45deg, #facc15, #ff6b35);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: #000;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nft-feature {
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.nft-feature:hover {
    background: rgba(250, 204, 21, 0.05);
    border-color: rgba(250, 204, 21, 0.2);
}

.nft-feature-icon {
    font-size: 2rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.nft-roadmap-phase {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(250, 204, 21, 0.05));
    border: 1px solid rgba(250, 204, 21, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.nft-roadmap-phase:hover {
    border-color: rgba(250, 204, 21, 0.3);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(250, 204, 21, 0.1));
}

.nft-phase-number {
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    background: linear-gradient(45deg, #facc15, #8b5cf6);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Mobile responsiveness for NFT section */
@media (max-width: 768px) {
    .nft-showcase-card {
        padding: 1.5rem;
    }
    
    .nft-image-container {
        padding: 1rem;
    }
    
    .nft-feature {
        padding: 1rem;
    }
    
    .nft-feature-icon {
        font-size: 1.5rem;
    }
    
    .nft-roadmap-phase {
        padding: 1.5rem;
    }
}

/* Enhanced NFT Reward Cards */
.nft-reward-card {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(250, 204, 21, 0.1));
    border: 1px solid rgba(250, 204, 21, 0.2);
    transition: all 0.3s ease;
}

.nft-reward-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(250, 204, 21, 0.3);
    border-color: rgba(250, 204, 21, 0.4);
}

.nft-reward-image-container {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.nft-reward-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.nft-reward-card:hover .nft-reward-image {
    transform: scale(1.1);
}

.nft-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: all 0.3s ease;
}

.nft-reward-card:hover .nft-overlay {
    opacity: 1;
}

.nft-overlay-content {
    padding: 2rem;
    width: 100%;
}

.nft-tier-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.nft-tier-badge.legendary {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    color: #000;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.nft-tier-badge.epic {
    background: linear-gradient(45deg, #8A2BE2, #DA70D6);
    color: #fff;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}

.nft-tier-badge.rare {
    background: linear-gradient(45deg, #00CED1, #20B2AA);
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 206, 209, 0.5);
}

.nft-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #fff;
}

.benefit-icon {
    font-size: 1rem;
}

/* Collection Stats */
.collection-stats {
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(250, 204, 21, 0.1);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    color: #9CA3AF;
    font-size: 0.875rem;
}

.stat-value {
    color: #fff;
    font-weight: bold;
    font-size: 0.875rem;
}

.legendary-text {
    color: #FFD700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: bold !important;
}

.epic-text {
    color: #DA70D6 !important;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: bold !important;
}

.rare-text {
    color: #00CED1 !important;
    text-shadow: 0 0 10px rgba(0, 206, 209, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: bold !important;
}

/* Collection Features */
.collection-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.collection-feature:hover {
    background: rgba(250, 204, 21, 0.05);
    border-color: rgba(250, 204, 21, 0.2);
}

.feature-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

/* Qualification Tiers */
.qualification-tier {
    padding: 2rem;
    border-radius: 1.5rem;
    border: 2px solid;
    position: relative;
    background: rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.legendary-tier {
    border-color: #FFD700;
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,165,0,0.05));
}

.epic-tier {
    border-color: #DA70D6;
    background: linear-gradient(135deg, rgba(138,43,226,0.1), rgba(218,112,214,0.05));
}

.rare-tier {
    border-color: #00CED1;
    background: linear-gradient(135deg, rgba(0,206,209,0.1), rgba(32,178,170,0.05));
}

.qualification-tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.tier-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.tier-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.tier-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
}

.tier-requirement {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(0,0,0,0.3);
    border-radius: 0.75rem;
}

.requirement-amount {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FACC15;
    margin-bottom: 0.25rem;
}

.requirement-text {
    color: #9CA3AF;
    font-size: 0.875rem;
}

.tier-rewards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reward-item {
    padding: 0.75rem;
    background: rgba(255,255,255,0.05);
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.875rem;
    border-left: 3px solid;
}

.legendary-tier .reward-item {
    border-left-color: #FFD700;
}

.epic-tier .reward-item {
    border-left-color: #DA70D6;
}

.rare-tier .reward-item {
    border-left-color: #00CED1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nft-overlay-content {
        padding: 1rem;
    }
    
    .collection-feature {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }
    
    .qualification-tier {
        padding: 1.5rem;
    }
    
    .tier-icon {
        font-size: 2rem;
    }
    
    .requirement-amount {
        font-size: 1.25rem;
    }
}

/* Custom SVG Icons for FOMO Section */
.svg-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.svg-icon-large {
    width: 32px;
    height: 32px;
}

.lightning-icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23facc15"><path d="M13 2l-2 7h-3l4 9 2-7h3l-4-9z"/></svg>') no-repeat center;
    background-size: contain;
}

.trending-up-icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2310b981"><path d="M3 17l6-6 4 4 8-8m0 0v6m0-6h-6"/></svg>') no-repeat center;
    background-size: contain;
}

.fire-icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f59e0b"><path d="M8.5 14.5c0 1.5 1.3 3.5 3.5 3.5s3.5-2 3.5-3.5-1.5-3.5-3.5-3.5-3.5 2-3.5 3.5z"/><path d="M12 2c-2 4-4 6-4 10 0 4.4 3.6 8 8 8s8-3.6 8-8c0-4-2-6-4-10-1 2-2 3-4 3s-3-1-4-3z"/></svg>') no-repeat center;
    background-size: contain;
}

.zap-icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b5cf6"><path d="M13 2l-2 7h-3l4 9 2-7h3l-4-9z"/></svg>') no-repeat center;
    background-size: contain;
}

.alert-icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f59e0b"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>') no-repeat center;
    background-size: contain;
}

.check-icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2310b981"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>') no-repeat center;
    background-size: contain;
}

.rocket-icon {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23facc15"><path d="M12 2c-4 0-8 4-8 8 0 2 1 4 3 5l1 6 4-1 4 1 1-6c2-1 3-3 3-5 0-4-4-8-8-8z"/><path d="M8 14s-2 2-2 4 2 2 4 2 4-2 4-2"/></svg>') no-repeat center;
    background-size: contain;
}

/* Feature Icon SVG Styles */
.feature-icon-svg {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
    margin-right: 1rem;
}

/* Fixed SVG Icons for Collection Features */
.mountain-icon-fixed {
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23facc15"><path d="M12 3l7 18H5l7-18z"/></svg>') no-repeat center;
    background-size: contain;
}

.network-icon-fixed {
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23facc15"><circle cx="12" cy="5" r="3"/><circle cx="5" cy="12" r="3"/><circle cx="19" cy="12" r="3"/><circle cx="12" cy="19" r="3"/></svg>') no-repeat center;
    background-size: contain;
}

.backpack-icon-fixed {
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23facc15"><rect x="6" y="6" width="12" height="14" rx="2"/><path d="M8 3h8v3H8z"/><rect x="10" y="12" width="4" height="4" rx="1"/></svg>') no-repeat center;
    background-size: contain;
}

.diamond-icon-simple {
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2306b6d4"><polygon points="12,2 22,9 12,22 2,9"/></svg>') no-repeat center;
    background-size: contain;
}

/* Debug styles */
.diamond-icon-simple {
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2306b6d4"><polygon points="12,2 22,9 12,22 2,9"/></svg>') no-repeat center !important;
    background-size: contain !important;
    
}



/* DEBUG: Force tier-specific hover colors */
.nft-reward-card.legendary-tier:hover {
    box-shadow: 0 25px 50px rgba(255, 215, 0, 0.8) !important;
    border: 3px solid gold !important;
}

.nft-reward-card.epic-tier:hover {
    box-shadow: 0 25px 50px rgba(138, 43, 226, 0.8) !important;
    border: 3px solid purple !important;
}

.nft-reward-card.rare-tier:hover {
    box-shadow: 0 25px 50px rgba(0, 206, 209, 0.8) !important;
    border: 3px solid cyan !important;
}

.nft-reward-card.common-tier:hover {
    box-shadow: 0 25px 50px rgba(50, 205, 50, 0.8) !important;
    border: 3px solid lime !important;
}

/* Compact NFT Reward Cards for 4-column layout */
.nft-overlay-content {
    padding: 1.5rem 1rem !important;
}

.nft-tier-badge {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.625rem !important;
    margin-bottom: 0.75rem !important;
}

.nft-overlay-content h4 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.nft-overlay-content p {
    font-size: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.nft-benefits {
    gap: 0.25rem !important;
}

.benefit-item {
    font-size: 0.75rem !important;
}

.benefit-icon {
    font-size: 0.875rem !important;
}

/* Compact card sizing for 4-column layout */
@media (min-width: 1024px) {
    .nft-reward-image-container {
        aspect-ratio: 1 !important;
        max-height: 250px !important;
    }
    
    .nft-reward-card {
        max-width: 280px !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .nft-reward-card {
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}

/* Better image visibility - larger cards */
@media (min-width: 1024px) {
    .nft-reward-image-container {
        aspect-ratio: 1 !important;
        max-height: 320px !important;
    }
    
    .nft-reward-card {
        max-width: 350px !important;
        margin: 0 auto !important;
    }
}

/* Test: Less intrusive overlay for first card (LEGENDARY) */
.nft-reward-card.legendary-tier .nft-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.1) 100%) !important;
}

.nft-reward-card.legendary-tier .nft-overlay-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    padding: 1rem !important;
}

/* New approach: Show overlay only on hover */
.nft-reward-card.legendary-tier .nft-overlay {
    opacity: 0 !important;
    background: rgba(0,0,0,0.95) !important;
    transition: opacity 0.3s ease !important;
}

.nft-reward-card.legendary-tier:hover .nft-overlay {
    opacity: 1 !important;
}

/* Add tier badge outside overlay - always visible */
.nft-reward-card.legendary-tier .nft-tier-badge {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 10 !important;
    background: linear-gradient(45deg, #FFD700, #FFA500) !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

/* Reset overlay content positioning for legendary */
.nft-reward-card.legendary-tier .nft-overlay-content {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    padding: 2rem !important;
}

/* Removed conflicting legendary-tier styles - will use universal styles */

/* EPIC Tier - Purple gradient */
.nft-reward-card.epic-tier .nft-reward-image-container {
    height: 280px !important;
}

.nft-reward-card.epic-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(138,43,226,0.15), rgba(218,112,214,0.25), rgba(75,0,130,0.3)) !important;
    padding: 1.5rem !important;
    border-top: 2px solid rgba(138, 43, 226, 0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px) !important;
}

.nft-reward-card.epic-tier .nft-card-content h4 {
    color: #DA70D6 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    margin-bottom: 0.5rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
}

.nft-reward-card.epic-tier .nft-card-content p {
    color: rgba(255,255,255,0.95) !important;
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.nft-reward-card.epic-tier .nft-card-content .benefit-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: rgba(255,255,255,0.95) !important;
    font-size: 0.8rem !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.nft-reward-card.epic-tier {
    max-width: 320px !important;
    min-height: 450px !important;
}

/* RARE Tier - Cyan gradient */
.nft-reward-card.rare-tier .nft-reward-image-container {
    height: 280px !important;
}

.nft-reward-card.rare-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(0,206,209,0.15), rgba(32,178,170,0.25), rgba(0,128,128,0.3)) !important;
    padding: 1.5rem !important;
    border-top: 2px solid rgba(0, 206, 209, 0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px) !important;
}

.nft-reward-card.rare-tier .nft-card-content h4 {
    color: #00CED1 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    margin-bottom: 0.5rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
}

.nft-reward-card.rare-tier .nft-card-content p {
    color: rgba(255,255,255,0.95) !important;
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.nft-reward-card.rare-tier .nft-card-content .benefit-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: rgba(255,255,255,0.95) !important;
    font-size: 0.8rem !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.nft-reward-card.rare-tier {
    max-width: 320px !important;
    min-height: 450px !important;
}

/* COMMON Tier - Green gradient */
.nft-reward-card.common-tier .nft-reward-image-container {
    height: 280px !important;
}

.nft-reward-card.common-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(50,205,50,0.15), rgba(34,139,34,0.25), rgba(0,100,0,0.3)) !important;
    padding: 1.5rem !important;
    border-top: 2px solid rgba(50, 205, 50, 0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px) !important;
}

.nft-reward-card.common-tier .nft-card-content h4 {
    color: #32CD32 !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    margin-bottom: 0.5rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
}

.nft-reward-card.common-tier .nft-card-content p {
    color: rgba(255,255,255,0.95) !important;
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.nft-reward-card.common-tier .nft-card-content .benefit-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: rgba(255,255,255,0.95) !important;
    font-size: 0.8rem !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.nft-reward-card.common-tier {
    max-width: 320px !important;
    min-height: 450px !important;
}

/* Updated Card Content Coverage */
.nft-reward-card.epic-tier .nft-card-content,
.nft-reward-card.rare-tier .nft-card-content,
.nft-reward-card.common-tier .nft-card-content {
    border-radius: 0 0 1.5rem 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure image containers are properly positioned */
.nft-reward-image-container {
    position: relative !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
}

/* CRITICAL FIXES - High Priority Styles */
.nft-reward-card .nft-card-content {
    background: rgba(139, 92, 246, 0.2) !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.5rem !important;
    color: white !important;
}

/* Force Tier Badge Visibility */
.nft-tier-badge {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 999 !important;
    display: block !important;
    padding: 0.5rem 1rem !important;
    border-radius: 1rem !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: white !important;
    background: rgba(0,0,0,0.7) !important;
}

/* LEGENDARY Badge */
.nft-tier-badge.legendary {
    background: linear-gradient(45deg, #FFD700, #FFA500) !important;
    color: #000 !important;
}

/* EPIC Badge */
.nft-tier-badge.epic {
    background: linear-gradient(45deg, #8A2BE2, #DA70D6) !important;
    color: #fff !important;
}

/* RARE Badge */
.nft-tier-badge.rare {
    background: linear-gradient(45deg, #00CED1, #20B2AA) !important;
    color: #fff !important;
}

/* COMMON Badge */
.nft-tier-badge.common {
    background: linear-gradient(45deg, #32CD32, #228B22) !important;
    color: #fff !important;
}

/* ULTRA SPECIFIC TIER STYLES */
.nft-reward-card.legendary-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.3)) !important;
}

.nft-reward-card.epic-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(138,43,226,0.2), rgba(218,112,214,0.3)) !important;
}

.nft-reward-card.rare-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(0,206,209,0.2), rgba(32,178,170,0.3)) !important;
}

.nft-reward-card.common-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(50,205,50,0.2), rgba(34,139,34,0.3)) !important;
}

/* Force card structure */
.nft-reward-card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
}

.nft-reward-image-container {
    flex-shrink: 0 !important;
    position: relative !important;
}

.nft-card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fix LEGENDARY card content coverage */
.nft-reward-card.legendary-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.3)) !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.5rem !important;
    border-top: 2px solid rgba(255, 215, 0, 0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px) !important;
}

/* Ensure all cards have consistent structure */
.nft-reward-card .nft-card-content {
    margin: 0 !important;
    padding: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
}

/* Remove any potential margin/padding from card containers */
.nft-reward-card {
    padding: 0 !important;
    margin: 0 !important;
}

.nft-reward-image-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Force all NFT cards to have identical sizes */
.nft-reward-card {
    max-width: 280px !important;
    width: 280px !important;
    min-height: 420px !important;
    height: 420px !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}

/* Force all image containers to be identical */
.nft-reward-card .nft-reward-image-container {
    height: 200px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Force all card content areas to be identical */
.nft-reward-card .nft-card-content {
    height: 220px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
}

/* Ensure images scale properly */
.nft-reward-card .nft-reward-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Fix text display issues - Remove rigid height constraints */
.nft-reward-card .nft-card-content {
    height: auto !important;
    min-height: 200px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
}

/* Better text styling */
.nft-reward-card .nft-card-content h4 {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
}

.nft-reward-card .nft-card-content p {
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    opacity: 0.9 !important;
}

.nft-reward-card .nft-benefits {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
}

.nft-reward-card .benefit-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* Adjust card height to be flexible */
.nft-reward-card {
    max-width: 280px !important;
    width: 280px !important;
    min-height: 420px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}

/* LEGENDARY card specific fix - remove side margins */
.nft-reward-card.legendary-tier {
    max-width: 280px !important;
    width: 280px !important;
    min-height: 420px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Force LEGENDARY image container to full width */
.nft-reward-card.legendary-tier .nft-reward-image-container {
    height: 200px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
}

/* LEGENDARY content area - ensure full width coverage */
.nft-reward-card.legendary-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.3)) !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.5rem !important;
    border-top: 2px solid rgba(255, 215, 0, 0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px) !important;
    height: auto !important;
    min-height: 200px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Remove any inherited spacing from LEGENDARY */
.nft-reward-card.legendary-tier * {
    box-sizing: border-box !important;
}

/* Fix LEGENDARY card text spacing to match other cards */
.nft-reward-card.legendary-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.3)) !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.2rem !important;
    border-top: 2px solid rgba(255, 215, 0, 0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px) !important;
    height: auto !important;
    min-height: 200px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Override text spacing for LEGENDARY to match others */
.nft-reward-card.legendary-tier .nft-card-content h4 {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.nft-reward-card.legendary-tier .nft-card-content p {
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    opacity: 0.9 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.nft-reward-card.legendary-tier .nft-benefits {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* UNIVERSAL NFT CARD STYLES - FIXED LAYOUT FOR ALL TIERS */
/* These rules have maximum specificity to override all conflicting styles */

/* Override all tier-specific styles with universal design */
.nft-reward-card,
.nft-reward-card.legendary-tier,
.nft-reward-card.epic-tier,
.nft-reward-card.rare-tier,
.nft-reward-card.common-tier {
    position: relative !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(250, 204, 21, 0.1)) !important;
    border: 1px solid rgba(250, 204, 21, 0.2) !important;
    transition: all 0.3s ease !important;
    max-width: 280px !important;
    width: 280px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 420px !important;
}

.nft-reward-card:hover,
.nft-reward-card.legendary-tier:hover,
.nft-reward-card.epic-tier:hover,
.nft-reward-card.rare-tier:hover,
.nft-reward-card.common-tier:hover {
    transform: translateY(-10px) scale(1.02) !important;
}

/* Tier-specific hover effects with unique glow colors */
.nft-reward-card.legendary-tier:hover {
    box-shadow: 0 25px 50px rgba(255, 215, 0, 0.6) !important;
    border-color: rgba(255, 215, 0, 0.8) !important;
}

.nft-reward-card.epic-tier:hover {
    box-shadow: 0 25px 50px rgba(138, 43, 226, 0.6) !important;
    border-color: rgba(138, 43, 226, 0.8) !important;
}

.nft-reward-card.rare-tier:hover {
    box-shadow: 0 25px 50px rgba(0, 206, 209, 0.6) !important;
    border-color: rgba(0, 206, 209, 0.8) !important;
}

.nft-reward-card.common-tier:hover {
    box-shadow: 0 25px 50px rgba(50, 205, 50, 0.6) !important;
    border-color: rgba(50, 205, 50, 0.8) !important;
}

/* Image container - same for all cards */
.nft-reward-card .nft-reward-image-container,
.nft-reward-card.legendary-tier .nft-reward-image-container,
.nft-reward-card.epic-tier .nft-reward-image-container,
.nft-reward-card.rare-tier .nft-reward-image-container,
.nft-reward-card.common-tier .nft-reward-image-container {
    position: relative !important;
    aspect-ratio: 1 !important;
    overflow: hidden !important;
    height: 280px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
}

.nft-reward-card .nft-reward-image,
.nft-reward-card.legendary-tier .nft-reward-image,
.nft-reward-card.epic-tier .nft-reward-image,
.nft-reward-card.rare-tier .nft-reward-image,
.nft-reward-card.common-tier .nft-reward-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

.nft-reward-card:hover .nft-reward-image,
.nft-reward-card.legendary-tier:hover .nft-reward-image,
.nft-reward-card.epic-tier:hover .nft-reward-image,
.nft-reward-card.rare-tier:hover .nft-reward-image,
.nft-reward-card.common-tier:hover .nft-reward-image {
    transform: scale(1.1) !important;
}

/* Content area - same for all cards */
.nft-reward-card .nft-card-content,
.nft-reward-card.legendary-tier .nft-card-content,
.nft-reward-card.epic-tier .nft-card-content,
.nft-reward-card.rare-tier .nft-card-content,
.nft-reward-card.common-tier .nft-card-content {
    padding: 0.8rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 140px !important;
}

.nft-reward-card .nft-card-content h4,
.nft-reward-card.legendary-tier .nft-card-content h4,
.nft-reward-card.epic-tier .nft-card-content h4,
.nft-reward-card.rare-tier .nft-card-content h4,
.nft-reward-card.common-tier .nft-card-content h4 {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    margin-bottom: 0.3rem !important;
    margin-top: 0 !important;
    color: white !important;
    line-height: 1.2 !important;
    padding: 0 !important;
}

.nft-reward-card .nft-card-content p,
.nft-reward-card.legendary-tier .nft-card-content p,
.nft-reward-card.epic-tier .nft-card-content p,
.nft-reward-card.rare-tier .nft-card-content p,
.nft-reward-card.common-tier .nft-card-content p {
    font-size: 0.8rem !important;
    margin-bottom: 0.8rem !important;
    margin-top: 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.3 !important;
    padding: 0 !important;
}

.nft-reward-card .nft-benefits,
.nft-reward-card.legendary-tier .nft-benefits,
.nft-reward-card.epic-tier .nft-benefits,
.nft-reward-card.rare-tier .nft-benefits,
.nft-reward-card.common-tier .nft-benefits {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.nft-reward-card .benefit-item,
.nft-reward-card.legendary-tier .benefit-item,
.nft-reward-card.epic-tier .benefit-item,
.nft-reward-card.rare-tier .benefit-item,
.nft-reward-card.common-tier .benefit-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.nft-reward-card .benefit-icon,
.nft-reward-card.legendary-tier .benefit-icon,
.nft-reward-card.epic-tier .benefit-icon,
.nft-reward-card.rare-tier .benefit-icon,
.nft-reward-card.common-tier .benefit-icon {
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
}

/* Tier badges - positioned consistently */
.nft-tier-badge,
.nft-tier-badge.legendary,
.nft-tier-badge.epic,
.nft-tier-badge.rare,
.nft-tier-badge.common {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 10 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 1rem !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    margin: 0 !important;
}

.nft-tier-badge.legendary {
    background: linear-gradient(45deg, #FFD700, #FFA500) !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

.nft-tier-badge.epic {
    background: linear-gradient(45deg, #8A2BE2, #DA70D6) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5) !important;
}

.nft-tier-badge.rare {
    background: linear-gradient(45deg, #00CED1, #20B2AA) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(0, 206, 209, 0.5) !important;
}

.nft-tier-badge.common {
    background: linear-gradient(45deg, #32CD32, #228B22) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(50, 205, 50, 0.5) !important;
}

/* Different background gradients for tiers */
.nft-reward-card.legendary-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(0, 0, 0, 0.9)) !important;
}

.nft-reward-card.legendary-tier .nft-card-content h4 {
    color: #FFD700 !important;
}

.nft-reward-card.epic-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(0, 0, 0, 0.9)) !important;
}

.nft-reward-card.epic-tier .nft-card-content h4 {
    color: #DA70D6 !important;
}

.nft-reward-card.rare-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(0, 206, 209, 0.15), rgba(0, 0, 0, 0.9)) !important;
}

.nft-reward-card.rare-tier .nft-card-content h4 {
    color: #00CED1 !important;
}

.nft-reward-card.common-tier .nft-card-content {
    background: linear-gradient(135deg, rgba(50, 205, 50, 0.15), rgba(0, 0, 0, 0.9)) !important;
}

.nft-reward-card.common-tier .nft-card-content h4 {
    color: #32CD32 !important;
}

/* Remove overlay system completely */
.nft-overlay,
.nft-reward-card .nft-overlay,
.nft-reward-card.legendary-tier .nft-overlay,
.nft-reward-card.epic-tier .nft-overlay,
.nft-reward-card.rare-tier .nft-overlay,
.nft-reward-card.common-tier .nft-overlay {
    display: none !important;
}

.nft-overlay-content,
.nft-reward-card .nft-overlay-content,
.nft-reward-card.legendary-tier .nft-overlay-content,
.nft-reward-card.epic-tier .nft-overlay-content,
.nft-reward-card.rare-tier .nft-overlay-content,
.nft-reward-card.common-tier .nft-overlay-content {
    display: none !important;
}

/* PROFILE BADGES STYLES */
.profile-badge-card {
    position: relative;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
    min-height: 280px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.profile-badge-card:hover {
    transform: translateY(-8px) scale(1.08);
    background: rgba(0, 0, 0, 0.8);
}

.badge-image-container {
    position: relative;
    margin: 0 auto 1.5rem;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-image {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.badge-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    opacity: 0.3;
    transition: all 0.3s ease;
    z-index: 1;
}

.profile-badge-card:hover .badge-glow {
    opacity: 0.6;
    width: 140px;
    height: 140px;
}

.badge-info {
    color: white;
}

.badge-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.badge-requirement {
    font-size: 0.95rem;
    opacity: 0.8;
    margin: 0;
}

/* Tier-specific badge styles */
.legendary-badge {
    border-color: rgba(255, 215, 0, 0.5);
}

.legendary-badge:hover {
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}

.legendary-glow {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 165, 0, 0.5) 50%, rgba(255, 215, 0, 0.1) 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4) !important;
}

.epic-badge {
    border-color: rgba(138, 43, 226, 0.5);
}

.epic-badge:hover {
    border-color: rgba(138, 43, 226, 0.8);
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.4);
}

.epic-glow {
    background: radial-gradient(circle, rgba(138, 43, 226, 0.9) 0%, rgba(218, 112, 214, 0.5) 50%, rgba(138, 43, 226, 0.1) 100%);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4) !important;
}

.rare-badge {
    border-color: rgba(0, 206, 209, 0.5);
}

.rare-badge:hover {
    border-color: rgba(0, 206, 209, 0.8);
    box-shadow: 0 10px 30px rgba(0, 206, 209, 0.4);
}

.rare-glow {
    background: radial-gradient(circle, rgba(0, 206, 209, 0.9) 0%, rgba(32, 178, 170, 0.5) 50%, rgba(0, 206, 209, 0.1) 100%);
    box-shadow: 0 0 20px rgba(0, 206, 209, 0.4) !important;
}

.common-badge {
    border-color: rgba(50, 205, 50, 0.5);
}

.common-badge:hover {
    border-color: rgba(50, 205, 50, 0.8);
    box-shadow: 0 10px 30px rgba(50, 205, 50, 0.4);
}

.common-glow {
    background: radial-gradient(circle, rgba(50, 205, 50, 0.9) 0%, rgba(34, 139, 34, 0.5) 50%, rgba(50, 205, 50, 0.1) 100%);
    box-shadow: 0 0 20px rgba(50, 205, 50, 0.4) !important;
}

/* Text colors for badges (reuse existing classes) */
.common-text {
    color: #32CD32 !important;
    text-shadow: 0 0 10px rgba(50, 205, 50, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: bold !important;
}

/* Responsive adjustments for badges */
@media (max-width: 768px) {
    .profile-badge-card {
        padding: 2rem 1.5rem;
        min-height: 240px;
        max-width: 280px;
    }
    
    .badge-image-container {
        width: 130px;
        height: 130px;
        margin-bottom: 1rem;
    }
    
    .badge-image {
        width: 110px;
        height: 110px;
    }
    
    .badge-glow {
        width: 110px;
        height: 110px;
    }
    
    .profile-badge-card:hover .badge-glow {
        width: 120px;
        height: 120px;
    }
    
    .badge-title {
        font-size: 1.1rem;
    }
    
    .badge-requirement {
        font-size: 0.9rem;
    }
}

@media (min-width: 1024px) {
    .profile-badge-card {
        max-width: 320px;
        padding: 2.5rem 2.5rem;
    }
}

/* USER PROFILE STYLES */
.profile-avatar {
    position: relative;
}

.profile-badge-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.profile-mini-badge {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mini-badge-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.mini-badge-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    border-radius: 50%;
    z-index: 1;
    opacity: 0.4;
}

/* Active mini badge glows - reduced intensity */
.legendary-glow-mini {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 165, 0, 0.2) 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.epic-glow-mini {
    background: radial-gradient(circle, rgba(138, 43, 226, 0.4) 0%, rgba(218, 112, 214, 0.2) 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.3);
}

.rare-glow-mini {
    background: radial-gradient(circle, rgba(0, 206, 209, 0.4) 0%, rgba(32, 178, 170, 0.2) 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(0, 206, 209, 0.3);
}

.common-glow-mini {
    background: radial-gradient(circle, rgba(50, 205, 50, 0.4) 0%, rgba(34, 139, 34, 0.2) 50%, transparent 100%);
    box-shadow: 0 0 8px rgba(50, 205, 50, 0.3);
}

/* Badge mini titles */
.badge-mini-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

/* Active badge hover effects */
.profile-mini-badge:hover {
    transform: scale(1.1);
}

.legendary-active:hover,
.epic-active:hover,
.rare-active:hover,
.common-active:hover {
    transform: scale(1.15);
}

/* Locked badges */
.locked-badge {
    opacity: 0.4;
    cursor: not-allowed;
}

.locked-badge-circle {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4a4a4a, #2a2a2a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #555;
    position: relative;
    z-index: 2;
}

.locked-icon {
    font-size: 18px;
    opacity: 0.6;
}

.locked-badge:hover {
    opacity: 0.6;
    transform: scale(1.05);
}

/* Profile responsive adjustments */
@media (max-width: 768px) {
    .profile-mini-badge {
        width: 50px;
        height: 50px;
    }
    
    .mini-badge-image {
        width: 40px;
        height: 40px;
    }
    
    .mini-badge-glow {
        width: 55px;
        height: 55px;
    }
    
    .locked-badge-circle {
        width: 40px;
        height: 40px;
    }
    
    .locked-icon {
        font-size: 14px;
    }
    
    .badge-mini-title {
        font-size: 0.75rem;
    }
}

/* FOMO SECTION HOVER EFFECTS */
.fomo-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.fomo-card:hover {
    transform: translateY(-5px) scale(1.02);
}

/* Green card hover */
.fomo-card.green:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%) !important;
    border-color: rgba(34, 197, 94, 0.8) !important;
    box-shadow: 0 20px 40px rgba(34, 197, 94, 0.3);
}

/* Blue card hover */
.fomo-card.blue:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(6, 182, 212, 0.8) 100%) !important;
    border-color: rgba(59, 130, 246, 0.8) !important;
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}

/* Purple card hover */
.fomo-card.purple:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.8) 0%, rgba(236, 72, 153, 0.8) 100%) !important;
    border-color: rgba(168, 85, 247, 0.8) !important;
    box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);
}

/* Smart Money card hover */
.smart-money-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.smart-money-card:hover {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.8) 0%, rgba(249, 115, 22, 0.8) 100%) !important;
    border-color: rgba(234, 179, 8, 0.8) !important;
    box-shadow: 0 20px 40px rgba(234, 179, 8, 0.3);
    transform: translateY(-3px) scale(1.01);
}

.smart-money-card:hover h3 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.smart-money-card:hover span {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* SVG Icons hover shadows for all cards */
.fomo-card:hover .svg-icon,
.smart-money-card:hover .svg-icon {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* Specific SVG icon shadows for different card types */
.fomo-card.green:hover .svg-icon,
.fomo-card.green:hover .trending-up-icon {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.fomo-card.blue:hover .svg-icon,
.fomo-card.blue:hover .fire-icon {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.fomo-card.purple:hover .svg-icon,
.fomo-card.purple:hover .zap-icon {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.smart-money-card:hover .svg-icon,
.smart-money-card:hover .alert-icon {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

/* Check icon special styling */
.smart-money-card:hover .check-icon {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(34, 197, 94, 0.8));
}

/* Beautiful SVG check marks */
.check-svg {
    width: 28px;
    height: 28px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Check SVG in smart money card */
.smart-money-card .check-svg {
    width: 32px;
    height: 32px;
}

.smart-money-card:hover .check-svg {
    transform: scale(1.05) !important;
    width: 32px;
    height: 32px;
}

/* Enhanced hover effects for check SVG elements */
.smart-money-card:hover .check-svg circle {
    fill: #16a34a;
    stroke: #22c55e;
}

.smart-money-card:hover .check-svg path {
    stroke: #ffffff;
    stroke-width: 3.5;
}

/* Legacy styles kept for compatibility */
.check-mark {
    font-size: 1.5rem !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(34, 197, 94, 0.6));
    transition: all 0.3s ease;
    display: inline-block;
    line-height: 1;
}

.smart-money-card .check-mark {
    font-size: 1.75rem !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) 
            drop-shadow(0 0 12px rgba(34, 197, 94, 0.8))
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}

.smart-money-card:hover .check-mark {
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 15px rgba(34, 197, 94, 1)) 
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 25px rgba(34, 197, 94, 0.6)) !important;
    transform: scale(1.3) !important;
}

/* Legacy check-icon styles kept for compatibility */
.check-icon {
    color: #22c55e !important;
    font-size: 1.4rem !important;
    font-weight: bold !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 8px rgba(34, 197, 94, 0.6));
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.smart-money-card .check-icon {
    color: #16a34a !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) 
            drop-shadow(0 0 12px rgba(34, 197, 94, 0.8))
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    font-size: 1.5rem !important;
}

.smart-money-card:hover .check-icon {
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 15px rgba(34, 197, 94, 1)) 
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 25px rgba(34, 197, 94, 0.6)) !important;
    transform: scale(1.2) !important;
    color: #10b981 !important;
}

/* Enhanced shadows for specific icons */
.fomo-card:hover .trending-up-icon {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 1)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 25px rgba(34, 197, 94, 0.8)) !important;
    transform: scale(1.15) !important;
}

.fomo-card:hover .fire-icon {
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 1)) drop-shadow(0 0 15px rgba(249, 115, 22, 0.7)) !important;
}

.fomo-card:hover .zap-icon {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 1)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 25px rgba(168, 85, 247, 0.8)) !important;
    transform: scale(1.15) !important;
}

/* Additional ultra-strong shadows for problematic icons */
.fomo-card.green:hover .trending-up-icon {
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 25px rgba(255, 255, 255, 1)) 
            drop-shadow(0 0 30px rgba(34, 197, 94, 1)) 
            drop-shadow(0 0 35px rgba(255, 255, 255, 0.5)) !important;
}

.fomo-card.purple:hover .zap-icon {
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 1)) 
            drop-shadow(0 0 25px rgba(255, 255, 255, 1)) 
            drop-shadow(0 0 30px rgba(168, 85, 247, 1)) 
            drop-shadow(0 0 35px rgba(255, 255, 255, 0.5)) !important;
}

/* Hover text effects */
.fomo-card:hover h3 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.fomo-card:hover p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}