:root {
    --vx-bg-dark: #040814;
    --vx-bg-light: #0a1428;
    --vx-cyan: #00f3ff;
    --vx-blue: #0066ff;
    --vx-text-main: #c8d6e5;
    --vx-font-head: 'Rajdhani', sans-serif;
    --vx-font-body: 'Share Tech Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--vx-font-body); color: var(--vx-text-main); background: var(--vx-bg-dark); overflow-x: hidden; }

body::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
    pointer-events: none; z-index: 9999;
}

.vx-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; position: absolute; top:0; width:100%; z-index: 100; border-bottom: 1px solid rgba(0, 243, 255, 0.1); }
.vx-logo { font-family: var(--vx-font-head); font-size: 2rem; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: 3px; text-shadow: 0 0 10px var(--vx-blue); }
.vx-links { display: flex; gap: 2rem; }
.vx-links a { color: var(--vx-text-main); text-decoration: none; font-size: 0.9rem; text-transform: uppercase; transition: 0.2s; position: relative; }
.vx-links a:hover { color: var(--vx-cyan); text-shadow: 0 0 5px var(--vx-cyan); }
.vx-burger { display: none; color: var(--vx-cyan); font-size: 2rem; background: none; border: none; cursor: pointer; }

.vx-hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 6rem 5%; background: radial-gradient(circle at 50% 30%, #0a1a3a 0%, var(--vx-bg-dark) 70%); border-bottom: 1px solid rgba(0, 243, 255, 0.2); }
.vx-hero h1 { font-family: var(--vx-font-head); font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; line-height: 0.9; color: transparent; -webkit-text-stroke: 1px var(--vx-cyan); text-transform: uppercase; margin-bottom: 2rem; }
.vx-hero h1 span { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 20px rgba(0, 243, 255, 0.5); display: block; padding-left: 10%; }
.vx-hero p { max-width: 600px; font-size: 1rem; line-height: 1.8; margin-top: 2rem; border-left: 2px solid var(--vx-cyan); padding-left: 1rem; background: rgba(0, 102, 255, 0.05); padding-top: 0.5rem; padding-bottom: 0.5rem;}

.vx-timeline-section { padding: 8rem 5%; display: flex; justify-content: center; background: var(--vx-bg-dark); }
.vx-timeline { position: relative; max-width: 800px; width: 100%; }

.vx-timeline::before { content: ''; position: absolute; left: 50px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--vx-cyan), transparent); }

.vx-time-item { display: flex; align-items: flex-start; margin-bottom: 8rem; position: relative; }
.vx-time-icon { width: 100px; height: 100px; background: var(--vx-bg-light); border: 1px solid var(--vx-blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 2; margin-right: 4rem; box-shadow: 0 0 30px rgba(0, 102, 255, 0.2); transform: rotate(15deg); transition: 0.3s; }
.vx-time-item:hover .vx-time-icon { transform: rotate(0deg); border-color: var(--vx-cyan); box-shadow: 0 0 40px rgba(0, 243, 255, 0.4); }

.vx-gb { width: 60%; height: 70%; background: #222; border-radius: 5px; position: relative; }
.vx-gb::after { content:''; position:absolute; top: 10%; left: 10%; width: 80%; height: 40%; background: #444; }

.vx-time-content { flex: 1; padding-top: 1rem; }
.vx-step { color: var(--vx-cyan); font-size: 0.8rem; margin-bottom: 0.5rem; }
.vx-time-content h2 { font-family: var(--vx-font-head); font-size: 4rem; color: #fff; line-height: 1; margin-bottom: 1rem; text-transform: uppercase; }
.vx-time-content p { font-size: 0.9rem; line-height: 1.6; color: #8892b0; max-width: 400px; }
.vx-line-dec { width: 100%; height: 1px; background: linear-gradient(90deg, rgba(0,243,255,0.3), transparent); margin-top: 1rem; }

.vx-grid-section { background: url('data:image/svg+xml;utf8,%3Csvg width="40" height="40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0h40v40H0z" fill="none"/%3E%3Cpath d="M0 39.5h40" stroke="rgba(0,243,255,0.05)" stroke-width="1"/%3E%3Cpath d="M39.5 0v40" stroke="rgba(0,243,255,0.05)" stroke-width="1"/%3E%3C/svg%3E'), var(--vx-bg-light); padding: 6rem 5%; }
.vx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.vx-glass-card { background: rgba(4, 8, 20, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(0, 243, 255, 0.2); padding: 2rem; border-radius: 10px; transition: 0.3s; }
.vx-glass-card:hover { border-color: var(--vx-cyan); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 243, 255, 0.1); }
.vx-glass-img { height: 150px; background: linear-gradient(45deg, #001133, #002266); margin-bottom: 1.5rem; border-radius: 5px; position: relative; overflow: hidden; }
.vx-glass-img::after { content:''; position:absolute; top:0;left:-100%; width:50%; height:100%; background: linear-gradient(90deg, transparent, rgba(0,243,255,0.2), transparent); animation: sweep 3s infinite; }
@keyframes sweep { 0% { left: -100%; } 100% { left: 200%; } }
.vx-glass-card h3 { font-family: var(--vx-font-head); font-size: 1.5rem; color: #fff; margin-bottom: 0.5rem; text-transform: uppercase; }

.vx-credits { padding: 6rem 5%; text-align: center; background: var(--vx-bg-dark); border-top: 1px solid rgba(0, 102, 255, 0.2); }
.vx-credits h2 { font-family: var(--vx-font-head); font-size: 3rem; color: #fff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4rem; }
.vx-team-flex { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.vx-team-member { width: 200px; }
.vx-avatar { width: 100%; height: 250px; background: #0a1428; border: 1px solid var(--vx-blue); margin-bottom: 1rem; position:relative; overflow:hidden;}
.vx-avatar::before { content:''; position:absolute; top:10px; left:10px; right:10px; bottom:10px; border: 1px dashed rgba(0,243,255,0.3); }
.vx-team-member h4 { color: var(--vx-cyan); font-family: var(--vx-font-head); font-size: 1.2rem; }
.vx-team-member p { font-size: 0.8rem; color: #8892b0; }

.vx-roadmap { padding: 6rem 5%; background: var(--vx-bg-light); }
.vx-rm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; border-top: 2px solid var(--vx-cyan); padding-top: 2rem; }
.vx-rm-item h4 { font-family: var(--vx-font-head); font-size: 1.5rem; color: #fff; margin-bottom: 1rem; }
.vx-rm-item ul { list-style: none; color: #8892b0; font-size: 0.9rem; line-height: 1.8; }
.vx-rm-item ul li::before { content: '>'; color: var(--vx-cyan); margin-right: 0.5rem; }

.vx-join { padding: 8rem 5%; display: flex; justify-content: space-between; align-items: center; background: var(--vx-bg-dark); max-width: 1200px; margin: 0 auto; }
.vx-join h2 { font-family: var(--vx-font-head); font-size: 4rem; color: #fff; line-height: 1; text-transform: uppercase; }
.vx-socials { display: flex; gap: 1rem; }
.vx-soc-btn { width: 60px; height: 60px; border: 1px solid var(--vx-cyan); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--vx-cyan); transition: 0.3s; background: rgba(0,243,255,0.05); }
.vx-soc-btn:hover { background: var(--vx-cyan); color: #000; box-shadow: 0 0 20px rgba(0,243,255,0.5); }

.vx-footer { padding: 3rem 5%; border-top: 1px solid rgba(0, 243, 255, 0.2); display: flex; justify-content: space-between; align-items: center; background: #02040a; flex-wrap: wrap; gap: 2rem; }
.vx-footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.vx-footer-links a { color: #8892b0; text-decoration: none; font-size: 0.8rem; text-transform: uppercase; transition: 0.2s; }
.vx-footer-links a:hover { color: var(--vx-cyan); }
.vx-copy { color: #445; font-size: 0.8rem; }

.vx-page-wrapper { padding: 8rem 5% 5rem; max-width: 1000px; margin: 0 auto; min-height: 70vh; }
.vx-page-wrapper h1 { font-family: var(--vx-font-head); font-size: 3.5rem; color: #fff; margin-bottom: 2rem; text-transform: uppercase; border-bottom: 1px solid rgba(0,243,255,0.2); padding-bottom: 1rem; }
.vx-page-wrapper h2 { font-family: var(--vx-font-head); font-size: 2rem; color: var(--vx-cyan); margin: 3rem 0 1rem; text-transform: uppercase; }
.vx-page-wrapper p, .vx-page-wrapper li { font-size: 1rem; line-height: 1.8; color: #8892b0; margin-bottom: 1.5rem; }
.vx-form { display: flex; flex-direction: column; gap: 1.5rem; }
.vx-form input, .vx-form textarea { background: rgba(0, 102, 255, 0.05); border: 1px solid rgba(0, 243, 255, 0.2); padding: 1rem; color: #fff; font-family: var(--vx-font-body); outline: none; transition: 0.3s; }
.vx-form input:focus, .vx-form textarea:focus { border-color: var(--vx-cyan); box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); }
.vx-btn-submit { background: transparent; border: 1px solid var(--vx-cyan); color: var(--vx-cyan); padding: 1rem; font-family: var(--vx-font-head); font-size: 1.2rem; cursor: pointer; transition: 0.3s; text-transform: uppercase; }
.vx-btn-submit:hover { background: var(--vx-cyan); color: #000; box-shadow: 0 0 20px rgba(0, 243, 255, 0.4); }

@media(max-width: 768px) {
    .vx-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: var(--vx-bg-dark); padding: 2rem; border-bottom: 1px solid rgba(0,243,255,0.2); }
    .vx-links.open { display: flex; }
    .vx-burger { display: block; }
    .vx-hero h1 span { padding-left: 0; }
    .vx-timeline::before { left: 20px; }
    .vx-time-item { flex-direction: column; }
    .vx-time-icon { margin-bottom: 2rem; transform: rotate(0); width: 60px; height: 60px; margin-left: -10px; }
    .vx-join { flex-direction: column; gap: 2rem; text-align: center; }
}