:root {
  --bg: #0b1220;
  --fg: #eef2f7;
  --muted: #9aa4b2;
  --brand: #3b82f6;
  --brand2: #22c55e;
  --card: #121a2c;
  --line: #1f2a44;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--fg); overflow-x: hidden; }
a { color: var(--fg); text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .85; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.nav { position: sticky; top: 0; background: rgba(11,18,32,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); z-index: 40; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { height: 40px; }
.menu { display: flex; gap: 18px; font-weight: 600; }
.cta { padding: 10px 16px; border-radius: 12px; background: linear-gradient(90deg,var(--brand),var(--brand2)); color: white; border:0; cursor:pointer; transition: transform .2s; }
.cta:hover { transform: scale(1.05); }
.btn { display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--line); transition:background .2s; }
.btn:hover { background:var(--line); }
.hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow:hidden; }
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: 44px; line-height: 1.1; margin:20px 0; }
.typing { font-size: 24px; color: var(--muted); min-height:30px; }
canvas#particles { position: absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.section { padding: 80px 0; border-top: 1px solid var(--line); }
.h2 { font-size: 32px; margin-bottom: 24px; text-align:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.card { background: var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; transition: transform .3s, box-shadow .3s; }
.card:hover { transform: translateY(-8px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.footer { padding:32px 0; text-align:center; color: var(--muted); border-top:1px solid var(--line); font-size:14px; }
.social { margin-top:12px; }
.social a { margin:0 8px; font-size:18px; }
form { max-width:600px; margin:0 auto; }
form .field { margin-bottom:16px; position:relative; }
form input, form textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--fg); }
form label { position:absolute; left:12px; top:12px; color:var(--muted); transition:.2s; pointer-events:none; }
form input:focus+label, form input:not(:placeholder-shown)+label,
form textarea:focus+label, form textarea:not(:placeholder-shown)+label { top:-10px; left:8px; font-size:12px; color:var(--brand); background:var(--bg); padding:0 4px; }
form button { margin-top:12px; }
@media(max-width:768px){ .hero h1{font-size:32px} }