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

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-card: #151515;
    --text-primary: #ffffff;
    --text-secondary: #8a8a8a;
    --text-tertiary: #6a6a6a;
    --accent-gold: #f7ca18;
    --accent-yellow: #e8d468;
    --border-color: #2a2a2a;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(247, 202, 24, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(232, 212, 104, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(247, 202, 24, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.02;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    z-index: 2001;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

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

.logo-icon {
    width: 40px;
    height: 40px;
    background-color: var(--accent-gold);
    color: var(--bg-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 600;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    position: relative;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--text-primary);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 9999;
    position: relative;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 25px;
    height: 20px;
    justify-content: center;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--text-primary);
    transition: all 0.3s;
    transform-origin: center;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.nav-cta {
    background: linear-gradient(135deg, var(--accent-yellow) 0%, var(--accent-gold) 100%);
    color: var(--bg-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.nav-cta::after {
    content: '→';
    position: absolute;
    right: 1.5rem;
    transition: transform 0.3s;
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 212, 104, 0.3);
}

.nav-cta:hover::after {
    transform: translateX(3px);
}

/* Hero Section */
.hero {
    padding: 12rem 2rem 8rem;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    max-width: 100vw;
    background: radial-gradient(circle, rgba(247, 202, 24, 0.15) 0%, transparent 70%);
    filter: blur(100px);
    pointer-events: none;
    z-index: -1;
}

.hero-badge {
    display: inline-block;
    background-color: rgba(232, 212, 104, 0.1);
    color: var(--accent-yellow);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 2rem;
    border: 1px solid rgba(232, 212, 104, 0.2);
    box-shadow: 0 0 20px rgba(232, 212, 104, 0.2);
}

.hero-title {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    background: linear-gradient(180deg, #ffffff 0%, #8a8a8a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-yellow) 0%, var(--accent-gold) 100%);
    color: var(--bg-primary);
    border: none;
    padding: 1rem 2rem;
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(232, 212, 104, 0.3);
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 1rem 2rem;
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1rem;
}

.btn-secondary:hover {
    border-color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Features Section */
.features {
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-label {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 1rem 0 2rem;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin-bottom: 4rem;
    max-width: 800px;
}

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

.feature-item {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s;
}

.feature-item::before {
    content: attr(data-number);
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-tertiary);
    opacity: 0.3;
}

.feature-item:hover {
    border-color: var(--accent-yellow);
}

.feature-item h4 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.feature-item p {
    color: var(--text-secondary);
    font-size: 0.975rem;
    line-height: 1.6;
}

/* FAQ Section */
.faq {
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

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

.faq-item {
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all 0.3s;
}

.faq-item::before {
    content: attr(data-number);
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-tertiary);
    opacity: 0.3;
}

.faq-item:hover {
    border-color: var(--accent-yellow);
}

.faq-item h4 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.faq-item p {
    color: var(--text-secondary);
    font-size: 0.975rem;
    line-height: 1.6;
}

/* Connect Section */
.connect {
    padding: 6rem 2rem 8rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.connect-form {
    margin-top: 3rem;
}

.email-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.contact-form {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.email-input {
    flex: 1;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: 24px;
    font-size: 1rem;
    transition: all 0.3s;
}

.email-input::placeholder {
    color: var(--text-tertiary);
}

.email-input:focus {
    outline: none;
    border-color: var(--accent-yellow);
}

/* Footer */
.footer {
    background-color: var(--bg-secondary);
    padding: 4rem 2rem 2rem;
    border-top: 1px solid var(--border-color);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-links {
    display: flex;
    gap: 6rem;
}

.footer-column h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.footer-column a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: var(--text-primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

/* Mesh Gradient Background */
.mesh-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.05) 35px, rgba(255, 255, 255, 0.05) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.03) 35px, rgba(255, 255, 255, 0.03) 70px);
}

/* Animated Background */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float 20s infinite ease-in-out;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(247, 202, 24, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation-duration: 25s;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(232, 212, 104, 0.3) 0%, transparent 70%);
    top: 50%;
    right: -50px;
    animation-duration: 30s;
    animation-delay: 5s;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(247, 202, 24, 0.2) 0%, transparent 70%);
    bottom: -125px;
    left: 30%;
    animation-duration: 35s;
    animation-delay: 10s;
}

.orb-4 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(232, 212, 104, 0.25) 0%, transparent 70%);
    top: 30%;
    left: -50px;
    animation-duration: 40s;
    animation-delay: 15s;
}

.orb-5 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(247, 202, 24, 0.35) 0%, transparent 70%);
    bottom: 20%;
    right: 10%;
    animation-duration: 28s;
    animation-delay: 20s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -50px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 30px) scale(0.9);
    }
    75% {
        transform: translate(50px, 20px) scale(1.05);
    }
}

/* Animated Token */
.token-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    max-width: 90vw;
    max-height: 90vw;
    z-index: -1;
    opacity: 0.5;
}

.token {
    position: relative;
    width: 100%;
    height: 100%;
    animation: rotateToken 60s linear infinite;
}

.token-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(247, 202, 24, 0.1) 0%, rgba(232, 212, 104, 0.05) 100%);
    overflow: hidden;
}

.token-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(247, 202, 24, 0.1) 10deg, transparent 20deg),
        repeating-conic-gradient(from 45deg at 50% 50%, transparent 0deg, rgba(232, 212, 104, 0.1) 15deg, transparent 30deg);
    mask-image: radial-gradient(circle, black 40%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 70%);
}

.token-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(247, 202, 24, 0.2);
}

.ring-1 {
    width: 70%;
    height: 70%;
    border-image: linear-gradient(45deg, rgba(247, 202, 24, 0.3), transparent, rgba(232, 212, 104, 0.3)) 1;
    animation: rotateRing 40s linear infinite reverse;
}

.ring-2 {
    width: 85%;
    height: 85%;
    border-image: linear-gradient(90deg, rgba(232, 212, 104, 0.2), transparent, rgba(247, 202, 24, 0.2)) 1;
    animation: rotateRing 50s linear infinite;
}

.ring-3 {
    width: 95%;
    height: 95%;
    border-image: linear-gradient(135deg, rgba(247, 202, 24, 0.1), transparent, rgba(232, 212, 104, 0.1)) 1;
    animation: rotateRing 70s linear infinite reverse;
}

.ring-4 {
    width: 60%;
    height: 60%;
    border: 1px dashed rgba(247, 202, 24, 0.2);
    animation: rotateRing 30s linear infinite;
}

.token-dots {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 50% 15%, rgba(247, 202, 24, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 15% 50%, rgba(232, 212, 104, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 85% 50%, rgba(247, 202, 24, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 50% 85%, rgba(232, 212, 104, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 25% 25%, rgba(247, 202, 24, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 75% 25%, rgba(232, 212, 104, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 25% 75%, rgba(247, 202, 24, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(232, 212, 104, 0.2) 2px, transparent 2px);
    animation: rotateDots 80s linear infinite reverse;
}

.token-lines {
    position: absolute;
    top: 20%;
    left: 20%;
    right: 20%;
    bottom: 20%;
    border-radius: 50%;
    background: 
        linear-gradient(to right, transparent 45%, rgba(247, 202, 24, 0.1) 45%, rgba(247, 202, 24, 0.1) 55%, transparent 55%),
        linear-gradient(to bottom, transparent 45%, rgba(232, 212, 104, 0.1) 45%, rgba(232, 212, 104, 0.1) 55%, transparent 55%),
        linear-gradient(45deg, transparent 45%, rgba(247, 202, 24, 0.05) 45%, rgba(247, 202, 24, 0.05) 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(232, 212, 104, 0.05) 45%, rgba(232, 212, 104, 0.05) 55%, transparent 55%);
    mask-image: radial-gradient(circle, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 50%, transparent 100%);
}

@keyframes rotateDots {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.token-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(247, 202, 24, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    font-weight: 700;
    color: var(--accent-yellow);
    text-shadow: 0 0 30px rgba(247, 202, 24, 0.5);
}

.token-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(247, 202, 24, 0.2) 0%, transparent 50%);
    filter: blur(60px);
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes rotateToken {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateRing {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Token Pattern Lines */
.token-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(0deg, transparent 48%, rgba(247, 202, 24, 0.1) 49%, rgba(247, 202, 24, 0.1) 51%, transparent 52%),
        linear-gradient(90deg, transparent 48%, rgba(232, 212, 104, 0.1) 49%, rgba(232, 212, 104, 0.1) 51%, transparent 52%),
        linear-gradient(45deg, transparent 48%, rgba(247, 202, 24, 0.05) 49%, rgba(247, 202, 24, 0.05) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(232, 212, 104, 0.05) 49%, rgba(232, 212, 104, 0.05) 51%, transparent 52%);
    animation: rotatePattern 120s linear infinite;
}

@keyframes rotatePattern {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* Additional Token Decorations */
.token-inner::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    border: 1px solid rgba(247, 202, 24, 0.1);
    border-radius: 50%;
    background: 
        repeating-radial-gradient(circle at center, transparent 0, transparent 10px, rgba(232, 212, 104, 0.05) 10px, rgba(232, 212, 104, 0.05) 11px, transparent 11px, transparent 20px),
        conic-gradient(from 0deg at center, rgba(247, 202, 24, 0.05) 0deg, transparent 30deg, rgba(232, 212, 104, 0.05) 60deg, transparent 90deg, rgba(247, 202, 24, 0.05) 120deg, transparent 150deg, rgba(232, 212, 104, 0.05) 180deg, transparent 210deg, rgba(247, 202, 24, 0.05) 240deg, transparent 270deg, rgba(232, 212, 104, 0.05) 300deg, transparent 330deg, rgba(247, 202, 24, 0.05) 360deg);
}

/* Privacy Policy Page */
.policy-section {
    padding: 10rem 2rem 6rem;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

.policy-container {
    max-width: 800px;
    margin: 0 auto;
}

.policy-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #8a8a8a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.policy-date {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 3rem;
}

.policy-content {
    background-color: rgba(21, 21, 21, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
}

.policy-content h2 {
    color: var(--accent-yellow);
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
}

.policy-content h2:first-child {
    margin-top: 0;
}

.policy-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.policy-content ul {
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 1rem 0 1rem 2rem;
}

.policy-content li {
    margin-bottom: 0.5rem;
}

.contact-info {
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(232, 212, 104, 0.1);
    border-radius: 8px;
}

.contact-info a {
    color: var(--accent-yellow);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-info a:hover {
    color: var(--accent-gold);
    text-decoration: underline;
}

/* Contact Page */
.contact-page {
    padding: 10rem 2rem 6rem;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 4rem;
}

.contact-form-container {
    background-color: rgba(21, 21, 21, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s;
    font-family: 'Inter', sans-serif;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 2px rgba(232, 212, 104, 0.1);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    width: 100%;
    margin-top: 1rem;
}

.contact-info-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-info-card {
    background-color: rgba(21, 21, 21, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s;
}

.contact-info-card:hover {
    border-color: var(--accent-yellow);
    transform: translateY(-2px);
}

.contact-info-card h3 {
    color: var(--accent-yellow);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.contact-info-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.email-link {
    display: inline-block;
    color: var(--accent-yellow);
    text-decoration: none;
    font-weight: 500;
    margin-top: 0.5rem;
    transition: all 0.3s;
}

.email-link:hover {
    color: var(--accent-gold);
    transform: translateX(2px);
}

/* Navigation active state */
.nav-links a.active {
    color: var(--accent-yellow);
}

.nav-cta.active {
    opacity: 0.8;
    cursor: default;
}

/* Logo cursor pointer */
.nav-logo,
.footer-logo {
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Mobile Navigation */
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav-links {
        display: flex !important;
        visibility: visible !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        background-color: #1a1a1a !important; /* Lighter background to be visible */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        z-index: 10000 !important; /* Very high z-index */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: -10px 0 20px rgba(0, 0, 0, 0.8);
        border-left: 3px solid var(--accent-yellow); /* Visible border */
    }
    
    .nav-links.active {
        transform: translateX(0);
    }
    
    .nav-links a {
        font-size: 1.5rem;
        padding: 1rem 2rem;
        color: var(--text-primary);
        text-decoration: none;
        transition: all 0.3s;
    }
    
    .nav-links a:hover {
        color: var(--accent-yellow);
        transform: translateX(-5px);
    }
    
    .nav-cta {
        display: none;
    }
    
    /* Mobile Typography */
    .hero {
        padding: 8rem 1rem 4rem;
    }
    
    .hero-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .section-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }
    
    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 3rem;
    }
    
    /* Mobile Buttons */
    .hero-buttons {
        width: 100%;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        min-width: 200px;
        padding: 1.2rem 2rem;
        font-size: 1.1rem;
    }
    
    /* Mobile Forms */
    .email-form {
        flex-direction: column;
    }
    
    .email-input {
        width: 100%;
        padding: 1.2rem 1.5rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 1.2rem;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Feature Grid Mobile */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .feature-item {
        padding: 1.5rem;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .faq-item {
        padding: 1.5rem;
    }
    
    /* Contact Page Mobile */
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-form-container,
    .contact-info-card {
        padding: 1.5rem;
    }
    
    /* Privacy Policy Mobile */
    .policy-content {
        padding: 1.5rem;
    }
    
    .policy-content h2 {
        font-size: 1.25rem;
    }
    
    /* Animated Elements Mobile */
    .token-container {
        width: 350px;
        height: 350px;
    }
    
    .token-center {
        width: 70px;
        height: 70px;
        font-size: 35px;
    }
    
    /* Footer Mobile */
    .footer {
        padding: 3rem 1rem 2rem;
    }
    
    .footer-container {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    
    .footer-links {
        gap: 3rem;
    }
    
    /* Sections Mobile */
    .features,
    .faq,
    .connect {
        padding: 4rem 1rem;
    }
    
    .policy-section {
        padding: 8rem 1rem 4rem;
    }
    
    .contact-page {
        padding: 8rem 1rem 4rem;
    }
    
    /* Orb Animations Mobile */
    .orb {
        filter: blur(60px);
    }
    
    .orb-1 {
        width: 300px;
        height: 300px;
        left: -50px !important;
    }
    
    .orb-2 {
        width: 250px;
        height: 250px;
        right: -50px !important;
    }
    
    .orb-3 {
        width: 200px;
        height: 200px;
        left: 10% !important;
    }
    
    .orb-4 {
        display: none;
    }
    
    .orb-5 {
        display: none;
    }
    
    /* Force contain all elements */
    * {
        max-width: 100vw !important;
    }
    
    body {
        width: 100vw;
        overflow-x: hidden !important;
    }
    
    .navbar,
    .hero,
    .features,
    .faq,
    .connect,
    .footer {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .hero-title {
        font-size: clamp(2rem, 12vw, 3.5rem);
    }
    
    .token-container {
        width: 300px;
        height: 300px;
    }
    
    .token-center {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
    
    .features-grid,
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .feature-item,
    .faq-item {
        padding: 1.25rem;
    }
    
    .feature-item::before,
    .faq-item::before {
        font-size: 1.5rem;
        top: 1.25rem;
        right: 1.25rem;
    }
}

/* Tablet Portrait */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-container {
        padding: 0 1.5rem;
    }
    
    .hero {
        padding: 10rem 1.5rem 6rem;
    }
    
    .features-grid,
    .faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-content {
        gap: 2rem;
    }
    
    .token-container {
        width: 500px;
        height: 500px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) {
    .btn-primary:active,
    .btn-secondary:active {
        transform: scale(0.98);
    }
    
    .feature-item:active,
    .faq-item:active,
    .contact-info-card:active {
        transform: scale(0.98);
    }
}

/* Improve text readability on all devices */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Ensure smooth scrolling on mobile */
html, body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal scroll on mobile */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

/* Global overflow fix */
main, section, div, nav, header, footer {
    max-width: 100%;
    overflow-x: hidden;
}

/* Improve tap targets for mobile */
@media (max-width: 768px) {
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    input[type="text"],
    input[type="email"],
    textarea,
    select {
        min-height: 44px;
    }
}

/* Ensure mobile menu overlay styling */
@media (max-width: 768px) {
    body.menu-open {
        overflow: hidden;
    }
    
    /* Ensure menu is visible when active */
    .nav-links.active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }
    
    /* Dark overlay when menu is open */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(10, 10, 10, 0.8);
        z-index: 1999;
    }
    
    .mobile-menu-toggle {
        z-index: 10001 !important; /* Higher than menu */
        position: relative;
    }
}

/* Optimize images for mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Improve form usability on mobile */
input, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* Fix iOS form zoom issue */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}