:root {
  --navy: #0b1230;
  --navy-2: #101a47;
  --accent: #5d8bff;
  --accent-2: #7af0ff;
  --accent-3: #9d6bff;
  --accent-4: #2dd4bf;
  --text: #e7ecff;
  --muted: #8893bf;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --grad: linear-gradient(120deg, #7af0ff 0%, #5d8bff 40%, #9d6bff 100%);
  --shadow-glow: 0 30px 80px -20px rgba(93, 139, 255, .35), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  /* Liquid-glass system: near-colorless "glass" at rest, navy-tinted fill on hover. */
  --liquid-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(150, 180, 255, .025) 45%, rgba(11, 18, 48, .16));
  --liquid-glass-bg-hover: linear-gradient(135deg, rgba(36, 50, 112, .62), rgba(11, 18, 48, .58));
  --liquid-glass-border: rgba(255, 255, 255, .16);
  --liquid-glass-border-hover: rgba(122, 240, 255, .4);
  --liquid-glass-highlight: rgba(255, 255, 255, .38);
  --liquid-glass-blur: 22px;
  /* Page-level tokens (theme system). Dark values match the site's
     original hardcoded colors exactly, so [data-theme="dark"] (the
     default) is pixel-identical to how the site looked before. */
  --page-bg: #03050d;
  --nav-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(11, 18, 48, .4));
}

/* ===================================================================
   LIGHT THEME
   Every token below is consumed by dozens of existing rules already
   (--glass, --glass-border, --text, --muted, --liquid-glass-*) — so
   redefining them here re-themes the whole site without touching each
   component's own CSS. Intentionally NOT touched: --navy/--navy-2
   (used as a dark *text* color on top of the bright --grad gradient in
   buttons/chips/pagination — that needs to stay dark in both themes),
   and --accent/--accent-2/--accent-3/--accent-4/--grad (brand accent
   colors stay constant across themes, per "same accent identity").
   The portrait hero and the space/cosmic background are intentionally
   left out of this system entirely (see their own rules) — the hero's
   two source images are pre-composited onto a fixed dark backdrop, and
   the space scene is dimmed rather than re-colored (see below).
   =================================================================== */
[data-theme="light"] {
  --page-bg: #f3f4f9;
  --text: #12162c;
  --muted: #5b6178;
  --glass: rgba(11, 18, 48, .035);
  --glass-border: rgba(11, 18, 48, .09);
  --nav-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5));
  --liquid-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(230, 235, 250, .55) 45%, rgba(255, 255, 255, .68));
  --liquid-glass-bg-hover: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(222, 230, 255, .82));
  --liquid-glass-border: rgba(11, 18, 48, .1);
  --liquid-glass-highlight: rgba(255, 255, 255, .9);
  --shadow-glow: 0 20px 50px -22px rgba(16, 24, 64, .18), 0 0 0 1px rgba(16, 24, 64, .05) inset;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s ease, color .5s ease;
}

/* Aurora/starfield wash is a dark-mode signature — in light mode it's
   turned UP in color/brightness rather than hidden, so the cosmic
   backdrop (Saturn, nebula, stars) stays a clearly visible part of the
   design instead of nearly disappearing. The space canvas itself is
   untouched (see js/space-main.js); only its opacity/filter change here. */
[data-theme="light"] body::before,
[data-theme="light"] .bg-orbs {
  opacity: .48;
}

[data-theme="light"] .space-scene.is-ready {
  opacity: .5;
  filter: brightness(1.35) saturate(1.6) contrast(.94);
}

[data-theme="light"] .scroll-progress {
  background: rgba(11, 18, 48, .06);
}

footer,
.pg-footer {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}


a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}







body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(93, 139, 255, .16), transparent 60%),
    radial-gradient(900px 600px at 0% 30%, rgba(157, 107, 255, .13), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(122, 240, 255, .1), transparent 60%);
}

/* Fixed, full-viewport Three.js cinematic space background. Sits behind
   body::before and .bg-orbs (which now act as a secondary aurora wash on
   top of it) and behind all page content. Fades in once assets are ready;
   never intercepts pointer events. */
.space-scene {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s cubic-bezier(.22, 1, .36, 1);
}

.space-scene.is-ready {
  opacity: 1;
}

#space-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Graceful no-WebGL fallback: a cheap CSS-only twinkling starfield plus a
   slightly boosted aurora wash, so the page still feels cinematic. */
body.no-webgl::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .8;
  background-repeat: repeat;
  background-size: 340px 340px;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.2px 1.2px at 65% 15%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.8px 1.8px at 85% 60%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.3px 1.3px at 40% 80%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 10% 65%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.4px 1.4px at 92% 35%, rgba(255, 255, 255, .65), transparent),
    radial-gradient(1.2px 1.2px at 55% 50%, rgba(255, 255, 255, .55), transparent);
}

body.no-webgl .orb {
  opacity: .32;
}

/* Same fallback starfield, recolored dark-on-light so it stays visible
   instead of vanishing (white dots on a light --page-bg are invisible). */
[data-theme="light"] body.no-webgl::after {
  opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(11, 18, 48, .6), transparent),
    radial-gradient(1.2px 1.2px at 65% 15%, rgba(11, 18, 48, .5), transparent),
    radial-gradient(1.8px 1.8px at 85% 60%, rgba(11, 18, 48, .55), transparent),
    radial-gradient(1.3px 1.3px at 40% 80%, rgba(11, 18, 48, .45), transparent),
    radial-gradient(1.5px 1.5px at 10% 65%, rgba(11, 18, 48, .5), transparent),
    radial-gradient(1.4px 1.4px at 92% 35%, rgba(11, 18, 48, .45), transparent),
    radial-gradient(1.2px 1.2px at 55% 50%, rgba(11, 18, 48, .4), transparent);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 48% 52% 60% 40% / 55% 45% 58% 42%;
  filter: blur(100px);
  opacity: 0.22;
  animation: float 22s ease-in-out infinite;
  mix-blend-mode: screen;
}

.orb-1 {
  width: 560px;
  height: 620px;
  background: linear-gradient(160deg, #3b5bdb, var(--accent-4) 130%);
  top: -140px;
  left: -180px;
}

.orb-2 {
  width: 520px;
  height: 560px;
  background: linear-gradient(160deg, #7c3aed, #5d8bff 130%);
  bottom: -180px;
  right: -100px;
  animation-delay: -7s;
  opacity: 0.18;
}

.orb-3 {
  width: 420px;
  height: 460px;
  background: linear-gradient(160deg, #22d3ee, var(--accent-4) 130%);
  top: 50%;
  left: 60%;
  animation-delay: -14s;
  opacity: 0.14;
}

@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg)
  }

  33% {
    transform: translate(34px, -55px) scale(1.08) rotate(4deg)
  }

  66% {
    transform: translate(-22px, 32px) scale(0.95) rotate(-3deg)
  }
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: #7af0ff;
  box-shadow: 0 0 12px #7af0ff;
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(122, 240, 255, .5);
  transition: width .25s, height .25s, border-color .25s, background .25s;
}

.cursor-ring.hover {
  width: 64px;
  height: 64px;
  background: rgba(122, 240, 255, .08);
  border-color: #7af0ff;
}

@media (max-width:768px) {

  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  body {
    cursor: auto;
  }
}

#ripple-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border: 2px solid rgba(122, 240, 255, .6);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-anim 1s ease-out forwards;
}

@keyframes ripple-anim {
  0% {
    width: 10px;
    height: 10px;
    opacity: 1;
    border-width: 3px;
  }

  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
    border-width: 0.5px;
  }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  background: rgba(255, 255, 255, 0.04);
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  box-shadow: 0 0 12px var(--accent);
}

.glass-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 24px;
  background: var(--nav-glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--liquid-glass-border);
  border-radius: 100px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s, background .5s, border-color .5s;
}

.glass-nav.hidden {
  transform: translateX(-50%) translateY(-150%);
  opacity: 0;
}

.logo {
  font-weight: 800;
  font-family: 'Space Grotesk';
  letter-spacing: 0.5px;
  font-size: 15px;
}

.logo span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.glass-nav ul {
  display: flex;
  gap: 22px;
  font-size: 13.5px;
  font-weight: 500;
}

.glass-nav ul a {
  color: var(--muted);
  transition: color 0.2s;
  position: relative;
}

.glass-nav ul a:hover {
  color: var(--text);
}

.cta-btn {
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  background: var(--grad);
  color: #0b1230;
  box-shadow: 0 8px 24px rgba(93, 139, 255, .4);
  transition: transform .25s, box-shadow .25s;
  display: inline-block;
  border: none;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(93, 139, 255, 0.55);
}

.cta-btn.ghost {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--liquid-glass-border);
  box-shadow: none;
  backdrop-filter: blur(10px);
  transition: transform .25s, box-shadow .25s, background .4s, border-color .4s;
}

.cta-btn.ghost:hover {
  background: var(--liquid-glass-bg-hover);
  border-color: var(--liquid-glass-border-hover);
}

.cta-btn.primary {
  font-size: 15px;
  padding: 14px 28px;
}

@media (max-width:900px) {
  .glass-nav ul {
    display: none;
  }

  .glass-nav {
    padding: 10px 16px;
    gap: 14px;
  }
}

.hero {
  height: 400vh;
  position: relative;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1.05) translateY(40px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1);
  padding: 0 24px;
  text-align: center;
}

.slide.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.slide .bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  filter: blur(2px) saturate(1.2);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

.slide .content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.kicker {
  font-family: 'Space Grotesk', monospace;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--accent-2);
  margin-bottom: 24px;
  opacity: 0.9;
}

.kicker.center {
  text-align: center;
}

.slide h1 {
  font-size: clamp(44px, 8vw, 108px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 24px;
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.lead {
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}


.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 120px 32px;
  position: relative;
}

section h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 18px;
}

section h2.center,
.center {
  text-align: center;
}

.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.about-center {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.about-text p {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 16px;
}

.about-text strong {
  color: var(--accent-2);
  font-weight: 600;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}

.stats div {
  padding: 18px;
  border: 1px solid var(--liquid-glass-border);
  border-radius: 16px;
  background: var(--liquid-glass-bg);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  text-align: center;
  transition: background .5s cubic-bezier(.22, 1, .36, 1), border-color .5s, transform .4s cubic-bezier(.22, 1, .36, 1);
}

.stats div:hover {
  background: var(--liquid-glass-bg-hover);
  border-color: var(--liquid-glass-border-hover);
  transform: translateY(-3px);
}

.stats b {
  display: block;
  font-size: 28px;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.stats span {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width:900px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- skill proficiency bars (About section) -------------------------- */
.skills-block__kicker {
  margin-top: 56px;
}

.skills-block__heading {
  font-size: 22px;
  font-weight: 800;
  margin: 6px 0 28px;
}

.skill-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: start;
}

.skill-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  margin-bottom: 7px;
}

.skill-bar__head span { color: var(--text); font-weight: 600; }
.skill-bar__head b { color: var(--accent-2); font-family: 'Space Grotesk'; }

.skill-bar__track {
  height: 8px;
  border-radius: 100px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}

.skill-bar__fill {
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 100px;
  background: var(--grad);
  transition: width 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* ---- career timeline (About section) ---------------------------------- */
.timeline {
  position: relative;
  margin-top: 28px;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  inset-inline-start: 5px;
  width: 1px;
  background: linear-gradient(180deg, var(--glass-border), transparent);
}

.timeline__item {
  position: relative;
  padding-inline-start: 26px;
}

.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 3px var(--page-bg);
}

.timeline__period {
  font-family: 'Space Grotesk';
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 4px;
}

.timeline__body h4 {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 6px;
}

.timeline__body p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}

.grid {
  display: grid;
  gap: 24px;
}

.services-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
}

.glass-card {
  position: relative;
  padding: 32px;
  border-radius: 24px;
  background: var(--liquid-glass-bg);
  border: 1px solid var(--liquid-glass-border);
  backdrop-filter: blur(var(--liquid-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(160%);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5), inset 0 1px 0 var(--liquid-glass-highlight), inset 0 0 0 1px rgba(255, 255, 255, .03);
  transition: transform 0.5s cubic-bezier(.22, 1, .36, 1), border-color 0.5s, box-shadow 0.5s, background 0.6s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(122, 240, 255, .14), transparent 42%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .18) 0%, transparent 30%);
  opacity: .75;
  pointer-events: none;
  transition: opacity .5s;
}

.glass-card:hover::before {
  opacity: 1;
}

.glass-card:hover::after {
  opacity: .35;
}

.glass-card:hover {
  transform: translateY(-6px);
  background: var(--liquid-glass-bg-hover);
  border-color: var(--liquid-glass-border-hover);
  box-shadow: 0 30px 60px -20px rgba(93, 139, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(122, 240, 255, .08);
}

.glass-card .icon {
  font-size: 36px;
  margin-bottom: 18px;
  filter: drop-shadow(0 4px 12px rgba(122, 240, 255, .4));
}

.glass-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.glass-card p {
  color: var(--muted);
  font-size: 14.5px;
}

.glass-card.big {
  padding: 60px;
  text-align: center;
}

.glass-card.big h2 {
  margin: 20px 0;
}

@media (max-width:900px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.skills {
  padding: 60px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .01);
}

.skills .container {
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.track {
  display: flex;
  gap: 30px;
  white-space: nowrap;
  animation: scroll 35s linear infinite;
  font-family: 'Space Grotesk';
  font-size: 28px;
  font-weight: 700;
  color: var(--muted);
}

.track span {
  flex-shrink: 0;
}

.track span:not(:nth-child(2n)) {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@keyframes scroll {
  to {
    transform: translateX(-50%)
  }
}

.works-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
}

.works-lead {
  color: var(--muted);
  font-size: 15px;
  max-width: 560px;
  margin: 14px auto 0;
}

.works-see-all {
  display: inline-block;
  margin-top: 40px;
}

.work-card__glyph {
  display: grid;
  place-items: center;
  font-size: 64px;
  background: linear-gradient(135deg, rgba(93, 139, 255, .28), rgba(11, 18, 48, .95));
}

.work-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--liquid-glass-border);
  background: var(--liquid-glass-bg);
  backdrop-filter: blur(var(--liquid-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(160%);
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .55), inset 0 1px 0 var(--liquid-glass-highlight);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .5s, box-shadow .5s, background .6s cubic-bezier(.22, 1, .36, 1);
  margin-inline-end: 70px;
}

.work-card:hover {
  transform: translateY(-8px);
  background: var(--liquid-glass-bg-hover);
  border-color: var(--liquid-glass-border-hover);
  box-shadow: 0 30px 64px -20px rgba(93, 139, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.work-card .thumb {
  height: 340px;
  overflow: hidden;
  position: relative;
  background: #000;
}

.work-card .thumb img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 4s ease-in-out, object-position 4s ease-in-out;
}

.work-card:hover .thumb img {
  object-position: bottom;
  transform: scale(1.02);
}

.work-card .meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  background: linear-gradient(180deg, transparent, rgba(3, 5, 13, .95));
}

.work-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.work-card span {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accent-2);
  font-family: 'Space Grotesk';
}

.hint {
  margin-top: 30px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width:900px) {
  .works-grid {
    grid-template-columns: 1fr;
  }

  .work-card .thumb {
    height: 240px;
  }
}

.certs-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
}

.cert-card {
  padding: 18px;
  text-align: center;
}

.cert-card img {
  border-radius: 14px;
  margin-bottom: 14px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.cert-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.cert-card p {
  font-size: 12px;
  color: var(--muted);
}

.cert-card--badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cert-card__glyph {
  font-size: 34px;
  margin-bottom: 14px;
}

@media (max-width:900px) {
  .certs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact .lead {
  margin: 18px auto 32px;
}

.contact-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

footer {
  padding: 40px 0;
  border-top: 1px solid var(--glass-border);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

footer .container {
  padding: 0px 32px;
}

.tilt {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* Lighter blur radius on phones: backdrop-filter is the priciest part of the
   liquid-glass look on weaker mobile GPUs, so we trade a little softness for
   smooth scrolling. Everything using var(--liquid-glass-blur) picks this up
   automatically — no per-selector overrides needed. */
@media (max-width:768px) {
  :root {
    --liquid-glass-blur: 14px;
  }
}

@media (max-width:480px) {
  .certs-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  .orb,
  .track,
  .portrait-stage {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ===================================================================
   PORTRAIT HERO — first thing on the page. Full-bleed, cinematic,
   scroll-pinned + cursor-reactive portrait, driven by js/portrait-hero.js.

   The two source photos are pre-composited (see assets/hero) onto an
   identical dark gradient backdrop, so there is no leftover transparency
   to ever reveal a checkerboard or a hard PNG edge — the flat tone at
   each photo's own boundary matches this section's own background, so
   image and section blend with no visible seam, card or frame.

   On very wide viewports the stage caps its own width against the
   section's height (min(100%, 86dvh)) instead of stretching the photo
   edge-to-edge — a tall headshot forced across an ultra-wide screen
   crops badly (chin/hair clipped), so instead it stays well-composed
   and centered, with the matching gradient filling the rest seamlessly.
   Below that cap (tablets/phones) it's simply 100% wide — true
   full-bleed, no letterboxing.
   =================================================================== */
.portrait-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
  background: radial-gradient(120% 85% at 49% 32%, #101528 0%, #000000 78%);
  box-shadow: 0px 50px 50px 30px #000000bc;
}

.portrait-stage {
  position: absolute;
  inset: 0;
  width: min(100%, 86dvh);
  margin-inline: auto;
  overflow: hidden;
  animation: portraitBreathe 9s ease-in-out infinite;
}

@keyframes portraitBreathe {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.018);
  }
}

.portrait-glow {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 240, 255, .3), transparent 62%);
  filter: blur(54px);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.portrait-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#portraitGL {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
}

#portraitGL.is-ready {
  opacity: 1;
}

/* Slow diagonal light sweep — a thin bright band drifting across the
   frame on a long loop. Transform + opacity only, so it costs nothing
   beyond compositing (no layout/paint per frame). */
.portrait-sweep {
  position: absolute;
  inset: -25% -45%;
  background: linear-gradient(75deg,
      transparent 42%,
      rgba(122, 240, 255, .08) 47%,
      rgba(255, 255, 255, .15) 50%,
      rgba(157, 107, 255, .08) 53%,
      transparent 58%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: portraitSweep 13s ease-in-out infinite;
}

@keyframes portraitSweep {
  0% {
    transform: translate3d(-42%, -16%, 0);
    opacity: 0;
  }

  18% {
    opacity: .85;
  }

  50% {
    transform: translate3d(8%, 4%, 0);
    opacity: .95;
  }

  82% {
    opacity: .85;
  }

  100% {
    transform: translate3d(42%, 16%, 0);
    opacity: 0;
  }
}

/* Cinematic vignette — soft edge-darkening only, no border/line, so it
   reads as a graded frame rather than a card. Replaces the old
   box-shadow "frame" look. */
.portrait-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(125% 100% at 50% 40%, transparent 52%, rgba(3, 5, 13, .46) 100%);
  box-shadow:
    inset 0 10vh 12vh -9vh rgba(3, 5, 13, .55),
    inset 0 -16vh 18vh -10vh rgba(3, 5, 13, .6);
}

/* Bottom dissolve into the page background, ahead of the About section.
   Height grows on scroll via --fade-h (set from js/portrait-hero.js) for
   a soft curtain-like fade as the cinematic sequence completes. */
.portrait-fade {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: var(--fade-h, 30%);
  background: linear-gradient(to bottom, transparent, #03050d 96%);
  pointer-events: none;
}

/* 2D (no-WebGL) fallback: the neon layer is masked to a small spotlight
   around --pmx/--pmy, mirroring the shader's local-reveal behaviour. */
.portrait-fallback-neon {
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle at var(--pmx, 50%) var(--pmy, 42%), #000 0%, #000 16%, transparent 40%);
  mask-image: radial-gradient(circle at var(--pmx, 50%) var(--pmy, 42%), #000 0%, #000 16%, transparent 40%);
}

@media (prefers-reduced-motion: reduce) {
  .portrait-sweep {
    animation: none;
    opacity: 0;
  }
}