:root {
    --bg-color: #0b0b0d;
    --card-bg: #16161a;
    --accent: #00ff88;
    --text-main: #e0e0e0;
    --text-dim: #a0a0a0;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-color); color: var(--text-main); font-family: var(--font); line-height: 1.6; scroll-behavior: smooth; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

header { height: 80px; display: flex; align-items: center; position: sticky; top: 0; background: rgba(11, 11, 13, 0.9); backdrop-filter: blur(10px); z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo { font-weight: 900; font-size: 1.5rem; letter-spacing: 2px; }
.logo span { color: var(--accent); }
.nav-links { display: flex; list-style: none; gap: 30px; }
.nav-links a { color: var(--text-main); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; transition: 0.3s; }
.nav-links a:hover { color: var(--accent); }

.hero { height: 85vh; display: flex; align-items: center; background: url('https://images.unsplash.com/photo-1547915720-30773017a5bc?auto=format&fit=crop&w=1920&q=80') center/cover; position: relative; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #0b0b0d 20%, transparent 90%); }
.hero-content { position: relative; z-index: 1; max-width: 700px; }
.hero-content h1 { font-size: 4.5rem; line-height: 1; margin-bottom: 20px; font-weight: 900; }

.btn { display: inline-block; padding: 16px 40px; background: var(--accent); color: #000; text-decoration: none; font-weight: 800; border-radius: 4px; transition: 0.3s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 255, 136, 0.2); }

.section { padding: 120px 0; }
.bg-dark { background-color: #08080a; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.img-frame img { width: 100%; border-radius: 8px; filter: grayscale(30%); }

.hardware-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.hw-card { background: var(--card-bg); padding: 35px; border-left: 4px solid var(--accent); }
.hw-card h3 { font-size: 0.75rem; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; }
.hw-card p { font-size: 1.25rem; font-weight: 700; }
.hw-card.full { grid-column: 1 / -1; }

input, textarea { width: 100%; padding: 18px; background: var(--card-bg); border: 1px solid #2d2d35; color: #fff; margin-bottom: 15px; border-radius: 4px; font-family: inherit; }
button { width: 100%; padding: 18px; background: #fff; border: none; font-weight: 800; cursor: pointer; transition: 0.3s; }
button:hover { background: var(--accent); }

.form-status { margin-top: 20px; font-weight: bold; text-align: center; }
.status-success { color: var(--accent); }
.status-error { color: #ff4d4d; }

@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } .hero-content h1 { font-size: 3rem; } }