:root { --bg-dark: #0a0a0a; --bg-accent: #151515; --text-main: #d0d0d0; --text-dim: #808080; --accent-color: #00ff41; --grid-color: rgba(0, 255, 65, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--bg-dark); background-image: radial-gradient(circle at 20% 30%, rgba(0, 255, 65, 0.03) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(0, 143, 17, 0.02) 0, transparent 40%); color: var(--text-main); font-family: 'Courier New', monospace; line-height: 1.6; min-height: 100vh; overflow-x: hidden; position: relative; } .particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1} .particle{position:absolute;width:1px;height:1px;background:var(--accent-color);border-radius:50%;animation:float linear infinite} @keyframes float{ 0%{opacity:0;transform:translateY(100vh) scale(1)} 20%{opacity:0.6} 80%{opacity:0.6} 100%{opacity:0;transform:translateY(-10vh) scale(1.5)} } .grid-bg{ position:fixed;top:0;left:0;width:100%;height:100%; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 60px 60px; pointer-events:none; z-index:-1; mask-image: radial-gradient(circle at center, black, transparent 80%); } .scan-line{ position:fixed;top:0;left:0;width:100%;height:1px; background: linear-gradient(90deg, transparent, var(--accent-color), transparent); opacity: 0.1; animation: scan 8s linear infinite; pointer-events:none; z-index:100; } .lang-switch { position: fixed; top: 20px; right: 20px; display: flex; gap: 10px; z-index: 1000; } .lang-btn { background: transparent; border: 1px solid var(--secondary-color); color: var(--text-dim); padding: 8px 12px; font-family: inherit; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; border-radius: 2px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .lang-btn:hover { border-color: var(--accent-color); color: var(--text-main); box-shadow: 0 0 10px var(--accent-glow); } .lang-btn.active { border-color: var(--accent-color); color: var(--accent-color); box-shadow: 0 0 10px var(--accent-glow); } @keyframes scan{0%{top:-10%}100%{top:110%}} .hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:20px;position:relative;z-index:1;overflow:hidden} .hero-content{max-width:900px;width:100%;text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px} .logo-container { margin-top: -20px; margin-bottom: clamp(5px, 1vh, 10px); z-index: 2; } .hero-logo { width: 80px; height: auto; filter: drop-shadow(0 0 15px var(--accent-color)) drop-shadow(0 0 30px var(--accent-color)); transition: all 0.5s ease; animation: logo-glow 4s ease-in-out infinite; } @keyframes logo-glow { 0%, 100% { filter: drop-shadow(0 0 15px var(--accent-color)) drop-shadow(0 0 30px var(--accent-color)); transform: scale(1); } 50% { filter: drop-shadow(0 0 25px var(--accent-color)) drop-shadow(0 0 50px var(--accent-color)); transform: scale(1.05); } } .hero-logo:hover { transform: scale(1.1); filter: drop-shadow(0 0 20px var(--accent-color)) drop-shadow(0 0 40px var(--accent-color)); } .scroll-indicator{ position:absolute;bottom:30px;left:50%;transform:translateX(-50%); font-size:1.5rem;color:var(--accent-color); animation:bounce 2s infinite; cursor:pointer; z-index:2; transition: opacity 0.5s ease, visibility 0.5s ease; } .scroll-indicator.hidden { opacity: 0; visibility: hidden; } @keyframes bounce{ 0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)} 40%{transform:translateX(-50%) translateY(-10px)} 60%{transform:translateX(-50%) translateY(-5px)} } .glitch{ position:relative; font-size: clamp(2rem, 10vw, 4.5rem); font-weight:900; letter-spacing: clamp(2px, 2vw, 8px); margin-bottom: clamp(10px, 2vh, 20px); text-transform:uppercase; color: var(--text-main); text-shadow: 0 0 20px var(--accent-glow); z-index: 2; } .tagline{ position: relative; font-size: clamp(0.7rem, 2vw, 1rem); color: var(--text-dim); margin-bottom: clamp(40px, 8vh, 80px); letter-spacing: clamp(1px, 1vw, 4px); text-transform: uppercase; font-weight:300; padding: 0 10px; z-index: 2; } .mobile-break { display: none; } .hero-animation{ width:100%;height:clamp(120px, 25vh, 400px);margin:10px 0 60px 0;position:relative; display:flex;align-items:center;justify-content:center; z-index: 0; } .orbit-container{position:relative;width:clamp(140px, 50vh, 300px);height:clamp(140px, 50vh, 300px)} .orbit{ position:absolute;width:100%;height:100%; border:1px solid rgba(0, 255, 65, 0.1); border-radius:50%;top:0;left:0; } .orbit:nth-child(1){width:100%;height:100%;top:0;left:0} .orbit:nth-child(2){width:75%;height:75%;top:12.5%;left:12.5%} .orbit:nth-child(3){width:50%;height:50%;top:25%;left:25%} .rotating-container{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)} .rotating-container-1{width:100%;height:100%;animation:rotate-orbit 30s linear infinite} .rotating-container-2{width:75%;height:75%;animation:rotate-orbit 20s linear infinite reverse} .rotating-container-3{width:50%;height:50%;animation:rotate-orbit 15s linear infinite} @keyframes rotate-orbit{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(360deg)}} .orbital-element{ position:absolute;width:clamp(18px, 6vw, 32px);height:clamp(18px, 6vw, 32px); background: var(--bg-accent); border: 1px solid var(--accent-color); border-radius:50%;display:flex;align-items:center;justify-content:center; color: var(--accent-color); font-size: clamp(0.6rem, 2.5vw, 1rem); box-shadow: 0 0 10px var(--accent-glow); top:0;left:50%;transform:translate(-50%, -50%); } .orbital-element-1,.orbital-element-2,.orbital-element-3{top:0;left:50%;transform:translate(-50%, -50%)} .core{ position:absolute;width:clamp(35px, 12vw, 50px);height:clamp(35px, 12vw, 50px); background: var(--accent-color); border-radius:50%;top:50%;left:50%; transform:translate(-50%,-50%); box-shadow: 0 0 40px var(--accent-color); display:flex;align-items:center;justify-content:center; font-size: clamp(1rem, 4vw, 1.5rem);color: #fff;z-index:3; animation: core-pulse 4s ease-in-out infinite; } @keyframes core-pulse{ 0%,100%{transform:translate(-50%,-50%) scale(1); opacity: 0.8} 50%{transform:translate(-50%,-50%) scale(1.2); opacity: 1} } .cards-section{padding:clamp(40px, 10vh, 100px) 20px;max-width:1200px;margin:0 auto} .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%, 300px), 1fr));gap:30px} .card{ padding:40px;background: var(--bg-accent); border:1px solid rgba(0, 255, 65, 0.1); border-radius:4px;position:relative; transition: all 0.5s ease; text-align: left; } .card:hover{ border-color: var(--accent-color); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .card-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(10px, 3vw, 20px); } .card-icon{font-size:clamp(1.2rem, 4vw, 1.5rem);color: var(--accent-color)} .card-title{font-size:clamp(0.9rem, 3vw, 1.1rem);color: var(--text-main);letter-spacing:2px;text-transform:uppercase} .card-subtitle{font-size:clamp(0.75rem, 2.5vw, 0.8rem);color: var(--text-dim); line-height: 1.4} .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0, 255, 65, 0.2),transparent);margin:clamp(40px, 10vh, 100px) 0} .code-block{ background: #050505; border-left: 3px solid var(--accent-color); padding:30px;margin:60px auto; font-size:clamp(0.7rem, 2.5vw, 0.9rem);color: var(--accent-color); max-width:min(90%, 700px);font-family: 'Courier New', monospace; height: 300px; overflow-y: hidden; white-space: pre-wrap; word-break: break-all; display: flex; flex-direction: column; justify-content: flex-end; } .footer{ padding:clamp(40px, 10vh, 100px) 20px; font-size:clamp(0.7rem, 2vw, 0.8rem);color: var(--text-dim); letter-spacing:2px; } .footer-content { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; } .footer strong { color: var(--accent-color); } .show-mobile { display: none; } @media (max-width: 1200px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .lang-switch { top: 10px; right: 10px; gap: 5px; } .lang-btn { padding: 6px 10px; min-width: 40px; min-height: 40px; font-size: 0.7rem; } .mobile-break { display: block; margin-top: 5px; } .separator { display: none; } .hero-logo { width: clamp(40px, 15vw, 60px); } .hero-animation { height: clamp(150px, 35vh, 300px); } .cards-section { padding: 60px 20px; } .cards-grid { grid-template-columns: 1fr; gap: 20px; } .card { padding: clamp(20px, 5vw, 30px); } .divider { margin: clamp(30px, 8vh, 60px) 0; } .footer { padding: 40px 20px; } .footer-content { flex-direction: column; gap: 10px; text-align: center; } .hide-mobile { display: none; } .show-mobile { display: inline; } } @media (max-width: 350px) { .glitch { font-size: 1.5rem; letter-spacing: 1px; } .tagline { font-size: 0.6rem; letter-spacing: 0.5px; } .orbit-container { width: 140px; height: 140px; } .orbital-element { width: 16px; height: 16px; font-size: 0.6rem; top: -8px; } .core { width: 30px; height: 30px; font-size: 0.8rem; } .code-block { padding: 15px; margin: 30px 10px; } }