:root{
  --bg:#0a0a0a;
  --bg-alt:#0d0d0d;
  --card:#111111;
  --card-border:#1f1f1f;
  --red:#e8342a;
  --red-dim:#e8342a33;
  --text:#f2f2f2;
  --muted:#9a9a9a;
  --muted-2:#707070;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 32px;}
section{position:relative;scroll-snap-align:start;scroll-snap-stop:always;}

::selection{background:var(--red);color:#fff;}

/* Icon system */
.icon{
  width:1em;height:1em;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  display:inline-block;vertical-align:-0.15em;
  flex-shrink:0;
}
.icon-fill{fill:currentColor;stroke:none;}
.dot{width:6px;height:6px;min-width:6px;border-radius:50%;background:var(--red);display:inline-block;}

/* Background glow accents */
.glow{
  position:absolute;
  width:600px;height:600px;
  background:radial-gradient(circle, var(--red-dim) 0%, transparent 70%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}
/* Per-section corner offsets (moved here from inline styles so the tablet/
   mobile breakpoints below can scale them - values match the previous
   inline styles exactly, so desktop is unaffected). */
.hero .glow{top:-100px;right:-200px;}
.about .glow{bottom:-160px;left:-220px;}
.skills .glow{top:-140px;right:-260px;}
.certs .glow{bottom:-180px;left:50%;transform:translateX(-50%);}
.projects .glow{top:-120px;left:-240px;}
.how .glow{bottom:-160px;right:-220px;}
.contact-footer .glow{top:-140px;left:-220px;}

/* Ambient floating particles */
.particles{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.particle{
  position:absolute;
  bottom:-30px;
  left:var(--x, 50%);
  width:var(--size, 5px);
  height:var(--size, 5px);
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px 2px var(--red), 0 0 18px 5px var(--red-dim);
  opacity:0;
  animation:particle-float var(--dur, 16s) linear infinite;
  animation-delay:var(--delay, 0s);
}
@keyframes particle-float{
  0%{transform:translate(0,0);opacity:0;}
  8%{opacity:.6;}
  50%{transform:translate(var(--drift, 24px),-52vh);opacity:.35;}
  92%{opacity:0;}
  100%{transform:translate(0,-105vh);opacity:0;}
}
@media (max-width:640px){
  .particle{display:none;}
  .particle:nth-child(odd){display:block;}
}

/* ---------- Nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;
  z-index:160;
  background:rgba(10,10,10,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-border);
}
nav{
  max-width:1200px;margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;
}
.logo-mark{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  filter:drop-shadow(0 0 8px var(--red-dim));
}
.logo-mark img{width:100%;height:100%;display:block;object-fit:contain;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:14.5px;color:var(--muted);font-weight:500;
  position:relative;padding-bottom:4px;transition:color .2s;
}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--text);}
.nav-links a.active::after{
  content:'';position:absolute;bottom:-6px;left:0;right:0;height:2px;background:var(--red);
}

/* Mobile nav toggle + panel */
.nav-actions{display:flex;align-items:center;gap:14px;}
.nav-toggle{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid #2a2a2a;border-radius:8px;
  color:var(--text);cursor:pointer;flex-shrink:0;
  transition:border-color .2s, color .2s;
}
.nav-toggle:hover{border-color:var(--red);color:var(--red);}
.nav-toggle .icon{width:19px;height:19px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.open .icon-menu{display:none;}
.nav-toggle.open .icon-close{display:block;}

.nav-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  z-index:140;
}
.nav-overlay.open{opacity:1;pointer-events:auto;}

.mobile-nav{
  position:fixed;inset:0;
  width:100%;
  height:100vh;height:100svh;
  background:rgba(8,8,8,0.98);
  backdrop-filter:blur(12px);
  padding:110px 36px 60px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:150;
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav a{
  padding:18px 2px;
  font-size:22px;font-weight:700;color:var(--text);
  text-align:center;
  border-bottom:1px solid var(--card-border);
  transition:color .2s;
  font-family:'Space Grotesk',sans-serif;
}
.mobile-nav a:hover{color:var(--red);}
.mobile-nav a.active{color:var(--red);}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:8px;
  font-size:14.5px;font-weight:600;
  cursor:pointer;transition:all .2s;border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:#ff4438;box-shadow:0 0 22px var(--red-dim);}
.btn-outline{border-color:#2a2a2a;color:var(--text);background:transparent;}
.btn-outline:hover{border-color:var(--red);color:var(--red);}
.btn-sm{padding:9px 16px;font-size:13.5px;}
#navContactBtn.active{border-color:var(--red);color:var(--red);box-shadow:0 0 20px var(--red-dim);}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:110px 0 90px;
  overflow:hidden;
}
.scroll-cue{
  position:absolute;
  left:50%;bottom:30px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--muted);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  z-index:1;
  animation:scroll-bounce 2.2s ease-in-out infinite;
}
.scroll-cue .icon{width:16px;height:16px;color:var(--red);}
@keyframes scroll-bounce{
  0%,100%{transform:translate(-50%,0);}
  50%{transform:translate(-50%,8px);}
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:50px;align-items:center;
  position:relative;z-index:1;width:100%;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--red);color:var(--red);
  padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px;
}
.hero h1{font-size:48px;line-height:1.12;margin-bottom:20px;}
.hero h1 .red{color:var(--red);}
.hero p{color:var(--muted);font-size:16px;max-width:480px;margin-bottom:32px;}
.hero-actions{display:flex;gap:14px;margin-bottom:34px;flex-wrap:wrap;}
.social-row{display:flex;gap:12px;}
.icon-btn{
  width:40px;height:40px;border-radius:8px;
  border:1px solid #2a2a2a;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:all .2s;font-size:16px;
}
.icon-btn:hover{border-color:var(--red);color:var(--red);}

.hero-visual{position:relative;height:420px;}

/* Radar scanner */
.radar{
  position:absolute;top:50%;left:50%;
  width:300px;height:300px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,52,42,0.07) 0%, rgba(232,52,42,0.02) 45%, transparent 72%);
  box-shadow:0 0 90px rgba(232,52,42,0.12);
}
.radar-ring{
  position:absolute;top:50%;left:50%;
  border:1px solid rgba(232,52,42,0.22);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.radar-ring.r1{width:100%;height:100%;}
.radar-ring.r2{width:74%;height:74%;}
.radar-ring.r3{width:48%;height:48%;border-style:dashed;border-color:rgba(232,52,42,0.16);}
.radar-ring.r4{width:22%;height:22%;}
.radar-cross-h,.radar-cross-v{
  position:absolute;background:rgba(232,52,42,0.14);
}
.radar-cross-h{top:50%;left:2%;right:2%;height:1px;transform:translateY(-50%);}
.radar-cross-v{left:50%;top:2%;bottom:2%;width:1px;transform:translateX(-50%);}
.radar-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(232,52,42,0.7), rgba(232,52,42,0.12) 22%, transparent 40%);
  animation:radar-spin 4s linear infinite;
  mix-blend-mode:screen;
}
.radar-core{
  position:absolute;top:50%;left:50%;
  width:12px;height:12px;
  background:var(--red);border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 20px var(--red), 0 0 46px var(--red-dim);
}
.radar-core::after{
  content:'';position:absolute;inset:-6px;
  border:1px solid var(--red);border-radius:50%;
  animation:radar-core-pulse 2.4s ease-out infinite;
}
.radar-blip{
  position:absolute;width:8px;height:8px;
  background:var(--red);border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px var(--red);
  animation:radar-blip-fade 4.8s ease-in-out infinite;
}
.radar-blip::after{
  content:'';position:absolute;inset:0;
  border:1px solid var(--red);border-radius:50%;
  animation:radar-ping 4.8s ease-out infinite;
}
@keyframes radar-spin{ to{ transform:rotate(360deg); } }
@keyframes radar-ping{
  0%,10%{transform:scale(1);opacity:0.9;}
  45%{transform:scale(4.2);opacity:0;}
  100%{transform:scale(4.2);opacity:0;}
}
@keyframes radar-blip-fade{
  0%,6%{opacity:0;}
  14%,48%{opacity:1;}
  62%,100%{opacity:0;}
}
@keyframes radar-core-pulse{
  0%{transform:scale(1);opacity:0.7;}
  100%{transform:scale(2.4);opacity:0;}
}
.float-card{
  position:absolute;
  background:rgba(17,17,17,0.92);
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:12px 16px;
  backdrop-filter:blur(6px);
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
  animation:floaty 5s ease-in-out infinite;
  width:max-content;
  max-width:190px;
}
.float-card .ft{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px;display:flex;align-items:center;gap:6px;color:#fff;}
.float-card .ft .icon{color:var(--red);font-size:13px;}
.float-card .fd{font-size:11.5px;color:var(--muted);}
.fc1{top:6%;left:30%;animation-delay:0s;}
.fc2{top:2%;right:0%;animation-delay:1.2s;}
.fc3{bottom:8%;left:0%;animation-delay:2.4s;}
@keyframes floaty{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* ---------- Section headers ---------- */
.eyebrow{
  color:var(--red);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:'';width:16px;height:2px;background:var(--red);display:inline-block;}
.section-head{margin-bottom:48px;}
.section-head.center{text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .eyebrow::before{display:none;}
.section-head h2{font-size:34px;}
.section-head-row{
  display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;flex-wrap:wrap;gap:16px;
}
.link-arrow{color:var(--red);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.link-arrow:hover{text-decoration:underline;}

/* ---------- About ---------- */
.about{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:110px 0;border-top:1px solid var(--card-border);
}
.about .container{width:100%;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about p{color:var(--muted);margin-bottom:26px;font-size:15.5px;}
.tag-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-bottom:34px;}
.tag-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#d8d8d8;}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.feature-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:22px;transition:border-color .2s, transform .2s;
}
.feature-card:hover{border-color:#3a3a3a;transform:translateY(-3px);}
.feature-icon{
  width:38px;height:38px;border-radius:9px;
  background:var(--red-dim);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:14px;
}
.feature-card h4{font-size:15.5px;margin-bottom:6px;}
.feature-card p{font-size:13.5px;color:var(--muted);margin:0;}

/* ---------- Skills ---------- */
.skills{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:110px 0;border-top:1px solid var(--card-border);
}
.skills .container{width:100%;}
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.skill-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:22px;display:flex;gap:14px;align-items:flex-start;
  transition:border-color .2s, transform .2s;
}
.skill-card:hover{border-color:var(--red);transform:translateY(-3px);}
.skill-icon{
  width:38px;height:38px;min-width:38px;border-radius:9px;
  background:var(--red-dim);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.skill-card h4{font-size:14.5px;margin-bottom:5px;}
.skill-card p{font-size:12.5px;color:var(--muted);margin:0;}

/* ---------- Certifications ---------- */
.certs{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:110px 0;border-top:1px solid var(--card-border);text-align:center;
}
.certs .container{width:100%;}
.certs-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:40px;
}
.cert-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:26px 14px;transition:border-color .2s, transform .2s;
}
.cert-card:hover{border-color:#3a3a3a;transform:translateY(-3px);}
.cert-badge{
  width:56px;height:56px;border-radius:50%;
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  border:1px solid #2a2a2a;background:#161616;
  overflow:hidden;
}
.cert-badge svg{width:34px;height:34px;display:block;}
.cert-badge.cert-microsoft-badge svg{width:30px;height:30px;}
.cert-card h4{font-size:13.5px;margin-bottom:4px;line-height:1.3;}
.cert-card span{font-size:11.5px;color:var(--muted-2);}

/* ---------- Projects ---------- */
.projects{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:110px 0;border-top:1px solid var(--card-border);
}
.projects .container{width:100%;}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.project-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;
  transition:border-color .2s, transform .2s;
}
.project-card:hover{border-color:var(--red);transform:translateY(-4px);}
.project-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.project-tag{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);
}
.project-icon{
  width:36px;height:36px;border-radius:9px;background:var(--red-dim);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.project-card h3{font-size:18px;margin-bottom:10px;line-height:1.3;}
.project-card p{font-size:13.5px;color:var(--muted);margin-bottom:20px;flex-grow:1;}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.chip{
  font-size:11.5px;padding:5px 10px;border-radius:6px;border:1px solid #2a2a2a;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;
}
.project-card .link-arrow{font-size:13.5px;}

/* ---------- How I work ---------- */
.how{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:110px 0;border-top:1px solid var(--card-border);
}
.how .container{width:100%;}
.timeline{
  display:flex;justify-content:space-between;position:relative;margin-top:20px;
}
.timeline::before{
  content:'';position:absolute;top:28px;left:60px;right:60px;height:1px;
  background:linear-gradient(90deg, transparent, #2a2a2a 10%, #2a2a2a 90%, transparent);
  z-index:0;
}
.step{flex:1;text-align:center;position:relative;z-index:1;padding:0 10px;}
.step-icon{
  width:56px;height:56px;border-radius:50%;
  background:#141414;border:1px solid var(--red);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:21px;
  margin:0 auto 18px;box-shadow:0 0 20px var(--red-dim);
}
.step h4{font-size:14.5px;margin-bottom:8px;}
.step p{font-size:12.5px;color:var(--muted);}

/* ---------- Stats (merged into How I Work section) ---------- */
.stats-panel{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:40px 20px;margin-top:56px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
}
.stat{text-align:center;}
.stat .icon{color:var(--red);font-size:22px;margin-bottom:12px;}
.stat .num{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;margin-bottom:4px;}
.stat .lbl{font-size:12.5px;color:var(--muted);}

/* ---------- Contact + Footer (merged into one section) ---------- */
.contact-footer{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-top:max(110px, calc(50vh - 273px));
  border-top:1px solid var(--card-border);
}
.contact-footer .cta-slot{width:100%;}
.cta{
  background:linear-gradient(120deg, #150707, var(--card) 60%);
  border:1px solid var(--card-border);border-radius:var(--radius);
  padding:40px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-left{display:flex;align-items:center;gap:20px;}
.cta-icon{
  width:54px;height:54px;border-radius:50%;background:var(--red-dim);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.cta h3{font-size:22px;margin-bottom:6px;}
.cta p{font-size:14px;color:var(--muted);max-width:460px;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--card-border);padding:64px 0 0;}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;
}
.footer-brand p{color:var(--muted);font-size:13.5px;margin:14px 0 20px;max-width:280px;}
.footer-col h5{font-size:14px;margin-bottom:18px;color:#fff;}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{color:var(--muted);font-size:13.5px;transition:color .2s;display:flex;align-items:center;gap:8px;}
.footer-col ul li a:hover{color:var(--red);}
.footer-col ul li{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;}
.footer-col ul li .icon{color:var(--red);font-size:13px;}
.footer-bottom{
  border-top:1px solid var(--card-border);
  padding:22px 0;display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--muted-2);flex-wrap:wrap;gap:10px;
}
.footer-bottom .icon{color:var(--red);}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;
  bottom:28px;right:28px;
  width:48px;height:48px;
  border-radius:12px;
  background:rgba(17,17,17,0.9);
  border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, border-color .2s, box-shadow .2s;
  z-index:90;
}
.back-to-top.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.back-to-top:hover{
  border-color:var(--red);
  box-shadow:0 0 22px var(--red-dim);
}
.back-to-top .icon{width:20px;height:20px;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid, .about-grid{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .hero-grid{justify-items:center;text-align:center;}
  .hero p{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .social-row{justify-content:center;}
  .skills-grid{grid-template-columns:repeat(2,1fr);}
  .certs-grid{grid-template-columns:repeat(3,1fr);}
  .projects-grid{grid-template-columns:1fr;}
  .stats-panel{grid-template-columns:repeat(2,1fr);}
  /* 5 stats in a 2-col grid leaves the last one alone on its row, stuck to
     the left column on tablet too - span and center it to match mobile. */
  .stats-panel .stat:last-child{grid-column:1 / -1;justify-self:center;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .timeline{flex-direction:column;gap:28px;}
  .timeline::before{display:none;}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  #navContactBtn{display:none;}
  /* Now that tablet free-scrolls, forcing every section to fill min-height:100vh
     just makes align-items:center pad shorter sections with extra space beyond
     their 110px padding (a lot of extra space for a short section like Projects,
     barely any for a tall one like Approach) - the gap size ends up different
     per section. Let each section size to its own content + fixed 110px padding
     instead, so every gap matches, same as they already do on mobile. */
  .about, .skills, .certs, .projects, .how{min-height:auto;}
  .contact-footer{min-height:auto;padding-top:110px;gap:110px;}
  .glow{width:400px;height:400px;filter:blur(42px);opacity:.85;}
  /* Corner offsets scaled down in proportion to the smaller glow size above -
     at the original (desktop) pixel offsets, most of each shrunk blob was
     pushed past the section edge and clipped by overflow-x:hidden, which is
     why the glows were barely visible on tablet. */
  .hero .glow{top:-67px;right:-133px;}
  .about .glow{bottom:-107px;left:-147px;}
  .skills .glow{top:-93px;right:-173px;}
  .certs .glow{bottom:-120px;}
  .projects .glow{top:-80px;left:-160px;}
  .how .glow{bottom:-107px;right:-147px;}
  .contact-footer .glow{top:-93px;left:-147px;}

  /* Fully free-scrolling on tablet and mobile - no section-by-section snapping */
  html{scroll-snap-type:none;}
  section, .contact-footer{scroll-snap-align:none;scroll-snap-stop:normal;}
}
@media (max-width: 640px){
  .hero h1{font-size:34px;}
  .certs-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:1fr;}
  .feature-card{text-align:center;}
  .feature-icon{margin-left:auto;margin-right:auto;}
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .footer-brand .logo{justify-content:center;}
  .footer-brand p{margin-left:auto;margin-right:auto;}
  .social-row{justify-content:center;}
  .footer-col ul li{justify-content:center;}
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center;}
  .cta{flex-direction:column;align-items:center;text-align:center;}
  .cta-left{flex-direction:column;text-align:center;}
  .cta p{margin-left:auto;margin-right:auto;}
  /* On phones the stacked single-column footer makes this whole section taller
     than the viewport, so the viewport-centering padding-top formula (tuned for
     desktop/tablet, where the section fits exactly one screen) no longer keeps
     the gap above the CTA card in sync with the gap below it. Use a fixed,
     equal value for both instead, matching the 110px top/bottom padding every
     other section uses so the rhythm stays consistent all the way down the
     page - `gap` guarantees the space below the CTA regardless of overflow,
     so padding-top just matches it directly. */
  .contact-footer{padding-top:110px;gap:110px;}
  .back-to-top{width:42px;height:42px;bottom:18px;right:18px;}
  .back-to-top .icon{width:18px;height:18px;}
  .glow{width:220px;height:220px;filter:blur(34px);opacity:.8;}
  /* Same proportional-offset fix as the tablet breakpoint above, scaled to
     this smaller glow size - on mobile the old fixed offsets clipped the
     glows almost entirely off-screen, which is why they looked non-existent. */
  .hero .glow{top:-37px;right:-73px;}
  .about .glow{bottom:-59px;left:-81px;}
  .skills .glow{top:-51px;right:-95px;}
  .certs .glow{bottom:-66px;}
  .projects .glow{top:-44px;left:-88px;}
  .how .glow{bottom:-59px;right:-81px;}
  .contact-footer .glow{top:-51px;left:-81px;}
}

/* ---------- Sub-pages (e.g. Contact) ---------- */
/* Sub-pages don't need the section-by-section scroll-snapping the homepage
   uses - let them scroll freely. Scoped to html.subpage rather than being
   global (and applied to `html`, the element that actually owns the
   document's scroll-snap container), since the homepage also has a
   `.contact-footer` (the CTA+footer section) that must keep its own
   snapping/sizing behavior. */
html.subpage{scroll-snap-type:none;}
html.subpage section{scroll-snap-align:none;scroll-snap-stop:normal;}
/* On the homepage `.contact-footer` stretches to fill the viewport to host
   both the CTA card and the footer, spaced apart with justify-content:
   space-between. On sub-pages it only wraps the footer, so forcing it to
   100vh would leave a large empty gap above the footer - let it size to
   its content instead. */
html.subpage .contact-footer{
  min-height:0;
  display:block;
  padding-top:0;
  overflow:hidden;
}

.contact-hero .glow{top:-100px;right:-200px;}
.contact-hero{
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
}
.contact-hero .container{width:100%;position:relative;z-index:1;}
.contact-intro{max-width:600px;margin:0 auto 44px;text-align:center;}
.contact-intro .eyebrow{justify-content:center;}
.contact-intro .eyebrow::before{display:none;}
.contact-intro h1{font-size:34px;margin-bottom:14px;}
.contact-intro p{color:var(--muted);font-size:15.5px;}
.contact-wrap{max-width:600px;margin:0 auto;}
.contact-panel{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:44px;position:relative;overflow:hidden;
}
.contact-meta-row{
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:28px;
}
.contact-meta-row a, .contact-meta-row span{
  display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);
  transition:color .2s;
}
.contact-meta-row a:hover{color:var(--red);}
.contact-meta-row .icon{color:var(--red);}

.field{margin-bottom:20px;}
.field label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.field input, .field textarea{
  width:100%;
  background:#161616;border:1px solid #2a2a2a;border-radius:8px;
  padding:13px 14px;
  font-family:'Inter',sans-serif;font-size:14.5px;color:var(--text);
  transition:border-color .2s, box-shadow .2s;
  -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
}
.field input::placeholder, .field textarea::placeholder{color:var(--muted-2);}
.field input:focus, .field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim);
}
.field textarea{resize:vertical;min-height:130px;line-height:1.5;font-family:inherit;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.15);
}
.field-error{margin-top:7px;font-size:12.5px;color:#e5484d;}
.form-error-banner{
  margin-bottom:20px;padding:12px 14px;border-radius:8px;
  background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.35);
  color:#ffb3b6;font-size:13.5px;line-height:1.5;
}
.field-captcha{display:flex;justify-content:center;margin-top:4px;margin-bottom:6px;}
#contactForm .btn-primary{width:100%;justify-content:center;padding:13px 22px;font-size:15px;margin-top:6px;}
#contactForm .btn-primary:disabled{opacity:.65;cursor:not-allowed;}
#contactForm .btn-primary:disabled:hover{background:var(--red);box-shadow:none;}

/* Success state */
.form-success{
  display:none;
  flex-direction:column;align-items:center;text-align:center;
  padding:14px 0 6px;
  outline:none;
}
.form-success.show{display:flex;animation:success-pop .45s cubic-bezier(.2,.9,.3,1.1);}
@keyframes success-pop{
  0%{opacity:0;transform:scale(.94) translateY(6px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.check-wrap{
  width:76px;height:76px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  background:radial-gradient(circle, var(--red-dim) 0%, transparent 72%);
}
.check-wrap svg{width:76px;height:76px;overflow:visible;}
.check-circle{
  fill:none;stroke:var(--red);stroke-width:3;
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:draw-circle .5s ease forwards;
  transform-origin:center;
}
.check-mark{
  fill:none;stroke:var(--red);stroke-width:4.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:draw-check .35s ease forwards .45s;
}
@keyframes draw-circle{ to{ stroke-dashoffset:0; } }
@keyframes draw-check{ to{ stroke-dashoffset:0; } }
.form-success h3{font-size:22px;margin-bottom:10px;}
.form-success p{color:var(--muted);font-size:14.5px;max-width:380px;margin-bottom:4px;}
.form-success .response-note{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--card-border);color:var(--text);font-size:13px;font-weight:500;
}
.form-success .response-note .icon{color:var(--red);width:15px;height:15px;}
.form-success .btn-outline{margin-top:26px;}

@media (max-width: 980px){
  .contact-hero .glow{top:-67px;right:-133px;}
}
@media (max-width: 640px){
  .contact-hero{padding:130px 0 70px;}
  .contact-panel{padding:30px 22px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .contact-hero .glow{top:-37px;right:-73px;}
}

/* ---------- Certifications Page ---------- */
/* Free scroll + shrink-to-content footer are shared with other sub-pages -
   see the html.subpage rules above. */
.certs-hero .glow{top:-100px;right:-200px;}
.certs-hero{
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
}
.certs-hero .container{width:100%;position:relative;z-index:1;}

.certs-intro{max-width:640px;margin:0 auto 52px;text-align:center;}
.certs-intro .eyebrow{justify-content:center;}
.certs-intro .eyebrow::before{display:none;}
.certs-intro h1{font-size:34px;margin-bottom:14px;}
.certs-intro p{color:var(--muted);font-size:15.5px;}

.cert-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.cert-detail-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:28px;transition:border-color .2s, transform .2s;
}
.cert-detail-card:hover{border-color:#3a3a3a;transform:translateY(-3px);}
.cert-detail-top{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
.cert-detail-top .cert-badge{flex-shrink:0;}
.cert-detail-top h3{font-size:18px;margin-bottom:4px;line-height:1.3;}
.cert-issuer{font-size:12.5px;color:var(--muted-2);}
.cert-date-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--muted-2);
  border:1px dashed #3a3a3a;border-radius:999px;
  padding:6px 12px;margin-bottom:18px;
}
.cert-date-pill .icon{width:13px;height:13px;color:var(--red);flex-shrink:0;}
.cert-date-pill em{font-style:normal;}
.cert-desc{font-size:13.5px;color:var(--muted);margin-bottom:18px;line-height:1.65;}
.cert-detail-card .chip-row{margin-bottom:0;}
.cert-credential-btn{margin-top:22px;}

@media (max-width:980px){
  .certs-hero .glow{top:-67px;right:-133px;}
}
@media (max-width:640px){
  .certs-hero{padding:130px 0 70px;}
  .cert-detail-grid{grid-template-columns:1fr;}
  .cert-detail-card{padding:22px;}
  .certs-hero .glow{top:-37px;right:-73px;}
}

/* ---------- About Page ---------- */
/* Free scroll + shrink-to-content footer are shared with other sub-pages -
   see the html.subpage rules above. */
.about-hero .glow{top:-100px;right:-200px;}
.about-hero{
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
}
.about-hero .container{width:100%;position:relative;z-index:1;}

.about-intro{max-width:640px;margin:0 auto 56px;text-align:center;}
.about-intro .eyebrow{justify-content:center;}
.about-intro .eyebrow::before{display:none;}
.about-intro h1{font-size:34px;margin-bottom:14px;}
.about-intro p{color:var(--muted);font-size:15.5px;}

.about-grid-page{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;
  align-items:start;margin-bottom:64px;
}

.profile-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:36px 30px;text-align:center;position:sticky;top:110px;
}
.profile-avatar{
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle, var(--red-dim) 0%, transparent 72%);
  border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.profile-avatar .icon{width:46px;height:46px;color:var(--red);}
.profile-name{font-size:21px;margin-bottom:4px;}
.profile-role{color:var(--red);font-size:13px;font-weight:600;margin-bottom:26px;}
.profile-facts{
  display:flex;flex-direction:column;gap:16px;text-align:left;
  border-top:1px solid var(--card-border);padding-top:24px;
}
.profile-fact{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:var(--muted);}
.profile-fact .icon{color:var(--red);width:16px;height:16px;flex-shrink:0;margin-top:1px;}
.profile-fact strong{display:block;color:var(--text);font-weight:600;font-size:13.5px;margin-bottom:1px;}

.about-bio h2{font-size:24px;margin-bottom:18px;}
.about-bio p{color:var(--muted);font-size:15px;margin-bottom:20px;line-height:1.75;}
.about-bio .tag-list{margin-bottom:30px;}
.about-bio .hero-actions{margin-bottom:0;}

.about-section{margin-bottom:64px;}
.about-section .section-head{margin-bottom:32px;}
.about-section .feature-grid{grid-template-columns:repeat(4,1fr);gap:18px;}

@media (max-width:980px){
  .about-hero .glow{top:-67px;right:-133px;}
  .about-grid-page{grid-template-columns:1fr;gap:36px;}
  .profile-card{position:static;max-width:360px;margin:0 auto;}
  .about-section .feature-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .about-hero{padding:130px 0 70px;}
  .about-hero .glow{top:-37px;right:-73px;}
  .about-section .feature-grid{grid-template-columns:1fr;}
  .about-bio .hero-actions{justify-content:center;}
}

/* ---------- Skills Page ---------- */
/* Free scroll + shrink-to-content footer are shared with other sub-pages -
   see the html.subpage rules above. */
.skills-hero .glow{top:-100px;right:-200px;}
.skills-hero{
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
}
.skills-hero .container{width:100%;position:relative;z-index:1;}

.skills-intro{max-width:640px;margin:0 auto 52px;text-align:center;}
.skills-intro .eyebrow{justify-content:center;}
.skills-intro .eyebrow::before{display:none;}
.skills-intro h1{font-size:34px;margin-bottom:14px;}
.skills-intro p{color:var(--muted);font-size:15.5px;}

.skill-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.skill-detail-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:28px;transition:border-color .2s, transform .2s;
}
.skill-detail-card:hover{border-color:var(--red);transform:translateY(-3px);}
.skill-detail-top{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;}
.skill-detail-top .skill-icon{flex-shrink:0;}
.skill-detail-top h3{font-size:17px;margin-bottom:0;line-height:1.3;}
.skill-desc{font-size:13.5px;color:var(--muted);margin-bottom:18px;line-height:1.65;}
.skill-detail-card .chip-row{margin-bottom:0;}

@media (max-width:980px){
  .skills-hero .glow{top:-67px;right:-133px;}
}
@media (max-width:640px){
  .skills-hero{padding:130px 0 70px;}
  .skill-detail-grid{grid-template-columns:1fr;}
  .skill-detail-card{padding:22px;}
  .skills-hero .glow{top:-37px;right:-73px;}
}

/* ---------- Approach Page ---------- */
/* Free scroll + shrink-to-content footer are shared with other sub-pages -
   see the html.subpage rules above. */
.approach-hero .glow{top:-100px;right:-200px;}
.approach-hero{
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
}
.approach-hero .container{width:100%;position:relative;z-index:1;}

.approach-intro{max-width:640px;margin:0 auto 56px;text-align:center;}
.approach-intro .eyebrow{justify-content:center;}
.approach-intro .eyebrow::before{display:none;}
.approach-intro h1{font-size:34px;margin-bottom:14px;}
.approach-intro p{color:var(--muted);font-size:15.5px;}

.approach-timeline{
  display:flex;flex-direction:column;gap:18px;margin-bottom:64px;
}
.approach-detail-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:28px 30px;display:flex;gap:22px;align-items:flex-start;
  transition:border-color .2s, transform .2s;
}
.approach-detail-card:hover{border-color:var(--red);transform:translateY(-3px);}
.approach-step-icon{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:#141414;border:1px solid var(--red);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:21px;
  box-shadow:0 0 20px var(--red-dim);
}
.approach-step-body{flex:1;}
.approach-step-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.approach-step-num{color:var(--red);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;}
.approach-step-body h3{font-size:18px;margin:0;}
.approach-step-body p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:16px;}
.approach-step-body .chip-row{margin-bottom:0;}

.approach-section{margin-bottom:64px;}
.approach-section .section-head{margin-bottom:32px;}
.approach-section .feature-grid{grid-template-columns:repeat(4,1fr);gap:18px;}

.approach-stats-wrap{margin-bottom:0;}

@media (max-width:980px){
  .approach-hero .glow{top:-67px;right:-133px;}
  .approach-section .feature-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .approach-hero{padding:130px 0 70px;}
  .approach-hero .glow{top:-37px;right:-73px;}
  .approach-detail-card{flex-direction:column;text-align:left;padding:24px;}
  .approach-section .feature-grid{grid-template-columns:1fr;}
}

/* ---------- Portfolio Page (multi-project) ---------- */
/* Free scroll + shrink-to-content footer are shared with other sub-pages -
   see the html.subpage rules above. */
.portfolio-hero .glow{top:-100px;right:-200px;}
.portfolio-hero{
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
}
.portfolio-hero .container{width:100%;position:relative;z-index:1;}

.portfolio-intro{max-width:680px;margin:0 auto 52px;text-align:center;}
.portfolio-intro .eyebrow{justify-content:center;}
.portfolio-intro .eyebrow::before{display:none;}
.portfolio-intro h1{font-size:34px;margin-bottom:14px;}
.portfolio-intro p{color:var(--muted);font-size:15.5px;}

.portfolio-filters{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  max-width:920px;margin:0 auto 40px;
}
.filter-pill{
  background:var(--card);border:1px solid var(--card-border);color:var(--muted);
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  padding:9px 20px;border-radius:999px;cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.filter-pill:hover{color:var(--text);border-color:#3a3a3a;}
.filter-pill.active{color:var(--text);border-color:var(--red);background:var(--red-dim);}

.project-showcase-card.is-hidden{display:none;}

.project-showcase-list{
  display:flex;flex-direction:column;gap:28px;max-width:920px;margin:0 auto;
}

.project-showcase-card{
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:30px;
}
.ps-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
.ps-head-left{display:flex;align-items:flex-start;gap:16px;}
.ps-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  background:#141414;border:1px solid var(--red);color:var(--red);
  display:flex;align-items:center;justify-content:center;
}
.ps-icon .icon{width:20px;height:20px;}
.ps-title-wrap h3{font-size:18px;margin-bottom:5px;}
.ps-type{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--red);background:var(--red-dim);border-radius:999px;padding:3px 10px;
}
.ps-desc{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:20px;}

.chrome-frame{
  background:#0d0d0d;border:1px solid var(--card-border);border-radius:10px;
  overflow:hidden;margin-bottom:20px;
}
.chrome-bar{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--card-border);
}
.chrome-dot{width:9px;height:9px;border-radius:50%;background:#2a2a2a;}
.chrome-dot:nth-child(1){background:#e8342a;}
.chrome-label{
  margin-left:6px;font-size:11.5px;color:var(--muted-2);font-family:'Space Grotesk',sans-serif;
  display:flex;align-items:center;gap:6px;
}
.chrome-label .icon{width:11px;height:11px;}

.ps-panel{
  /* aspect-ratio (rather than a fixed pixel height) keeps the same proportion
     of a tall screenshot visible before scrolling on every screen size - a
     fixed px height showed very different amounts depending on how wide the
     card happened to be (e.g. full image on narrow mobile cards, only the top
     half on much wider desktop cards, for the exact same image). */
  aspect-ratio:16/10;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--red) #171717;
}
.ps-panel img{width:100%;display:block;}

.code-block{
  padding:18px 20px;overflow:auto;max-height:320px;
  font-family:'Courier New',ui-monospace,monospace;font-size:12.5px;line-height:1.7;
  scrollbar-width:thin;scrollbar-color:var(--red) #171717;
}
.code-block .ln-prop{color:#7fb3e0;}
.code-block .ln-val{color:#e8a24a;}
.code-block .ln-punc{color:var(--muted-2);}
.code-block .ln-sel{color:var(--red);}
.code-block .ln-comment{color:var(--muted-2);font-style:italic;}
.code-block .ln-tag{color:var(--red);}
.code-block .ln-attr{color:#7fb3e0;}
.code-block .ln-str{color:#8fbf6f;}

.code-block::-webkit-scrollbar, .ps-panel::-webkit-scrollbar{width:9px;height:9px;}
.code-block::-webkit-scrollbar-track, .ps-panel::-webkit-scrollbar-track{background:#171717;}
.code-block::-webkit-scrollbar-thumb, .ps-panel::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--red), #a3241d);
  border-radius:999px;border:2px solid #171717;background-clip:padding-box;
}
.code-block::-webkit-scrollbar-thumb:hover, .ps-panel::-webkit-scrollbar-thumb:hover{background:var(--red);background-clip:padding-box;}
.code-block::-webkit-scrollbar-corner, .ps-panel::-webkit-scrollbar-corner{background:#171717;}

.ps-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ps-foot .chip-row{margin-bottom:0;}

@media (max-width:980px){
  .portfolio-hero .glow{top:-67px;right:-133px;}
}
@media (max-width:640px){
  .portfolio-hero{padding:130px 0 70px;}
  .portfolio-hero .glow{top:-37px;right:-73px;}
  .project-showcase-card{padding:22px;}
  .code-block{font-size:11px;padding:16px;}
  .ps-foot{flex-direction:column;align-items:stretch;}
  .ps-foot .btn{justify-content:center;}
}

/* ---------- 404 Page ---------- */
/* Scroll-snap is disabled and .contact-footer is collapsed to just wrap the
   footer via html.subpage - see the html.subpage rules above. */
.notfound-hero .glow{top:-100px;right:-200px;}
.notfound-hero .glow-2{bottom:-140px;left:-220px;}
.notfound-hero{
  display:flex;
  align-items:center;
  padding:150px 0 100px;
  overflow:hidden;
  min-height:calc(100vh - 200px);
  min-height:calc(100svh - 200px);
}
.notfound-hero .container{width:100%;position:relative;z-index:1;}

.notfound-content{max-width:620px;margin:0 auto;text-align:center;}

.notfound-radar{
  width:96px;height:96px;border-radius:50%;margin:0 auto 28px;
  background:#141414;border:1px solid var(--red);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px var(--card-border), 0 0 40px var(--red-dim);
  position:relative;
}
.notfound-radar::before, .notfound-radar::after{
  content:'';position:absolute;border-radius:50%;border:1px solid var(--red-dim);
}
.notfound-radar::before{inset:-16px;}
.notfound-radar::after{inset:-32px;border-color:#1f1f1f;}
.notfound-radar .icon{width:38px;height:38px;}

.notfound-code{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(72px, 14vw, 128px);line-height:1;
  color:var(--red);text-shadow:0 0 60px var(--red-dim);
  margin-bottom:8px;letter-spacing:-0.02em;
}
.notfound-content h1{font-size:28px;margin-bottom:14px;}
.notfound-content p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:34px;}

.notfound-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:44px;}

.notfound-links{border-top:1px solid var(--card-border);padding-top:30px;}
.notfound-links .lbl{
  font-size:11.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:16px;
}
.notfound-links .chip-row{justify-content:center;margin-bottom:0;}
.notfound-links .chip{cursor:pointer;transition:border-color .2s, color .2s;}
.notfound-links .chip:hover{color:var(--text);border-color:var(--red);}

@media (max-width:980px){
  .notfound-hero .glow{top:-67px;right:-133px;}
}
@media (max-width:640px){
  .notfound-hero{padding:130px 0 80px;}
  .notfound-hero .glow{top:-37px;right:-73px;}
  .notfound-actions{flex-direction:column;align-items:stretch;}
  .notfound-actions .btn{justify-content:center;}
}

/* ---------- Maintenance Page ---------- */
body.maint-page{overflow:hidden;}

.maint-wrap{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;position:relative;overflow:hidden;
}
.maint-wrap .glow{top:-140px;right:-220px;}
.maint-wrap .glow-2{bottom:-160px;left:-220px;}

.maint-content{max-width:520px;text-align:center;position:relative;z-index:1;}

.maint-corner-brand{
  position:fixed;top:0;left:0;right:0;z-index:2;
  pointer-events:none;user-select:none;
}
.maint-corner-brand-inner{padding-top:16px;padding-bottom:16px;}

.maint-icon{
  width:100px;height:100px;border-radius:50%;margin:0 auto 32px;
  background:#141414;border:1px solid var(--red);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px var(--card-border), 0 0 44px var(--red-dim);
  position:relative;
}
.maint-icon::before, .maint-icon::after{
  content:'';position:absolute;border-radius:50%;border:1px solid var(--red-dim);
}
.maint-icon::before{inset:-18px;}
.maint-icon::after{inset:-36px;border-color:#1f1f1f;}
.maint-icon .icon{width:42px;height:42px;animation:maint-spin 6s linear infinite;}

@keyframes maint-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.maint-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);margin-bottom:18px;
}
.maint-eyebrow .dot{box-shadow:0 0 8px var(--red);}

.maint-content h1{font-size:32px;margin-bottom:16px;}
.maint-content p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:36px;}

.maint-dots{display:flex;gap:8px;justify-content:center;}
.maint-dots span{
  width:8px;height:8px;border-radius:50%;background:var(--red);
  opacity:.25;animation:maint-pulse 1.4s ease-in-out infinite;
}
.maint-dots span:nth-child(2){animation-delay:.2s;}
.maint-dots span:nth-child(3){animation-delay:.4s;}

@keyframes maint-pulse{
  0%, 80%, 100%{opacity:.25;transform:scale(1);}
  40%{opacity:1;transform:scale(1.3);}
}

@media (max-width:640px){
  .maint-content h1{font-size:26px;}
  .maint-icon{width:84px;height:84px;}
  .maint-icon .icon{width:34px;height:34px;}
}