:root{
  --bg:#08111f;
  --bg-soft:#0f1b2d;
  --card:rgba(14,27,46,.72);
  --border:rgba(255,255,255,.09);
  --text:#e8eefc;
  --muted:#aab7d1;
  --accent:#79a9ff;
  --accent-2:#73f0d0;
  --shadow:0 20px 50px rgba(0,0,0,.32);
  --radius:22px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:radial-gradient(circle at top,#0b1730 0%, #08111f 50%, #060c17 100%);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{width:min(var(--container), calc(100% - 32px));margin:0 auto;position:relative;z-index:2}
.section{padding:96px 0}
.site-header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(16px);
  background:rgba(6,12,23,.58);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;
}
.brand{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#08111f;font-weight:800;box-shadow:var(--shadow)
}
.nav{display:flex;gap:22px;align-items:center}
.nav a{
  color:var(--muted);font-size:.97rem;transition:.25s ease
}
.nav a:hover,.nav a.active{color:var(--text)}
.menu-toggle{
  display:none;background:none;border:none;color:var(--text);font-size:1.5rem
}
.hero{
  min-height:calc(100vh - 72px);
  display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center
}
.eyebrow{
  display:inline-block;padding:8px 14px;border-radius:999px;
  color:#d9e5ff;background:rgba(121,169,255,.12);
  border:1px solid rgba(121,169,255,.24);font-size:.85rem;font-weight:600;letter-spacing:.02em
}
h1{
  margin:18px 0 12px;font-size:clamp(2.8rem, 6vw, 5.2rem);
  line-height:1.02;letter-spacing:-.04em
}
h1 span{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
h2{
  margin:0 0 16px;font-size:clamp(2rem, 4vw, 3rem);letter-spacing:-.03em
}
h3{margin:0 0 10px;font-size:1.2rem}
h4{margin:8px 0 6px;font-size:1rem}
.hero-text,.note,.project-card p,.info-card p,.contact-card p{color:var(--muted)}
.typing-row{
  min-height:44px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-bottom:18px;font-size:1.1rem
}
.typing-prefix{color:var(--muted)}
.typing{
  color:var(--accent-2);font-weight:700;position:relative
}
.typing::after{
  content:"";display:inline-block;width:2px;height:1.1em;background:var(--accent-2);
  margin-left:6px;vertical-align:-2px;animation:blink .8s infinite
}
@keyframes blink{50%{opacity:0}}
.hero-actions,.hero-links,.contact-links,.project-links{
  display:flex;gap:14px;flex-wrap:wrap
}
.hero-actions{margin:28px 0 18px}
.btn{
  padding:13px 18px;border-radius:14px;border:1px solid transparent;
  font-weight:600;transition:.28s ease
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#9a7cff);color:#08111f;
  box-shadow:0 14px 34px rgba(121,169,255,.24)
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(121,169,255,.34)}
.btn-secondary{
  border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--text)
}
.btn-secondary:hover{background:rgba(255,255,255,.08)}
.hero-links a,.contact-links a,.project-links a{
  color:#d8e3ff;opacity:.9;transition:.25s ease
}
.hero-links a:hover,.contact-links a:hover,.project-links a:hover{opacity:1;color:var(--accent-2)}
.glass-card,.info-card,.project-card,.contact-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px)
}
.glass-card{padding:28px}
.mini-title{
  margin:0 0 6px;color:var(--accent-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em
}
.stats-list{list-style:none;padding:0;margin:18px 0 0}
.stats-list li{
  display:flex;justify-content:space-between;gap:18px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.stats-list li:last-child{border-bottom:none}
.stats-list span{color:var(--muted)}
.section-heading{margin-bottom:28px}
.about-grid,.skills-grid,.experience-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px
}
.skills-grid{grid-template-columns:repeat(3,1fr)}
.info-card,.contact-card{padding:26px}
.timeline-item+.timeline-item{
  margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)
}
.timeline-date{
  margin:0 0 8px;color:var(--accent-2);font-size:.9rem;font-weight:600
}
.chips{
  display:flex;flex-wrap:wrap;gap:10px
}
.chips span{
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#d8e3ff;font-size:.9rem
}
.projects-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px
}
.project-card{
  padding:24px;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease
}
.project-card:hover{
  transform:translateY(-8px);
  border-color:rgba(121,169,255,.38);
  box-shadow:0 24px 60px rgba(0,0,0,.38)
}
.project-top{
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:12px
}
.metric{
  padding:8px 12px;border-radius:999px;white-space:nowrap;
  background:rgba(115,240,208,.12);color:var(--accent-2);border:1px solid rgba(115,240,208,.18);
  font-size:.86rem;font-weight:700
}
.muted span{color:var(--muted)}
.site-footer{
  padding:24px 0 40px;color:var(--muted);text-align:center
}
.bg-orb{
  position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;opacity:.25
}
.orb-1{width:320px;height:320px;background:#6a8dff;top:80px;left:-60px}
.orb-2{width:340px;height:340px;background:#1cc9a7;bottom:60px;right:-80px}
.bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at center, black 38%, transparent 82%);
  opacity:.23
}
.reveal{
  opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease
}
.reveal.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.22s}
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:42px}
  .skills-grid,.projects-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{
    position:absolute;top:72px;left:16px;right:16px;
    flex-direction:column;align-items:flex-start;padding:18px;
    background:rgba(10,18,31,.96);border:1px solid rgba(255,255,255,.08);
    border-radius:18px;display:none
  }
  .nav.open{display:flex}
  .menu-toggle{display:block}
  .about-grid,.skills-grid,.projects-grid,.experience-grid{grid-template-columns:1fr}
  .section{padding:74px 0}
  .project-top{flex-direction:column;align-items:flex-start}
}