* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#0b1020; --card:#121a2d; --text:#eef2ff; --muted:#aab3c8; --accent:#7c5cff; --accent2:#22d3ee; }
html { scroll-behavior:smooth; }
body { font-family: Inter, system-ui, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
a { color:inherit; text-decoration:none; }
.nav { max-width:1100px; margin:auto; padding:24px; display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:1.5rem; font-weight:800; } .logo span { color:var(--accent2); }
nav { display:flex; gap:25px; color:var(--muted); } nav a:hover { color:white; }
main { max-width:1100px; margin:auto; padding:20px 24px 70px; }
.hero { min-height:75vh; display:grid; grid-template-columns:1.1fr .9fr; gap:55px; align-items:center; }
.eyebrow { color:var(--accent2); font-size:.78rem; font-weight:800; letter-spacing:2px; margin-bottom:12px; }
h1 { font-size:clamp(2.7rem,7vw,5rem); line-height:1.05; margin-bottom:22px; }
h1 span { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:transparent; background-clip:text; }
h2 { font-size:clamp(2rem,4vw,3rem); line-height:1.15; margin-bottom:18px; }
.lead,.text,.contact p { color:var(--muted); font-size:1.08rem; max-width:680px; }
.buttons { display:flex; gap:12px; margin-top:30px; }
.button { display:inline-block; padding:12px 20px; border-radius:10px; font-weight:700; transition:.2s; }
.button:hover { transform:translateY(-2px); }
.primary { background:var(--accent); } .secondary { border:1px solid #35415e; }
.code-card { background:var(--card); border:1px solid #26324d; border-radius:18px; padding:22px; box-shadow:0 20px 70px #0005; }
.dots { display:flex; gap:7px; margin-bottom:18px; } .dots i { width:10px;height:10px;border-radius:50%;background:#56627b; }
pre { overflow:auto; color:#cbd5e1; font-size:.92rem; } code span { color:#c084fc; } code b { color:#67e8f9; font-weight:500; }
.section { padding:85px 0 20px; }
.tech-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:25px; }
.tech-grid span,.tags span { border:1px solid #303d5a; background:#11182a; padding:9px 14px; border-radius:999px; color:#d7def0; }
.projects { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.project { background:var(--card); border:1px solid #26324d; border-radius:16px; padding:25px; min-height:240px; }
.project .number { color:var(--accent2); font-weight:800; } .project h3 { font-size:1.5rem; margin:15px 0 8px; }
.project p { color:var(--muted); } .tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; } .tags span { font-size:.75rem; padding:5px 9px; }
.contact { text-align:center; margin-top:100px; padding:60px 20px; background:linear-gradient(135deg,#151d35,#10182b); border:1px solid #26324d; border-radius:20px; }
.contact p { margin:0 auto 25px; }
footer { text-align:center; color:#7d89a4; padding:35px 20px; border-top:1px solid #202b43; font-size:.9rem; }
@media(max-width:800px){ .hero{grid-template-columns:1fr; min-height:auto; padding-top:60px;} nav{display:none;} .projects{grid-template-columns:1fr;} .section{padding-top:65px;} }