/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #1a1b3a 0%, #2d2f5f 50%, #1a1b3a 100%);
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(26, 27, 58, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eth-logo {
    width: 24px;
    height: 24px;
    position: relative;
}

.eth-logo svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 8px rgba(98, 126, 234, 0.6));
}

.nav-brand {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #627eea;
}

.nav-icons {
    display: flex;
    gap: 1rem;
}

.nav-icon {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.nav-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-cta {
    background: transparent;
    border: 1px solid #627eea;
    color: #627eea;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-cta:hover {
    background: #627eea;
    color: white;
}

/* Background Network Canvas */
#network-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Main Container */
.main-container {
    padding-top: 80px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 2rem 2rem;
    text-align: center;
}

/* Hero Section */
.hero {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    width: 100%;
}

.eth-diamond-hero {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 3rem;
    animation: heroGlow 4s ease-in-out infinite;
}

.eth-diamond-hero svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 15px rgba(98, 126, 234, 0.5));
}

.diamond-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, rgba(98, 126, 234, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes heroGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 15px rgba(98, 126, 234, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(98, 126, 234, 0.7));
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.6;
    }
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    color: #ffffff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(98, 126, 234, 0.4);
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem 2rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 2.5rem;
    font-weight: 400;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

.connect-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.connect-btn:hover {
    border-color: #627eea;
    box-shadow: 0 0 20px rgba(98, 126, 234, 0.3);
}

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

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

/* Check Wallet Section */
.check-wallet-section {
    max-width: 1000px;
    width: 100%;
    margin-bottom: 4rem;
    padding: 0 2rem;
}

.check-wallet-card {
    background: linear-gradient(135deg, rgba(98, 126, 234, 0.12) 0%, rgba(0, 0, 0, 0.85) 100%);
    border: 1px solid rgba(98, 126, 234, 0.3);
    border-radius: 28px;
    padding: 3.5rem 3rem;
    text-align: center;
    backdrop-filter: blur(25px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 40px rgba(98, 126, 234, 0.15);
    position: relative;
    overflow: hidden;
}

.check-wallet-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(98, 126, 234, 0.08),
            transparent);
    transition: left 1s ease;
}

.check-wallet-card:hover::before {
    left: 100%;
}

.check-wallet-header {
    margin-bottom: 3rem;
}

.eth-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.eth-logo-large {
    position: relative;
    width: 60px;
    height: 60px;
}

.eth-diamond-large {
    position: relative;
    width: 100%;
    height: 100%;
    animation: ethLogoFloat 4s ease-in-out infinite;
}

.eth-diamond-large::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 32px solid #8a9cff;
    filter: drop-shadow(0 0 12px rgba(138, 156, 255, 0.6));
}

.eth-diamond-large::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 24px solid #627eea;
    filter: drop-shadow(0 0 12px rgba(98, 126, 234, 0.6));
}

.diamond-glow-large {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: radial-gradient(circle, rgba(98, 126, 234, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: logoGlow 3s ease-in-out infinite;
}

.eth-brand {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #627eea;
    text-shadow: 0 0 15px rgba(98, 126, 234, 0.5);
}

@keyframes ethLogoFloat {

    0%,
    100% {
        filter: drop-shadow(0 0 15px rgba(98, 126, 234, 0.6));
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(98, 126, 234, 0.8));
        transform: translateY(-8px) rotate(5deg);
    }
}

@keyframes logoGlow {

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

    50% {
        opacity: 0.9;
        transform: scale(1.1);
    }
}

.check-wallet-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.2rem;
    letter-spacing: 0.01em;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(98, 126, 234, 0.3);
}

.check-wallet-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    line-height: 1.6;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.check-wallet-action {
    margin: 3rem 0;
}

.check-wallet-btn {
    background: linear-gradient(135deg, #627eea 0%, #8a9cff 50%, #627eea 100%);
    border: none;
    color: white;
    padding: 1.2rem 3rem;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s ease;
    display: inline-block;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 6px 25px rgba(98, 126, 234, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background-size: 200% 100%;
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    z-index: 2;
}

.btn-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-text {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.btn-arrow {
    transition: transform 0.3s ease;
}

.btn-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.check-wallet-btn:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 40px rgba(98, 126, 234, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background-position: 100% 0;
}

.check-wallet-btn:hover .btn-glow {
    opacity: 1;
}

.check-wallet-btn:hover .btn-arrow {
    transform: translateX(4px);
}

.check-wallet-btn:active {
    transform: translateY(-2px);
}

.check-wallet-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #627eea;
    filter: drop-shadow(0 0 8px rgba(98, 126, 234, 0.6));
}

.stat-icon svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 4px rgba(98, 126, 234, 0.4));
}

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(98, 126, 234, 0.4), transparent);
}

/* Navigation Dots */
.nav-dots {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 4rem;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.dot.active {
    background: #627eea;
    box-shadow: 0 0 10px rgba(98, 126, 234, 0.6);
}

.dot-icon {
    font-size: 1.2rem;
    opacity: 0.7;
}

/* Info Section */
.info-section {
    max-width: 1000px;
    width: 100%;
    padding: 0 2rem;
    text-align: center;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 3rem;
    color: #ffffff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.5);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(98, 126, 234, 0.2);
}

.info-card {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(98, 126, 234, 0.3);
    border-radius: 16px;
    padding: 2.5rem;
    backdrop-filter: blur(15px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.6);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #627eea;
    backdrop-filter: blur(8px);
}

.card-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: center;
}

.card-text p {
    color: #ffffff;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    background: rgba(0, 0, 0, 0.85);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    border: 1px solid rgba(98, 126, 234, 0.3);
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    position: relative;
}

.eth-diamond-card {
    width: 120px;
    height: 120px;
    position: relative;
    filter: drop-shadow(0 0 20px rgba(98, 126, 234, 0.4));
    animation: cardFloat 6s ease-in-out infinite;
}

.eth-diamond-card::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 50px solid #8a9cff;
    filter: drop-shadow(0 0 15px rgba(138, 156, 255, 0.6));
}

.eth-diamond-card::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 40px solid #627eea;
    filter: drop-shadow(0 0 15px rgba(98, 126, 234, 0.6));
}

.diamond-particles {
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    background: radial-gradient(circle at 50% 50%, rgba(98, 126, 234, 0.2) 0%, transparent 60%);
    border-radius: 50%;
    animation: particleRotate 12s linear infinite;
}

@keyframes cardFloat {

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

    50% {
        transform: translateY(-5px);
    }
}

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

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

/* Mobile Navigation */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-menu.mobile-open {
    display: flex;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(26, 27, 58, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 999;
}



/* Responsive Design */
@media (max-width: 768px) {
    .nav-container {
        padding: 1rem;
    }

    .nav-menu {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .hero-title {
        font-size: 2.5rem;
        padding: 0.8rem 1.5rem;
    }

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

    .check-wallet-section {
        padding: 0 1rem;
    }

    .check-wallet-card {
        padding: 2.5rem 1.5rem;
    }

    .eth-logo-large {
        width: 50px;
        height: 50px;
    }

    .eth-brand {
        font-size: 1.1rem;
    }

    .check-wallet-title {
        font-size: 2rem;
    }

    .check-wallet-subtitle {
        font-size: 1rem;
    }

    .check-wallet-btn {
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }

    .check-wallet-stats {
        gap: 1.5rem;
        flex-direction: column;
    }

    .stat-item {
        justify-content: center;
    }

    .stat-divider {
        display: none;
    }

    .card-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .card-visual {
        height: 150px;
    }

    .eth-diamond-card {
        width: 80px;
        height: 80px;
    }

    .main-container {
        padding: 80px 1rem 2rem;
    }

    .section-title {
        font-size: 1.8rem;
        padding: 1rem 1.5rem;
    }

    .info-card {
        padding: 1.5rem;
    }

    .card-text p {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0.8rem;
    }

    .hero-title {
        font-size: 2rem;
        padding: 0.6rem 1rem;
    }

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

    .check-wallet-card {
        padding: 2rem 1rem;
    }

    .eth-logo-section {
        gap: 0.8rem;
        margin-bottom: 2rem;
    }

    .eth-logo-large {
        width: 45px;
        height: 45px;
    }

    .eth-brand {
        font-size: 1rem;
    }

    .check-wallet-title {
        font-size: 1.6rem;
    }

    .check-wallet-subtitle {
        font-size: 0.95rem;
    }

    .check-wallet-btn {
        padding: 1rem 2rem;
        font-size: 0.95rem;
    }

    .btn-content {
        gap: 0.6rem;
    }

    .check-wallet-stats {
        flex-direction: column;
        gap: 1.2rem;
    }

    .stat-item {
        gap: 0.8rem;
    }

    .stat-number {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .section-title {
        font-size: 1.4rem;
        padding: 0.8rem 1rem;
    }

    .info-card {
        padding: 1rem;
    }

    .card-text p {
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }

    .connect-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
    }
}

/*
 Page Styles */
.page-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
}

.page-title {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: #ffffff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(98, 126, 234, 0.4);
    background: rgba(0, 0, 0, 0.4);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.page-subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 400;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

.nav-link.active {
    color: #627eea;
}

/* FAQ Styles */
.faq-container {
    max-width: 800px;
    width: 100%;
}

.faq-item {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(98, 126, 234, 0.3);
    border-radius: 12px;
    margin-bottom: 1rem;
    backdrop-filter: blur(15px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: rgba(98, 126, 234, 0.1);
}

.faq-question h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
}

.faq-toggle {
    font-size: 1.5rem;
    color: #627eea;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 0 1.5rem 1.5rem;
    color: #ffffff;
    line-height: 1.7;
    margin: 0;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.6);
}

/* Eligibility Styles */
.eligibility-container {
    max-width: 1000px;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.eligibility-checker {
    background: rgba(26, 27, 58, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.checker-header {
    text-align: center;
    margin-bottom: 2rem;
}

.eth-diamond-small {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #627eea, #8a9cff);
    clip-path: polygon(50% 0%, 0% 50%, 50% 100%, 100% 50%);
    position: relative;
    animation: smallPulse 2s ease-in-out infinite;
}

.diamond-glow-small {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(circle, rgba(98, 126, 234, 0.3) 0%, transparent 70%);
    border-radius: 50%;
}

@keyframes smallPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(98, 126, 234, 0.6));
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(98, 126, 234, 0.8));
    }
}

.checker-header h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.checker-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.checker-form {
    margin-bottom: 2rem;
}

.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
}

.input-group input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.input-btn {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid #627eea;
    color: #627eea;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.input-btn:hover {
    background: #627eea;
    color: white;
}

.divider {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.divider span {
    background: rgba(26, 27, 58, 0.9);
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.connect-wallet-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(98, 126, 234, 0.2), rgba(98, 126, 234, 0.1));
    border: 1px solid #627eea;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 500;
}

.connect-wallet-btn:hover {
    background: linear-gradient(135deg, rgba(98, 126, 234, 0.3), rgba(98, 126, 234, 0.2));
    box-shadow: 0 0 20px rgba(98, 126, 234, 0.3);
}

.wallet-icon {
    font-size: 1.2rem;
}

/* Results Styles */
.eligibility-results {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.results-header {
    margin-bottom: 1.5rem;
}

.results-header h3 {
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.wallet-address-display {
    font-family: monospace;
    color: #627eea;
    font-size: 0.85rem;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.result-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.result-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.result-content h4 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.result-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.result-value.highlight {
    color: #4ade80;
}

.result-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin: 0;
}

.claim-action {
    text-align: center;
}

.claim-btn {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(74, 222, 128, 0.4);
}

.claim-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
}

/* Eligibility Info */
.eligibility-info {
    background: rgba(26, 27, 58, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    height: fit-content;
}

.eligibility-info h3 {
    color: #ffffff;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.criteria-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.criteria-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.criteria-icon {
    font-size: 1.2rem;
    margin-top: 0.2rem;
}

.criteria-content h4 {
    color: #ffffff;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.criteria-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Responsive Design for New Pages */
@media (max-width: 768px) {
    .eligibility-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .results-grid {
        grid-template-columns: 1fr;
    }

    .nav-menu {
        display: none;
    }
}

/*
 Claim Page Styles */
.claim-container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.claim-process {
    background: rgba(26, 27, 58, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.process-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.step.active .step-number {
    background: #627eea;
    color: white;
    box-shadow: 0 0 20px rgba(98, 126, 234, 0.4);
}

.step.completed .step-number {
    background: #4ade80;
    color: white;
}

.step-content h3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.25rem;
}

.step.active .step-content h3 {
    color: #ffffff;
}

.step-content p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.claim-form {
    position: relative;
    min-height: 400px;
}

.form-step {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-header {
    text-align: center;
    margin-bottom: 2rem;
}

.step-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.step-header h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.step-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

/* Wallet Options */
.wallet-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wallet-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.wallet-option:hover {
    background: rgba(98, 126, 234, 0.1);
    border-color: #627eea;
}

.wallet-option img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.wallet-option span {
    flex: 1;
    font-weight: 500;
}

.option-arrow {
    color: #627eea;
    font-weight: bold;
}

/* Verification Summary */
.verification-summary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

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

.summary-item:last-child {
    border-bottom: none;
}

.summary-item .label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.summary-item .value {
    color: #ffffff;
    font-weight: 500;
    font-family: monospace;
}

.summary-item .value.highlight {
    color: #4ade80;
    font-size: 1.1rem;
}

.continue-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #627eea, #8a9cff);
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(98, 126, 234, 0.4);
}

/* Transaction Details */
.transaction-details {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.tx-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-family: monospace;
    font-size: 0.85rem;
}

.tx-label {
    color: rgba(255, 255, 255, 0.7);
}

.tx-value {
    color: #ffffff;
}

.signing-status {
    text-align: center;
    margin-bottom: 2rem;
}

.status-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.sign-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sign-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(245, 158, 11, 0.4);
}

/* Success Details */
.success-details {
    text-align: center;
}

.success-amount {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.1));
    border: 1px solid #4ade80;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.amount-label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.amount-value {
    display: block;
    color: #4ade80;
    font-size: 2rem;
    font-weight: 700;
}

.transaction-hash {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.hash-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.hash-value {
    flex: 1;
    color: #627eea;
    font-family: monospace;
    font-size: 0.85rem;
}

.copy-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.success-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.view-tx-btn,
.return-home-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-tx-btn {
    background: transparent;
    border: 1px solid #627eea;
    color: #627eea;
}

.view-tx-btn:hover {
    background: #627eea;
    color: white;
}

.return-home-btn {
    background: #627eea;
    border: 1px solid #627eea;
    color: white;
}

.return-home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(98, 126, 234, 0.3);
}

/* Claim Info */
.claim-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card-small {
    background: rgba(26, 27, 58, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.info-card-small h3 {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.info-card-small p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsive Design for Claim Page */
@media (max-width: 768px) {
    .claim-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .process-steps {
        flex-direction: column;
        gap: 1rem;
    }

    .process-steps::before {
        display: none;
    }

    .success-actions {
        flex-direction: column;
    }

    .transaction-hash {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Pr
emium Animations & Effects */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

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

@keyframes float {

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

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}



/* Enhanced Button Animations */
.btn,
.connect-btn,
.input-btn,
.connect-wallet-btn,
.continue-btn,
.sign-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.btn::before,
.connect-btn::before,
.input-btn::before,
.connect-wallet-btn::before,
.continue-btn::before,
.sign-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.6s ease;
}

.btn:hover::before,
.connect-btn:hover::before,
.input-btn:hover::before,
.connect-wallet-btn:hover::before,
.continue-btn:hover::before,
.sign-btn:hover::before {
    left: 100%;
}

.btn:hover,
.connect-btn:hover,
.input-btn:hover,
.connect-wallet-btn:hover,
.continue-btn:hover,
.sign-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Enhanced Card Animations */
.info-card,
.eligibility-checker,
.claim-process,
.faq-item,
.contact-card,
.status-card,
.stats-card,
.resources-card {
    animation: slideInUp 0.8s ease-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover,
.eligibility-checker:hover,
.claim-process:hover,
.contact-card:hover,
.status-card:hover,
.stats-card:hover,
.resources-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(98, 126, 234, 0.2);
}

/* Network Canvas */
#network-canvas {
    filter: blur(0.3px);
}

/* Support Page Styles */
.support-container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.support-main {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.contact-card {
    background: rgba(26, 27, 58, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    animation: slideInUp 0.8s ease-out;
}

.contact-card.priority {
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.1) 0%,
            rgba(26, 27, 58, 0.8) 100%);
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(98, 126, 234, 0.1),
            transparent);
    transition: left 0.8s ease;
}

.contact-card:hover::before {
    left: 100%;
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    animation: float 3s ease-in-out infinite;
}

.contact-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
}

.contact-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.contact-details {
    margin-bottom: 2rem;
}

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

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.detail-value {
    color: #ffffff;
    font-weight: 500;
    font-family: monospace;
}

.contact-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #627eea, #8a9cff);
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.priority-btn {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1b3a;
}

.contact-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(98, 126, 234, 0.4);
}

.priority-btn:hover {
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}

/* Help Sections */
.help-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.help-section {
    background: rgba(26, 27, 58, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(15px);
    animation: slideInLeft 0.8s ease-out;
}

.help-section h2 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.issue-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.issue-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.issue-item:hover {
    background: rgba(98, 126, 234, 0.1);
    border-color: #627eea;
    transform: translateX(5px);
}

.issue-icon {
    font-size: 1.5rem;
    animation: float 4s ease-in-out infinite;
}

.issue-content {
    flex: 1;
}

.issue-content h4 {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.issue-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0;
}

.help-btn {
    background: transparent;
    border: 1px solid #627eea;
    color: #627eea;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-btn:hover {
    background: #627eea;
    color: white;
    transform: scale(1.05);
}

/* Security Info */
.security-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.security-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.security-icon {
    font-size: 1.5rem;
    margin-top: 0.2rem;
    animation: float 5s ease-in-out infinite;
}

.security-content h4 {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.security-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Support Sidebar */
.support-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    animation: slideInRight 0.8s ease-out;
}

.status-card,
.stats-card,
.resources-card {
    background: rgba(26, 27, 58, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(15px);
}

.status-card h3,
.stats-card h3,
.resources-card h3 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.status-item:last-child {
    border-bottom: none;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.status-indicator.online {
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

.status-text {
    margin-left: auto;
    color: #4ade80;
    font-size: 0.85rem;
    font-weight: 500;
}

.stat-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #627eea;
    margin-bottom: 0.25rem;
    animation: scaleIn 0.8s ease-out;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

.resource-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resource-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.resource-link:hover {
    background: rgba(98, 126, 234, 0.1);
    color: #627eea;
    transform: translateX(5px);
}

.resource-icon {
    font-size: 1.1rem;
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
    .support-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-options {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 1.5rem;
    }

    .help-section {
        padding: 1.5rem;
    }

    .issue-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* Staggered Animation Delays */
.contact-card:nth-child(1) {
    animation-delay: 0.1s;
}

.contact-card:nth-child(2) {
    animation-delay: 0.2s;
}

.contact-card:nth-child(3) {
    animation-delay: 0.3s;
}

.issue-item:nth-child(1) {
    animation-delay: 0.1s;
}

.issue-item:nth-child(2) {
    animation-delay: 0.2s;
}

.issue-item:nth-child(3) {
    animation-delay: 0.3s;
}

.issue-item:nth-child(4) {
    animation-delay: 0.4s;
}

.security-item:nth-child(1) {
    animation-delay: 0.1s;
}

.security-item:nth-child(2) {
    animation-delay: 0.2s;
}

.security-item:nth-child(3) {
    animation-delay: 0.3s;
}

/* Premium Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    animation: shimmer 2s infinite;
}

/* CSS I
cons */
.icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    position: relative;
    vertical-align: middle;
}

.icon-search::before {
    content: '';
    position: absolute;
    width: 0.7em;
    height: 0.7em;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 0.1em;
    left: 0.1em;
}

.icon-search::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 0.4em;
    background: currentColor;
    transform: rotate(45deg);
    bottom: 0.1em;
    right: 0.1em;
}

.icon-mobile::before {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 1em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    top: 0.1em;
    left: 50%;
    transform: translateX(-50%);
}

.icon-mobile::after {
    content: '';
    position: absolute;
    width: 0.2em;
    height: 0.1em;
    background: currentColor;
    border-radius: 0.05em;
    bottom: 0.2em;
    left: 50%;
    transform: translateX(-50%);
}

.icon-help::before {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 0.8em;
}

.icon-wallet::before {
    content: '';
    position: absolute;
    width: 0.9em;
    height: 0.6em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    top: 0.3em;
    left: 0.15em;
}

.icon-wallet::after {
    content: '';
    position: absolute;
    width: 0.3em;
    height: 0.2em;
    border: 2px solid currentColor;
    border-bottom: none;
    border-radius: 0.1em 0.1em 0 0;
    top: 0.1em;
    left: 0.45em;
}

.icon-chart::before {
    content: '';
    position: absolute;
    width: 0.2em;
    height: 0.6em;
    background: currentColor;
    bottom: 0.2em;
    left: 0.2em;
}

.icon-chart::after {
    content: '';
    position: absolute;
    width: 0.2em;
    height: 0.8em;
    background: currentColor;
    bottom: 0.2em;
    left: 0.5em;
    box-shadow: 0.3em 0.2em 0 currentColor;
}

.icon-money::before {
    content: '$';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 0.8em;
}

.icon-clock::before {
    content: '';
    position: absolute;
    width: 0.8em;
    height: 0.8em;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 0.2em;
    left: 0.2em;
}

.icon-clock::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 0.3em;
    background: currentColor;
    top: 0.35em;
    left: 0.55em;
    transform-origin: bottom;
    transform: rotate(45deg);
}

.icon-check::before {
    content: '';
    position: absolute;
    width: 0.3em;
    height: 0.6em;
    border: 2px solid currentColor;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    top: 0.2em;
    left: 0.4em;
}

.icon-gas::before {
    content: '';
    position: absolute;
    width: 0.4em;
    height: 0.8em;
    border: 2px solid currentColor;
    border-radius: 0.2em;
    top: 0.2em;
    left: 0.4em;
}

.icon-gas::after {
    content: '';
    position: absolute;
    width: 0.2em;
    height: 0.3em;
    background: currentColor;
    top: 0.1em;
    left: 0.5em;
    border-radius: 0.1em 0.1em 0 0;
}

.icon-link::before {
    content: '';
    position: absolute;
    width: 0.4em;
    height: 0.4em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    top: 0.1em;
    left: 0.1em;
    transform: rotate(-45deg);
}

.icon-link::after {
    content: '';
    position: absolute;
    width: 0.4em;
    height: 0.4em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    bottom: 0.1em;
    right: 0.1em;
    transform: rotate(-45deg);
}

.icon-diamond::before {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.6em;
    background: currentColor;
    top: 0.3em;
    left: 0.3em;
    transform: rotate(45deg);
    clip-path: polygon(50% 0%, 0% 50%, 50% 100%, 100% 50%);
}

.icon-rocket::before {
    content: '';
    position: absolute;
    width: 0.3em;
    height: 0.8em;
    background: currentColor;
    border-radius: 0.15em 0.15em 0 0;
    top: 0.1em;
    left: 0.45em;
}

.icon-rocket::after {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.3em;
    background: currentColor;
    border-radius: 0 0 0.3em 0.3em;
    bottom: 0.1em;
    left: 0.3em;
}

.icon-email::before {
    content: '';
    position: absolute;
    width: 0.9em;
    height: 0.6em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    top: 0.3em;
    left: 0.15em;
}

.icon-email::after {
    content: '';
    position: absolute;
    width: 0.5em;
    height: 0.3em;
    border: 2px solid currentColor;
    border-top: none;
    border-radius: 0 0 0.1em 0.1em;
    top: 0.3em;
    left: 0.35em;
}

.icon-phone::before {
    content: '';
    position: absolute;
    width: 0.5em;
    height: 0.8em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    top: 0.2em;
    left: 0.35em;
}

.icon-phone::after {
    content: '';
    position: absolute;
    width: 0.2em;
    height: 0.1em;
    background: currentColor;
    border-radius: 0.05em;
    bottom: 0.3em;
    left: 50%;
    transform: translateX(-50%);
}

.icon-shield::before {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.8em;
    border: 2px solid currentColor;
    border-radius: 0.3em 0.3em 0 0.3em;
    top: 0.1em;
    left: 0.3em;
}

.icon-lock::before {
    content: '';
    position: absolute;
    width: 0.4em;
    height: 0.3em;
    border: 2px solid currentColor;
    border-bottom: none;
    border-radius: 0.2em 0.2em 0 0;
    top: 0.2em;
    left: 0.4em;
}

.icon-lock::after {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.4em;
    background: currentColor;
    border-radius: 0.1em;
    bottom: 0.2em;
    left: 0.3em;
}

.icon-bulb::before {
    content: '';
    position: absolute;
    width: 0.5em;
    height: 0.6em;
    border: 2px solid currentColor;
    border-radius: 0.25em 0.25em 0.1em 0.1em;
    top: 0.1em;
    left: 0.35em;
}

.icon-bulb::after {
    content: '';
    position: absolute;
    width: 0.3em;
    height: 0.2em;
    background: currentColor;
    bottom: 0.1em;
    left: 0.45em;
}

.icon-book::before {
    content: '';
    position: absolute;
    width: 0.7em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    top: 0.05em;
    left: 0.25em;
}

.icon-book::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 0.7em;
    background: currentColor;
    top: 0.15em;
    left: 0.6em;
}

.icon-video::before {
    content: '';
    position: absolute;
    width: 0.7em;
    height: 0.5em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    top: 0.35em;
    left: 0.15em;
}

.icon-video::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 0.2em solid currentColor;
    border-top: 0.1em solid transparent;
    border-bottom: 0.1em solid transparent;
    top: 0.5em;
    right: 0.2em;
}

.icon-party::before {
    content: '';
    position: absolute;
    width: 0.3em;
    height: 0.6em;
    background: currentColor;
    border-radius: 0.15em 0.15em 0 0;
    top: 0.2em;
    left: 0.45em;
}

.icon-party::after {
    content: '';
    position: absolute;
    width: 0.1em;
    height: 0.3em;
    background: currentColor;
    top: 0.1em;
    left: 0.55em;
    box-shadow:
        -0.2em 0.1em 0 currentColor,
        0.2em 0.1em 0 currentColor,
        -0.1em -0.1em 0 currentColor,
        0.1em -0.1em 0 currentColor;
}

.icon-edit::before {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.1em;
    background: currentColor;
    transform: rotate(45deg);
    top: 0.3em;
    left: 0.3em;
}

.icon-edit::after {
    content: '';
    position: absolute;
    width: 0.2em;
    height: 0.2em;
    border: 2px solid currentColor;
    border-top: none;
    border-right: none;
    bottom: 0.1em;
    right: 0.1em;
}

.icon-copy::before {
    content: '';
    position: absolute;
    width: 0.5em;
    height: 0.6em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    top: 0.1em;
    left: 0.1em;
}

.icon-copy::after {
    content: '';
    position: absolute;
    width: 0.5em;
    height: 0.6em;
    border: 2px solid currentColor;
    border-radius: 0.1em;
    bottom: 0.1em;
    right: 0.1em;
    background: rgba(255, 255, 255, 0.1);
}

/* Additional CSS Icons */
.icon-rocket {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-email {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-phone {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79C8.06 13.62 10.38 15.94 13.21 17.38L15.41 15.18C15.69 14.9 16.08 14.82 16.43 14.93C17.55 15.3 18.75 15.5 20 15.5C20.55 15.5 21 15.95 21 16.5V20C21 20.55 20.55 21 20 21C10.61 21 3 13.39 3 4C3 3.45 3.45 3 4 3H7.5C8.05 3 8.5 3.45 8.5 4C8.5 5.25 8.7 6.45 9.07 7.57C9.18 7.92 9.1 8.31 8.82 8.59L6.62 10.79Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-link {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12S4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12S18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12S19.76 7 17 7Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-error {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-money {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9C9.53 10.31 8.8 9.7 8.8 8.75C8.8 7.66 9.81 6.9 11.5 6.9C13.28 6.9 13.94 7.75 14 9H16.21C16.14 7.28 15.09 5.7 13 5.19V3H10V5.16C8.06 5.58 6.5 6.84 6.5 8.77C6.5 11.08 8.41 12.23 11.2 12.9C13.7 13.5 14.2 14.38 14.2 15.31C14.2 16 13.71 17.1 11.5 17.1C9.44 17.1 8.63 16.18 8.5 15H6.32C6.44 17.19 8.08 18.42 10 18.83V21H13V18.85C14.95 18.5 16.5 17.35 16.5 15.3C16.5 12.46 14.07 11.5 11.8 10.9Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-clock {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-shield {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1M12 7C13.4 7 14.8 8.6 14.8 10V11C15.4 11 16 11.4 16 12V16C16 16.6 15.6 17 15 17H9C8.4 17 8 16.6 8 16V12C8 11.4 8.4 11 9 11V10C9 8.6 10.6 7 12 7M12 8.2C11.2 8.2 10.2 9 10.2 10V11H13.8V10C13.8 9 12.8 8.2 12 8.2Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-lock {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8H17V6C17 3.24 14.76 1 12 1S7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM9 6C9 4.34 10.34 3 12 3S15 4.34 15 6V8H9V6ZM18 20H6V10H18V20ZM12 17C13.1 17 14 16.1 14 15S13.1 13 12 13 10 13.9 10 15 10.9 17 12 17Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-book {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V4C20 2.9 19.1 2 18 2ZM18 20H6V4H7V9L9.5 7.5L12 9V4H18V20Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-video {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7C17 6.45 16.55 6 16 6H4C3.45 6 3 6.45 3 7V17C3 17.55 3.45 18 4 18H16C16.55 18 17 17.55 17 17V13.5L21 17.5V6.5L17 10.5Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-user {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12C14.21 12 16 10.21 16 8S14.21 4 12 4 8 5.79 8 8 9.79 12 12 12M12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-copy {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 21H8V7H19M19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-mobile {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7C5.9 2 5 2.9 5 4V20C5 21.1 5.9 22 7 22H17C18.1 22 19 21.1 19 20V4C19 2.9 18.1 2 17 2ZM17 18H7V6H17V18Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.icon-help {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 18H13V16H11V18ZM12 2C6.48 2 2 6.48 2 12S6.48 22 12 22 22 17.52 22 12 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20ZM12 6C9.79 6 8 7.79 8 10H10C10 8.9 10.9 8 12 8S14 8.9 14 10C14 12 11 11.75 11 15H13C13 12.75 16 12.5 16 10C16 7.79 14.21 6 12 6Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* Inline icon for headings */
.inline-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    font-size: 0.9em;
}

/* Support Page Specific Styles */
.contact-details {
    margin: 1.5rem 0;
}

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

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.detail-value {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
}

.contact-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #627eea, #8a9cff);
    border: none;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(98, 126, 234, 0.4);
}

.priority-btn {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1b3a;
}

.priority-btn:hover {
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

.help-sections {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.help-section h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 2rem;
    text-align: center;
}

.issue-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.issue-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.issue-item:hover {
    background: rgba(98, 126, 234, 0.1);
    border-color: rgba(98, 126, 234, 0.3);
}

.issue-icon {
    font-size: 2rem;
    color: #627eea;
    flex-shrink: 0;
}

.issue-content {
    flex: 1;
}

.issue-content h4 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.issue-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.help-btn {
    background: transparent;
    border: 1px solid #627eea;
    color: #627eea;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.help-btn:hover {
    background: #627eea;
    color: white;
}

.security-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.security-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
}

.security-icon {
    font-size: 1.5rem;
    color: #4ade80;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.security-content h4 {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.security-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    margin-right: 0.5rem;
    animation: pulse 2s ease-in-out infinite;
}

.status-indicator.online {
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

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

.status-item:last-child {
    border-bottom: none;
}

.status-text {
    color: #4ade80;
    font-size: 0.85rem;
    font-weight: 500;
}

.stat-item {
    text-align: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #627eea;
    margin-bottom: 0.25rem;
}

.stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

.resource-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resource-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.resource-link:hover {
    background: rgba(98, 126, 234, 0.1);
    color: #ffffff;
    transform: translateX(5px);
}

.resource-icon {
    font-size: 1rem;
    color: #627eea;
}

/* Responsive Design for Support Page */
@media (max-width: 768px) {
    .support-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-options {
        grid-template-columns: 1fr;
    }

    .issue-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .security-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* Claim 
Stub Styles */
.claim-stub-container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}

.claim-stub-card {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(98, 126, 234, 0.3);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    backdrop-filter: blur(15px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: slideInUp 0.8s ease-out;
}

.stub-icon {
    margin-bottom: 2rem;
}

.claim-stub-card h2 {
    font-size: 2rem;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 1rem;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 0, 0, 0.6);
}

.claim-stub-card>p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    line-height: 1.6;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8);
}

.stub-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(98, 126, 234, 0.2);
    transition: all 0.3s ease;
}

.info-item:hover {
    background: rgba(98, 126, 234, 0.1);
    border-color: rgba(98, 126, 234, 0.4);
    transform: translateY(-2px);
}

.info-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #627eea, #8a9cff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(98, 126, 234, 0.3);
}

.info-text h4 {
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.info-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.connect-wallet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, #627eea, #8a9cff);
    border: none;
    color: white;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.connect-wallet-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(98, 126, 234, 0.4);
}

.connect-wallet-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.6s ease;
}

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

.btn-icon {
    font-size: 1.3rem;
}

.icon-wallet {
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 18V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3H19C20.1 3 21 3.9 21 5V6H12C10.89 6 10 6.9 10 8V16C10 17.1 10.89 18 12 18H21ZM12 16H22V8H12V16ZM16 13.5C15.17 13.5 14.5 12.83 14.5 12S15.17 10.5 16 10.5 17.5 11.17 17.5 12 16.83 13.5 16 13.5Z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.stub-note {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.stub-note p {
    color: #ffc107;
    font-size: 0.9rem;
    margin: 0;
    font-weight: 500;
}

/* Responsive Design for Claim Stub */
@media (max-width: 768px) {
    .claim-stub-card {
        padding: 2rem 1.5rem;
    }

    .claim-stub-card h2 {
        font-size: 1.5rem;
    }

    .info-item {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .connect-wallet-btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .claim-stub-container {
        padding: 0 1rem;
    }

    .claim-stub-card {
        padding: 1.5rem 1rem;
    }

    .stub-info {
        gap: 1rem;
    }

    .info-item {
        padding: 1rem;
    }
}