:root {
    --bg-dark: #0D0B1F;
    --accent-purple: #7000FF;
    --accent-cyan: #00F0FF;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #fff;
    --text-muted: #aaa;
    --shadow-glow: rgba(112, 0, 255, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Background Glow */
.bg-glow {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 80% 20%, #250b4d 0%, transparent 40%),
                radial-gradient(circle at 10% 80%, #11082e 0%, transparent 50%);
    z-index: -1;
    transition: transform 0.3s ease-out;
}

/* Navigation */
nav.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 10%;
    position: relative;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
}
.logo span {
    font-size: 12px;
    color: var(--accent-cyan);
    display: block;
    font-weight: 300;
}

/* Nav links */
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}
.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: 0.3s;
}
.nav-links a:hover { color: var(--accent-purple); }

/* Buttons */
button {
    cursor: pointer;
    border-radius: 8px;
    transition: 0.3s;
    font-weight: 600;
}
.btn-outline {
    background: transparent;
    border: 1px solid var(--accent-purple);
    color: var(--text-main);
    padding: 10px 25px;
}
.btn-outline:hover { background: var(--accent-purple); }
.btn-primary {
    background: var(--accent-purple);
    border: none;
    color: #fff;
    padding: 15px 35px;
    box-shadow: 0 0 20px var(--shadow-glow);
}
.btn-primary:hover { transform: scale(1.05); }
.btn-secondary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: #fff;
    padding: 15px 35px;
    margin-left: 15px;
}
.btn-web {
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
    border: none;
    color: #fff;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(112,0,255,0.4);
}
.btn-web:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(112,0,255,0.6); }

/* Hero */
.hero { display: flex; align-items: center; justify-content: space-between; padding: 5% 10%; flex-wrap: wrap; }
.hero-content { flex: 1; max-width: 600px; }
.hero-content h1 { font-size: 60px; line-height: 1.1; margin-bottom: 20px; }
.gradient-text { background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-content p { font-size: 18px; color: var(--text-muted); margin-bottom: 30px; }
.hero-btns { margin-bottom: 50px; display: flex; gap: 15px; flex-wrap: wrap; }
.stats { display: flex; gap: 40px; }
.stat-item b { font-size: 24px; display: block; }
.stat-item span { color: #666; font-size: 14px; }

/* Glass Cards */
.glass-card { background: var(--glass-bg); backdrop-filter: blur(15px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 20px; transition: 0.4s; opacity: 0; transform: translateY(50px);}
.glass-card.active { border-color: var(--accent-purple); box-shadow: 0 0 30px var(--shadow-glow); }
.main-card { width: 300px; height: 400px; transform: rotate(5deg); margin-top: 50px; }
.main-card:hover { transform: rotate(0deg) scale(1.05); }
.card-img { width: 100%; height: 200px; background: linear-gradient(135deg, #1a0b2e, var(--accent-purple)); border-radius: 15px; margin-bottom: 15px; }
.card-info { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-muted); }

/* Features */
.features { padding: 80px 10%; }
.features h2 { font-size: 36px; margin-bottom: 40px; }
.features p { color: var(--text-muted); margin-bottom: 30px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }

/* Footer */
footer { background: #0B0920; color: #aaa; padding: 50px 10%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px;}
footer .footer-section { flex: 1 1 200px; }
footer h4 { color: #fff; margin-bottom: 15px; font-size: 18px; }
footer a { color: #aaa; text-decoration: none; display: block; margin-bottom: 8px; transition: color 0.3s;}
footer a:hover { color: var(--accent-purple); }
footer .footer-section p { margin-top: 15px; color: #666; font-size: 14px; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; cursor: pointer; }
.hamburger span { display: block; height: 3px; background: var(--text-main); border-radius: 2px; transition: all 0.3s ease; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px);}
.hamburger.active span:nth-child(2) { opacity: 0;}
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px,-6px);}
#overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index:5; transition: opacity 0.3s ease; }
#overlay.show { display: block; opacity:1; }

/* Adaptive */
@media(max-width:1024px) {
    .hero { flex-direction: column; padding:5% 5%; text-align:center;}
    .hero-visual { margin-top:40px; display:flex; justify-content:center;}
    .stats { flex-direction:column; gap:20px; margin-top:40px; align-items:center;}
    .nav { flex-wrap: wrap; padding:20px 5%;}
    .nav-links { gap:15px; margin-top:10px; flex-wrap: wrap; justify-content:center; display:none; position: fixed; top:0; left:-100%; width:70%; max-width:300px; height:100%; background: var(--bg-dark); flex-direction: column; padding:80px 20px; z-index:10; transition:left 0.3s;}
    .nav-links.show { left:0;}
    .nav-buttons { width:100%; justify-content:center; margin-top:10px; display:flex; gap:10px;}
    .hamburger { display:flex;}
}
@media(max-width:768px) {
    .hero-content h1 { font-size:42px; }
    .hero-content p { font-size:16px; }
    .btn-primary, .btn-secondary, .btn-web { padding:12px 25px; font-size:14px;}
    .main-card { width:250px; height:350px; transform:rotate(0deg); margin-top:30px;}
}
@media(max-width:480px) {
    .grid { grid-template-columns:1fr; gap:20px;}
    .hero-content h1 { font-size:32px;}
    .stats b { font-size:20px;}
    .hero-btns { flex-direction:column; gap:10px;}
    .btn-outline, .btn-web, .btn-primary, .btn-secondary { width:100%;}
    footer .footer-section { text-align:center;}
}