/* CSS Variables and Root Styles */
:root{
  --bg: #0a0b0f;
  --panel: #0f1117;
  --text: #e6e8ef;
  --muted: #98a2b3;
  --accent: #00f0ff;   /* neon cyan */
  --accent-2: #a78bfa; /* soft violet */
  --card: #10131b;
  --border: #1f2430;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

.light{
  --bg: #f7f8fb;
  --panel: #ffffff;
  --text: #101828;
  --muted: #475467;
  --accent: #0066ff;
  --accent-2: #7c3aed;
  --card: #ffffff;
  --border: #e5e7eb;
  --shadow: 0 8px 24px rgba(16,24,40,.08);
  color-scheme: light;
}

/* Base Reset and Typography */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; 
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; 
  color:var(--text); 
  background:var(--bg);
  line-height:1.6; 
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1150px, 92vw); margin-inline:auto}

/* Techy animated backdrop */
.backdrop{
  position:fixed; 
  inset:0; 
  z-index:-2; 
  pointer-events:none;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(0,240,255,.12), transparent 60%),
              radial-gradient(900px 600px at -10% 10%, rgba(167,139,250,.10), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%);
}
canvas#grid{position:fixed; inset:0; z-index:-1; opacity:.55}

/* Header/Nav */
header{
  position:sticky; 
  top:0; 
  z-index:50; 
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(to bottom, rgba(10,11,15,.85), rgba(10,11,15,.45));
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand .spark{
  width:12px; 
  height:12px; 
  border-radius:50%; 
  background:conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent)); 
  box-shadow:0 0 18px var(--accent)
}
nav a{padding:8px 12px; border-radius:10px; font-weight:500; color:var(--muted)}
nav a:hover, nav a:focus{outline:none; background:rgba(255,255,255,.06); color:var(--text)}
.actions{display:flex; align-items:center; gap:10px}
.btn{
  display:inline-flex; 
  align-items:center; 
  gap:10px; 
  padding:10px 16px; 
  border-radius:999px; 
  border:1px solid var(--border); 
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
  box-shadow:var(--shadow); 
  font-weight:600
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{border-color:transparent; background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0a0b0f}
.btn.ghost{background:transparent}
.theme-toggle{cursor:pointer; border:1px solid var(--border); background:var(--panel); padding:8px 10px; border-radius:12px}

main{display:block}

/* Hero Section */
.hero{padding:76px 0 44px}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent)}
h1{
  font-size:clamp(36px, 7vw, 62px); 
  line-height:1.08; 
  margin:10px 0 10px; 
  font-weight:800; 
  letter-spacing:-.02em; 
  background:linear-gradient(90deg, #fff, #c8e9ff 40%, #e3d9ff 75%); 
  -webkit-background-clip:text; 
  color:transparent
}
.lead{font-size:clamp(16px, 2.2vw, 19px); color:var(--muted); max-width:65ch}
.cta{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px}
.hero-card{
  border:1px solid var(--border); 
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); 
  padding:18px; 
  border-radius:var(--radius); 
  display:flex; 
  gap:12px; 
  align-items:center
}
.monospace{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; font-weight:600}

/* Sections */
section{padding:60px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:22px}
.section-head h2{font-size:28px; letter-spacing:-.01em; margin:0}
.section-head p{color:var(--muted); margin:0}

/* Projects Grid */
.grid{display:grid; gap:16px}
.grid.projects{grid-template-columns:repeat(auto-fill, minmax(260px,1fr))}
.card{
  border:1px solid var(--border); 
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); 
  border-radius:14px; 
  overflow:hidden; 
  transition:transform .25s ease, box-shadow .25s ease; 
  position:relative
}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.35)}
.thumb{
  aspect-ratio:16/9; 
  background:linear-gradient(90deg, rgba(0,240,255,.22), rgba(167,139,250,.18)); 
  border-bottom:1px solid var(--border); 
  position:relative
}
.thumb::after{content:""; position:absolute; inset:0; background:radial-gradient(800px 300px at 20% 10%, rgba(255,255,255,.08), transparent)}
.card-body{padding:14px}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.tag{font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
.card h3{margin:2px 0 4px; font-size:18px}
.card p{margin:0; color:var(--muted)}
.card-actions{display:flex; gap:8px; padding:12px 14px 16px}
.link{display:inline-flex; align-items:center; gap:8px; font-weight:600}
.link svg{width:16px; height:16px}

/* Skills */
.skills{display:flex; flex-wrap:wrap; gap:10px}
.skill{
  padding:8px 12px; 
  border:1px dashed var(--border); 
  border-radius:12px; 
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); 
  font-weight:600
}

/* About */
.about{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.about .blurb{
  border:1px solid var(--border); 
  border-radius:var(--radius); 
  padding:18px; 
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008))
}

/* Contact */
form.contact{display:grid; gap:12px; max-width:680px}
.field{display:grid; gap:6px}
.field label{font-weight:600}
.field input,.field textarea{
  padding:12px 14px; 
  border-radius:12px; 
  border:1px solid var(--border); 
  background:var(--panel); 
  color:var(--text)
}
.field input:focus,.field textarea:focus{outline:2px solid rgba(0,240,255,.35)}
textarea{min-height:120px; resize:vertical}

/* Footer */
footer{padding:32px 0; border-top:1px solid var(--border); color:var(--muted)}
.socials{display:flex; gap:14px}
.socials a{display:inline-flex; padding:10px; border-radius:12px; border:1px solid var(--border)}
.socials a:hover{background:rgba(255,255,255,.05)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  .card{transition:none}
}