* { box-sizing: border-box; }
html, body { padding:0; margin:0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; }
body { line-height:1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
img { max-width:100%; display:block; }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

:root {
  --bg: #0f1115;
  --bg-alt: #181b21;
  --surface: #1f232b;
  --border: #2a3039;
  --text: #e6eaf0;
  --text-dim: #98a2b3;
  --accent: #6366f1;
  --accent-rgb: 99 102 241;
  --radius: 14px;
  --shadow: 0 2px 4px rgba(0,0,0,.2), 0 6px 18px -6px rgba(0,0,0,.4);
  --gradient: linear-gradient(90deg,#6366f1,#8b5cf6 55%,#d946ef);
}
html[data-theme='light'] {
  --bg:#ffffff; --bg-alt:#f5f7fa; --surface:#ffffff; --border:#e2e8f0; --text:#1e293b; --text-dim:#64748b; --accent:#4f46e5; --accent-rgb:79 70 229; --gradient: linear-gradient(90deg,#4f46e5,#6366f1 55%,#8b5cf6);
}

.container { width:100%; max-width:1180px; margin:0 auto; padding:0 1.25rem; }
.flex { display:flex; }
.between { justify-content:space-between; }
.center-v { align-items:center; }
.wrap { flex-wrap:wrap; }

.site-header { position:sticky; top:0; backdrop-filter:blur(10px); background:rgba(var(--accent-rgb)/0.08); border-bottom:1px solid var(--border); z-index:50; }
.logo { font-weight:700; font-size:1.2rem; letter-spacing:.5px; }
.logo span { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav { display:flex; gap:1.25rem; }
.nav a { font-weight:500; padding:.75rem .25rem; position:relative; }
.nav a::after { content:""; position:absolute; left:0; bottom:.4rem; height:2px; width:0; background:var(--accent); transition:.3s; border-radius:2px; }
.nav a:hover::after, .nav a:focus::after { width:100%; }

.actions { gap:.75rem; }
.icon-btn { background:var(--surface); border:1px solid var(--border); color:var(--text); padding:.55rem .7rem; border-radius:var(--radius); cursor:pointer; font-size:.95rem; box-shadow:var(--shadow); display:inline-flex; align-items:center; justify-content:center; transition:.25s; }
.icon-btn:hover { background:var(--accent); color:#fff; }

.hamburger { display:none; background:var(--surface); border:1px solid var(--border); color:var(--text); padding:.55rem .7rem; border-radius:var(--radius); cursor:pointer; }

@media (max-width: 860px) {
  .nav { position:fixed; inset:0 0 auto auto; top:64px; flex-direction:column; background:var(--surface); padding:1rem 1.25rem 2rem; gap:.25rem; width:220px; box-shadow:var(--shadow); transform:translateX(260px); transition:.35s cubic-bezier(.65,.05,.36,1); border-left:1px solid var(--border); }
  .nav.open { transform:translateX(0); }
  .hamburger { display:inline-flex; }
}

.hero { padding:6rem 0 4rem; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2.5rem; }
.hero h1 { font-size:clamp(2.2rem, 5vw, 3.2rem); line-height:1.1; margin:0 0 1.25rem; letter-spacing:-1px; }
.gradient-text { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size:1.05rem; max-width:600px; color:var(--text-dim); margin:0 0 1.75rem; }
.cta-group { display:flex; gap:1rem; flex-wrap:wrap; }

.btn { --btn-bg:var(--surface); --btn-color:var(--text); background:var(--btn-bg); color:var(--btn-color); border:1px solid var(--border); padding:.85rem 1.25rem; font-weight:600; border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow); font-size:.95rem; letter-spacing:.3px; transition:.3s; text-decoration:none; display:inline-flex; align-items:center; }
.btn.primary { --btn-bg:var(--accent); --btn-color:#fff; border:none; }
.btn.secondary:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover { filter:brightness(1.08); }

.glass { background:linear-gradient(140deg,rgba(var(--accent-rgb)/0.15),rgba(var(--accent-rgb)/0.03)); border:1px solid rgba(var(--accent-rgb)/0.25); backdrop-filter:blur(12px); border-radius:var(--radius); padding:1.4rem 1.25rem 1.6rem; }
.card h3 { margin-top:0; }
.check-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.check-list li { position:relative; padding-left:1.15rem; }
.check-list li::before { content:"✔"; position:absolute; left:0; top:0; color:var(--accent); font-size:.85rem; }

.section { padding:4.5rem 0 4rem; }
.section-title { font-size:2rem; margin:0 0 2.5rem; position:relative; display:inline-block; }
.section-title::after { content:""; position:absolute; left:0; bottom:-8px; height:3px; width:60%; background:var(--gradient); border-radius:3px; }
.alt-bg { background:var(--bg-alt); }

.skills-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.skill-card { background:var(--surface); padding:1.25rem 1.1rem 1.35rem; border:1px solid var(--border); border-radius:var(--radius); position:relative; overflow:hidden; }
.skill-card::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(var(--accent-rgb)/0.22),transparent 55%); opacity:.6; pointer-events:none; }
.skill-card h3 { margin-top:0; margin-bottom:.6rem; font-size:1.05rem; }
.skill-card p { margin:0; font-size:.9rem; color:var(--text-dim); }

.projects-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.project-card { background:var(--surface); border:1px solid var(--border); padding:1.1rem 1.05rem 1.2rem; border-radius:var(--radius); display:flex; flex-direction:column; gap:.6rem; transition:.3s; position:relative; overflow:hidden; }
.project-card::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(var(--accent-rgb)/0.18),transparent 60%); opacity:0; transition:.4s; }
.project-card:hover { transform:translateY(-4px); }
.project-card:hover::after { opacity:1; }
.project-card h3 { margin:.2rem 0 .25rem; font-size:1.05rem; }
.project-card p { margin:0 0 .25rem; font-size:.9rem; color:var(--text-dim); }
.text-link { font-weight:600; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; }

.contact-form { max-width:760px; }
.form-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.form-grid .full { grid-column:1/-1; }
input, textarea { width:100%; background:var(--surface); border:1px solid var(--border); padding:.8rem .85rem; border-radius:var(--radius); font:inherit; color:var(--text); resize:vertical; }
input:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
.form-status { margin-top:.9rem; font-size:.85rem; color:var(--text-dim); }

.site-footer { padding:2.5rem 0 2rem; border-top:1px solid var(--border); background:var(--surface); margin-top:2rem; }
.site-footer p { margin:0; font-size:.8rem; color:var(--text-dim); }
.socials { display:flex; gap:1rem; }
.socials a { font-size:.8rem; color:var(--text-dim); }
.socials a:hover { color:var(--accent); }

/* Animations */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation:fade .9s ease forwards; opacity:0; }
  @keyframes fade { to { opacity:1; transform:none; } }
}

/* Dark/light transitions */
* { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }