:root {
  color-scheme: dark;
  --black: #030303;
  --white: #f6f3ed;
  --muted: #b7b0aa;
  --orange: #d7d7d7;
  --cyan: #9f9f9f;
  --red: #6f6f6f;
  --line: rgba(255, 255, 255, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  transition: background 260ms ease, color 260ms ease;
}

.tech-background {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: screen;
  overflow: hidden;
}

.tech-background svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.1));
}

.cloud-network {
  animation: techFloat 16s ease-in-out infinite;
}

.chain-network {
  animation: techFloat 18s ease-in-out infinite reverse;
}

.pipeline-network {
  animation: techFloat 20s ease-in-out infinite;
}

.cloud-line,
.chain-path,
.pipeline-line,
.pipeline-box {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cloud-line {
  stroke: rgba(98, 178, 255, 0.5);
  stroke-width: 2.2;
  stroke-dasharray: 18 14;
  animation: techDash 18s linear infinite;
}

.cloud-line-soft {
  stroke: rgba(255, 255, 255, 0.34);
  animation-duration: 24s;
}

.chain-path {
  stroke: rgba(255, 255, 255, 0.48);
  stroke-width: 2;
  stroke-dasharray: 12 10;
  animation: techDash 14s linear infinite;
}

.chain-path-delay {
  stroke: rgba(255, 176, 58, 0.46);
  animation-direction: reverse;
  animation-duration: 20s;
}

.chain-node {
  fill: rgba(255, 255, 255, 0.85);
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 2.8s ease-in-out infinite;
}

.chain-node:nth-of-type(2n) {
  animation-delay: 0.6s;
}

.chain-node:nth-of-type(3n) {
  animation-delay: 1.1s;
}

.pipeline-line {
  stroke: rgba(135, 255, 188, 0.48);
  stroke-width: 2.2;
  stroke-dasharray: 4 18;
  animation: pipelineFlow 8s linear infinite;
}

.pipeline-line-delay {
  stroke: rgba(151, 121, 255, 0.46);
  animation-delay: -3s;
}

.pipeline-box {
  stroke: rgba(255, 255, 255, 0.38);
  stroke-width: 2;
  fill: rgba(255, 255, 255, 0.025);
  animation: boxGlow 4s ease-in-out infinite;
}

.site-header,
.skill-strip,
.page-social-dock {
  z-index: 20;
}

main,
.hero > *,
.content-section,
.work-page,
.project-page {
  position: relative;
  z-index: 5;
}

main {
  overflow: hidden;
}

.shooting-star-background {
  position: absolute;
  top: 100vh;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.shooting-star-background span {
  position: absolute;
  top: var(--top);
  left: -18vw;
  width: var(--length);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.32);
  opacity: 0;
  transform: rotate(16deg) translateX(0);
  animation: shootingStar var(--duration) linear infinite;
  animation-delay: var(--delay);
}

.shooting-star-background span::before {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.78);
  content: "";
  transform: translateY(-50%);
}

body.bright-mode {
  color-scheme: light;
  --black: #f4f2ed;
  --white: #070707;
  --muted: #4b4b4b;
  --orange: #1b1b1b;
  --cyan: #575757;
  --red: #777;
  --line: rgba(0, 0, 0, 0.14);
}

body::selection {
  background: #d7d7d7;
  color: #000;
}

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

.site-header {
  position: fixed;
  top: 0;
  right: -26px;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  color: var(--white);
  background: transparent;
  mix-blend-mode: normal;
  backdrop-filter: none;
}

.logo {
  margin-left: 68px;
  transform: translateY(-18px);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: lowercase;
}

.header-links {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 38px);
}

.site-header nav a {
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.site-header nav a:hover {
  color: var(--orange);
}

.header-resume {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: #050505;
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease;
}

.header-resume:hover {
  transform: translateY(-2px);
  background: var(--orange);
}

.theme-toggle {
  position: absolute;
  top: 24px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.theme-icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.theme-icon-moon {
  display: none;
}

body.bright-mode .theme-icon-sun {
  display: none;
}

body.bright-mode .theme-icon-moon {
  display: block;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
}

.skill-strip {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 18;
  width: 44px;
  overflow: hidden;
  pointer-events: none;
  border-right: 0;
  border-left: 0;
  background: transparent;
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.skill-strip-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 56px 0;
  animation: skillStripDown 82s linear infinite;
}

.skill-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  margin: 70px 0;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: #050505;
  color: var(--white);
  font-family: Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(90deg);
  white-space: nowrap;
}

@keyframes skillStripDown {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 42%, rgba(255, 255, 255, 0.12), transparent 27rem),
    radial-gradient(circle at 56% 44%, rgba(160, 160, 160, 0.08), transparent 23rem),
    #030303;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 3, 3, 0.92) 0%, rgba(3, 3, 3, 0.62) 36%, rgba(3, 3, 3, 0.06) 58%, rgba(3, 3, 3, 0.36) 100%),
    linear-gradient(180deg, rgba(3, 3, 3, 0.16), rgba(3, 3, 3, 0.94));
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  content: "";
  pointer-events: none;
  background: transparent;
}

.hero-portrait {
  position: absolute;
  top: calc(72px + 1vh);
  right: 2vw;
  z-index: 1;
  width: min(78vw, 1060px);
  height: calc(100% - 72px - 1vh);
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.02) brightness(1.13) drop-shadow(-44px 0 32px rgba(0, 0, 0, 1));
  mix-blend-mode: normal;
  opacity: 1;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 16%, rgba(0, 0, 0, 0.72) 25%, #000 34%, #000 72%, rgba(0, 0, 0, 0.6) 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 76%, transparent 100%);
  mask-composite: intersect;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 72% 40%, rgba(255, 255, 255, 0.03) 0 16%, rgba(3, 3, 3, 0.34) 42%, rgba(3, 3, 3, 0.92) 100%),
    linear-gradient(90deg, rgba(3, 3, 3, 0.98) 0%, rgba(3, 3, 3, 0.62) 42%, transparent 56%),
    linear-gradient(90deg, rgba(3, 3, 3, 0.9) 0%, rgba(3, 3, 3, 0.28) 48%, rgba(3, 3, 3, 0.74) 100%),
    linear-gradient(180deg, transparent, rgba(3, 3, 3, 0.72));
}

.hero-copy {
  position: absolute;
  top: 61%;
  left: clamp(58px, 13vw, 190px);
  z-index: 6;
  width: min(640px, 84vw);
  transform: translateY(-50%);
}

.eyebrow,
.section-kicker,
.micro-label {
  font-family: Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.72rem;
}

.mobile-break {
  display: none;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  display: grid;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(5.2rem, 14vw, 14.2rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.08em;
  text-transform: none;
}

.mission {
  position: absolute;
  right: clamp(22px, 6vw, 98px);
  bottom: clamp(42px, 7vh, 82px);
  z-index: 7;
  width: min(370px, calc(100% - 44px));
  font-family: Arial, sans-serif;
}

.mission p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.65;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 26px;
  padding: 0 0 0 18px;
  border-radius: 999px;
  background: var(--white);
  color: #050505;
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 200ms ease, background 200ms ease;
}

.contact-btn:hover {
  transform: translateY(-4px);
  background: var(--orange);
}

.contact-btn span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-right: 2px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #000;
}

.hero-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.hero-action-row .contact-btn {
  flex: 0 0 auto;
  margin-top: 0;
}

.hero-socials {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 0;
}

.hero-socials a {
  position: relative;
  display: grid;
  min-width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: transform 220ms ease, color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.hero-socials a::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.12), transparent 34%);
  opacity: 0.28;
  transition: opacity 220ms ease, transform 220ms ease;
}

.hero-socials a:hover {
  transform: translateY(-5px) scale(1.06);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  color: var(--white);
}

.hero-socials a:hover::before {
  opacity: 1;
  transform: scale(1.18);
}

.hero-socials svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.micro-label {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-size: 0.68rem;
  font-family: Arial, sans-serif;
}

.intro-line {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0;
}

.intro-line p {
  margin: 0;
}

.intro-work-line {
  padding-left: 9px;
}

.intro-line span {
  display: inline-block;
  min-width: 178px;
  color: var(--white);
}

.intro-line .typing-cursor {
  width: 2px;
  min-width: 2px;
  height: 1.05em;
  margin-left: 4px;
  background: var(--white);
  vertical-align: -0.16em;
  animation: cursorBlink 760ms steps(1) infinite;
}

.hero-stats {
  position: absolute;
  top: 32%;
  left: clamp(58px, 13vw, 190px);
  z-index: 7;
  display: flex;
  gap: clamp(28px, 5vw, 72px);
  font-family: Arial, sans-serif;
}

.hero-stats div {
  display: grid;
  gap: 4px;
}

.hero-stats strong {
  color: var(--white);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 400;
}

.hero-stats span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.side-rail {
  position: absolute;
  top: 18%;
  bottom: 11%;
  left: 30px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgba(246, 243, 237, 0.42);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.micro-label p {
  margin: 0;
}

.micro-label span {
  width: 16px;
  height: 2px;
  background: var(--orange);
}

.label-left {
  top: 27%;
  left: 32px;
}

.label-top {
  top: 28%;
  left: 47%;
}

.label-right {
  top: 27%;
  right: 32px;
}

.scroll-mark {
  position: absolute;
  right: auto;
  bottom: 24px;
  left: clamp(58px, 13vw, 190px);
  z-index: 8;
  display: inline-flex;
  width: auto;
  height: auto;
  place-items: initial;
  border: 0;
  border-radius: 0;
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  animation: none;
}

.scroll-mark::before {
  position: static;
  width: auto;
  height: auto;
  margin-right: 8px;
  border-radius: 0;
  content: "";
  background: transparent;
}

.scroll-mark span {
  transform: none;
}

.scroll-mark span::after {
  content: " +";
  color: var(--orange);
}

.content-section {
  position: relative;
  z-index: 10;
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 120px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.about-section {
  perspective: 1000px;
}

.about-section .section-kicker {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 700ms ease, opacity 700ms ease;
}

.about-copy {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)),
    rgba(0, 0, 0, 0.18);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.24);
  opacity: 0;
  overflow: hidden;
  clip-path: circle(10px at 96% 50%);
  transform: translateX(80px) scale(0.94);
  transform-origin: right center;
  transition:
    clip-path 1050ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 900ms ease,
    border-color 900ms ease,
    box-shadow 900ms ease;
}

.about-copy::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  transform: translateX(-120%);
  transition: transform 1100ms ease;
}

.about-copy::after {
  position: absolute;
  top: 50%;
  right: 4%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: "";
  background: var(--white);
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.58);
  transform: translateY(-50%);
  transition: opacity 340ms ease, transform 600ms ease;
}

.about-section.is-visible .section-kicker {
  transform: translateY(0);
  opacity: 1;
}

.about-section.is-visible .about-copy {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.34);
  clip-path: circle(145% at 96% 50%);
  opacity: 1;
  transform: translateX(0) scale(1);
}

.about-section.is-visible .about-copy::before {
  transform: translateX(120%);
}

.about-section.is-visible .about-copy::after {
  opacity: 0;
  transform: translateY(-50%) scale(0.2);
}

.section-kicker {
  margin: 0 0 18px;
  color: var(--orange);
  font-size: 0.76rem;
}

.content-section h2 {
  max-width: 960px;
  margin: 0;
  font-size: clamp(1.9rem, 3.8vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.about-copy h2 {
  max-width: 840px;
  font-size: clamp(1.55rem, 2.7vw, 3rem);
  line-height: 1.12;
}

.about-copy p {
  max-width: 960px;
  margin: 0;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: clamp(0.98rem, 1.18vw, 1.14rem);
  font-weight: 700;
  line-height: 1.72;
}

.experience-list {
  display: grid;
  gap: 18px;
}

.experience-card {
  position: relative;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.006)),
    rgba(0, 0, 0, 0.16);
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  opacity: 0;
  overflow: hidden;
  transform: translateY(34px) scale(0.98);
  transition: transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 850ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.experience-logo {
  display: block;
  width: 124px;
  height: 124px;
  margin-left: 68px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #050505;
  object-fit: cover;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

.experience-timeline {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.experience-logo-official {
  padding: 8px;
  border-radius: 50%;
  background: #f6f3ed;
  object-fit: contain;
}

.experience-logo-contain {
  padding: 8px;
  background: #f6f3ed;
  object-fit: contain;
}

.experience-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-120%);
  transition: transform 1000ms ease;
}

.experience-card.is-visible {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.experience-card.is-visible::before {
  transform: translateX(120%);
}

.experience-date {
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.4;
  text-transform: uppercase;
}

.experience-role {
  margin: 0 0 8px;
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.experience-card h3 {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 2.1vw, 2rem);
  line-height: 1.12;
  text-transform: uppercase;
}

.experience-card p {
  max-width: 860px;
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.65;
}

.experience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.experience-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.work-grid {
  display: grid;
  gap: 18px;
}

.work-tab {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(220px, 0.7fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
  min-height: 170px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.006)),
    rgba(0, 0, 0, 0.16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  opacity: 0;
  overflow: hidden;
  transform: translateY(46px) scale(0.985);
  cursor: pointer;
  transition:
    transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 780ms ease,
    border-color 780ms ease,
    box-shadow 780ms ease;
}

.work-tab::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.11), transparent);
  transform: translateX(-120%);
  transition: transform 1000ms ease;
}

.work-tab.is-visible {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.28);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.work-tab.is-active {
  border-color: rgba(246, 243, 237, 0.55);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.36);
}

.work-tab:focus-visible {
  outline: 2px solid rgba(246, 243, 237, 0.72);
  outline-offset: 4px;
}

.work-tab.is-visible::before {
  transform: translateX(120%);
}

.work-grid span {
  color: var(--orange);
  font-size: 1.15rem;
  font-weight: 900;
}

.work-grid h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  line-height: 1.15;
  text-transform: uppercase;
}

.work-grid h3 a {
  transition: color 180ms ease;
}

.work-grid h3 a:hover {
  color: var(--orange);
}

.project-title-media {
  display: grid;
  gap: 16px;
}

.project-title-media img {
  display: block;
  width: min(280px, 100%);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #030303;
  object-fit: cover;
  opacity: 0.88;
  filter: saturate(0.98) contrast(1.06);
  transition: transform 360ms ease, opacity 360ms ease, border-color 360ms ease;
}

.work-tab:hover .project-title-media img,
.work-tab.is-active .project-title-media img {
  border-color: rgba(255, 255, 255, 0.28);
  opacity: 1;
  transform: translateY(-3px) scale(1.015);
}

.work-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
}

.project-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-detail-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: #050505;
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.project-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--white);
  color: #050505;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 200ms ease, background 200ms ease;
}

.project-detail-link:hover {
  transform: translateY(-3px);
  background: var(--orange);
}

.project-page {
  min-height: 100vh;
  padding: 112px clamp(18px, 4vw, 64px) 80px;
}

.project-case-hero {
  display: grid;
  align-content: end;
  justify-items: start;
  min-height: 58vh;
  padding: clamp(54px, 8vw, 120px) 0 clamp(36px, 6vw, 74px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-bottom: 18px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-family: Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.project-back-link:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.project-case-hero h1 {
  max-width: 1180px;
  margin: 0;
  color: var(--white);
  font-size: clamp(3.4rem, 12vw, 12rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: none;
}

.project-case-hero > p:not(.section-kicker) {
  max-width: 760px;
  margin: 28px 0 0;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.6;
}

.project-case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.project-case-actions .project-detail-link {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.project-case-media {
  width: min(1180px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: 0 38px 120px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  opacity: 0;
  transform: translateY(42px) scale(0.98);
  transition: opacity 700ms ease, transform 700ms ease, border-color 700ms ease;
}

.project-case-media.is-visible {
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.project-case-media img {
  display: block;
  width: 100%;
  min-height: clamp(240px, 38vw, 520px);
  object-fit: contain;
  background: #fffdfa;
}

.project-case-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  column-gap: clamp(34px, 5vw, 78px);
  row-gap: clamp(34px, 5vw, 64px);
  max-width: 1180px;
  margin: clamp(46px, 7vw, 86px) auto 0;
}

.project-case-panel {
  display: grid;
  gap: 16px;
  align-content: start;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.project-case-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-case-panel p,
.project-case-panel ul,
.project-case-panel ol {
  display: grid;
  gap: 14px;
  margin: 0;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-weight: 700;
  line-height: 1.6;
}

.project-case-panel p {
  max-width: 820px;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

.project-case-panel ul,
.project-case-panel ol {
  padding-left: 20px;
  font-size: 1rem;
}

.project-case-overview,
.project-case-impact {
  grid-column: 1 / -1;
}

.project-case-architecture {
  grid-row: span 2;
}

.project-case-architecture img {
  display: block;
  width: 100%;
  min-height: 320px;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.view-all-projects {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 22px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--white);
  color: #050505;
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: transform 200ms ease, background 200ms ease;
}

.view-all-projects:hover {
  transform: translateY(-4px);
  background: var(--orange);
}

.skill-web-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px 28px;
}

.skill-web {
  position: relative;
  min-height: 560px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.skill-web::before {
  position: absolute;
  inset: 8%;
  z-index: 1;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-width='0.24' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 4 L50 96 M4 50 L96 50 M16 16 L84 84 M84 16 L16 84'/%3E%3Cpath d='M50 4 C56 14 65 21 84 16 C79 35 86 44 96 50 C86 56 79 65 84 84 C65 79 56 86 50 96 C44 86 35 79 16 84 C21 65 14 56 4 50 C14 44 21 35 16 16 C35 21 44 14 50 4 Z'/%3E%3Cpath d='M50 18 C55 25 62 30 74 26 C70 39 75 45 82 50 C75 55 70 61 74 74 C62 70 55 75 50 82 C45 75 38 70 26 74 C30 61 25 55 18 50 C25 45 30 39 26 26 C38 30 45 25 50 18 Z'/%3E%3Cpath d='M50 30 C54 35 59 38 66 34 C63 43 67 47 72 50 C67 53 63 57 66 66 C59 62 54 65 50 70 C46 65 41 62 34 66 C37 57 33 53 28 50 C33 47 37 43 34 34 C41 38 46 35 50 30 Z'/%3E%3Cpath d='M50 41 C52 44 55 45 59 42 C57 47 59 49 63 50 C59 51 57 53 59 58 C55 55 52 56 50 59 C48 56 45 55 41 58 C43 53 41 51 37 50 C41 49 43 47 41 42 C45 45 48 44 50 41 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: scale(0.08);
  transform-origin: center;
  transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 900ms ease;
}

.skill-web:nth-child(5) {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(620px, 100%);
}

.skill-web h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: fit-content;
  min-width: 126px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: var(--white);
  color: #050505;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: clamp(0.78rem, 1.1vw, 1rem);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.web-lines {
  position: absolute;
  inset: 12%;
  z-index: 1;
  width: 76%;
  height: 76%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.34;
  display: none;
  opacity: 0;
  transform: scale(0.08);
  transform-origin: center;
  transition: transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 900ms ease;
}

.skill-web span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  max-width: 145px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: #050505;
  color: var(--white);
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  transition:
    top 1050ms cubic-bezier(0.2, 0.8, 0.2, 1),
    left 1050ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 1050ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 700ms ease,
    border-color 240ms ease,
    color 240ms ease;
}

.skill-web.is-visible .web-lines {
  opacity: 1;
  transform: scale(1);
}

.skill-web.is-visible::before {
  opacity: 0.78;
  transform: scale(1);
}

.skill-web.is-visible span {
  top: var(--y);
  left: var(--x);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.skill-web span:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: #111;
  color: var(--white);
}

.contact-section {
  min-height: 70vh;
}

.contact-socials {
  position: absolute;
  right: 34px;
  bottom: 72px;
  display: flex;
  gap: 8px;
}

.contact-socials a {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: transform 220ms ease, color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.contact-socials a:hover {
  transform: translateY(-5px) scale(1.06);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  color: var(--white);
}

.contact-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.work-page {
  padding-top: 96px;
}

.work-page-hero {
  padding-bottom: 70px;
}

.work-page-hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.work-page-hero p {
  max-width: 680px;
  margin: 28px 0 0;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
}

.page-social-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  gap: 8px;
}

.page-social-dock a {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: transform 220ms ease, color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.page-social-dock a:hover {
  transform: translateY(-5px) scale(1.06);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  color: var(--white);
}

.page-social-dock svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

body.bright-mode::selection {
  background: #111;
  color: #fff;
}

body.bright-mode .tech-background {
  opacity: 0.2;
  mix-blend-mode: multiply;
  filter: invert(1) saturate(0.65);
}

body.bright-mode .shooting-star-background span {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.42), transparent);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}

body.bright-mode .shooting-star-background span::before {
  background: rgba(0, 0, 0, 0.54);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
}

body.bright-mode .site-header {
  color: #070707;
}

body.bright-mode .header-resume,
body.bright-mode .view-all-projects,
body.bright-mode .project-detail-link,
body.bright-mode .contact-btn {
  background: #070707;
  color: #f4f2ed;
}

body.bright-mode .header-resume:hover,
body.bright-mode .view-all-projects:hover,
body.bright-mode .project-detail-link:hover,
body.bright-mode .contact-btn:hover {
  background: #303030;
}

body.bright-mode .theme-toggle {
  border-color: rgba(0, 0, 0, 0.18);
  color: #070707;
}

body.bright-mode .theme-toggle:hover {
  border-color: rgba(0, 0, 0, 0.34);
  background: rgba(0, 0, 0, 0.045);
}

body.bright-mode .hero {
  background:
    radial-gradient(circle at 76% 42%, rgba(0, 0, 0, 0.09), transparent 27rem),
    radial-gradient(circle at 56% 44%, rgba(80, 80, 80, 0.06), transparent 23rem),
    #f4f2ed;
}

body.bright-mode .hero::before {
  background:
    linear-gradient(90deg, rgba(244, 242, 237, 0.9) 0%, rgba(244, 242, 237, 0.54) 34%, rgba(244, 242, 237, 0) 55%, rgba(244, 242, 237, 0.16) 100%),
    linear-gradient(180deg, rgba(244, 242, 237, 0.06), rgba(244, 242, 237, 0.78));
}

body.bright-mode .hero-portrait {
  filter: saturate(1.34) contrast(1.26) brightness(1.16) drop-shadow(-12px 0 12px rgba(244, 242, 237, 0.22));
  opacity: 1;
  mix-blend-mode: normal;
}

body.bright-mode .skill-strip span,
body.bright-mode .skill-web span,
body.bright-mode .project-detail-tags span {
  border-color: rgba(0, 0, 0, 0.18);
  background: #f4f2ed;
  color: #070707;
}

body.bright-mode .skill-web::before {
  filter: invert(1);
}

body.bright-mode .skill-web h3 {
  border-color: rgba(0, 0, 0, 0.18);
  background: #070707;
  color: #f4f2ed;
}

body.bright-mode .about-copy,
body.bright-mode .work-tab,
body.bright-mode .experience-card {
  border-color: rgba(0, 0, 0, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.16)),
    rgba(255, 255, 255, 0.2);
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.1);
}

body.bright-mode .experience-logo {
  border-color: rgba(0, 0, 0, 0.14);
  background: #f4f2ed;
}

body.bright-mode .about-section.is-visible .about-copy,
body.bright-mode .work-tab.is-visible,
body.bright-mode .experience-card.is-visible {
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.14);
}

body.bright-mode .work-tab.is-active {
  border-color: rgba(0, 0, 0, 0.46);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.2);
}

body.bright-mode .about-copy p,
body.bright-mode .work-grid p,
body.bright-mode .experience-card p,
body.bright-mode .work-page-hero p {
  color: #4b4b4b;
}

body.bright-mode .project-title-media img {
  border-color: rgba(0, 0, 0, 0.14);
  background: #f4f2ed;
  filter: saturate(1.04) contrast(1.04);
}

body.bright-mode .work-tab:hover .project-title-media img,
body.bright-mode .work-tab.is-active .project-title-media img {
  border-color: rgba(0, 0, 0, 0.28);
}

body.bright-mode .project-case-hero {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.bright-mode .project-case-hero h1 {
  color: #070707;
}

body.bright-mode .project-back-link {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.04);
  color: #070707;
}

body.bright-mode .project-back-link:hover {
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.08);
}

body.bright-mode .project-case-hero > p:not(.section-kicker),
body.bright-mode .project-case-panel ul {
  color: #4b4b4b;
}

body.bright-mode .project-case-media {
  border-color: rgba(0, 0, 0, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    rgba(244, 242, 237, 0.64);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.12);
}

body.bright-mode .project-case-media.is-visible {
  border-color: rgba(0, 0, 0, 0.22);
}

body.bright-mode .project-case-media img,
body.bright-mode .project-case-architecture img {
  border-color: rgba(0, 0, 0, 0.12);
  background: #f4f2ed;
  filter: saturate(1.04) contrast(1.04);
}

body.bright-mode .page-social-dock a,
body.bright-mode .hero-socials a,
body.bright-mode .contact-socials a {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.16);
  color: #303030;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cursorBlink {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }
}

@keyframes techDash {
  to {
    stroke-dashoffset: -220;
  }
}

@keyframes pipelineFlow {
  to {
    stroke-dashoffset: -120;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

@keyframes boxGlow {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.9;
  }
}

@keyframes techFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -18px, 0);
  }
}

@keyframes shootingStar {
  0% {
    opacity: 0;
    transform: rotate(16deg) translateX(0);
  }

  8% {
    opacity: 0.75;
  }

  78% {
    opacity: 0.28;
  }

  100% {
    opacity: 0;
    transform: rotate(16deg) translateX(145vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-network,
  .chain-network,
  .pipeline-network,
  .cloud-line,
  .chain-path,
  .pipeline-line,
  .pipeline-box,
  .chain-node,
  .shooting-star-background span {
    animation: none;
  }
}

@media (max-width: 900px) {
  .skill-strip {
    display: none;
  }

  .site-header {
    right: 0;
    padding: 18px 18px;
  }

  .theme-toggle {
    top: 18px;
    left: 18px;
  }

  .logo {
    margin-left: 48px;
  }

  .site-header nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px;
  }

  .header-links {
    gap: 8px;
  }

  .hero-portrait {
    width: 100%;
    opacity: 0.72;
  }

  .mission {
    right: 20px;
    bottom: 26px;
    width: min(420px, calc(100% - 40px));
  }

  .hero-action-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-socials {
    flex-wrap: wrap;
  }

  .contact-socials {
    position: static;
    margin-top: 28px;
  }

  .hero-copy {
    top: 52%;
    left: 44px;
    bottom: auto;
  }

  .hero-stats {
    left: 44px;
  }

  .scroll-mark {
    left: 44px;
  }

  .side-rail {
    display: none;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-tab {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .experience-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .experience-logo {
    width: 96px;
    height: 96px;
    margin-left: 0;
  }

  .skill-web-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .skill-web:nth-child(5) {
    width: 100%;
  }

  .project-page {
    padding: 96px 18px 56px;
  }

  .project-case-hero {
    min-height: 48vh;
  }

  .project-case-layout {
    grid-template-columns: 1fr;
  }

  .project-case-architecture {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .site-header {
    right: 0;
    align-items: flex-start;
    padding: 14px 16px 10px;
    gap: 10px;
  }

  .theme-toggle {
    top: 72px;
    left: 18px;
    width: 42px;
    height: 42px;
  }

  .logo {
    margin-left: 0;
    transform: none;
    font-size: 0.92rem;
  }

  .header-links {
    justify-items: end;
    max-width: calc(100vw - 124px);
    gap: 7px;
  }

  .site-header nav {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 7px;
    max-width: 100%;
  }

  .site-header nav a {
    font-size: 0.6rem;
    line-height: 1;
    white-space: nowrap;
  }

  .header-resume {
    min-height: 32px;
    padding: 0 13px;
    font-size: 0.62rem;
  }

  .hero {
    min-height: 100svh;
  }

  .hero::before {
    background:
      linear-gradient(90deg, rgba(3, 3, 3, 0.9) 0%, rgba(3, 3, 3, 0.52) 42%, rgba(3, 3, 3, 0.12) 72%, rgba(3, 3, 3, 0.42) 100%),
      linear-gradient(180deg, rgba(3, 3, 3, 0.08), rgba(3, 3, 3, 0.9));
  }

  .hero-portrait {
    top: 98px;
    right: -22vw;
    width: 102vw;
    height: 56vh;
    opacity: 0.84;
    object-position: 70% top;
    filter: saturate(1.14) contrast(1.08) brightness(1.32) drop-shadow(-20px 0 24px rgba(0, 0, 0, 0.9));
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 10%, rgba(0, 0, 0, 0.88) 22%, #000 42%, #000 76%, rgba(0, 0, 0, 0.56) 92%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 7%, #000 82%, transparent 100%);
  }

  .hero-vignette {
    background:
      radial-gradient(circle at 62% 31%, rgba(255, 255, 255, 0.08) 0 14%, rgba(3, 3, 3, 0.08) 34%, rgba(3, 3, 3, 0.78) 100%),
      linear-gradient(90deg, rgba(3, 3, 3, 0.86) 0%, rgba(3, 3, 3, 0.42) 48%, rgba(3, 3, 3, 0.26) 100%),
      linear-gradient(180deg, transparent 0%, rgba(3, 3, 3, 0.82) 84%, rgba(3, 3, 3, 0.96) 100%);
  }

  h1 {
    font-size: clamp(3.4rem, 18vw, 5.4rem);
  }

  .hero-copy {
    top: 45.5%;
    left: 20px;
    width: calc(100vw - 40px);
  }

  .eyebrow {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .mobile-break {
    display: block;
  }

  .intro-line {
    margin-top: 12px;
    font-size: 0.96rem;
    line-height: 1.35;
  }

  .intro-work-line {
    display: block;
    min-height: 1.4em;
    padding-left: 7px;
  }

  .hero-stats {
    left: 18px;
    gap: 24px;
  }

  .mission {
    right: auto;
    bottom: 58px;
    left: 20px;
    width: calc(100vw - 40px);
    font-size: 0.84rem;
  }

  .mission p {
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .contact-btn {
    min-height: 48px;
    padding: 0 22px;
    font-size: 0.72rem;
  }

  .contact-btn span {
    width: 46px;
    height: 46px;
    margin-right: -18px;
  }

  .hero-socials {
    gap: 8px;
  }

  .hero-socials a {
    width: 46px;
    height: 46px;
  }

  .scroll-mark {
    bottom: 18px;
    left: 20px;
    font-size: 0.64rem;
  }

  .skill-web {
    display: block;
    min-height: 430px;
    padding-top: 0;
    overflow: visible;
  }

  .skill-web::before {
    inset: 24px 0;
    width: auto;
    height: auto;
    background-size: contain;
  }

  .web-lines {
    inset: 24px 0;
    width: 100%;
    height: calc(100% - 48px);
  }

  .skill-web h3 {
    top: 50%;
    left: 50%;
    min-width: 104px;
    max-width: 148px;
    padding: 7px 9px;
    font-size: 0.64rem;
    transform: translate(-50%, -50%) scale(1);
  }

  .skill-web span,
  .skill-web.is-visible span {
    position: absolute;
    top: var(--y);
    left: var(--x);
    max-width: 92px;
    padding: 5px 7px;
    font-size: 0.54rem;
    line-height: 1.1;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    white-space: normal;
  }

  body.bright-mode .hero-portrait {
    filter: saturate(1.22) contrast(1.12) brightness(1.2) drop-shadow(-14px 0 20px rgba(244, 242, 237, 0.18));
    opacity: 0.92;
  }

  body.bright-mode .hero-vignette {
    background:
      radial-gradient(circle at 62% 31%, rgba(0, 0, 0, 0.04) 0 14%, rgba(244, 242, 237, 0.05) 34%, rgba(244, 242, 237, 0.74) 100%),
      linear-gradient(90deg, rgba(244, 242, 237, 0.82) 0%, rgba(244, 242, 237, 0.36) 48%, rgba(244, 242, 237, 0.18) 100%),
      linear-gradient(180deg, transparent 0%, rgba(244, 242, 237, 0.78) 84%, rgba(244, 242, 237, 0.95) 100%);
  }

  .project-case-hero h1 {
    font-size: clamp(3.1rem, 18vw, 5rem);
  }

  .project-case-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-case-media img,
  .project-case-architecture img {
    min-height: 220px;
  }
}