:root {
    --neon-cyan: #00F0FF;
    --hot-pink: #FF069E;
    --gold: #FFD700;
    --matrix-green: #14F195;
    --ethereum-orange: #FF8C00;
    --dark-gray: #2A2A2A;
    --darker-gray: #1A1A1A;
    --light-gray: #3A3A3A;
}

html{
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Space Mono', monospace;
    background-color: var(--dark-gray);
    color: white;
    line-height: 1.6;
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: var(--neon-cyan);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--hot-pink);
    text-shadow: 0 0 5px var(--hot-pink);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Improved glow effects */
@keyframes neon-pulse {
    0% { text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan); }
    50% { text-shadow: 0 0 15px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan); }
    100% { text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan); }
}

@keyframes hot-pink-pulse {
    0% { text-shadow: 0 0 5px var(--hot-pink), 0 0 10px var(--hot-pink); }
    50% { text-shadow: 0 0 15px var(--hot-pink), 0 0 20px var(--hot-pink), 0 0 30px var(--hot-pink); }
    100% { text-shadow: 0 0 5px var(--hot-pink), 0 0 10px var(--hot-pink); }
}

@keyframes gold-pulse {
    0% { text-shadow: 0 0 5px var(--gold), 0 0 10px var(--gold); }
    50% { text-shadow: 0 0 15px var(--gold), 0 0 20px var(--gold), 0 0 30px var(--gold); }
    100% { text-shadow: 0 0 5px var(--gold), 0 0 10px var(--gold); }
}

/* Button Styles */
.btn {
    display: inline-block;
    background: linear-gradient(45deg, var(--neon-cyan), var(--hot-pink));
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid var(--gold);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s ease;
}

.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: all 0.4s ease;
    z-index: -1;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 15px rgba(255, 6, 158, 0.3), 0 0 5px var(--gold) inset;
    color: white;
}

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

.btn.secondary {
    background: transparent;
    border: 2px solid var(--hot-pink);
    color: var(--hot-pink);
}

.btn.secondary:hover {
    background: rgba(255, 6, 158, 0.1);
    color: white;
}

.cta-button {
    font-size: 1.1rem;
    padding: 12px 30px;
    animation: button-glitch 8s infinite;
}

@keyframes button-glitch {
    0% { box-shadow: 0 0 10px var(--neon-cyan); }
    2% { box-shadow: 0 0 20px var(--hot-pink); transform: translate(1px, 0); }
    3% { box-shadow: 0 0 15px var(--neon-cyan); transform: translate(-1px, 0); }
    4% { box-shadow: 0 0 10px var(--neon-cyan); transform: translate(0, 0); }
    25% { box-shadow: 0 0 10px var(--neon-cyan); }
    27% { box-shadow: 0 0 20px var(--hot-pink); transform: translate(2px, -2px); }
    28% { box-shadow: 0 0 15px var(--neon-cyan); transform: translate(-2px, 2px); }
    29% { box-shadow: 0 10px var(--neon-cyan); transform: translate(0, 0); }
    50% { box-shadow: 0 0 10px var(--neon-cyan); }
    100% { box-shadow: 0 0 10px var(--neon-cyan); }
}

.section-divider {
    border-top: 3px solid var(--gold);
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}

.section-divider::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -100%;
    width: 50%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--hot-pink), transparent);
    animation: divider-glow 3s infinite;
}

@keyframes divider-glow {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* Header Section with Updated Navigation */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(42, 42, 42, 0.8);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--gold);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 50px;
    border-radius: 10px;
    animation: logo-pulse 3s infinite alternate;
    box-shadow: 0 0 10px var(--neon-cyan);
}

@keyframes logo-pulse {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 10px var(--neon-cyan); 
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 15px var(--hot-pink), 0 0 20px var(--hot-pink); 
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 10px var(--neon-cyan); 
    }
}

.main-nav {
    display: flex;
    align-items: center;
}

.menu {
    display: flex;
    list-style: none;
}

.menu li {
    margin-left: 20px;
}

.menu a {
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.menu a:hover {
    color: var(--hot-pink);
    animation: neon-pulse 1.5s infinite;
}

.menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    transition: width 0.3s ease;
}

.menu a:hover::after {
    width: 100%;
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--neon-cyan);
    transition: all 0.3s ease;
}

/* Hero Section with Custom Cityscape */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: url(home.png);
    padding-top: 70px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    mix-blend-mode: overlay;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.matrix-code {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(rgba(20, 241, 149, 0.05), rgba(20, 241, 149, 0.05)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="20" fill="%2314F195" font-family="monospace" font-size="10">N</text><text x="30" y="40" fill="%2314F195" font-family="monospace" font-size="10">E</text><text x="50" y="60" fill="%2314F195" font-family="monospace" font-size="10">O</text><text x="70" y="80" fill="%2314F195" font-family="monospace" font-size="10">N</text><text x="20" y="30" fill="%2314F195" font-family="monospace" font-size="10">6</text><text x="40" y="50" fill="%2314F195" font-family="monospace" font-size="10">9</text><text x="60" y="70" fill="%2314F195" font-family="monospace" font-size="10">G</text><text x="80" y="90" fill="%2314F195" font-family="monospace" font-size="10">X</text></svg>');
    opacity: 0.4;
}

.cityscape-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><path d="M0,400 L0,250 L50,250 L50,300 L100,300 L100,200 L150,200 L150,250 L200,250 L200,150 L250,150 L250,200 L300,200 L300,250 L350,250 L350,180 L400,180 L400,220 L450,220 L450,150 L500,150 L500,250 L550,250 L550,200 L600,200 L600,280 L650,280 L650,220 L700,220 L700,300 L750,300 L750,250 L800,250 L800,180 L850,180 L850,250 L900,250 L900,300 L950,300 L950,200 L1000,200 L1000,300 L1050,300 L1050,250 L1100,250 L1100,200 L1150,200 L1150,300 L1200,300 L1200,400 Z" fill="%232A2A2A"/></svg>');
    background-position: bottom center;
    background-repeat: repeat-x;
    background-size: 1200px 400px;
    opacity: 0.8;
    z-index: 2;
}

.laser-beam-1, .laser-beam-2, .laser-beam-3 {
    position: absolute;
    height: 2px;
    width: 100%;
    transform-origin: left center;
    z-index: 2;
}

.laser-beam-1 {
    top: 25%;
    background: linear-gradient(90deg, transparent, var(--hot-pink), transparent);
    transform: rotate(5deg);
    animation: laser-move 8s infinite alternate, laser-opacity 4s infinite;
}

.laser-beam-2 {
    top: 60%;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
    transform: rotate(-3deg);
    animation: laser-move 12s infinite alternate-reverse, laser-opacity 5s infinite;
}

.laser-beam-3 {
    top: 40%;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: rotate(2deg);
    animation: laser-move 10s infinite alternate, laser-opacity 6s infinite 1s;
}

@keyframes laser-move {
    0% { transform: rotate(5deg) translateY(0); }
    100% { transform: rotate(-5deg) translateY(30px); }
}

@keyframes laser-opacity {
    0% { opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { opacity: 0.3; }
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border: 1px solid var(--gold);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
    animation: content-glow 5s infinite alternate;
}

/* Button with inline logo */
.cta-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 30px auto;
  }
  
  .inline-logo {
    width: 50px;
    height: 50px;
  }
  
  .spin-glow-logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 15px var(--neon-cyan), 0 0 20px var(--hot-pink);
    animation: spin-glow 6s infinite linear;
  }
  
  @keyframes spin-glow {
    0% {
      transform: rotate(0deg) scale(1);
      box-shadow: 0 0 15px var(--neon-cyan);
    }
    25% {
      box-shadow: 0 0 25px var(--hot-pink);
    }
    50% {
      transform: rotate(180deg) scale(1.1);
      box-shadow: 0 0 20px var(--gold);
    }
    75% {
      box-shadow: 0 0 25px var(--neon-cyan);
    }
    100% {
      transform: rotate(360deg) scale(1);
      box-shadow: 0 0 15px var(--neon-cyan);
    }
  }

@keyframes content-glow {
    0% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.2); }
    50% { box-shadow: 0 0 40px rgba(255, 6, 158, 0.2); }
    100% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.2); }
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    animation: title-glitch 8s infinite;
}

@keyframes title-glitch {
    0% { text-shadow: 0 0 10px var(--neon-cyan); }
    2% { text-shadow: 2px 0 var(--hot-pink), -2px 0 var(--neon-cyan); transform: translate(1px, 0); }
    3% { text-shadow: -2px 0 var(--hot-pink), 2px 0 var(--neon-cyan); transform: translate(-1px, 0); }
    4% { text-shadow: 0 0 10px var(--neon-cyan); transform: translate(0, 0); }
    25% { text-shadow: 0 0 10px var(--neon-cyan); }
    27% { text-shadow: 2px 0 var(--hot-pink), -2px 0 var(--neon-cyan); transform: translate(2px, -2px); }
    28% { text-shadow: -2px 0 var(--hot-pink), 2px 0 var(--neon-cyan); transform: translate(-2px, 2px); }
    29% { text-shadow: 0 0 10px var(--neon-cyan); transform: translate(0, 0); }
    50% { text-shadow: 0 0 10px var(--neon-cyan); }
    100% { text-shadow: 0 0 10px var(--neon-cyan); }
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.neon-accent {
    color: var(--hot-pink);
    text-shadow: 0 0 5px var(--hot-pink);
    animation: hot-pink-pulse 2s infinite;
}

.gold-accent-line {
    position: relative;
    height: 3px;
    width: 100px;
    margin: 30px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: line-grow 3s infinite alternate;
}

@keyframes line-grow {
    0% { width: 50px; opacity: 0.7; }
    100% { width: 150px; opacity: 1; }
}

/* Live metrics counter */
.live-metrics {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--neon-cyan);
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--neon-cyan);
    margin-bottom: 5px;
}

.metric-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: white;
    text-shadow: 0 0 5px var(--hot-pink);
}

/* Tokenomics Section */
/* Tokenomics Section Alignment & Icon Styling with Hover and Glow Effects */
.tokenomics {
    padding: 80px 0;
    position: relative;
    background-color: rgba(0, 0, 0, 0.9);
}

.tokenomics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.token-card {
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover effect for cards */
.token-card:hover {
    transform: translateY(-10px);
    border-color: var(--hot-pink);
    box-shadow: 0 0 20px rgba(255, 6, 158, 0.4), 0 0 40px rgba(255, 6, 158, 0.1);
    z-index: 2;
}

/* Glowing scan line effect on hover */
.token-card::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 6, 158, 0),
        rgba(255, 6, 158, 0.1),
        rgba(255, 6, 158, 0)
    );
    transition: 0.5s;
    opacity: 0;
}

.token-card:hover::after {
    top: 100%;
    opacity: 1;
    animation: scan-line 1.5s linear;
}

@keyframes scan-line {
    0% { 
        top: -100%;
        opacity: 0.5;
    }
    100% { 
        top: 100%;
        opacity: 0;
    }
}

.token-icon-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--hot-pink);
    box-shadow: 0 0 15px rgba(255, 6, 158, 0.4);
    transition: all 0.3s ease;
}

/* Circle glow effect on hover */
.token-card:hover .token-icon-circle {
    border-color: var(--hot-pink);
    box-shadow: 0 0 20px var(--hot-pink), 0 0 40px var(--hot-pink);
    animation: pulse-circle 2s infinite;
}

@keyframes pulse-circle {
    0% { 
        box-shadow: 0 0 15px rgba(255, 6, 158, 0.5);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 25px rgba(255, 6, 158, 0.8), 0 0 30px rgba(255, 6, 158, 0.4);
        transform: scale(1.05);
    }
    100% { 
        box-shadow: 0 0 15px rgba(255, 6, 158, 0.5);
        transform: scale(1);
    }
}

.circle-icon {
    width: 40px;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--hot-pink);
    transition: transform 0.3s ease;
}

/* Icon grows and glows on hover */
.token-card:hover .circle-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px var(--hot-pink));
}

/* Icon styles matching your screenshot */
.info-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF069E"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z"/></svg>');
}

.pie-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF069E"><path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c3.3-.47 6.03-2.73 7.39-5.84-2.58-.76-5.06-.98-7.39-1.15z"/></svg>');
}

.staking-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF069E"><path d="M2 20h20v4H2v-4zm3-12h4v8H5V8zm6-4h4v12h-4V4zm6 6h4v6h-4v-6z"/></svg>');
}

.wallet-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF069E"><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>');
}

h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-cyan);
    font-size: 1.2rem;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

/* Heading color change on hover */
.token-card:hover h3 {
    color: var(--hot-pink);
    text-shadow: 0 0 5px var(--hot-pink);
}

.token-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2rem;
    color: var(--hot-pink);
    margin: 15px 0;
    text-shadow: 0 0 10px var(--hot-pink);
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Value animation on hover */
.token-card:hover .token-value {
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--hot-pink), 0 0 30px var(--hot-pink);
    animation: value-pulse 2s infinite alternate;
}

@keyframes value-pulse {
    0% { text-shadow: 0 0 10px var(--hot-pink); }
    100% { text-shadow: 0 0 15px var(--hot-pink), 0 0 25px var(--hot-pink); }
}

.token-description {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.5;
    text-align: center;
    transition: color 0.3s ease;
}

/* Description brightens on hover */
.token-card:hover .token-description {
    color: white;
}

/* Section title styling */
.tokenomics h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: white;
    text-transform: uppercase;
}

.tokenomics h2 .neon-accent {
    color: var(--hot-pink);
    text-shadow: 0 0 10px var(--hot-pink);
    animation: title-glow 3s infinite alternate;
}

@keyframes title-glow {
    0% { text-shadow: 0 0 10px var(--hot-pink); }
    100% { text-shadow: 0 0 20px var(--hot-pink), 0 0 30px var(--hot-pink); }
}

/* Section divider */
.section-divider {
    height: 3px;
    background-color: var(--gold);
    margin: 20px 0 40px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Shimmering effect on divider */
.section-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--hot-pink), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}


/* Ad Banner */
.ad-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(45deg, var(--darker-gray), var(--dark-gray));
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 20px;
    margin: 50px 0;
    position: relative;
    overflow: hidden;
}

.ad-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 L100,100" stroke="%23FFD700" stroke-width="0.5" stroke-opacity="0.2"/><path d="M100,0 L0,100" stroke="%23FFD700" stroke-width="0.5" stroke-opacity="0.2"/></svg>');
    opacity: 0.1;
    z-index: 0;
}

.ad-content {
    flex: 1;
    min-width: 250px;
    z-index: 1;
}

.ad-content h3 {
    color: var(--gold);
    text-shadow: 0 0 5px var(--gold);
    margin-bottom: 10px;
}

.ad-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    min-width: 200px;
    z-index: 1;
}

.timer-label {
    font-size: 0.8rem;
    color: var(--hot-pink);
    margin-bottom: 5px;
}

.timer-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: white;
    animation: timer-pulse 1s infinite alternate;
}

@keyframes timer-pulse {
    0% { text-shadow: 0 0 5px var(--hot-pink); }
    100% { text-shadow: 0 0 15px var(--hot-pink); }
}

/* Roadmap Section */
.roadmap {
    padding: 80px 0;
    position: relative;
    background-color: var(--dark-gray);
}

.timeline-container {
    position: relative;
    margin: 60px 0;
    padding: 0 20px;
}

.timeline-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: var(--neon-cyan);
    background: linear-gradient(to bottom, var(--neon-cyan), var(--hot-pink));
    z-index: 1;
}

.timeline-item {
    display: flex;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.timeline-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--gold);
    border: 4px solid var(--dark-gray);
    box-shadow: 0 0 15px var(--gold);
    flex-shrink: 0;
    margin: 0 20px;
    position: relative;
    z-index: 2;
}

.timeline-content {
    flex: 1;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 20px;
    max-width: 45%;
    position: relative;
}

.timeline-content::after {
    content: '';
    position: absolute;
    top: 15px;
    right: -20px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--neon-cyan);
}

.timeline-item:nth-child(odd) .timeline-content::after {
    right: auto;
    left: -20px;
    border-color: transparent var(--neon-cyan) transparent transparent;
}

.timeline-content h3 {
    color: var(--neon-cyan);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.timeline-date {
    display: inline-block;
    margin-top: 15px;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    font-size: 0.9rem;
    color: var(--gold);
}

/* ROI Projection Section */
.roi-projection {
    padding: 80px 0;
    position: relative;
}

.roi-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 40px 0;
}

.roi-chart-container {
    flex: 1;
    min-width: 300px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 20px;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.roi-info {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.roi-metrics {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.metric-item {
    flex: 1;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--hot-pink);
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    transition: all 0.3s ease;
}

.metric-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 6, 158, 0.3);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--neon-cyan);
    margin-bottom: 10px;
}

.metric-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: var(--hot-pink);
    margin-bottom: 5px;
    text-shadow: 0 0 10px var(--hot-pink);
}

.metric-growth {
    color: var(--matrix-green);
    font-weight: bold;
    font-size: 1.1rem;
}

.roi-description {
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 20px;
}

.roi-description p {
    margin-bottom: 15px;
}

.disclaimer {
    font-size: 0.8rem;
    color: #aaa;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .roi-metrics {
        flex-direction: column;
    }
}
/* Ads & Offers Section */
.ads-offers {
    padding: 80px 0;
    position: relative;
    background-color: var(--darker-gray);
}

.ad-metrics-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.metric-card {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--hot-pink);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 6, 158, 0.2);
}

.metric-card h3 {
    color: var(--hot-pink);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.metric-card .metric-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: white;
    margin-bottom: 15px;
    text-shadow: 0 0 5px var(--hot-pink);
}

.metric-chart {
    height: 100px;
}

.mini-chart {
    width: 100%;
    height: 100%;
}

.referral-cta {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    margin-top: 40px;
}

.referral-cta h3 {
    color: var(--gold);
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--gold);
}

.referral-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.referral-box input {
    flex: 1;
    min-width: 250px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-cyan);
    color: white;
    font-family: 'Space Mono', monospace;
    border-radius: 5px;
}

/* Enhanced Buy Section Styling */
.buy {
    padding: 80px 0;
    position: relative;
    background-color: var(--darker-gray);
    overflow: hidden;
}

.buy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(0, 240, 255, 0.05) 0%, transparent 50%, rgba(255, 6, 158, 0.05) 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="10" height="10" fill="%2314F195" fill-opacity="0.05"/></svg>');
    pointer-events: none;
    z-index: 0;
}

.section-header {
    text-align: center;
    position: relative;
    z-index: 2;
}

.dex-widget {
    position: relative;
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(42, 42, 42, 0.8));
    padding: 40px;
    margin: 40px auto;
    max-width: 900px;
    border-radius: 15px;
    overflow: hidden;
    z-index: 2;
    transition: all 0.3s ease;
}

.widget-glow-overlay {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
    opacity: 0.2;
    animation: dex-pulse 8s infinite;
    z-index: 0;
}

@keyframes dex-pulse {
    0% { transform: translate(-30%, -30%) scale(0.9); opacity: 0.1; }
    50% { transform: translate(-30%, -30%) scale(1); opacity: 0.2; }
    100% { transform: translate(-30%, -30%) scale(0.9); opacity: 0.1; }
}

.dex-widget:hover {
    box-shadow: 0 0 35px rgba(255, 6, 158, 0.4);
    border-color: var(--hot-pink);
    transform: translateY(-5px);
}

.dex-widget h3 {
    font-size: 2rem;
    text-align: center;
    color: var(--gold);
    margin-bottom: 25px;
    text-shadow: 0 0 10px var(--gold);
    position: relative;
    z-index: 1;
}

.dex-widget p {
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.steps-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin: 40px 0;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.step {
    flex: 1;
    min-width: 250px;
    max-width: 320px;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    padding: 25px;
    border-radius: 12px;
    border-left: 3px solid var(--neon-cyan);
    transition: all 0.4s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(0, 240, 255, 0.05));
    z-index: 0;
}

.step:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 240, 255, 0.3);
    border-color: var(--hot-pink);
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to bottom, var(--hot-pink), var(--neon-cyan)) 1;
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-cyan), var(--hot-pink));
    color: black;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.step:hover .step-number {
    animation: pulse-step 1s infinite alternate;
}

@keyframes pulse-step {
    0% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); }
    100% { transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 6, 158, 0.7); }
}

.step-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.step-content h4 {
    font-size: 1.25rem;
    color: var(--neon-cyan);
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.step:hover .step-content h4 {
    color: var(--hot-pink);
    text-shadow: 0 0 8px var(--hot-pink);
}

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

.step-icon {
    width: 40px;
    height: 40px;
    margin: 15px auto 0;
    opacity: 0.7;
    transition: all 0.3s ease;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.step:hover .step-icon {
    opacity: 1;
    transform: scale(1.2);
}

.wallet-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300F0FF"><path d="M20 7V5c0-1.1-.9-2-2-2H4C2.9 3 2 3.9 2 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2h-2zm0 8h-2V9h2v6zm-4 6H4V5h12v2h-8v2h8v2h-2v6h2v2z"/></svg>');
}

.swap-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF069E"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>');
}

.confirm-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
}

/* Token Interface Styling */
.token-interface {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    border: 1px solid var(--neon-cyan);
    padding: 30px;
    margin: 30px 0;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2) inset;
}

.token-selector {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.token-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.token-input label {
    color: var(--neon-cyan);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.amount-container {
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.amount-container input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 15px;
    color: white;
    font-size: 1.2rem;
    font-family: 'Space Mono', monospace;
}

.amount-container input:focus {
    outline: none;
}

.token-select {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 15px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.token-select:hover {
    background: rgba(0, 240, 255, 0.1);
}

.token-select img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.dropdown-arrow {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-left: 5px;
}

.swap-arrow {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--hot-pink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: var(--hot-pink);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swap-arrow:hover {
    background: rgba(255, 6, 158, 0.2);
    transform: rotate(180deg);
}

.exchange-details {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.detail-row span:first-child {
    color: #aaa;
}

.positive-value {
    color: var(--matrix-green);
}

/* Token Info */
.token-info {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 25px;
    margin: 35px 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}



.token-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255, 215, 0, 0.3);
}

.token-data:last-child {
    border-bottom: none;
}

.token-data span {
    font-weight: bold;
    color: var(--gold);
    font-size: 1.1rem;
    text-shadow: 0 0 5px var(--gold);
}

.token-data code {
    display: flex;
    align-items: center;
    font-family: 'Space Mono', monospace;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    font-size: 1.1rem;
    color: var(--neon-cyan);
    position: relative;
    overflow: hidden;
}

.copy-btn {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300F0FF"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    opacity: 1;
    transform: scale(1.2);
}

.token-data code::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.2), transparent);
    animation: code-shimmer 3s infinite;
}

@keyframes code-shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.connect-wallet-btn {
    padding: 15px 30px;
    font-size: 1.1rem;
    background: linear-gradient(45deg, var(--hot-pink), var(--neon-cyan));
    animation: btn-glow 2s infinite alternate;
}

@keyframes btn-glow {
    0% { box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); }
    100% { box-shadow: 0 0 25px rgba(255, 6, 158, 0.8); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .steps-container {
        flex-direction: column;
        align-items: center;
    }
    
    .step {
        width: 100%;
        max-width: 100%;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .token-data {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .token-data code {
        width: 100%;
        justify-content: space-between;
    }
}

/* Community Section */
.community {
    padding: 80px 0;
    position: relative;
    background-color: var(--darker-gray);
}

.community-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin: 40px 0;
}

.community-text {
    flex: 1;
    min-width: 300px;
}

.community-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.community-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.highlight-bullet {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--hot-pink);
    border-radius: 50%;
    margin-right: 15px;
    box-shadow: 0 0 8px var(--hot-pink);
    position: relative;
}

.highlight-bullet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--hot-pink);
    border-radius: 50%;
    z-index: -1;
    animation: bullet-pulse 2s infinite;
}

@keyframes bullet-pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
}

.community-counter {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 300px;
    justify-content: center;
}

.counter-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 20px;
    min-width: 200px;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.counter-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
    animation: counter-glow-bg 4s infinite alternate;
}

@keyframes counter-glow-bg {
    0% { opacity: 0; }
    100% { opacity: 0.5; }
}

.counter-value {
    font-size: 2.5rem;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-cyan);
    margin-bottom: 10px;
    position: relative;
    animation: counter-glow 3s infinite alternate;
}

@keyframes counter-glow {
    0% { text-shadow: 0 0 5px var(--neon-cyan); }
    100% { text-shadow: 0 0 15px var(--neon-cyan); }
}

.counter-label {
    color: white;
    font-size: 0.9rem;
}

/* Social Feeds */
.social-feeds {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 40px 0;
}

.social-feed {
    flex: 1;
    min-width: 300px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--neon-cyan);
}

.social-feed h3 {
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--neon-cyan);
    padding: 15px;
    text-align: center;
    margin: 0;
    border-bottom: 1px solid var(--neon-cyan);
}

.feed-content {
    height: 400px;
    overflow-y: auto;
    padding: 15px;
}

.feed-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
}

/* Testimonials */
.testimonials {
    margin: 40px 0;
}

.testimonials h3 {
    text-align: center;
    color: var(--gold);
    margin-bottom: 20px;
}

.testimonials-slider {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.testimonial {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--hot-pink);
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    text-align: center;
}

.testimonial p {
    font-style: italic;
    margin-bottom: 10px;
}

.testimonial-author {
    color: var(--neon-cyan);
    font-weight: bold;
}

.slider-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.slider-prev, .slider-next {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-cyan);
    border-radius: 50%;
    color: var(--neon-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-prev:hover, .slider-next:hover {
    background-color: var(--neon-cyan);
    color: black;
}

/* Referral Program */
.referral-program {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 30px;
    margin: 40px 0 20px;
}

.referral-program h3 {
    color: var(--gold);
    text-align: center;
    margin-bottom: 20px;
}

.referral-progress {
    margin-bottom: 20px;
}

.progress-bar {
    height: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-cyan), var(--hot-pink));
    border-radius: 10px;
    transition: width 0.3s ease;
}

.progress-label {
    text-align: right;
    font-size: 0.8rem;
    color: var(--neon-cyan);
}

.referral-stats {
    display: flex;
    justify-content: space-around;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: var(--hot-pink);
    text-shadow: 0 0 5px var(--hot-pink);
}

.stat-label {
    font-size: 0.9rem;
    color: #ccc;
}

/* Enhanced Social Links */
.social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neon-cyan);
    border-radius: 5px;
    transition: all 0.3s ease;
    color: white;
}

.social-links a:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px var(--neon-cyan);
    background: rgba(0, 240, 255, 0.1);
}

.social-icon {
    font-size: 1.2rem;
    color: var(--neon-cyan);
}



.social-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
}

.twitter .social-icon {
    color: var(--neon-cyan);
    display: flex;
        
}

.discord .social-icon {
    color: var(--hot-pink);
}

.telegram .social-icon {
    color: var(--gold);
}

/* Legal & Compliance Section */
.legal {
    padding: 80px 0;
    position: relative;
    background-color: var(--darker-gray);
}

.legal::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(0, 240, 255, 0.05) 0%, transparent 50%, rgba(255, 6, 158, 0.05) 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="10" height="10" fill="%2314F195" fill-opacity="0.05"/></svg>');
    pointer-events: none;
    z-index: 0;
}

.legal-section {
    background:
        linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
        repeating-linear-gradient(transparent 0 1px, rgba(255,215,0,0.1) 1px 3px);
    border: 1px solid var(--gold);
    padding: 30px;
    max-width: 800px;
    margin: 40px auto;
    position: relative;
    font-family: 'Space Mono', monospace;
}

.classified-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 5rem;
    color: rgba(255, 215, 0, 0.1);
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    letter-spacing: 10px;
    pointer-events: none;
    z-index: 0;
    animation: stamp-fade 8s infinite alternate;
}

@keyframes stamp-fade {
    0% { opacity: 0.05; }
    50% { opacity: 0.15; }
    100% { opacity: 0.05; }
}

.legal-highlight-box {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--hot-pink);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.legal-highlight-box h3 {
    color: var(--hot-pink);
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--hot-pink);
}

.document-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ethereum-orange);
    padding-bottom: 10px;
    position: relative;
    z-index: 1;
}

.document-id, .classification {
    font-size: 0.8rem;
}

.document-id span, .classification span {
    color: var(--ethereum-orange);
    font-weight: bold;
}

.redacted-line {
    height: 15px;
    background: repeating-linear-gradient(90deg,
        rgba(0,0,0,0.8) 0px,
        rgba(0,0,0,0.8) 5px,
        rgba(255,215,0,0.1) 5px,
        rgba(255,215,0,0.1) 10px);
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.redacted-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    animation: line-scan 4s infinite;
}

@keyframes line-scan {
    0% { left: -50%; }
    100% { left: 100%; }
}

.redacted-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
}

.legal-content {
    position: relative;
    z-index: 1;
    margin: 20px 0;
}

.legal-content p {
    margin-bottom: 15px;
}

.highlight {
    color: var(--gold);
    border-bottom: 1px dotted var(--gold);
    position: relative;
    cursor: pointer;
}

.highlight::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gold);
    animation: highlight-pulse 2s infinite;
}

@keyframes highlight-pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.legal-downloads {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin: 30px 0;
    position: relative;
    z-index: 1;
}

.legal-downloads h3 {
    color: var(--neon-cyan);
    margin-bottom: 15px;
    text-align: center;
}

.download-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.download-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-cyan);
    border-radius: 5px;
    transition: all 0.3s ease;
    color: white;
}

.download-link:hover {
    background-color: rgba(0, 240, 255, 0.1);
    transform: translateY(-3px);
}

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

.document-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    border-top: 1px solid var(--ethereum-orange);
    padding-top: 10px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.footer-stamp {
    display: flex;
    align-items: center;
}

.stamp-circle {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
}

.stamp-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: stamp-pulse 3s infinite;
}

@keyframes stamp-pulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.date {
    font-size: 0.8rem;
    color: var(--ethereum-orange);
}

/* Contact Section */
.contact {
    padding: 80px 0;
    position: relative;
    background-color: var(--darker-gray);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 40px 0;
}

.contact-form {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 30px;
}

.contact-form h3 {
    color: var(--neon-cyan);
    margin-bottom: 20px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--neon-cyan);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-cyan);
    border-radius: 5px;
    color: white;
    font-family: 'Space Mono', monospace;
}

.form-group textarea {
    resize: vertical;
}

.contact-info {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--hot-pink);
    border-radius: 10px;
    padding: 30px;
}

.contact-info h3 {
    color: var(--hot-pink);
    margin-bottom: 20px;
    text-align: center;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

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

.info-text {
    font-size: 1rem;
}

.socials {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    justify-content: center;
}

.social-link {
    padding: 8px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--hot-pink);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: rgba(255, 6, 158, 0.1);
    transform: translateY(-3px);
}

/* Footer Section */
.site-footer {
    background-color: var(--darker-gray);
    padding: 60px 0 20px;
    border-top: 1px solid var(--gold);
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 10px var(--gold);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.footer-links h3,
.footer-disclaimer h3,
.footer-social h3 {
    color: var(--gold);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.footer-links h3::after,
.footer-disclaimer h3::after,
.footer-social h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #ccc;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--neon-cyan);
    padding-left: 5px;
}

.footer-disclaimer p {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 10px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-cyan);
    transition: all 0.3s ease;
    position: relative;
}

.social-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
}

.social-icon.twitter::before {
    content: 'T';
    color: var(--neon-cyan);
}

.social-icon.discord::before {
    content: 'D';
    color: var(--hot-pink);
}

.social-icon.telegram::before {
    content: 'TG';
    font-size: 0.9rem;
    color: var(--gold);
}

.social-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px var(--neon-cyan);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 0.9rem;
    color: #888;
}

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Matrix digital rain effect for background */
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.05;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .timeline-content {
        max-width: 40%;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .site-header .container {
        flex-direction: row;
        align-items: center;
    }
    
    .hamburger-menu {
        display: flex;
    }
    
    .menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: rgba(42, 42, 42, 0.95);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        z-index: 100;
    }
    
    .menu.active {
        display: flex;
    }
    
    .menu li {
        margin: 10px 0;
    }
    
    .hero-content {
        padding: 20px;
        margin-top: 60px;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
    }
    
    .live-metrics {
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-line {
        left: 30px;
    }
    
    .timeline-item {
        flex-direction: row;
    }
    
    .timeline-marker {
        margin-left: 0;
    }
    
    .timeline-content {
        max-width: calc(100% - 80px);
    }
    
    .timeline-content::after {
        display: none;
    }
    
    .timeline-item:nth-child(odd) .timeline-content::after {
        display: none;
    }
    
    .community-content {
        flex-direction: column;
    }
    
    .community-counter {
        flex-direction: column;
        align-items: center;
    }
    
    .counter-item {
        width: 100%;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.5rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .cta-button {
        padding: 10px 20px;
        font-size: 1rem;
    }
    
    .tokenomics-grid {
        grid-template-columns: 1fr;
    }
    
    .ad-metrics-panel {
        grid-template-columns: 1fr;
    }
    
    .timeline-content {
        max-width: calc(100% - 60px);
        padding: 15px;
    }
    
    .timeline-marker {
        width: 20px;
        height: 20px;
    }
    
    .timeline-line {
        left: 20px;
    }
    
    .social-feeds {
        flex-direction: column;
    }
    
    .testimonial {
        padding: 15px;
    }
    
    .referral-box {
        flex-direction: column;
    }
    
    .download-links {
        flex-direction: column;
    }
}