:root {
  --bg: #03070c;
  --bg-soft: #07111b;
  --panel: rgba(0, 112, 242, 0.04);
  --panel-strong: rgba(0, 112, 242, 0.07);
  --text: #f5f6f7;
  --muted: #8396a8;
  --muted-strong: #a9b4be;
  --line: rgba(137, 209, 255, 0.1);
  --line-strong: rgba(137, 209, 255, 0.18);
  --sap-blue: #0070f2;
  --sap-blue-deep: #0057d2;
  --sap-navy: #00144a;
  --sap-blue-light: #89d1ff;
  --blue: var(--sap-blue);
  --violet: var(--sap-blue-deep);
  --cyan: var(--sap-blue-light);
  --max: 1240px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
p, h1, h2, h3, dl, dd { margin-top: 0; }
section { scroll-margin-top: 92px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 18px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  color: #050507;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

.ambient { position: fixed; inset: 0; z-index: -5; overflow: hidden; pointer-events: none; }
.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(560px circle at var(--pointer-x, 76%) var(--pointer-y, 18%), rgba(0, 112, 242, 0.075), transparent 72%);
  transition: opacity 0.35s ease;
}
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0 68%, rgba(3, 7, 12, 0.94) 100%);
}
.ambient-glow { position: absolute; border-radius: 50%; filter: blur(2px); }
.glow-a {
  width: 800px;
  height: 800px;
  right: -250px;
  top: -390px;
  background: radial-gradient(circle at 48% 48%, rgba(0, 87, 210, 0.27), rgba(0, 64, 176, 0.08) 42%, transparent 70%);
  animation: glowDriftA 11s ease-in-out infinite alternate;
}
.glow-b {
  width: 670px;
  height: 670px;
  left: -430px;
  top: 520px;
  background: radial-gradient(circle, rgba(27, 144, 255, 0.1), rgba(0, 87, 210, 0.035) 48%, transparent 70%);
  animation: glowDriftB 14s ease-in-out infinite alternate;
}
.ambient-grid {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image: linear-gradient(rgba(255,255,255,0.021) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.021) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(to bottom, #000 0 56%, transparent 92%);
}

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
  animation: navEnter 0.9s var(--ease-out) both;
}
.site-header.scrolled {
  background: rgba(3, 7, 12, 0.82);
  border-color: var(--line);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.nav {
  width: min(var(--max), calc(100% - 48px));
  height: 78px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.brand { min-height: 44px; justify-self: start; display: flex; align-items: center; gap: 10px; }
.brand-mark { font-weight: 720; letter-spacing: -0.04em; }
.brand i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.brand-name { color: #c0c4cd; font-size: 15.5px; letter-spacing: 0.02em; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a, .quiet-contact { position: relative; min-height: 44px; display: inline-flex; align-items: center; color: #aeb3be; font-size: 16px; font-weight: 520; transition: color 0.2s ease; }
.nav-links a::after, .quiet-contact::after {
  content: "";
  position: absolute;
  height: 1px;
  left: 0;
  right: 100%;
  bottom: -8px;
  background: currentColor;
  transition: right 0.22s ease;
}
.nav-links a:hover, .nav-links a[aria-current="true"], .quiet-contact:hover { color: #fff; }
.nav-links a:hover::after, .nav-links a[aria-current="true"]::after, .quiet-contact:hover::after { right: 0; }
.quiet-contact { justify-self: end; color: #e5e7ec; }
.quiet-contact span { margin-left: 7px; color: var(--blue); }
.menu-button { display: none; }
.mobile-menu { display: none; }

.hero {
  position: relative;
  width: min(var(--max), calc(100% - 56px));
  min-height: 750px;
  margin: 0 auto;
  padding: 122px 0 62px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.personal-context { margin-bottom: 20px; display: flex; align-items: center; gap: 12px; color: #c0c5cf; font-size: 12px; letter-spacing: 0.08em; }
.personal-context i { width: 26px; height: 1px; background: rgba(255,255,255,0.28); }
.eyebrow { color: #8f95a2; font-size: 11px; font-weight: 650; letter-spacing: 0.2em; }
.hero-title {
  margin: 18px 0 20px;
  overflow: hidden;
  font-size: clamp(82px, 10.8vw, 152px);
  line-height: 0.8;
  letter-spacing: -0.085em;
  font-weight: 680;
}
.hero-title span, .hero-title strong { display: block; }
.hero-title span { margin: 0 0 22px 7px; color: #a4a9b4; font-size: 0.17em; font-weight: 520; line-height: 1; letter-spacing: 0.03em; }
.hero-title strong { color: #f7f8fb; font-weight: inherit; }
.role { margin-bottom: 26px; }
.role span {
  display: inline-block;
  padding-bottom: 8px;
  color: transparent;
  background: linear-gradient(100deg, #89d1ff 0%, #1b90ff 48%, #0070f2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border-bottom: 1px solid rgba(0, 112, 242, 0.38);
  font-size: clamp(21px, 2.8vw, 38px);
  font-weight: 560;
  letter-spacing: -0.035em;
}
.hero-intro { max-width: 620px; margin-bottom: 30px; color: #a5aab5; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.primary-action, .secondary-action { font-size: 14px; }
.primary-action {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.42);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.primary-action span { color: var(--cyan); }
.primary-action:hover { color: var(--cyan); border-color: var(--cyan); }
.secondary-action { color: #858b98; transition: color 0.2s ease; }
.secondary-action:hover { color: #fff; }

.identity-visual {
  position: relative;
  width: 100%;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 4px 42px 4px 42px;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 112, 242, 0.22), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(77, 177, 255, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(5, 20, 38, 0.96), rgba(3, 9, 15, 0.84));
  box-shadow: 0 38px 110px rgba(0,0,0,0.38);
  isolation: isolate;
  will-change: transform;
}
.identity-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.36;
  background-image: linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(135deg, transparent 5%, #000 55%, transparent 98%);
}
.identity-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24%;
  z-index: 1;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(137,209,255,0.07), rgba(255,255,255,0.1), transparent);
  filter: blur(1px);
  animation: visualScan 9s ease-in-out infinite;
}
.visual-top, .visual-bottom { position: absolute; left: 24px; right: 24px; z-index: 3; display: flex; justify-content: space-between; align-items: center; color: #8c92a0; font-size: 9px; letter-spacing: 0.16em; }
.visual-top { top: 24px; }
.visual-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--sap-blue-light); box-shadow: 0 0 14px rgba(137,209,255,0.55); }
.visual-bottom { bottom: 24px; letter-spacing: 0.05em; }
.monogram {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  z-index: 2;
  font-size: clamp(180px, 23vw, 300px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.09em;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 20px 80px rgba(0, 112, 242, 0.22);
  animation: monogramFloat 7s ease-in-out infinite;
}
.visual-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(137, 209, 255, 0.24); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 390px; height: 390px; animation: orbitOne 34s linear infinite; }
.orbit-two { width: 280px; height: 440px; opacity: 0.38; animation: orbitTwo 42s linear infinite reverse; }
.hero-index { position: absolute; right: -2px; bottom: 28px; color: rgba(255,255,255,0.22); font-size: 10px; letter-spacing: 0.18em; }
.scroll-cue { position: absolute; left: 0; bottom: 24px; display: flex; align-items: center; gap: 14px; color: #656b77; font-size: 9px; letter-spacing: 0.13em; }
.scroll-cue i { position: relative; width: 44px; height: 1px; overflow: hidden; background: rgba(255,255,255,0.15); }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); transform: translateX(-100%); animation: cueFlow 2.2s ease-in-out infinite; }

.quick-facts {
  position: relative;
  overflow: hidden;
  width: min(var(--max), calc(100% - 56px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(0,112,242,0.035), transparent 26% 74%, rgba(0,87,210,0.025));
}
.quick-facts::before { content: ""; position: absolute; left: 0; top: 0; width: 84px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); box-shadow: 0 0 14px rgba(137,209,255,0.38); }
.quick-facts > div { min-height: 108px; padding: 22px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; transition: background 0.35s ease, transform 0.5s var(--ease-out); }
.quick-facts > div:last-child { border-right: 0; }
.quick-facts > div:hover { background: rgba(255,255,255,0.025); }
.fact-intro { padding-left: 0 !important; }
.fact-intro span, .fact span { color: #7f8592; font-size: 10px; letter-spacing: 0.13em; }
.fact-intro p { max-width: 280px; margin: 0; color: #c7cbd3; font-size: 13px; line-height: 1.6; }
.fact strong, .fact-intro strong { font-size: 20px; font-weight: 520; letter-spacing: -0.03em; }

.section { width: min(var(--max), calc(100% - 56px)); margin: 0 auto; padding: 150px 0; }
.section-kicker { display: flex; align-items: center; gap: 17px; margin-bottom: 76px; color: #777e8b; font-size: 10px; letter-spacing: 0.18em; }
.section-kicker span { color: #fff; }
.section-kicker p { margin: 0; }
.section-kicker::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.section-heading { margin-bottom: 62px; display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.section-heading h2 { margin: 0; font-size: clamp(52px, 7vw, 94px); line-height: 0.92; letter-spacing: -0.066em; }
.section-heading p { max-width: 390px; margin: 0; color: #8e94a0; font-size: 15px; line-height: 1.75; }

.profile-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr); gap: 9vw; align-items: end; }
.profile h2 { margin: 0; font-size: clamp(54px, 7.2vw, 100px); line-height: 1; letter-spacing: -0.065em; font-weight: 620; }
.profile h2 span { color: #5e6470; }
.profile-copy > p { margin-bottom: 34px; color: #a4a9b4; font-size: 16px; line-height: 1.9; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-list span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 100px; color: #aeb3be; font-size: 11px; }

.work { width: auto; max-width: none; padding-left: max(28px, calc((100vw - var(--max)) / 2)); padding-right: max(28px, calc((100vw - var(--max)) / 2)); background: #eceef3; color: #08090c; border-radius: 46px 46px 0 0; }
.work .section-kicker { color: #6c717c; }
.work .section-kicker span { color: #101116; }
.work .section-kicker::after { background: rgba(10,11,15,0.14); }
.work .section-heading p { color: #686e78; }
.featured-case { overflow: hidden; display: grid; grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.22fr); border-radius: 28px; background: #101116; color: #f5f6fa; }
.case-copy { min-height: 650px; padding: 44px; display: flex; flex-direction: column; align-items: stretch; }
.case-label { display: flex; justify-content: space-between; align-items: center; color: #858c99; font-size: 9px; letter-spacing: 0.14em; }
.case-label i, .case-card-copy i { padding: 6px 8px; border: 1px solid rgba(255,255,255,0.14); border-radius: 100px; color: #8c93a0; font-style: normal; letter-spacing: 0.04em; }
.case-copy h3 { margin: auto 0 22px; font-size: clamp(38px, 4.4vw, 64px); line-height: 0.98; letter-spacing: -0.055em; }
.case-copy > p { margin-bottom: 38px; color: #989fac; line-height: 1.75; }
.case-meta { margin: 0 0 34px; border-top: 1px solid var(--line); }
.case-meta div { padding: 15px 0; display: grid; grid-template-columns: 80px 1fr; border-bottom: 1px solid var(--line); }
.case-meta dt { color: #6f7580; font-size: 10px; }
.case-meta dd { margin: 0; color: #c0c5cf; font-size: 12px; }
.case-toggle { width: 100%; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; border: 0; border-bottom: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; cursor: pointer; text-align: left; }
.case-toggle i { color: var(--cyan); font-size: 20px; font-style: normal; font-weight: 300; transition: transform 0.25s ease; }
.case-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.case-visual { position: relative; min-height: 650px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 82% 12%, rgba(137,209,255,0.24) 0%, transparent 34%), radial-gradient(circle at 0% 100%, rgba(0,112,242,0.28) 0%, transparent 44%), linear-gradient(145deg, #00144a 0%, #0040b0 52%, #0070f2 100%); clip-path: inset(0 0 0 14%); transform: scale(1.035); transition: clip-path 1.15s var(--ease-out), transform 1.15s var(--ease-out); }
.featured-case.is-visible .case-visual { clip-path: inset(0); transform: scale(1); }
.case-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.13), transparent 30% 70%, rgba(255,255,255,0.08)); }
.interface-frame { position: relative; z-index: 2; width: min(72%, 560px); aspect-ratio: 0.82; overflow: hidden; border: 1px solid rgba(255,255,255,0.34); border-radius: 28px; background: rgba(2,10,22,0.82); box-shadow: 0 44px 110px rgba(0, 42, 134, 0.34); transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotateZ(4deg) translateY(var(--case-parallax, 0px)); transition: transform 0.28s ease-out; backdrop-filter: blur(20px); will-change: transform; }
.frame-bar { height: 54px; padding: 0 19px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.frame-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.44); }
.frame-bar span { margin-left: auto; color: rgba(255,255,255,0.44); font-size: 8px; letter-spacing: 0.12em; }
.frame-content { padding: 42px 34px; }
.frame-eyebrow { color: rgba(255,255,255,0.46); font-size: 8px; letter-spacing: 0.13em; }
.frame-content strong { display: block; margin: 66px 0 50px; font-size: clamp(36px, 5vw, 70px); line-height: 0.9; letter-spacing: -0.06em; }
.frame-lines { display: grid; gap: 9px; }
.frame-lines i { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.13); }
.frame-lines i:nth-child(2) { width: 82%; }
.frame-lines i:nth-child(3) { width: 58%; }
.frame-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.frame-grid span { height: 80px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,0.11), transparent); }
.signal-pill { position: absolute; z-index: 4; padding: 11px 14px; border: 1px solid rgba(255,255,255,0.36); border-radius: 100px; background: rgba(255,255,255,0.15); color: #fff; font-size: 8px; letter-spacing: 0.14em; backdrop-filter: blur(14px); }
.pill-one { left: 6%; top: 17%; }
.pill-two { right: 5%; bottom: 14%; }
.case-detail { grid-column: 1 / -1; padding: 36px 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.055); border-top: 1px solid var(--line); }
.case-detail[hidden] { display: none; }
.case-detail div { padding: 12px 30px; border-right: 1px solid var(--line); }
.case-detail div:first-child { padding-left: 0; }
.case-detail div:last-child { border-right: 0; }
.case-detail span { color: #7f8692; font-size: 9px; letter-spacing: 0.12em; }
.case-detail p { margin: 22px 0 0; color: #aab0bb; font-size: 13px; line-height: 1.75; }
.case-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.case-card { overflow: hidden; border-radius: 24px; background: #fff; transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 28px 70px rgba(43, 47, 70, 0.13); }
.case-card-visual { position: relative; height: 390px; overflow: hidden; }
.case-card-visual > span { position: absolute; left: 25px; top: 24px; z-index: 2; color: rgba(255,255,255,0.72); font-size: 10px; letter-spacing: 0.13em; }
.case-card-visual i, .case-card-visual b { position: absolute; display: block; border-radius: 50%; }
.case-card-visual i { width: 250px; height: 250px; left: calc(50% - 125px); top: calc(50% - 125px); border: 1px solid rgba(255,255,255,0.38); box-shadow: 0 0 0 45px rgba(255,255,255,0.055), 0 0 0 90px rgba(255,255,255,0.035); }
.case-card-visual b { width: 74px; height: 74px; left: calc(50% - 37px); top: calc(50% - 37px); background: radial-gradient(circle at 35% 28%, #fff, #89d1ff 18%, #0070f2 50%, #00144a 82%); box-shadow: 0 0 46px rgba(0,112,242,0.48); }
.visual-blue { background: linear-gradient(145deg, #020914, #00144a 58%, #0057d2); }
.visual-violet { background: radial-gradient(circle at 25% 80%, rgba(137,209,255,0.55), transparent 42%), linear-gradient(145deg, #020914, #002a86 56%, #0070f2); }
.case-card-copy { padding: 28px 30px 32px; }
.case-card-copy > div { display: flex; justify-content: space-between; align-items: center; color: #777d87; font-size: 9px; letter-spacing: 0.1em; }
.case-card-copy i { border-color: rgba(0,0,0,0.12); color: #888e98; }
.case-card-copy h3 { margin: 34px 0 8px; font-size: 29px; letter-spacing: -0.045em; }
.case-card-copy p { margin: 0; color: #737983; font-size: 12px; }

.experience { padding-bottom: 160px; }
.career-list { --career-progress: 0%; position: relative; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.career-list::before { content: ""; position: absolute; left: 25px; top: 0; width: 1px; height: var(--career-progress); background: linear-gradient(to bottom, var(--sap-blue-light), var(--sap-blue)); box-shadow: 0 0 14px rgba(0,112,242,0.36); transition: height 0.15s linear; }
.career-list li { position: relative; min-height: 142px; padding: 34px 0; display: grid; grid-template-columns: 56px 170px minmax(240px, 1fr) minmax(260px, 0.9fr) auto; align-items: center; gap: 26px; }
.career-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.05s var(--ease-out) 0.16s; }
.career-list li.is-visible::after { transform: scaleX(1); }
.career-number { color: #545a66; font-size: 10px; }
.career-time { color: #7e8490; font-size: 11px; letter-spacing: 0.06em; }
.career-title h3 { margin: 0 0 9px; font-size: 22px; letter-spacing: -0.03em; }
.career-title p, .career-summary { margin: 0; color: #808692; font-size: 12px; line-height: 1.7; }
.pending { padding: 7px 9px; border: 1px solid var(--line); border-radius: 100px; color: #686e7a; font-size: 9px; }
.credentials { margin-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.credentials > div { min-height: 190px; padding: 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.credentials > div:last-child { border-right: 0; }
.credentials span { color: #686e7a; font-size: 9px; letter-spacing: 0.14em; }
.credentials strong { margin-top: auto; font-size: 21px; font-weight: 540; }
.credentials p { margin: 8px 0 0; color: #777d89; font-size: 11px; }

/* Expanded web flow: each resume chapter gets its own scroll rhythm. */
.resume-layout {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  isolation: isolate;
}
.resume-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px circle at 4% 14%, rgba(27, 144, 255, 0.065), transparent 70%),
    radial-gradient(620px circle at 95% 78%, rgba(0, 87, 210, 0.055), transparent 72%);
}
.resume-layout .section {
  position: relative;
  width: min(var(--max), calc(100% - 56px));
  min-width: 0;
  margin: 0 auto;
  padding: 96px 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.resume-layout .section-kicker { margin-bottom: 46px; }
.resume-layout .section-heading { margin-bottom: 48px; align-items: flex-end; }
.resume-layout .section-heading h2 { font-size: clamp(52px, 6vw, 78px); }
.resume-layout .section-heading p { max-width: 360px; font-size: 14px; line-height: 1.7; }

.resume-layout .profile { min-height: 540px; }
.resume-layout .profile::after {
  content: "PROFILE / PERSONAL DATA";
  position: absolute;
  right: 0;
  bottom: 66px;
  color: rgba(137, 151, 178, 0.32);
  font-size: 8px;
  letter-spacing: 0.19em;
  writing-mode: vertical-rl;
}
.resume-layout .profile-grid { grid-template-columns: minmax(0, 1.05fr) minmax(350px, 0.95fr); gap: clamp(64px, 9vw, 118px); align-items: center; }
.resume-layout .profile h2 { font-size: clamp(56px, 6.2vw, 82px); line-height: 0.98; }
.resume-layout .profile-copy {
  position: relative;
  min-height: 270px;
  padding: 54px 34px 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px 28px 4px 28px;
  background:
    linear-gradient(135deg, rgba(0,112,242,0.065), transparent 46%),
    rgba(255,255,255,0.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 90px rgba(0,0,0,0.16);
}
.resume-layout .profile-copy::before {
  content: "PERSONAL DATA / 01";
  position: absolute;
  left: 34px;
  top: 23px;
  color: #788190;
  font-size: 8px;
  letter-spacing: 0.18em;
}
.resume-layout .profile-copy::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 39px;
  height: 1px;
  background: linear-gradient(90deg, rgba(137,209,255,0.4), rgba(255,255,255,0.05) 48%, transparent);
}
.resume-layout .profile-copy > p { margin-bottom: 26px; font-size: 15px; line-height: 1.85; }
.resume-layout .skill-list { gap: 8px; }
.resume-layout .skill-list span { padding: 9px 12px; font-size: 10px; background: rgba(255,255,255,0.02); }

.resume-layout .work {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 92px max(28px, calc((100vw - var(--max)) / 2));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 38px;
  background:
    radial-gradient(700px circle at 86% 18%, rgba(0, 112, 242, 0.09), transparent 68%),
    linear-gradient(180deg, rgba(6,17,29,0.98), rgba(3,9,16,0.99));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 55px 140px rgba(0,0,0,0.24);
}
.resume-layout .work::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image: linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.resume-layout .work .section-kicker { color: #777e8b; }
.resume-layout .work .section-kicker span { color: #fff; }
.resume-layout .work .section-kicker::after { background: var(--line); }
.resume-layout .work .section-heading p { color: #9299a6; }
.resume-layout .featured-case { grid-template-columns: minmax(330px, 0.88fr) minmax(0, 1.12fr); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; background: rgba(5,7,12,0.82); box-shadow: 0 34px 100px rgba(0,0,0,0.25); }
.resume-layout .case-copy { min-height: 500px; padding: 38px; }
.resume-layout .case-copy h3 { margin: auto 0 20px; font-size: clamp(38px, 4vw, 56px); }
.resume-layout .case-copy > p { margin-bottom: 28px; font-size: 14px; line-height: 1.72; }
.resume-layout .case-meta { margin-bottom: 24px; }
.resume-layout .case-meta div { padding: 12px 0; grid-template-columns: 72px 1fr; }
.resume-layout .case-meta dt { font-size: 9px; }
.resume-layout .case-meta dd { font-size: 11px; }
.resume-layout .case-toggle { padding: 13px 0; font-size: 12px; }
.resume-layout .case-visual { min-height: 500px; }
.resume-layout .case-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.26;
  background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
.resume-layout .interface-frame { width: min(66%, 420px); border-radius: 22px; }
.resume-layout .frame-bar { height: 46px; padding: 0 16px; }
.resume-layout .frame-content { padding: 34px 28px; }
.resume-layout .frame-content strong { margin: 50px 0 38px; font-size: clamp(40px, 4.5vw, 62px); }
.resume-layout .frame-grid { margin-top: 38px; gap: 8px; }
.resume-layout .frame-grid span { height: 62px; border-radius: 10px; }
.resume-layout .signal-pill { padding: 10px 13px; font-size: 8px; }
.resume-layout .case-grid { margin-top: 18px; gap: 18px; }
.resume-layout .case-grid.one-card { grid-template-columns: 1fr; }
.resume-layout .case-grid.one-card .case-card { display: grid; grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr); min-height: 260px; }
.resume-layout .case-grid.one-card .case-card-visual { height: 100%; min-height: 260px; }
.resume-layout .case-grid.one-card .case-card-copy { display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; }
.resume-layout .case-grid.one-card .case-card-copy h3 { margin: 42px 0 8px; font-size: 30px; }
.resume-layout .case-card { display: block; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); border-radius: 22px; background: rgba(255,255,255,0.045); color: var(--text); }
.resume-layout .case-card:hover { transform: translateY(-3px); box-shadow: 0 26px 72px rgba(0,0,0,0.26); }
.resume-layout .case-card-visual { height: 190px; }
.resume-layout .case-card-visual > span { left: 22px; top: 20px; font-size: 9px; }
.resume-layout .case-card-visual i { width: 150px; height: 150px; left: calc(50% - 75px); top: calc(50% - 75px); box-shadow: 0 0 0 28px rgba(255,255,255,0.055), 0 0 0 56px rgba(255,255,255,0.035); }
.resume-layout .case-card-visual b { width: 54px; height: 54px; left: calc(50% - 27px); top: calc(50% - 27px); }
.resume-layout .case-card-copy { padding: 24px 26px 26px; }
.resume-layout .case-card-copy > div { color: #7f8794; font-size: 8px; }
.resume-layout .case-card-copy i { border-color: rgba(255,255,255,0.13); color: #8d95a2; }
.resume-layout .case-card-copy h3 { margin: 26px 0 7px; color: #f4f6fa; font-size: 24px; }
.resume-layout .case-card-copy p { color: #818997; font-size: 11px; }

.resume-layout .experience { min-height: 610px; padding-top: 104px; padding-bottom: 112px; }
.resume-layout .experience::after {
  content: "";
  position: absolute;
  right: -80px;
  top: 120px;
  width: 260px;
  height: 260px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,112,242,0.09), transparent 70%);
}
.resume-layout .career-list::before { left: 25px; }
.resume-layout .career-list li { min-height: 116px; padding: 26px 0; grid-template-columns: 56px 150px minmax(220px, 1fr) minmax(250px, 0.9fr) auto; align-items: center; gap: 24px; transition: background 0.3s ease, transform 0.45s var(--ease-out); }
.resume-layout .career-list li:hover { transform: translateX(3px); background: linear-gradient(90deg, transparent, rgba(0,112,242,0.03), transparent); }
.resume-layout .career-time { grid-column: auto; font-size: 10px; }
.resume-layout .career-title { grid-column: auto; }
.resume-layout .career-title h3 { margin-bottom: 7px; font-size: 20px; }
.resume-layout .career-title p, .resume-layout .career-summary { font-size: 11px; line-height: 1.65; }
.resume-layout .career-summary { grid-column: auto; }
.resume-layout .pending { grid-column: auto; grid-row: auto; padding: 6px 8px; font-size: 8px; }
.resume-layout .credentials { margin-top: 42px; grid-template-columns: repeat(3, 1fr); }
.resume-layout .credentials > div { min-height: 132px; padding: 22px; }
.resume-layout .credentials span { font-size: 8px; }
.resume-layout .credentials strong { font-size: 18px; line-height: 1.25; }
.resume-layout .credentials p { display: block; font-size: 10px; }

.contact { position: relative; min-height: 450px; overflow: hidden; padding: 78px max(28px, calc((100vw - var(--max)) / 2)) 30px; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line); }
.contact-halo { position: absolute; width: 760px; height: 760px; right: -280px; top: 3%; border-radius: 50%; background: radial-gradient(circle, rgba(0,112,242,0.15), rgba(0,64,176,0.045) 46%, transparent 70%); animation: contactPulse 18s ease-in-out infinite; }
.contact h2 { position: relative; margin: 20px 0 23px; font-size: clamp(48px, 5.8vw, 82px); line-height: 0.97; letter-spacing: -0.062em; }
.contact h2 span { color: #666c78; }
.contact-copy { position: relative; max-width: 570px; margin-bottom: 26px; color: #8c929e; font-size: 14px; line-height: 1.7; }
.contact-actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-actions button { padding: 17px 0; display: flex; justify-content: space-between; align-items: center; border: 0; border-right: 1px solid var(--line); background: transparent; color: #888e99; text-align: left; }
.contact-actions button:last-child { padding-left: 30px; border-right: 0; }
.contact-actions button span { font-size: clamp(18px, 2.1vw, 28px); }
.contact-actions button small { color: #5f6570; font-size: 10px; }
.contact footer { margin-top: auto; padding-top: 34px; display: flex; justify-content: space-between; color: #5e6470; font-size: 10px; letter-spacing: 0.09em; }

.reveal { opacity: 0; transform: translateY(32px) scale(0.99); filter: blur(2px); clip-path: inset(0 0 8% 0); transition: opacity 0.92s var(--ease-out), transform 0.92s var(--ease-out), filter 0.82s ease, clip-path 0.92s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); clip-path: inset(0); }
.hero .reveal { transition-duration: 1s; }
.hero .personal-context { transition-delay: 0.05s !important; }
.hero .eyebrow { transition-delay: 0.12s !important; }
.hero .hero-title { transition-delay: 0.2s !important; }
.hero .role { transition-delay: 0.3s !important; }
.hero .hero-intro { transition-delay: 0.39s !important; }
.hero .hero-actions { transition-delay: 0.48s !important; }
.identity-visual.reveal { transform: translateY(52px) scale(0.94) rotate(0.8deg); transition-duration: 1.15s; transition-delay: 0.16s !important; }
.identity-visual.reveal.is-visible { transform: translateY(var(--parallax-y, 0px)) scale(1) rotate(0); }
.quick-facts.reveal .fact { opacity: 0; transform: translateY(18px); }
.quick-facts.reveal.is-visible .fact { opacity: 1; transform: translateY(0); }
.quick-facts.reveal.is-visible .fact:nth-child(2) { transition-delay: 0.08s; }
.quick-facts.reveal.is-visible .fact:nth-child(3) { transition-delay: 0.16s; }
.quick-facts.reveal.is-visible .fact:nth-child(4) { transition-delay: 0.24s; }
.quick-facts .fact { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), background 0.35s ease; }

@keyframes navEnter { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glowDriftA { to { transform: translate(-46px, 52px) scale(1.08); } }
@keyframes glowDriftB { to { transform: translate(64px, -40px) scale(0.92); } }
@keyframes monogramFloat { 0%, 100% { transform: translate(-50%, -52%); } 50% { transform: translate(-50%, -53.2%); } }
@keyframes orbitOne { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbitTwo { from { transform: translate(-50%, -50%) rotate(34deg); } to { transform: translate(-50%, -50%) rotate(394deg); } }
@keyframes cueFlow { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@keyframes contactPulse { 0%, 100% { transform: scale(0.97); opacity: 0.8; } 50% { transform: scale(1.03); opacity: 1; } }
@keyframes visualScan { 0%, 14% { transform: translateY(-20%); opacity: 0; } 28%, 72% { opacity: 0.75; } 86%, 100% { transform: translateY(690%); opacity: 0; } }

a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr 360px; gap: 44px; }
  .identity-visual { min-height: 490px; }
  .quick-facts { grid-template-columns: 1.2fr repeat(3, 1fr); }
  .featured-case { grid-template-columns: 1fr; }
  .case-copy { min-height: 540px; }
  .case-visual { min-height: 620px; }
  .career-list li { grid-template-columns: 44px 145px 1fr auto; }
  .career-summary { grid-column: 3 / 4; }
  .resume-layout { display: block; }
  .resume-layout .profile-grid { grid-template-columns: minmax(260px, 0.8fr) 1fr; gap: 48px; }
  .resume-layout .featured-case { grid-template-columns: 1fr; }
  .resume-layout .case-copy { min-height: 430px; }
  .resume-layout .case-visual { min-height: 480px; }
  .resume-layout .career-list li { grid-template-columns: 38px 130px 1fr auto; align-items: start; gap: 10px 18px; }
  .resume-layout .career-number { grid-row: 1 / 3; }
  .resume-layout .career-summary { grid-column: 2 / 4; }
  .resume-layout .pending { grid-column: 4; grid-row: 1; }
}

@media (max-width: 760px) {
  .nav { width: calc(100% - 30px); height: 68px; grid-template-columns: 1fr auto; }
  .nav-links, .quiet-contact { display: none; }
  .menu-button { width: 40px; height: 40px; padding: 0; display: grid; place-content: center; gap: 6px; border: 0; background: transparent; }
  .menu-button i { width: 20px; height: 1px; background: #d9dce3; transition: transform 0.2s ease; }
  .menu-button[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu { padding: 16px 20px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(6,7,10,0.96); border-bottom: 1px solid var(--line); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { padding: 18px; border: 1px solid var(--line); color: #c5c9d2; font-size: 14px; }

  .hero { width: calc(100% - 36px); min-height: auto; padding: 126px 0 78px; grid-template-columns: 1fr; gap: 62px; }
  .hero-title { font-size: clamp(76px, 24vw, 118px); }
  .hero-title span { margin-left: 3px; font-size: 0.2em; }
  .role span { font-size: 22px; }
  .hero-actions { flex-wrap: wrap; gap: 24px; }
  .identity-visual { min-height: 500px; }
  .monogram { font-size: 270px; }
  .orbit-one { width: 320px; height: 320px; }
  .orbit-two { width: 230px; height: 360px; }
  .quick-facts { width: calc(100% - 36px); grid-template-columns: 1fr 1fr; }
  .quick-facts > div { min-height: 112px; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .quick-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
  .quick-facts > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .fact-intro { padding-right: 18px !important; }

  .section { width: calc(100% - 36px); padding: 110px 0; }
  .section-kicker { margin-bottom: 50px; }
  .section-heading { align-items: start; flex-direction: column; margin-bottom: 40px; }
  .section-heading h2 { font-size: 56px; }
  .profile-grid { grid-template-columns: 1fr; gap: 54px; }
  .profile h2 { font-size: 52px; }

  .work { width: auto; padding-left: 14px; padding-right: 14px; border-radius: 28px 28px 0 0; }
  .work .section-kicker, .work .section-heading { margin-left: 4px; margin-right: 4px; }
  .featured-case { border-radius: 22px; }
  .case-copy { min-height: 520px; padding: 28px; }
  .case-copy h3 { font-size: 42px; }
  .case-visual { min-height: 480px; }
  .interface-frame { width: 82%; }
  .case-detail { padding: 28px; grid-template-columns: 1fr; }
  .case-detail div, .case-detail div:first-child { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-detail div:last-child { border-bottom: 0; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card-visual { height: 330px; }

  .career-list li { padding: 28px 0; grid-template-columns: 35px 1fr auto; gap: 12px 16px; }
  .career-time { grid-column: 2 / 3; }
  .career-title { grid-column: 2 / 4; }
  .career-summary { grid-column: 2 / 4; }
  .pending { grid-row: 1; grid-column: 3; }
  .credentials { grid-template-columns: 1fr; }
  .credentials > div { min-height: 150px; border-right: 0; border-bottom: 1px solid var(--line); }
  .credentials > div:last-child { border-bottom: 0; }

  .contact { min-height: 820px; padding-left: 18px; padding-right: 18px; }
  .contact h2 { font-size: 54px; }
  .contact-actions { grid-template-columns: 1fr; }
  .contact-actions button, .contact-actions button:last-child { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-actions button:last-child { border-bottom: 0; }
  .contact footer { gap: 16px; flex-direction: column; }

  .resume-layout { width: 100%; padding: 0; }
  .resume-layout .section { width: calc(100% - 36px); padding: 82px 0; border-radius: 0; }
  .resume-layout .profile { min-height: auto; }
  .resume-layout .profile-grid { grid-template-columns: 1fr; gap: 42px; }
  .resume-layout .profile h2 { font-size: 50px; }
  .resume-layout .profile-copy { min-height: 0; padding: 52px 24px 26px; }
  .resume-layout .profile-copy::before { left: 24px; }
  .resume-layout .profile-copy::after { left: 24px; right: 24px; }
  .resume-layout .section-kicker { margin-bottom: 44px; }
  .resume-layout .section-heading { margin-bottom: 38px; }
  .resume-layout .section-heading h2 { font-size: 50px; }
  .resume-layout .work { width: auto; padding: 78px 14px; border-radius: 28px; }
  .resume-layout .featured-case { grid-template-columns: 1fr; }
  .resume-layout .case-copy { min-height: 440px; padding: 28px; }
  .resume-layout .case-visual { min-height: 420px; }
  .resume-layout .interface-frame { width: 80%; }
  .resume-layout .case-grid { grid-template-columns: 1fr; }
  .resume-layout .case-card { display: block; }
  .resume-layout .case-card-visual { height: 250px; }
  .resume-layout .case-grid.one-card .case-card { display: block; min-height: 0; }
  .resume-layout .case-grid.one-card .case-card-visual { height: 250px; min-height: 0; }
  .resume-layout .case-grid.one-card .case-card-copy { display: block; padding: 24px 26px 26px; }
  .resume-layout .case-grid.one-card .case-card-copy h3 { margin: 26px 0 7px; font-size: 24px; }
  .resume-layout .experience { min-height: auto; padding-top: 88px; padding-bottom: 94px; }
  .resume-layout .career-list li { padding: 24px 0; grid-template-columns: 35px 1fr auto; gap: 8px 14px; }
  .resume-layout .career-number { grid-row: 1 / 4; }
  .resume-layout .career-time { grid-column: 2 / 3; }
  .resume-layout .career-title { grid-column: 2 / 4; }
  .resume-layout .career-summary { grid-column: 2 / 4; }
  .resume-layout .pending { grid-column: 3; grid-row: 1; }
  .resume-layout .credentials { grid-template-columns: 1fr; }
  .resume-layout .credentials > div { min-height: 112px; border-right: 0; }
  .contact { min-height: 620px; padding-top: 88px; padding-bottom: 28px; }
}

@media (hover: none) { .ambient-grid { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .identity-visual.reveal, .identity-visual.reveal.is-visible { opacity: 1; transform: none; filter: none; clip-path: none; }
  .monogram, .visual-orbit, .ambient-glow, .contact-halo, .scroll-cue i::after { animation: none; }
}