:root { --bg:#0a0c12; --text:#e6e7eb; --muted:#a9acb7; --primary:#7c5cff; --surface:#121422; --card:#171a2a; --border:#262b3f; --accent:#00e0ff }
[data-theme="light"] { --bg:#ffffff; --text:#10121a; --muted:#60667a; --primary:#5b3df7; --surface:#f4f6fb; --card:#ffffff; --border:#e5e8f0; --accent:#0078ff }
* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--text) }
.logo img { height: 28px; width: auto; display: block }
.nav { display: flex; gap: 1rem; align-items: center }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600 }
.nav a:hover, .nav .cta { color: var(--text) }
.theme { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem }
.menu { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; display: none }
.hero.full{position:relative;min-height:72vh;display:grid;place-items:center;padding:4rem 1.5rem;text-align:center;overflow:hidden}
.fx-layer{position:absolute;inset:0;background:radial-gradient(1200px 600px at 10% 10%,rgba(124,92,255,.15),transparent),radial-gradient(800px 400px at 90% 80%,rgba(0,224,255,.12),transparent)}
.hero-inner{position:relative;z-index:1;max-width:960px}
.title{font-family:Cinzel, serif;font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:.02em;margin:0}
.title .hp{color:var(--primary)}
.subtitle{color:var(--muted);font-size:1.1rem}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:center;max-width:1100px;margin:0 auto}
.hero-text{justify-self:start}
.hero-photo img{width:100%;height:auto;border-radius:16px;border:1px solid var(--border);background:var(--card)}
.actions { display: flex; gap: .75rem; justify-content: center; margin: 1.25rem 0 }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; font-weight: 600 }
.btn.primary { background: var(--primary); border-color: transparent }
.btn.small { padding: .5rem .75rem; font-size: .9rem }
.social { display: flex; gap: .75rem; justify-content: center; margin-top: .5rem }
.social a { color: var(--muted); display: inline-flex; padding: .5rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card) }
.social a:hover { color: var(--text) }
.section { padding: 3rem 1.5rem }
.section-title{max-width:960px;margin:0 auto 1rem;text-align:center;font-size:clamp(1.8rem,3.5vw,2.4rem)}
.section-head { max-width: 960px; margin: 0 auto 1.5rem; text-align: center }
.section-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem) }
.section-head p { color: var(--muted) }
.profile .profile-wrap { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; align-items: center }
.avatar { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); background: var(--card) }
.profile-text .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.chip{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:.4rem .7rem;font-weight:600}
.cards { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem }
.tilt{transform-style:preserve-3d;will-change:transform}
.filters { max-width: 1040px; margin: 0 auto 1rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap }
.chip { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: .5rem .75rem; font-weight: 600 }
.chip .count { color: var(--muted); margin-left: .25rem }
.chip.active { background: var(--primary); border-color: transparent }
.grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem }
.project { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: 140px auto }
.thumb { background: linear-gradient(135deg, #7c5cff, #2b2e3f) }
.thumb.alt { background: linear-gradient(135deg, #00c2ff, #2b2e3f) }
.project-body { padding: 1rem }
.timeline { max-width: 960px; margin: 0 auto; display: grid; gap: 1rem }
.item { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem }
.item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 700 }
.cta-section { padding: 3rem 1.5rem; text-align: center; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border) }
.cta-section h2 { margin: 0 0 .5rem }
.footer { text-align: center; padding: 2rem 1.5rem; color: var(--muted) }
.reveal { opacity: 0; transform: translateY(10px); transition: .6s ease }
.reveal.visible { opacity: 1; transform: translateY(0) }
@keyframes floatSymbol{0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}10%{opacity:.8}100%{transform:translate3d(0,-120vh,0) rotate(360deg);opacity:0}}
.spell{position:absolute;pointer-events:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle, var(--accent), transparent 60%);filter:blur(.5px);mix-blend-mode:screen}
@media (max-width: 900px) {
  .cards, .grid { grid-template-columns: 1fr 1fr }
  .social-section .social-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px) {
  .nav { display: none }
  .nav.open { display: flex; flex-wrap: wrap; gap: .75rem }
  .menu { display: inline-block }
  .cards, .grid { grid-template-columns: 1fr }
  .hero-grid{grid-template-columns:1fr}
  .social-section .social-grid{grid-template-columns:1fr}
  .item-head { flex-direction: column; align-items: flex-start }
  .profile .profile-wrap { grid-template-columns: 1fr; text-align: center }
}
.social-section .social-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.social-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem;color:var(--text);text-decoration:none}
.social-card svg{color:var(--accent)}
.social-card span{font-weight:600;text-align:center}
.contact .form{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1 / -1}
.form input,.form textarea{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:10px;padding:.75rem}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,224,255,.15)}
.form-status{margin-top:.5rem;color:var(--muted)}