@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
    --bg: #0d0d1a;
    --surface: #161623;
    --card: #1e1e2e;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #00e5ff;
    --accent-dark: #00b8d4;
    --border: #2d3748;
    --radius: 18px;
    --shadow: 0 12px 32px rgba(0,0,0,0.3);
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
}

.container { max-width:1280px; margin:0 auto; padding:0 2rem; }

header {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(13,13,26,0.95); backdrop-filter:blur(16px); border-bottom:1px solid var(--border);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo {
    font-family:'JetBrains Mono',monospace; font-size:1.8rem; font-weight:600;
    color:var(--accent); letter-spacing:-0.5px; text-decoration:none;
}
.logo span { color:#fff; }

.nav-desktop { display:flex; gap:2rem; }
.nav-desktop a {
    font-weight:500; font-size:1rem; color:var(--text-muted); padding:0.6rem 1.2rem;
    border-radius:12px; transition:var(--transition); position:relative; text-decoration:none;
}
.nav-desktop a::after {
    content:''; position:absolute; bottom:0; left:50%; width:0; height:2px;
    background:var(--accent); transform:translateX(-50%); transition:var(--transition);
}
.nav-desktop a:hover, .nav-desktop a.active { color:var(--accent); background:rgba(0,229,255,0.1); }
.nav-desktop a:hover::after, .nav-desktop a.active::after { width:70%; }

.nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.6rem; cursor:pointer; }

.nav-mobile {
    position:fixed; top:80px; left:0; right:0; background:var(--surface); padding:1.5rem 0;
    border-bottom:1px solid var(--border); transform:translateY(-120%); transition:transform 0.4s ease; z-index:999;
}
.nav-mobile.open { transform:translateY(0); }
.nav-mobile a { display:block; padding:1rem 2rem; color:var(--text); font-weight:500; border-bottom:1px solid var(--border); text-decoration:none; }
.nav-mobile a:last-child { border:none; }
.nav-mobile a:hover, .nav-mobile a.active { background:rgba(0,229,255,0.1); color:var(--accent); }

.hero { padding:10rem 0 6rem; text-align:center; position:relative; }
.hero::before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:radial-gradient(circle at 50% 30%, rgba(0,229,255,0.15), transparent 70%); pointer-events:none;
}
.hero h1 {
    font-size:clamp(2.8rem,8vw,4.2rem); font-weight:700; margin-bottom:1rem;
    background:linear-gradient(135deg,var(--accent),#7c3aed); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:-1px;
}
.hero p { font-size:1.25rem; color:var(--text-muted); max-width:700px; margin:0 auto 2.5rem; }

.btn {
    display:inline-block; background:var(--accent); color:#000; padding:1rem 2.5rem;
    border-radius:50px; font-weight:600; font-size:1.1rem; transition:var(--transition);
    box-shadow:0 6px 20px rgba(0,229,255,0.3); min-width:180px; text-decoration:none;
}
.btn:hover { background:#fff; transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,229,255,0.4); }

.section { padding:6rem 0; }
.section-title { text-align:center; font-size:2.5rem; font-weight:600; color:var(--accent); margin-bottom:3.5rem; }
.section-title::after { content:''; display:block; width:80px; height:3px; background:var(--accent); margin:1rem auto 0; border-radius:2px; }

.grid { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

.card {
    background:var(--card); border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--border); transition:var(--transition); position:relative;
}
.card::before {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:linear-gradient(135deg,rgba(0,229,255,0.05),transparent); opacity:0; transition:var(--transition);
}
.card:hover { transform:translateY(-12px); border-color:var(--accent); box-shadow:var(--shadow); }
.card:hover::before { opacity:1; }
.card-icon { padding:2rem 2rem 0; font-size:2.5rem; color:var(--accent); }
.card-img { width:100%; height:220px; object-fit:cover; transition:transform 0.5s ease; }
.card:hover .card-img { transform:scale(1.05); }
.card-body { padding:2rem; }
.card-title { font-size:1.35rem; font-weight:600; color:#fff; margin-bottom:0.6rem; }
.card-desc { color:var(--text-muted); margin-bottom:1.2rem; font-size:1rem; }
.tech-tags { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:1rem; }
.tech-tag {
    background:rgba(0,229,255,0.15); color:var(--accent); font-size:0.8rem; padding:0.3rem 0.8rem;
    border-radius:20px; font-family:'JetBrains Mono',monospace; font-weight:500;
}

.contact-form {
    max-width:700px; margin:3rem auto; background:var(--card); padding:3rem;
    border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);
}
.contact-form input, .contact-form textarea {
    width:100%; padding:1.2rem; margin-bottom:1.5rem; background:var(--surface);
    border:1px solid var(--border); border-radius:12px; color:var(--text); font:inherit; font-size:1rem; transition:var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,229,255,0.2); }
.contact-form button {
    width:100%; background:var(--accent); color:#000; border:none; padding:1.3rem;
    border-radius:50px; font-weight:600; font-size:1.1rem; cursor:pointer; transition:var(--transition);
}
.contact-form button:hover { background:#fff; transform:translateY(-3px); }

footer { background:var(--surface); padding:5rem 0 2rem; border-top:1px solid var(--border); text-align:center; }
.footer-logo { font-family:'JetBrains Mono',monospace; font-size:1.9rem; color:var(--accent); margin-bottom:0.5rem; }
.footer-logo span { color:#fff; }
.social-links { display:flex; justify-content:center; gap:1.5rem; margin:2rem 0; }
.social-links a {
    width:48px; height:48px; background:var(--card); border-radius:50%; display:flex;
    align-items:center; justify-content:center; color:var(--text-muted); font-size:1.3rem; transition:var(--transition); text-decoration:none;
}
.social-links a:hover { background:var(--accent); color:#000; transform:translateY(-4px); }
.copyright { color:var(--text-muted); font-size:0.95rem; margin-top:2rem; }

@media (max-width:992px) { .nav-desktop { display:none; } .nav-toggle { display:block; } .hero { padding:8rem 0 5rem; } }
@media (max-width:600px) { .container { padding:0 1.5rem; } .hero h1 { font-size:2.5rem; } .section { padding:4rem 0; } .card-body { padding:1.5rem; } .contact-form { padding:2rem; } }