:root{
  --bg:#0a0e14;
  --bg-2:#0d1320;
  --panel:#121a26;
  --panel-2:#16202e;
  --border:#1f2a3a;
  --fg:#e8eef6;
  --muted:#8a98ab;
  --accent:#5eead4;
  --accent-2:#38bdf8;
  --glow:rgba(94,234,212,.14);
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); line-height:1.65; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--disp); font-weight:600; letter-spacing:-.02em; line-height:1.15}

/* nav */
nav.top{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,20,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav.top .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
nav.top .brand{font-family:var(--disp); font-weight:600; font-size:1.05rem; text-decoration:none; color:var(--fg)}
nav.top .brand b{color:var(--accent)}
nav.top .menu{display:flex; gap:24px}
nav.top .menu a{color:var(--muted); text-decoration:none; font-size:.92rem; transition:.15s}
nav.top .menu a:hover{color:var(--fg)}
@media(max-width:680px){nav.top .menu{display:none}}

/* hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(620px 320px at 12% -8%, var(--glow), transparent 70%),
    radial-gradient(560px 300px at 100% 0%, rgba(56,189,248,.10), transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:84px 24px 76px}
.eyebrow{font-family:var(--mono); color:var(--accent); font-size:.82rem; letter-spacing:.04em; margin:0 0 18px}
.hero h1{font-size:3.3rem; margin:0 0 14px}
.hero .lead{font-size:1.2rem; color:var(--fg); margin:0 0 12px}
.hero .desc{color:var(--muted); max-width:520px; margin:0 0 28px}
.avatar{width:116px; height:116px; border-radius:50%; object-fit:cover; object-position:center 20%; border:2px solid var(--accent); box-shadow:0 12px 34px -10px rgba(0,0,0,.65); margin:0 0 22px; display:block}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  text-decoration:none; font-size:.92rem; font-weight:500; padding:11px 20px; border-radius:8px;
  border:1px solid var(--border); color:var(--fg); transition:.16s;
}
.btn.primary{background:var(--accent); color:#062018; border-color:var(--accent); font-weight:600}
.btn.primary:hover{box-shadow:0 0 0 4px var(--glow); transform:translateY(-1px); color:#062018}
.btn:hover{border-color:var(--accent); color:var(--accent)}

/* terminal visual */
.term{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6); overflow:hidden}
.term .bar{display:flex; gap:7px; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--panel-2)}
.term .bar i{width:11px; height:11px; border-radius:50%; display:inline-block}
.term .bar i:nth-child(1){background:#ff5f56}.term .bar i:nth-child(2){background:#ffbd2e}.term .bar i:nth-child(3){background:#27c93f}
.term .body{font-family:var(--mono); font-size:.85rem; padding:18px; min-height:210px; line-height:1.7}
.term .ln{white-space:pre-wrap}
.term .pr{color:var(--accent)}
.term .ok{color:#27c93f}
.term .cursor{display:inline-block; width:8px; height:15px; background:var(--accent); vertical-align:-2px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* stats band */
.stats{border-bottom:1px solid var(--border); background:var(--bg-2)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:40px 24px}
.stat .num{font-family:var(--disp); font-size:2rem; font-weight:600; color:var(--accent)}
.stat .lbl{color:var(--muted); font-size:.86rem; margin-top:2px}
@media(max-width:680px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}

/* sections */
section.block{padding:72px 0; border-bottom:1px solid var(--border)}
.kicker{font-family:var(--mono); color:var(--accent); font-size:.8rem; letter-spacing:.05em; margin:0 0 8px}
section.block h2{font-size:1.9rem; margin:0 0 8px}
.lead{color:var(--muted); max-width:680px; margin:0 0 28px}

/* reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}

/* service cards */
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.svc{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px; transition:.18s}
.svc:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 18px 40px -24px var(--glow)}
.svc .ic{width:38px; height:38px; border-radius:9px; display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--border); margin-bottom:14px}
.svc .ic svg{width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.7}
.svc h3{font-size:1.05rem; margin:0 0 6px}
.svc p{margin:0; color:var(--muted); font-size:.92rem}
@media(max-width:760px){.services{grid-template-columns:1fr}}

/* timeline */
.timeline{position:relative; margin-left:6px}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--border)}
.tl{position:relative; padding:0 0 28px 34px}
.tl::before{content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 0 4px var(--glow)}
.tl:last-child{padding-bottom:0}
.tl h3{font-size:1.15rem; margin:0 0 2px}
.tl .role{color:var(--accent); font-family:var(--mono); font-size:.82rem; margin:0 0 12px}
.tl ul{margin:0; padding-left:18px}
.tl li{margin:0 0 8px; font-size:.95rem; color:var(--fg)}
.tl li:last-child{margin-bottom:0}

/* card grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px; transition:.18s}
.card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 18px 40px -24px var(--glow)}
.card h3{font-size:1.08rem; margin:0 0 10px}
.card p{margin:0 0 12px; font-size:.94rem; color:var(--fg)}
.card .stack{color:var(--accent); font-size:.8rem; font-family:var(--mono); margin:0}
.cardlink{display:inline-block; margin-top:12px; color:var(--accent); font-family:var(--mono); font-size:.82rem; text-decoration:none}
.cardlink:hover{text-decoration:underline}
.lead a{color:var(--accent); text-decoration:none}
.lead a:hover{text-decoration:underline}
.badge{display:inline-block; font-family:var(--mono); font-size:.72rem; color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:2px 9px; margin-left:8px; vertical-align:middle}

/* feature */
.feature{
  background:linear-gradient(120deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:14px; padding:28px;
}
.feature h3{font-size:1.25rem; margin:0 0 10px; color:var(--accent)}
.feature p{margin:0; font-size:1rem}

/* skills */
.skillgroups{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.sg h4{font-family:var(--mono); color:var(--muted); font-size:.8rem; font-weight:500; margin:0 0 12px; text-transform:uppercase; letter-spacing:.06em}
.sg .tags{display:flex; flex-wrap:wrap; gap:8px}
.tags span{background:var(--panel); border:1px solid var(--border); color:var(--fg); padding:6px 12px; border-radius:8px; font-size:.85rem; transition:.15s}
.tags span:hover{border-color:var(--accent); color:var(--accent)}
@media(max-width:760px){.skillgroups{grid-template-columns:1fr}}

.certs{color:var(--fg); line-height:2}
.certs b{color:var(--accent); font-family:var(--mono); font-weight:500; font-size:.92rem}

/* testimonials */
.quotes{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.quote{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:24px; display:flex; flex-direction:column}
.quote:hover{border-color:var(--accent-dim, var(--border))}
.quote .stars{color:#ffc83d; letter-spacing:3px; margin-bottom:14px; font-size:.95rem}
.quote p{font-style:italic; margin:0 0 18px; font-size:.97rem; line-height:1.6; flex:1; color:var(--fg)}
.quote .who b{color:var(--fg); font-size:.92rem}
.quote .who span{display:block; color:var(--muted); font-size:.82rem; margin-top:3px}

/* footer */
footer{padding:64px 0; text-align:center}
footer h2{font-size:2rem; margin:0 0 10px}
footer p{color:var(--muted); margin:0 0 22px}
footer .cta{justify-content:center}
footer .fine{margin-top:34px; font-size:.85rem; color:var(--muted)}

/* floating resume button */
.resume-fab{
  position:fixed; right:22px; bottom:22px; z-index:200;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--accent); color:#062018; font-weight:600;
  padding:13px 20px; border-radius:30px; text-decoration:none; font-size:.92rem;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.65), 0 0 0 1px rgba(94,234,212,.35);
  transition:.18s;
}
.resume-fab:hover{transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(0,0,0,.7), 0 0 0 5px var(--glow)}
.resume-fab svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media(max-width:520px){.resume-fab{right:14px; bottom:14px; padding:11px 16px; font-size:.85rem}}

@media(max-width:840px){
  .hero .wrap{grid-template-columns:1fr; gap:36px; padding:60px 24px}
  .hero h1{font-size:2.5rem}
  .term{order:2}
}