*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#070b11;
  --bg-alt:#0d1520;
  --text:#e8edf5;
  --text-dim:#8899b0;
  --accent:#00c8ff;
  --accent-dim:rgba(0,200,255,0.15);
  --focus:#ffb347;
  --header-h:56px;
  --max-w:880px;
  --space:clamp(2.5rem,6vw,5rem);
}

html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;
}

.skip-link{
  position:absolute;top:-100%;left:1rem;z-index:1000;
  background:var(--focus);color:#000;padding:0.5rem 1rem;
  font-weight:600;border-radius:0 0 4px 4px;
}
.skip-link:focus{top:0}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  background:rgba(7,11,17,0.85);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-header nav{
  max-width:var(--max-w);margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1rem,3vw,2rem);
}
.nav-logo{
  font-size:1.125rem;font-weight:700;letter-spacing:0.08em;
  color:var(--accent);text-decoration:none;
}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{
  font-size:0.875rem;color:var(--text-dim);text-decoration:none;
  transition:color 0.2s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text)}

.hero-section{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#bg-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;
}
.hero-content{
  position:relative;z-index:2;text-align:center;
  padding:var(--header-h) 1.5rem 0;
}
.hero-content::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(90vw,800px);height:min(60vh,500px);
  background:radial-gradient(ellipse at center,rgba(0,200,255,0.06),transparent 70%);
  pointer-events:none;z-index:-1;
}
.hero-title{
  font-size:clamp(3.5rem,18vw,14rem);
  font-weight:900;line-height:0.9;
  letter-spacing:-0.04em;
  color:#fff;
  text-shadow:0 0 80px rgba(0,200,255,0.35),0 0 40px rgba(0,200,255,0.25),0 0 120px rgba(0,150,255,0.2);
}
.hero-subtitle{
  font-size:clamp(1rem,3vw,1.75rem);
  font-weight:400;letter-spacing:0.18em;text-transform:uppercase;
  color:#e0f4ff;margin-top:0.5rem;
  text-shadow:0 0 30px rgba(0,200,255,0.4),0 0 60px rgba(0,180,255,0.2);
}
.hero-tagline{
  font-size:clamp(0.8rem,1.3vw,0.95rem);
  color:#c8dff0;margin-top:1.25rem;
  letter-spacing:0.06em;
  text-shadow:0 0 20px rgba(0,180,255,0.35);
  font-weight:300;
}

.content-section{
  padding:var(--space) 1.5rem;
  border-top:1px solid rgba(255,255,255,0.04);
}
.content-section:nth-child(odd){background:var(--bg-alt)}
.section-inner{max-width:var(--max-w);margin:0 auto}
.section-title{
  font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:700;letter-spacing:-0.02em;
  margin-bottom:1.25rem;
  color:var(--text);
}
.section-text{
  font-size:1.0625rem;color:var(--text-dim);
  max-width:680px;margin-bottom:1rem;
}
.section-text:last-child{margin-bottom:0}

.skills-grid{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:0.75rem;
}
.skill-item{
  display:flex;align-items:center;gap:0.625rem;
  padding:1rem 1.125rem;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:6px;
  color:var(--text);
  font-size:0.9375rem;
}
.skill-icon{color:var(--accent);font-size:0.625rem;flex-shrink:0}

.contact-email{
  margin-top:1rem;font-size:1.0625rem;
}
.contact-email a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
  transition:border-color 0.2s;
}
.contact-email a:hover,.contact-email a:focus-visible{
  border-color:var(--accent);
}

.site-footer{
  text-align:center;padding:2rem 1.5rem;
  border-top:1px solid rgba(255,255,255,0.04);
  color:var(--text-dim);font-size:0.8125rem;
}

.visually-hidden:not(:focus):not(:active){
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

@media(max-width:640px){
  :root{--header-h:48px}
  .nav-links{gap:0.875rem}
  .nav-links a{font-size:0.8125rem}
  .hero-title{text-shadow:0 0 40px rgba(0,200,255,0.2),0 0 20px rgba(0,200,255,0.15)}
  .skills-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #bg-canvas{display:none}
  .hero-section::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at center,rgba(0,200,255,0.04),transparent 70%);
  }
  .hero-content{animation:none}
}