:root {
    --bg-color: #0f0f15;
    --text-color: #e0e0e0;
    --accent-color: #00f0ff;
    --card-bg: rgba(30,30,50,0.7);
    --btn-gradient: linear-gradient(90deg, #00f0ff, #ff00ff);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Arial', sans-serif; background: var(--bg-color); color: var(--text-color); line-height: 1.6; }

header { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background: rgba(20,20,35,0.9); position: sticky; top:0; z-index:1000; backdrop-filter: blur(10px); }
.logo { font-weight:bold; font-size:1.8rem; color: var(--accent-color); }
.nav-links { list-style:none; display:flex; gap:1.5rem; }
.nav-links li a { color: var(--text-color); text-decoration:none; transition:0.3s; }
.nav-links li a:hover { color: var(--accent-color); }
.nav-icons { display:flex; align-items:center; gap:0.5rem; }
.theme-toggle { cursor:pointer; font-size:1.5rem; }
.hamburger { cursor:pointer; font-size:1.5rem; display:none; }

.hero { position: relative; text-align:center; padding:4rem 2rem; overflow:hidden; }
.hero-bg { position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(135deg,#0f0f15,#1c1c2e); animation: bgMove 20s linear infinite; z-index:-1; }
@keyframes bgMove { 0%{background-position:0 0;} 100%{background-position:400px 400px;} }
.hero h1 { font-size:3rem; margin-bottom:1rem; color:#fff; }
.hero p { font-size:1.2rem; margin-bottom:2rem; color:#ccc; }
.cta-btn { padding:0.8rem 2rem; background: var(--btn-gradient); color:#fff; font-weight:bold; border-radius:50px; text-decoration:none; transition:0.3s; }
.cta-btn:hover { transform:scale(1.05); }
.hero input { padding:0.6rem 1rem; width:300px; border-radius:30px; border:none; outline:none; margin-top:1rem; background: rgba(255,255,255,0.05); color:#fff; }

.section { padding:3rem 2rem; text-align:center; }
.section-title { font-size:2rem; margin-bottom:2rem; color: var(--accent-color); }
.cards-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
.card { background: var(--card-bg); border-radius:20px; padding:1.5rem; transition: transform 0.3s, box-shadow 0.3s; backdrop-filter: blur(10px); overflow:hidden; }
.card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,240,255,0.4); }
.card img { width:100%; border-radius:15px; margin-bottom:1rem; }
.card h3 { margin-bottom:0.5rem; }
.card p { font-size:0.95rem; color:#ccc; margin-bottom:1rem; }
.btn { display:inline-block; padding:0.5rem 1.2rem; border-radius:50px; background: var(--btn-gradient); color:#fff; text-decoration:none; font-weight:bold; transition:0.3s; }
.btn:hover { transform: scale(1.05); }

.software-list { list-style:none; padding:0; max-width:700px; margin:auto; text-align:left; }
.software-list li { margin-bottom:0.8rem; }

#scrollTopBtn { position: fixed; bottom:2rem; right:2rem; padding:0.6rem 1rem; border:none; border-radius:50%; background: var(--accent-color); color:#000; cursor:pointer; display:none; font-size:1.2rem; z-index:1000; transition:0.3s; }
#scrollTopBtn:hover { transform: scale(1.2); }

footer { text-align:center; padding:2rem; background: rgba(20,20,35,0.9); backdrop-filter: blur(10px); }
footer a { color: var(--accent-color); text-decoration:none; }

@media(max-width:900px){ .hamburger{display:block;} .nav-links{display:none;} .nav-links.open{display:flex; flex-direction:column; gap:1rem; position:absolute; top:70px; right:0; background: rgba(20,20,35,0.95); padding:1rem 2rem; border-radius:10px; } }

/* Sidebar */
.sidebar{position:fixed;top:0;left:-100%;width:70%;height:100%;background: rgba(20,20,35,0.95);backdrop-filter:blur(10px);transition:0.3s;z-index:2000;padding:2rem;}
.sidebar.open{left:0;}
.sidebar .close-btn{text-align:right;font-size:1.5rem;cursor:pointer;color: var(--accent-color);}
.sidebar ul{list-style:none;margin-top:2rem;}
.sidebar ul li{margin-bottom:1.5raem;}
.sidebar ul li a{text-decoration:none;color:#ccc;font-size:1.2rem;transition:0.3s;}
.sidebar ul li a:hover{color: var(--accent-color);}