:root{
  --bg-base:#0A1120;
  --bg-panel:#111A2E;
  --bg-panel-alt:#16213A;
  --bg-raised:#1B2842;
  --border:#243255;
  --border-soft:#1B2743;
  --text-primary:#E7ECF7;
  --text-secondary:#8B96B3;
  --text-dim:#5C6786;
  --green:#34D399;
  --amber:#F5B461;
  --blue:#60A5FA;
  --red:#F87171;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
::selection{background:var(--green); color:#08111F;}

/* ---------- Background grid texture ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:-1;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:0.35;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 90%);
}

/* ---------- Nav ---------- */
header.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  background:rgba(10,17,32,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  font-family:var(--mono);
}
.brand{
  font-size:14px; font-weight:600; letter-spacing:0.02em;
  display:flex; align-items:center; gap:8px;
}
.brand .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(52,211,153,0.15);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(52,211,153,0.15); }
  50%{ box-shadow:0 0 0 6px rgba(52,211,153,0.06); }
}
nav.links{display:flex; gap:22px; font-size:13px;}
nav.links a{
  color:var(--text-secondary); text-decoration:none;
  padding:6px 2px; border-bottom:1px solid transparent;
  transition:color 0.15s, border-color 0.15s;
  cursor:pointer;
}
nav.links a:hover, nav.links a:focus-visible{ color:var(--text-primary); border-color:var(--blue); }
.resume-btn{
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:#08111F; background:var(--green);
  padding:8px 14px; border-radius:5px; text-decoration:none;
  border:1px solid var(--green);
  white-space:nowrap;
}
.resume-btn:hover{ filter:brightness(1.08); }
@media (max-width:820px){
  nav.links{display:none;}
}

/* ---------- Layout helpers ---------- */
main{max-width:1040px; margin:0 auto; padding:0 24px;}
section{padding:88px 0; border-top:1px solid var(--border-soft); scroll-margin-top:90px;}
section:first-of-type{border-top:none;}
.eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--text-dim);
  letter-spacing:0.14em; text-transform:uppercase; margin:0 0 10px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:"//"; color:var(--blue);}
h2.section-title{
  font-family:var(--mono); font-size:clamp(22px,3vw,30px);
  margin:0 0 36px; font-weight:600; letter-spacing:-0.01em;
}

/* ---------- Hero ---------- */
.hero{ padding:64px 0 56px; border-top:none; }
.status-line{
  font-family:var(--mono); font-size:12px; color:var(--green);
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px; border:1px solid rgba(52,211,153,0.35);
  border-radius:4px; background:rgba(52,211,153,0.06);
  margin-bottom:22px;
}
.status-line .dot{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:pulse 2.4s ease-in-out infinite;
}
h1.hero-name{
  font-size:clamp(34px,6vw,56px); margin:0 0 6px; font-weight:700;
  letter-spacing:-0.02em; line-height:1.05;
}
.hero-role{
  font-family:var(--mono); font-size:clamp(15px,2.2vw,19px);
  color:var(--blue); margin:0 0 22px; font-weight:500;
}
.hero-desc{
  max-width:620px; color:var(--text-secondary); font-size:16px; margin:0 0 32px;
}
.hero-links{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:48px;}
.pill-link{
  font-family:var(--mono); font-size:13px; text-decoration:none;
  color:var(--text-primary); border:1px solid var(--border);
  padding:9px 16px; border-radius:6px; display:inline-flex; align-items:center; gap:8px;
  transition:border-color 0.15s, background 0.15s;
  cursor:pointer; background:none;
}
.pill-link:hover, .pill-link:focus-visible{ border-color:var(--blue); background:var(--bg-panel-alt); }

.metric-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border-soft); border:1px solid var(--border-soft); border-radius:8px; overflow:hidden;
}
.metric{
  background:var(--bg-panel); padding:18px 16px;
}
.metric .num{ font-family:var(--mono); font-size:24px; font-weight:700; color:var(--text-primary); }
.metric .label{ font-family:var(--mono); font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px;}
@media (max-width:640px){ .metric-row{grid-template-columns:repeat(2,1fr);} }

/* ---------- Certification ---------- */
.cert-card{
  display:flex; align-items:center; gap:22px;
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:10px; padding:26px;
}
.cert-badge{
  flex-shrink:0; width:64px; height:64px; border-radius:10px;
  background:linear-gradient(135deg, rgba(245,180,97,0.18), rgba(245,180,97,0.02));
  border:1px solid rgba(245,180,97,0.35);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; color:var(--amber); font-size:20px;
}
.cert-body h3{ margin:0 0 4px; font-size:17px; }
.cert-body p{ margin:0; color:var(--text-secondary); font-size:14px; }
.cert-status{
  margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--green);
  border:1px solid rgba(52,211,153,0.35); padding:4px 10px; border-radius:4px;
  background:rgba(52,211,153,0.06); white-space:nowrap; align-self:flex-start;
}
@media (max-width:560px){
  .cert-card{flex-wrap:wrap;}
  .cert-status{margin-left:0;}
}

/* ---------- Education (deploy log style) ---------- */
.log{ border-left:2px solid var(--border); margin-left:6px; }
.log-entry{ position:relative; padding:0 0 34px 28px; }
.log-entry:last-child{ padding-bottom:0; }
.log-entry::before{
  content:""; position:absolute; left:-7px; top:2px;
  width:12px; height:12px; border-radius:50%;
  background:var(--bg-base); border:2px solid var(--blue);
}
.log-entry.in-progress::before{ border-color:var(--amber); }
.log-time{ font-family:var(--mono); font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; }
.log-title{ font-size:17px; font-weight:600; margin:4px 0 4px; }
.log-desc{ color:var(--text-secondary); font-size:14px; margin:0; max-width:560px; }
.tag{
  display:inline-block; font-family:var(--mono); font-size:11px;
  color:var(--amber); border:1px solid rgba(245,180,97,0.4);
  padding:2px 8px; border-radius:4px; margin-top:8px; background:rgba(245,180,97,0.06);
}
.tag.done{ color:var(--green); border-color:rgba(52,211,153,0.4); background:rgba(52,211,153,0.06); }

/* ---------- Projects ---------- */
.project-card{
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:10px; margin-bottom:20px; overflow:hidden;
}
.project-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 24px; cursor:pointer; user-select:none; background:none; border:none;
  width:100%; text-align:left; color:inherit; font-family:inherit;
}
.project-head:hover{ background:var(--bg-panel-alt); }
.project-titles h3{ margin:0 0 6px; font-size:19px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.status-pill{
  font-family:var(--mono); font-size:10px; color:var(--green);
  border:1px solid rgba(52,211,153,0.4); background:rgba(52,211,153,0.07);
  padding:2px 8px; border-radius:4px; letter-spacing:0.05em;
}
.project-titles p.tagline{ margin:0; color:var(--text-secondary); font-size:14px; max-width:560px;}
.chevron{
  font-family:var(--mono); color:var(--text-dim); font-size:14px; flex-shrink:0;
  transition:transform 0.2s ease; margin-top:4px;
}
.project-head[aria-expanded="true"] .chevron{ transform:rotate(90deg); color:var(--blue); }

.stack-row{ display:flex; flex-wrap:wrap; gap:6px; padding:0 24px 20px; }
.stack-tag{
  font-family:var(--mono); font-size:11px; color:var(--text-secondary);
  background:var(--bg-panel-alt); border:1px solid var(--border);
  padding:4px 9px; border-radius:4px;
}

.project-body{
  max-height:0; overflow:hidden; transition:max-height 0.35s ease;
  border-top:1px solid var(--border-soft);
}
.project-body-inner{ padding:22px 24px 26px; }
.project-body-inner h4{
  font-family:var(--mono); font-size:11px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.08em; margin:0 0 12px;
}
.incident-log{ font-family:var(--mono); font-size:12.5px; }
.incident-line{
  display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border-soft);
  color:var(--text-secondary); align-items:baseline;
}
.incident-line:last-child{ border-bottom:none; }
.incident-tag{
  flex-shrink:0; color:var(--red); font-size:10px; background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.3); padding:1px 6px; border-radius:3px;
  text-transform:uppercase;
}
.incident-tag.resolved{ color:var(--green); border-color:rgba(52,211,153,0.3); background:rgba(52,211,153,0.08); }
.incident-tag.security{ color:var(--blue); border-color:rgba(96,165,250,0.3); background:rgba(96,165,250,0.08); }
.project-footer{
  display:flex; gap:12px; padding:20px 24px 22px; flex-wrap:wrap;
}
.btn{
  font-family:var(--mono); font-size:12.5px; text-decoration:none;
  padding:9px 16px; border-radius:6px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); cursor:pointer;
}
.btn.primary{ background:var(--blue); border-color:var(--blue); color:#0A1120; font-weight:600; }
.btn.primary:hover{ filter:brightness(1.08); }
.btn.secondary{ color:var(--text-secondary); background:none; }
.btn.secondary:hover{ border-color:var(--blue); color:var(--text-primary); }

/* ---------- Contact / footer ---------- */
footer{
  padding:70px 0 60px; text-align:center; border-top:1px solid var(--border-soft); scroll-margin-top:90px;
}
footer h2{ font-family:var(--mono); font-size:clamp(20px,3vw,26px); margin:0 0 14px;}
footer p{ color:var(--text-secondary); max-width:480px; margin:0 auto 28px; font-size:15px;}
.footer-links{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.foot-note{ margin-top:50px; font-family:var(--mono); font-size:11px; color:var(--text-dim); }

:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }