:root {
  --ink: #151515;
  --muted: #6c6c6c;
  --paper: #f4f4f0;
  --white: #fffefa;
  --line: rgba(23, 23, 23, .14);
  --blue: #4a7cff;
  --night: #101111;
  --night-soft: #181a1a;
  --night-line: rgba(255,255,255,.15);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; overflow-x: hidden; }
body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
::selection { color: #fff; background: var(--blue); }

.grain { position: fixed; z-index: 30; inset: 0; pointer-events: none; opacity: .052; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.loading-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; gap: 20px; color: #fff; background: #121313; transition: opacity .55s ease, visibility .55s ease; }
.loading-screen.loaded { opacity: 0; visibility: hidden; }
.loading-mark { display: grid; width: 46px; height: 46px; margin: auto; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; animation: loaderPulse 1s var(--ease) infinite alternate; }
.loading-mark span { font-family: var(--serif); font-size: 22px; font-style: italic; }
.loading-screen p { margin: 0; font: 10px var(--mono); letter-spacing: .14em; }
.loading-line { width: 120px; height: 1px; background: rgba(255,255,255,.2); overflow: hidden; }
.loading-line i { display: block; width: 50%; height: 100%; background: #fff; animation: loading 1.1s var(--ease) infinite; }
@keyframes loaderPulse { to { transform: scale(.9); opacity: .7; } }
@keyframes loading { from { transform: translateX(-110%); } to { transform: translateX(230%); } }

.site-header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; padding: 18px clamp(20px, 3.7vw, 58px); pointer-events: none; }
.nav-shell { display: flex; width: 100%; max-width: 1400px; min-height: 52px; margin: auto; padding: 0 21px 0 18px; align-items: center; justify-content: space-between; color: #eee; border: 1px solid rgba(255,255,255,.2); border-radius: 100px; background: rgba(17,18,18,.45); box-shadow: 0 12px 32px rgba(0,0,0,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); pointer-events: auto; transition: color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.site-header.on-light .nav-shell { color: #151515; border-color: rgba(20,20,20,.12); background: rgba(250,250,247,.7); box-shadow: 0 12px 32px rgba(0,0,0,.07); }
.brand { display: grid; width: 40px; height: 35px; place-items: center; }
.brand-logo { display: block; width: 39px; height: 35px; transition: transform .35s var(--ease); }
.brand:hover .brand-logo { transform: rotate(-4deg) scale(1.07); }
.nav-links { display: flex; gap: clamp(12px, 1.85vw, 27px); align-items: center; }
.nav-links a { position: relative; padding: 6px 0; font-size: 12px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 300; letter-spacing: .02em; }
.nav-links a:after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; content: ""; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.nav-links a:hover:after, .nav-links a:focus-visible:after { transform: scaleX(1); transform-origin: left; }
.menu-toggle, .mobile-menu { display: none; }

.cursor-dot, .cursor-ring { position: fixed; z-index: 200; top: 0; left: 0; pointer-events: none; opacity: 0; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: difference; }
.cursor-dot { width: 6px; height: 6px; background: white; }
.cursor-ring { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.8); transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease); }
.cursor-ring span { font: 7px var(--mono); color: #fff; letter-spacing: .04em; opacity: 0; transition: opacity .2s; }
.cursor-ring.hovering { width: 60px; height: 60px; background: rgba(255,255,255,.1); }
.cursor-ring.hovering span { opacity: 1; }

.section-pad { padding: 150px clamp(22px, 7.5vw, 120px); }
.section-index { margin-bottom: 54px; font: 10px var(--mono); letter-spacing: .08em; color: var(--muted); }
.dark-section .section-index { color: rgba(255,255,255,.5); }
.eyebrow { display: flex; gap: 9px; align-items: center; margin: 0 0 20px; font: 10px var(--mono); letter-spacing: .09em; }
.eyebrow:before { display: inline-block; width: 16px; height: 1px; content: ""; background: currentColor; }
.display-heading { max-width: 810px; margin: 0; font-size: clamp(46px, 6.7vw, 106px); font-weight: 600; letter-spacing: -.075em; line-height: .97; }
.display-heading em, h1 .italic, .contact h2 em { font-family: var(--serif); font-weight: 600; }
.text-link { display: inline-flex; padding: 2px 0; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid currentColor; color: var(--ink); background: transparent; font-size: 12px; font-weight: 700; }
.text-link span { font-size: 17px; transition: transform .3s var(--ease); }
.text-link:hover span { transform: translate(3px,-3px); }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* HERO */
.hero { position: relative; min-height: 100svh; overflow: hidden; color: white; background: radial-gradient(ellipse at 67% 54%, #363f49 0, #1b1d20 35%, #121313 71%); }
.hero:before { position: absolute; inset: 0; content: ""; opacity: .65; background: linear-gradient(105deg, rgba(0,0,0,.5), transparent 48%, rgba(77,107,163,.12)), linear-gradient(0deg, rgba(0,0,0,.4), transparent 25%); }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; transform: rotate(-22deg); }
.orbit-a { top: -30vw; right: -1vw; width: 91vw; height: 56vw; }
.orbit-b { top: -5vw; right: 15vw; width: 55vw; height: 34vw; border-color: rgba(117,159,255,.15); }
.hero-copy { position: relative; z-index: 2; display: flex; min-height: 100svh; max-width: 1400px; margin: auto; padding: 144px clamp(22px, 3.7vw, 58px) 80px; flex-direction: column; justify-content: space-between; }
.hero-kicker { opacity: .65; }
.hero-kicker:before { display: none; }
.hero-kicker span { display: inline-block; width: 6px; height: 6px; background: #b5ccff; border-radius: 50%; box-shadow: 0 0 14px #9dbbff; }
h1 { max-width: 790px; margin: 0; font-size: clamp(64px, 9.5vw, 152px); font-weight: 600; letter-spacing: -.095em; line-height: .8; }
h1 .split-line { display: block; overflow: hidden; animation: titleIn 1s var(--ease) both; }
h1 .split-line:nth-child(2) { padding-left: 8.5vw; animation-delay: .08s; }
h1 .split-line:nth-child(3) { animation-delay: .15s; }
@keyframes titleIn { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } }
.hero-bottom { display: flex; width: min(100%, 620px); gap: 34px; align-items: end; }
.hero-statement { max-width: 270px; margin: 0; color: rgba(255,255,255,.67); font-size: 14px; line-height: 1.7; }
.circle-link { display: flex; width: 104px; height: 104px; margin-left: auto; padding: 20px; flex: none; align-items: end; justify-content: space-between; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: white; transition: color .35s, background .35s, transform .35s var(--ease); }
.circle-link:hover { color: #151515; background: #fff; transform: scale(1.08); }
.circle-link span { font: 9px/1.45 var(--mono); letter-spacing: .02em; }
.circle-link svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.hero-footer { position: absolute; z-index: 4; right: clamp(22px, 3.7vw, 58px); bottom: 36px; left: clamp(22px, 3.7vw, 58px); display: flex; gap: 16px; align-items: center; color: rgba(255,255,255,.46); font: 9px var(--mono); letter-spacing: .09em; }
.hero-footer i { width: 32px; height: 1px; background: currentColor; }
.hero-footer span:last-child { margin-left: auto; }

/* LIQUID-GLASS HERO SCULPTURE */
.sculpture-stage { position: absolute; z-index: 1; top: 47%; left: min(69%, 1020px); width: min(39vw, 570px); aspect-ratio: 1 / .9; perspective: 1300px; transform: translate(-50%,-50%); }
.glass-sculpture { position: absolute; inset: 5%; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-22deg) rotateZ(-8deg); transition: transform .12s linear; animation: sculptureFloat 7s ease-in-out infinite alternate; }
@keyframes sculptureFloat { to { margin-top: -18px; transform: rotateX(16deg) rotateY(-18deg) rotateZ(-5deg); } }
.sculpture-glow { position: absolute; top: 6%; left: 10%; width: 82%; aspect-ratio: 1; border-radius: 50%; opacity: .62; background: radial-gradient(circle, rgba(184,216,255,.36) 0, rgba(108,146,221,.14) 30%, transparent 67%); filter: blur(24px); }
.sculpture-shadow { position: absolute; right: 3%; bottom: 8%; left: 2%; height: 15%; border-radius: 50%; opacity: .8; background: rgba(0,0,0,.56); filter: blur(23px); transform: rotate(-12deg); }
.glass-orb { position: absolute; z-index: 3; top: 23%; left: 25%; display: flex; width: 49%; aspect-ratio: 1; overflow: hidden; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(234,246,255,.73); border-radius: 50%; color: #eef6ff; background: radial-gradient(circle at 31% 26%, rgba(250,255,255,.68), rgba(138,185,234,.2) 18%, rgba(31,64,100,.65) 52%, rgba(11,20,32,.82) 78%); box-shadow: inset 12px 12px 30px rgba(255,255,255,.28), inset -16px -18px 32px rgba(5,13,27,.58), 0 17px 36px rgba(0,0,0,.28), 0 0 50px rgba(119,166,255,.2); transform: translateZ(48px); }
.glass-orb:before { position: absolute; inset: 7%; content: ""; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }.glass-orb:after { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; content: ""; opacity: .32; background: linear-gradient(90deg, transparent, rgba(179,217,255,.45)); }.orb-reflection { position: absolute; top: 14%; left: 21%; width: 33%; height: 16%; border-radius: 50%; opacity: .75; background: rgba(255,255,255,.74); filter: blur(6px); transform: rotate(-35deg); }.orb-mark { position: relative; z-index: 1; font-family: var(--serif); font-size: clamp(31px,4.2vw,58px); font-style: italic; letter-spacing: -.17em; text-shadow: 0 3px 10px rgba(0,0,0,.35); }.orb-mark span { color: #9fc4ff; }.glass-orb small { position: relative; z-index: 1; margin-top: 5px; font: 5px var(--mono); letter-spacing: .12em; white-space: nowrap; }
.glass-ring { position: absolute; z-index: 1; top: 15%; left: 6%; width: 88%; height: 70%; border: 1px solid rgba(212,232,255,.4); border-radius: 50%; box-shadow: inset 0 0 16px rgba(178,212,255,.07), 0 0 20px rgba(155,191,255,.07); transform-style: preserve-3d; }.ring-back { opacity: .5; transform: rotateX(63deg) rotateZ(21deg) translateZ(-17px); }.ring-mid { width: 71%; height: 91%; top: 5%; left: 14%; opacity: .8; transform: rotateY(68deg) rotateZ(-17deg) translateZ(11px); }.ring-front { z-index: 5; width: 92%; height: 52%; top: 24%; left: 4%; border-color: rgba(229,241,255,.68); transform: rotateX(73deg) rotateZ(-9deg) translateZ(55px); }
.glass-disc { position: absolute; z-index: 2; border: 1px solid rgba(208,231,255,.26); border-radius: 50%; background: linear-gradient(145deg, rgba(207,230,255,.1), rgba(52,95,151,.07)); box-shadow: inset 0 0 20px rgba(214,237,255,.08); transform-style: preserve-3d; }.disc-one { top: 28%; left: 14%; width: 71%; height: 42%; transform: rotateX(69deg) rotateZ(-15deg) translateZ(19px); }.disc-two { top: 43%; left: 28%; width: 43%; height: 24%; opacity: .75; transform: rotateX(69deg) rotateZ(-15deg) translateZ(72px); }
.sculpture-tag { position: absolute; z-index: 6; padding: 9px 12px; border: 1px solid rgba(214,231,255,.23); border-radius: 3px; color: rgba(235,244,255,.85); background: rgba(18,27,38,.34); box-shadow: 0 14px 30px rgba(0,0,0,.16); font: 8px var(--mono); letter-spacing: .07em; backdrop-filter: blur(12px); }.tag-one { top: 7%; right: -8%; }.tag-two { bottom: 10%; left: -10%; }

/* 3D PROJECT-CARD CONSTELLATION */
.hero-stack-stage { position: absolute; z-index: 1; top: 47%; left: min(69%, 1020px); width: min(39vw, 570px); aspect-ratio: 1 / .9; perspective: 1400px; transform: translate(-50%,-50%); }
.stack-glow { position: absolute; top: 1%; left: 6%; width: 88%; aspect-ratio: 1; border-radius: 50%; opacity: .66; background: radial-gradient(circle, rgba(188,215,255,.33), rgba(90,123,197,.12) 34%, transparent 67%); filter: blur(25px); }.stack-shadow { position: absolute; right: 4%; bottom: 5%; left: 5%; height: 18%; border-radius: 50%; opacity: .72; background: rgba(0,0,0,.58); filter: blur(25px); transform: rotate(-13deg); }
.project-stack { position: absolute; inset: 2% 5%; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-18deg) rotateZ(-8deg); transition: transform .12s linear; animation: stackFloat 7s ease-in-out infinite alternate; }.stack-card { position: absolute; display: flex; width: 75%; aspect-ratio: 1.24; padding: 19px; flex-direction: column; overflow: hidden; border: 1px solid rgba(234,245,255,.5); border-radius: 10px; box-shadow: 0 24px 35px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.36); transform-style: preserve-3d; }.stack-card:before { position: absolute; inset: 8px; content: ""; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; }.stack-card:after { position: absolute; top: -22%; right: -6%; width: 60%; height: 140%; content: ""; opacity: .35; background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.68) 51%, transparent 73%); transform: rotate(15deg); }.stack-card span, .stack-card b, .stack-card small, .stack-card i { position: relative; z-index: 1; }.stack-card span, .stack-card small { font: 7px var(--mono); letter-spacing: .1em; }.stack-card span { color: rgba(255,255,255,.66); }.stack-card b { margin: auto 0; color: #f5f8fb; font-size: clamp(20px,2.7vw,37px); font-weight: 600; letter-spacing: -.08em; line-height: .84; }.stack-card b em { font-family: var(--serif); font-style: italic; font-weight: 600; }.stack-card small { color: rgba(255,255,255,.7); }.stack-card i { width: 16px; height: 16px; margin-left: auto; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; }.stack-card i:before { position: absolute; top: 7px; right: 3px; left: 3px; height: 1px; content: ""; background: currentColor; }.stack-card i:after { position: absolute; top: 4px; right: 3px; width: 5px; height: 5px; content: ""; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }.stack-back { top: 9%; left: 2%; color: #1f2a2e; border-color: rgba(218,239,232,.58); background: linear-gradient(130deg, #aac9c2, #758d89 70%, #526b69); transform: rotateZ(-19deg) rotateY(-9deg) translateZ(-15px); }.stack-back span, .stack-back small, .stack-back b { color: #173031; }.stack-middle { top: 28%; right: 1%; color: #eef4f0; background: linear-gradient(140deg, #4a6975, #253b48 66%, #1a2b38); transform: rotateZ(13deg) rotateY(-5deg) translateZ(17px); }.stack-front { z-index: 3; top: 18%; left: 13%; color: #eff5ff; background: linear-gradient(135deg, #4877be, #1f3f6f 57%, #172b4a); transform: rotateZ(-3deg) rotateY(-4deg) translateZ(55px); }.stack-front:before { border-color: rgba(222,237,255,.27); }.stack-front i { color: #d3e2ff; }.stack-monogram { position: absolute; z-index: 5; right: 1%; bottom: 2%; color: #e6f1ff; font-family: var(--serif); font-size: clamp(44px,5vw,76px); font-style: italic; letter-spacing: -.17em; text-shadow: 0 7px 18px rgba(0,0,0,.35); transform: translateZ(96px) rotateZ(8deg); }.stack-monogram span { color: #9fc5ff; }.stack-tag { position: absolute; z-index: 6; padding: 9px 12px; border: 1px solid rgba(214,231,255,.23); border-radius: 3px; color: rgba(235,244,255,.85); background: rgba(18,27,38,.34); box-shadow: 0 14px 30px rgba(0,0,0,.16); font: 8px var(--mono); letter-spacing: .07em; backdrop-filter: blur(12px); }.stack-tag.tag-one { top: 4%; right: -6%; }.stack-tag.tag-two { bottom: 7%; left: -8%; }
@keyframes stackFloat { to { margin-top: -18px; transform: rotateX(16deg) rotateY(-14deg) rotateZ(-5deg); } }

/* INTRO */
.intro { position: relative; background: var(--paper); }
.intro-layout { display: grid; gap: 60px; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .52fr); }
.intro-aside { padding-top: 53px; }
.intro-aside p { margin: 0 0 34px; color: #3f3f3f; font-size: 16px; line-height: 1.75; }
.about-objects { display: grid; margin-top: 110px; gap: 24px; grid-template-columns: minmax(290px, .86fr) 1.25fr; align-items: end; }
.degree-card { position: relative; min-height: 405px; padding: 23px; overflow: hidden; color: #eff4f9; border-radius: 18px; background: #1c252e; box-shadow: 20px 26px 42px rgba(22,28,32,.15); transform-style: preserve-3d; }
.degree-top { display: flex; justify-content: space-between; font: 9px var(--mono); letter-spacing: .1em; }
.degree-card h3 { position: relative; z-index: 1; margin: 119px 0 64px; font-size: clamp(26px, 3vw, 44px); font-weight: 600; letter-spacing: -.06em; line-height: 1; }
.degree-bottom { position: relative; z-index: 1; display: flex; gap: 10px; align-items: baseline; font: 9px var(--mono); letter-spacing: .08em; }.degree-bottom strong { margin-left: auto; font-size: 35px; font-weight: 600; letter-spacing: -.08em; }.degree-bottom span:last-child { color: rgba(255,255,255,.56); }
.degree-mesh { position: absolute; top: -37%; right: -35%; width: 105%; aspect-ratio: 1; border: 1px solid rgba(203,231,255,.32); border-radius: 50%; transform: rotateX(59deg) rotateZ(29deg); }.degree-mesh:before, .degree-mesh:after { position: absolute; inset: 13%; content: ""; border: 1px solid rgba(203,231,255,.28); border-radius: 50%; }.degree-mesh:after { inset: 28%; }.degree-mesh i { position: absolute; top: 49%; left: -9%; width: 118%; height: 1px; background: rgba(203,231,255,.26); transform: rotate(var(--r)); }.degree-mesh i:nth-child(1) { --r: 0deg; }.degree-mesh i:nth-child(2) { --r: 36deg; }.degree-mesh i:nth-child(3) { --r: 72deg; }.degree-mesh i:nth-child(4) { --r: 108deg; }.degree-mesh i:nth-child(5) { --r: 144deg; }
.stat-grid { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); background: var(--line); border: 1px solid var(--line); }.stat-grid article { min-height: 164px; padding: 21px; background: var(--paper); }.stat-grid strong { display: block; margin-bottom: 12px; font-size: clamp(42px, 4.7vw, 69px); font-weight: 500; letter-spacing: -.09em; line-height: 1; }.stat-grid strong span { font-size: .55em; color: var(--blue); }.stat-grid article span { color: var(--muted); font: 9px var(--mono); letter-spacing: .03em; }
.about-note { display: flex; padding: 20px 4px 0; gap: 9px; grid-column: 1 / -1; align-items: flex-start; color: #4d4d4d; }.about-note p { max-width: 390px; margin: 0; font-size: 12px; line-height: 1.65; }.note-dot { width: 7px; height: 7px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(74,124,255,.65); }

/* SKILLS */
.dark-section { color: #f0f0ec; background: var(--night); }.skills { overflow: hidden; background-image: radial-gradient(circle at 85% 20%, rgba(74,124,255,.13), transparent 26%); }.skills-header { display: flex; gap: 40px; align-items: end; justify-content: space-between; }.skills-instruction { max-width: 210px; margin: 0 0 6px; color: rgba(255,255,255,.55); font: 11px/1.6 var(--mono); }.skills-experience { display: grid; min-height: 470px; margin-top: 85px; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }.skill-cloud { display: flex; padding: 54px 46px 48px 0; gap: 10px; flex-wrap: wrap; align-content: center; }.skill-pill { display: inline-flex; padding: 14px 16px; gap: 14px; align-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 100px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.025); font-size: 13px; font-weight: 600; transform-style: preserve-3d; transition: border .35s, background .35s, color .35s, transform .35s var(--ease), box-shadow .35s; }.skill-pill i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .35s, box-shadow .35s; }.skill-pill:hover, .skill-pill:focus-visible, .skill-pill.active { border-color: rgba(164,195,255,.9); color: white; background: rgba(86,133,238,.16); box-shadow: 0 10px 24px rgba(0,0,0,.16); transform: translateY(-4px) rotateX(4deg); }.skill-pill.active i { background: #a7c4ff; box-shadow: 0 0 11px #a7c4ff; }
.skill-detail { position: relative; display: flex; padding: 54px 0 45px 48px; flex-direction: column; justify-content: center; border-left: 1px solid var(--night-line); }.skill-detail:before { position: absolute; top: 55px; left: -1px; width: 2px; height: 64px; content: ""; background: var(--blue); }.detail-label, .detail-project { color: rgba(255,255,255,.45); font: 9px var(--mono); letter-spacing: .09em; }.skill-detail h3 { margin: 28px 0 13px; font-size: clamp(30px,3vw,49px); font-weight: 600; letter-spacing: -.07em; }.skill-detail p { max-width: 300px; margin: 0 0 33px; color: rgba(255,255,255,.69); font-size: 13px; line-height: 1.7; }.detail-project { color: #c2d5ff; }.skills-foot { display: grid; padding-top: 28px; gap: 10px 25px; grid-template-columns: 115px 1fr; color: rgba(255,255,255,.69); }.skills-foot span { color: rgba(255,255,255,.37); font: 9px var(--mono); letter-spacing: .1em; }.skills-foot p { margin: 0; font-size: 12px; }

/* PROJECTS */
.projects { overflow: hidden; }.projects-title-row { display: grid; margin-bottom: 78px; gap: 40px; grid-template-columns: 1.2fr .55fr; align-items: end; }.projects-title-row > p { max-width: 300px; margin: 0 0 10px auto; color: #575757; font-size: 13px; line-height: 1.7; }.project-card { position: relative; overflow: hidden; }.feature-project { display: grid; min-height: 640px; grid-template-columns: 1fr 1.25fr; color: #f8f9fa; border-radius: 20px; background: #17202d; }.feature-copy { position: relative; z-index: 2; display: flex; padding: clamp(30px, 5vw, 74px); flex-direction: column; align-items: flex-start; background: linear-gradient(90deg, #17202d 79%, transparent); }.project-number { margin-bottom: auto; color: rgba(255,255,255,.53); font: 9px var(--mono); letter-spacing: .1em; }.project-type { margin: 0 0 13px; color: #b6cbff; font: 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; }.feature-copy h3 { margin: 0 0 20px; font-size: clamp(43px, 5.6vw, 84px); font-weight: 600; letter-spacing: -.09em; line-height: .87; }.feature-copy h3 em, .mini-project h3 { font-family: var(--serif); font-style: italic; }.feature-copy > p:not(.project-type) { max-width: 320px; margin: 0 0 25px; color: rgba(255,255,255,.67); font-size: 13px; line-height: 1.7; }.project-metrics { display: flex; margin-bottom: 29px; gap: 18px; }.project-metrics span { display: flex; gap: 5px; flex-direction: column; color: rgba(255,255,255,.54); font: 8px var(--mono); letter-spacing: .04em; }.project-metrics strong { color: #fff; font-size: 20px; font-weight: 500; letter-spacing: -.06em; }.feature-copy .text-link { color: #fff; border-color: rgba(255,255,255,.5); }.project-visual { position: relative; min-height: 100%; overflow: hidden; }.mastmo-visual { background: radial-gradient(circle at 54% 55%, #8296ff 0, #33446b 21%, #192434 52%, #18202a 100%); }.mastmo-visual:before { position: absolute; top: 13%; left: 11%; width: 74%; height: 74%; content: ""; border: 1px solid rgba(189,208,255,.32); border-radius: 50%; transform: rotateX(59deg) rotateZ(29deg); }.mastmo-visual:after { position: absolute; top: 25%; left: 22%; width: 52%; height: 52%; content: ""; border: 1px solid rgba(189,208,255,.2); border-radius: 50%; transform: rotateX(59deg) rotateZ(29deg); }.screen-glow { position: absolute; top: 12%; right: 10%; width: 53%; aspect-ratio: 1; border-radius: 50%; background: #c1d6ff; filter: blur(80px); opacity: .28; }.browser-window { position: absolute; z-index: 1; top: 21%; left: 13%; width: 74%; aspect-ratio: 1.38; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 10px; background: rgba(15,24,37,.75); box-shadow: 0 38px 47px rgba(0,0,0,.34); transform: perspective(800px) rotateY(-10deg) rotateX(6deg) rotateZ(-3deg); transition: transform .7s var(--ease); backdrop-filter: blur(16px); }.feature-project:hover .browser-window { transform: perspective(800px) rotateY(-3deg) rotateX(2deg) rotateZ(-1deg) translateY(-8px); }.browser-bar { display: flex; height: 28px; padding: 0 10px; gap: 5px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); }.browser-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.48); }.browser-bar span { margin-left: 8px; color: rgba(255,255,255,.42); font: 6px var(--mono); }.browser-body { position: relative; height: calc(100% - 28px); padding: 22px; }.mastmo-logo { color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .1em; }.mastmo-logo span { color: #a8c6ff; }.browser-heading { margin-top: 26px; font-size: clamp(20px, 2.5vw, 37px); font-weight: 600; letter-spacing: -.08em; line-height: .9; }.browser-heading em { font-family: var(--serif); font-weight: 600; }.event-rows { position: absolute; right: 22px; bottom: 26px; left: 22px; display: grid; gap: 6px; }.event-rows i { height: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; }.event-rows i:nth-child(2) { width: 82%; }.event-rows i:nth-child(3) { width: 61%; }.browser-pill { position: absolute; top: 43px; right: 22px; padding: 6px 7px 6px 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 20px; color: #e8efff; font: 6px var(--mono); }.browser-pill b { display: inline-grid; width: 13px; height: 13px; margin-left: 9px; place-items: center; border-radius: 50%; color: #1b2b43; background: #c8dcff; font-size: 9px; }.floating-card { position: absolute; z-index: 3; display: flex; min-width: 95px; padding: 11px 12px; flex-direction: column; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; color: #fff; background: rgba(26,45,78,.5); box-shadow: 0 18px 28px rgba(0,0,0,.17); font: 20px var(--mono); backdrop-filter: blur(9px); }.floating-card small { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 7px; letter-spacing: .04em; }.registration { right: 2%; bottom: 15%; transform: rotate(7deg); }.uptime { top: 16%; left: 3%; transform: rotate(-6deg); }
.project-rail { display: grid; margin-top: 24px; gap: 24px; grid-template-columns: 1fr 1fr; }.mini-project { min-height: 510px; padding: 28px; border-radius: 16px; transition: transform .45s var(--ease), box-shadow .45s; }.mini-project:hover { box-shadow: 0 28px 40px rgba(0,0,0,.14); transform: translateY(-8px); }.mini-project .project-number { position: relative; z-index: 1; }.mini-project .project-type { position: relative; z-index: 1; margin: 28px 0 10px; }.mini-project h3 { position: relative; z-index: 1; margin: 0 0 13px; font-family: var(--sans); font-size: clamp(29px, 3vw, 45px); font-weight: 600; letter-spacing: -.075em; line-height: .95; }.mini-project h3:first-letter { }.mini-project > p:not(.project-type) { position: relative; z-index: 1; max-width: 320px; margin: 0; color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.65; }.shortener { color: #ecf0ef; background: #263b37; }.cloudnest { color: #222a32; background: #d5e4e0; }.cloudnest .project-number, .cloudnest .project-type { color: #61736f; }.cloudnest > p:not(.project-type) { color: #4e5b5d; }.mini-visual { position: absolute; top: 20%; right: 7%; width: 52%; aspect-ratio: 1; }.url-bar { position: absolute; top: 23%; right: 2%; left: 2%; padding: 13px; border: 1px solid rgba(255,255,255,.34); border-radius: 8px; background: rgba(23,53,48,.78); box-shadow: 0 16px 28px rgba(0,0,0,.14); font: 15px var(--mono); transform: rotate(-7deg); }.url-bar span { color: #b2e2ba; }.url-bar b { color: rgba(255,255,255,.55); font-weight: 400; }.request-rings { position: absolute; bottom: -5%; left: 17%; width: 58%; aspect-ratio: 1; border: 1px solid rgba(205,255,223,.3); border-radius: 50%; }.request-rings i { position: absolute; inset: 15%; border: 1px solid rgba(205,255,223,.3); border-radius: 50%; }.request-rings i:nth-child(2) { inset: 30%; }.request-rings i:nth-child(3) { inset: 45%; background: #b9e4c2; box-shadow: 0 0 25px #b9e4c2; }.request-rings span { position: absolute; top: 47%; left: 47%; color: #e1ffdf; font: 14px var(--mono); transform: translate(-50%,-50%); }.cloud-icon { position: absolute; top: 5%; right: 20%; width: 50%; height: 32%; border: 1px solid #668486; border-radius: 40% 50% 44% 38%; transform: rotate(-7deg); }.cloud-icon:before, .cloud-icon:after { position: absolute; bottom: -15%; width: 47%; aspect-ratio: 1; content: ""; border: 1px solid #668486; border-radius: 50%; background: #d5e4e0; }.cloud-icon:before { left: -16%; }.cloud-icon:after { right: -11%; }.file-card { position: absolute; top: 35%; right: 10%; display: flex; width: 54%; aspect-ratio: .75; padding: 15px; flex-direction: column; border: 1px solid rgba(30,59,63,.36); border-radius: 5px; background: rgba(248,252,249,.45); box-shadow: 15px 20px 32px rgba(26,70,69,.13); transform: rotate(12deg); }.file-card span { font: 8px var(--mono); letter-spacing: .08em; }.file-card b { margin: auto; font-size: 43px; font-weight: 400; line-height: .4; }.file-card small { font-size: 8px; }.card-arrow { position: absolute; right: 24px; bottom: 23px; display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: transparent; font-size: 19px; transition: color .3s, background .3s, transform .3s var(--ease); }.card-arrow:hover { color: #121212; background: #fff; transform: rotate(45deg); }.cloudnest .card-arrow:hover { color: #fff; background: #172e2f; }.project-disclosure { margin: 24px 0 0; color: var(--muted); font: 9px var(--mono); letter-spacing: .03em; }

/* BUILDING */
.building { background: #151616; }.building-head { display: grid; gap: 40px; grid-template-columns: 1.13fr 1.05fr .55fr; align-items: end; }.building-head > p { max-width: 280px; margin: 0 0 8px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.7; }.timeline { position: relative; margin-top: 100px; }.timeline:before { position: absolute; top: 0; bottom: 0; left: 24%; width: 1px; content: ""; background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.03)); }.timeline-item { position: relative; display: grid; min-height: 195px; grid-template-columns: 24% 60px 1fr; }.timeline-date { padding-top: 10px; color: rgba(255,255,255,.43); font: 9px var(--mono); letter-spacing: .08em; }.timeline-orb { position: relative; z-index: 1; padding-top: 5px; }.timeline-orb i { display: block; width: 12px; height: 12px; margin-left: -6px; border: 3px solid #151616; border-radius: 50%; background: #a6c6ff; box-shadow: 0 0 0 1px rgba(166,198,255,.55), 0 0 18px rgba(114,159,255,.75); }.timeline-content { max-width: 555px; padding-bottom: 55px; }.timeline-content span { color: #a6c6ff; font: 9px var(--mono); letter-spacing: .08em; }.timeline-content h3 { margin: 9px 0 14px; font-size: clamp(25px,3vw,42px); font-weight: 600; letter-spacing: -.075em; }.timeline-content p { margin: 0; color: rgba(255,255,255,.63); font-size: 13px; line-height: 1.7; }

/* EDUCATION */
.education-layout { display: grid; gap: 60px; grid-template-columns: minmax(250px, 1fr) minmax(340px, 1.1fr); }.education-copy p:last-child { max-width: 360px; margin: 39px 0 0; color: #535353; font-size: 13px; line-height: 1.75; }.education-stack { position: relative; min-height: 490px; perspective: 1100px; }.edu-card { position: absolute; width: min(100%, 455px); padding: 27px; overflow: hidden; border: 1px solid rgba(20,20,20,.15); border-radius: 16px; box-shadow: 0 20px 42px rgba(0,0,0,.1); }.edu-card.main { z-index: 3; top: 52px; right: 0; min-height: 367px; color: #eaf1f5; background: #2d3d47; transform: rotateY(-10deg) rotateX(2deg); }.edu-card.back { z-index: 1; min-height: 230px; color: #343634; background: #e4e6de; }.edu-card.one { top: 0; right: 14%; transform: rotate(-3deg); }.edu-card.two { right: 28%; bottom: 0; color: #4d5150; background: #c4d3cd; transform: rotate(4deg); }.edu-card span { display: block; font: 9px var(--mono); letter-spacing: .07em; }.edu-card h3 { max-width: 330px; margin: 42px 0 12px; font-size: clamp(26px,3.1vw,39px); font-weight: 600; letter-spacing: -.07em; line-height: 1.02; }.edu-card p { max-width: 270px; margin: 0; color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.5; }.edu-card strong { position: absolute; right: 27px; bottom: 21px; font-size: 35px; font-weight: 500; letter-spacing: -.08em; }.edu-card strong small { display: inline; font-size: 9px; letter-spacing: 0; }.edu-card.back h3 { margin: 30px 0 0; font-size: 18px; }.edu-card.back strong { font-size: 28px; }.edu-cap { position: absolute; top: -33%; right: -7%; width: 85%; height: 70%; border: 1px solid rgba(207,234,255,.27); border-radius: 50%; transform: rotateX(62deg) rotateZ(-19deg); }.edu-cap:before, .edu-cap:after { position: absolute; inset: 18%; content: ""; border: 1px solid rgba(207,234,255,.21); border-radius: 50%; }.edu-cap:after { inset: 36%; }.cap-icon { position: absolute; right: 45px; bottom: 112px; width: 82px; height: 44px; border: 1px solid rgba(227,240,255,.65); transform: skewX(-28deg); }.cap-icon:after { position: absolute; right: 15px; bottom: -7px; left: 15px; height: 1px; content: ""; background: rgba(227,240,255,.75); }

/* ACHIEVEMENTS */
.achievements { background: #e9eae5; }.achieve-top { display: flex; gap: 35px; align-items: end; justify-content: space-between; }.achieve-top > p { max-width: 315px; margin: 0 0 8px; color: #555; font-size: 13px; line-height: 1.75; }.cert-grid { display: grid; margin-top: 85px; gap: 1px; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--line); }.cert-card { position: relative; display: flex; min-height: 310px; padding: 23px; flex-direction: column; background: #e9eae5; transition: color .45s, background .45s, transform .45s var(--ease); }.cert-card:hover { z-index: 1; color: #f4f4f0; background: #202728; transform: translateY(-9px); }.cert-number { color: var(--blue); font: 10px var(--mono); }.cert-org { margin-top: auto; color: #5e6664; font: 8px/1.5 var(--mono); letter-spacing: .06em; transition: color .45s; }.cert-card:hover .cert-org { color: #b5c5c0; }.cert-card h3 { margin: 13px 0 15px; font-size: clamp(18px, 1.7vw, 25px); font-weight: 600; letter-spacing: -.055em; line-height: 1.05; }.cert-card p { margin: 0; color: #777d7a; font: 9px var(--mono); }.cert-card:hover p { color: rgba(255,255,255,.55); }

/* RESUME AND CONTACT */
.resume { overflow: hidden; background: #111314; }.resume-layout { display: grid; gap: 60px; grid-template-columns: minmax(0, .9fr) minmax(260px, .65fr); align-items: center; }.resume-copy > p:not(.eyebrow) { max-width: 350px; margin: 35px 0 0; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.7; }.resume-actions { display: flex; margin-top: 33px; gap: 10px; flex-wrap: wrap; }.button { display: inline-flex; min-height: 45px; padding: 0 17px; gap: 20px; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.45); border-radius: 3px; font-size: 11px; font-weight: 700; transition: color .3s, background .3s, transform .3s var(--ease); }.button:hover { transform: translateY(-3px); }.button-light { color: #151515; border-color: #f1f1ed; background: #f1f1ed; }.button-outline { color: #f1f1ed; }.button-outline:hover { color: #151515; background: #f1f1ed; }.resume-paper { position: relative; display: flex; width: min(100%, 380px); min-height: 490px; margin: auto; padding: 31px; flex-direction: column; overflow: hidden; color: #202121; background: #eff0e9; box-shadow: 21px 28px 0 rgba(255,255,255,.09), 41px 48px 55px rgba(0,0,0,.38); transform: rotate(4deg); transition: transform .65s var(--ease), box-shadow .65s var(--ease); }.resume-paper:hover { box-shadow: 10px 14px 0 rgba(255,255,255,.09), 26px 32px 55px rgba(0,0,0,.38); transform: rotate(0deg) translateY(-8px); }.resume-paper:after { position: absolute; top: -20%; right: -25%; width: 75%; height: 58%; content: ""; border: 1px solid rgba(20,30,30,.2); border-radius: 50%; transform: rotate(28deg); }.paper-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }.paper-top span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #2f3634; border-radius: 50%; font: 15px var(--serif); font-style: italic; }.paper-top small { font: 7px var(--mono); letter-spacing: .07em; }.resume-paper h3 { position: relative; z-index: 1; margin: 95px 0 9px; font-size: clamp(31px,4vw,48px); font-weight: 600; letter-spacing: -.08em; line-height: .92; }.resume-paper > p { position: relative; z-index: 1; margin: 0; color: #5b625d; font: 9px var(--mono); }.resume-paper > i { position: relative; z-index: 1; width: 100%; height: 1px; margin: 45px 0 20px; background: #404642; }.paper-lines { position: relative; z-index: 1; display: grid; gap: 10px; }.paper-lines span { height: 1px; background: rgba(45,53,49,.4); }.paper-lines span:nth-child(2) { width: 76%; }.paper-lines span:nth-child(3) { width: 86%; }.paper-lines span:nth-child(4) { width: 58%; }.paper-lines span:nth-child(5) { width: 69%; }.resume-paper strong { position: relative; z-index: 1; margin-top: auto; font: 9px var(--mono); letter-spacing: .08em; }.resume-paper strong b { display: inline-block; margin-left: 8px; font-size: 16px; }
.profile-strip { padding: 0 clamp(22px, 7.5vw, 120px) 82px; color: #f0f0ed; background: #111314; }.profile-kicker { margin: 0; padding: 30px 0 17px; color: rgba(255,255,255,.47); border-top: 1px solid rgba(255,255,255,.17); font: 9px var(--mono); letter-spacing: .1em; }.profile-links { display: grid; border: 1px solid rgba(255,255,255,.17); border-right: 0; grid-template-columns: repeat(3, 1fr); }.profile-link { position: relative; display: flex; min-height: 170px; padding: 22px; flex-direction: column; justify-content: space-between; overflow: hidden; border-right: 1px solid rgba(255,255,255,.17); }.profile-link:before { position: absolute; inset: 100% 0 0; z-index: 0; content: ""; background: #f1f1ed; transition: inset .5s var(--ease); }.profile-link:hover:before { inset: 0; }.profile-link span, .profile-link strong { position: relative; z-index: 1; transition: color .4s; }.profile-link:hover span, .profile-link:hover strong { color: #151515; }.profile-link span { color: rgba(255,255,255,.55); font: 8px var(--mono); letter-spacing: .07em; }.profile-link strong { font-size: clamp(25px,3vw,45px); font-weight: 600; letter-spacing: -.075em; }.profile-link b { display: inline-block; margin-left: 4px; font-size: .65em; transition: transform .35s var(--ease); }.profile-link:hover b { transform: translate(3px,-3px); }
.contact { position: relative; min-height: 100svh; padding: 145px clamp(22px, 7.5vw, 120px) 25px; overflow: hidden; color: #efefeb; background: #20292b; }.contact:before { position: absolute; inset: 0; opacity: .6; content: ""; background: linear-gradient(120deg, #192022, transparent 65%), radial-gradient(circle at 78% 32%, rgba(134,190,190,.23), transparent 28%); }.contact-inner, .contact footer { position: relative; z-index: 1; max-width: 1360px; margin: auto; }.contact h2 { max-width: 800px; margin: 0; font-size: clamp(61px, 10vw, 154px); font-weight: 600; letter-spacing: -.09em; line-height: .8; }.contact h2 em { font-weight: 600; }.contact-lead { max-width: 355px; margin: 35px 0; color: rgba(255,255,255,.67); font-size: 14px; line-height: 1.7; }.contact-email { display: inline-block; max-width: 100%; padding-bottom: 5px; overflow-wrap: anywhere; border-bottom: 1px solid rgba(255,255,255,.6); color: #d8ecff; font-size: clamp(18px,2.35vw,35px); font-weight: 500; letter-spacing: -.055em; transition: color .3s; }.contact-email:hover { color: #fff; }.contact-email span { display: inline-block; margin-left: 8px; font-size: .75em; transition: transform .3s var(--ease); }.contact-email:hover span { transform: translate(4px,-4px); }.contact-grid { display: flex; margin: 45px 0; gap: 32px; flex-wrap: wrap; }.contact-grid a, .contact-grid > span { display: flex; gap: 6px; flex-direction: column; font-size: 12px; }.contact-grid span span { color: rgba(255,255,255,.47); font: 9px var(--mono); letter-spacing: .08em; }.contact-grid a { transition: color .3s; }.contact-grid a:hover { color: #b6d7ff; }.contact-form { display: flex; padding-top: 18px; gap: 25px; align-items: end; border-top: 1px solid rgba(255,255,255,.22); }.form-fields { display: grid; width: min(700px, 100%); gap: 23px; grid-template-columns: 1fr 1fr; }.form-fields label { position: relative; display: flex; flex-direction: column; }.form-fields label.wide { grid-column: 1 / -1; }.form-fields label > span { position: absolute; top: 9px; color: rgba(255,255,255,.42); font: 9px var(--mono); letter-spacing: .08em; transition: color .25s, transform .25s; }.form-fields input, .form-fields textarea { width: 100%; padding: 23px 0 8px; resize: vertical; outline: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); color: #fff; background: transparent; font-size: 13px; transition: border-color .25s; }.form-fields input:focus, .form-fields textarea:focus { border-color: #b5d5ff; }.form-fields input:focus + *, .form-fields textarea:focus + * { color: #fff; }.form-submit { min-width: 146px; min-height: 46px; padding: 0 16px; border: 1px solid #dce9ed; border-radius: 3px; color: #182123; background: #dce9ed; font-size: 11px; font-weight: 700; transition: transform .3s var(--ease), background .3s; }.form-submit:hover { background: #fff; transform: translateY(-3px); }.form-submit span { margin-left: 15px; }.form-status { margin: 0; color: #b6d7ff; font: 10px var(--mono); }.contact footer { display: flex; margin-top: 72px; justify-content: space-between; color: rgba(255,255,255,.48); font: 9px var(--mono); letter-spacing: .06em; }.contact footer a:hover { color: #fff; }.contact-orb { position: absolute; border: 1px solid rgba(220,245,247,.13); border-radius: 50%; }.orb-left { top: 15%; left: -13%; width: 43vw; height: 43vw; }.orb-right { right: -15%; bottom: -12%; width: 51vw; height: 51vw; border-color: rgba(190,222,255,.12); }

/* PROJECT DIALOG */
.project-dialog { width: min(100% - 32px, 900px); max-height: min(800px, 88svh); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; color: #eff2f4; background: #182027; box-shadow: 0 30px 100px rgba(0,0,0,.6); }.project-dialog::backdrop { background: rgba(6,9,11,.7); backdrop-filter: blur(8px); }.dialog-content { padding: clamp(33px, 6vw, 72px); }.dialog-close { position: sticky; z-index: 2; top: 18px; left: calc(100% - 60px); display: grid; width: 38px; height: 38px; margin-bottom: -38px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: white; background: rgba(15,19,24,.6); font-size: 23px; backdrop-filter: blur(8px); }.dialog-index { color: #a6c6ff; font: 9px var(--mono); letter-spacing: .1em; }.dialog-content .eyebrow { margin-top: 26px; color: rgba(255,255,255,.54); }.dialog-content h2 { max-width: 700px; margin: 0 0 20px; font-size: clamp(42px,6vw,75px); font-weight: 600; letter-spacing: -.08em; line-height: .92; }.dialog-summary { max-width: 590px; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.7; }.dialog-spec { display: grid; margin-top: 50px; gap: 45px; grid-template-columns: 1fr 1fr; }.dialog-spec article span, .architecture > span { color: #a6c6ff; font: 9px var(--mono); letter-spacing: .1em; }.dialog-spec p { margin: 14px 0 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.7; }.architecture { margin-top: 50px; padding: 28px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.025); }.architecture-nodes { display: grid; margin: 30px 0 20px; gap: 12px; grid-template-columns: 1fr 35px 1fr 35px 1fr; align-items: center; }.architecture-nodes div { padding: 15px 8px; border: 1px solid rgba(178,208,255,.35); border-radius: 4px; color: #e8f0ff; background: rgba(89,136,225,.1); text-align: center; font: 10px var(--mono); }.architecture-nodes i { height: 1px; background: linear-gradient(90deg, rgba(166,198,255,.25), #a6c6ff, rgba(166,198,255,.25)); }.architecture-note { margin: 0; color: rgba(255,255,255,.45); font: 9px/1.55 var(--mono); }.dialog-tags { display: flex; margin-top: 28px; gap: 8px; flex-wrap: wrap; }.dialog-tags span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 30px; color: rgba(255,255,255,.7); font: 9px var(--mono); }.dialog-result { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.15); color: #d4e3ff; font-size: 13px; line-height: 1.65; }

.automation { top: 16%; left: 3%; transform: rotate(-6deg); }

.text-link-btn{
  display: flex;
  align-items: center;
  gap: 30px;
}

@media (max-width: 800px) {
  .site-header { padding: 13px 16px; }.nav-shell { min-height: 46px; padding: 0 8px 0 16px; }.nav-links { display: none; }.menu-toggle { display: grid; width: 35px; height: 35px; padding: 0; gap: 4px; place-content: center; border: 0; border-radius: 50%; color: inherit; background: rgba(255,255,255,.1); }.menu-toggle span { display: block; width: 14px; height: 1px; background: currentColor; transition: transform .3s, opacity .3s; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.5px) rotate(-45deg); }.mobile-menu { position: absolute; top: 58px; right: 16px; left: 16px; padding: 11px; opacity: 0; visibility: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; color: #fff; background: rgba(17,18,18,.87); box-shadow: 0 15px 35px rgba(0,0,0,.2); transform: translateY(-12px); transition: .3s var(--ease); backdrop-filter: blur(18px); pointer-events: auto; }.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }.mobile-menu a { display: block; padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 700; }.mobile-menu a:last-child { border-bottom: 0; }.section-pad { padding: 92px 22px; }.section-index { margin-bottom: 37px; }.display-heading { font-size: clamp(43px, 12.5vw, 72px); }.cursor-dot, .cursor-ring { display: none; }
  .hero-copy { padding: 112px 22px 100px; }.sculpture-stage { top: 49%; left: 70%; width: 87vw; opacity: .8; }.hero-bottom { width: 100%; }.hero-statement { max-width: 222px; font-size: 12px; }.circle-link { width: 85px; height: 85px; padding: 16px; }.sculpture-tag { font-size: 6px; }.tag-one { right: 1%; }.tag-two { left: -3%; }.hero-footer { right: 22px; bottom: 23px; left: 22px; }.hero-footer span:last-child { display: none; }
  .intro-layout, .about-objects, .skills-experience, .projects-title-row, .building-head, .education-layout, .resume-layout { grid-template-columns: 1fr; }.intro-aside { padding-top: 0; }.about-objects { margin-top: 58px; }.degree-card { min-height: 350px; }.degree-card h3 { margin-top: 102px; }.stat-grid article { min-height: 124px; }.skills-header, .achieve-top { display: block; }.skills-instruction, .achieve-top > p { margin-top: 25px; }.skills-experience { min-height: auto; margin-top: 55px; }.skill-cloud { padding: 32px 0; }.skill-detail { padding: 36px 0 36px 23px; border-top: 1px solid var(--night-line); border-left: 0; }.skill-detail:before { top: 0; left: 23px; width: 64px; height: 2px; }.skills-foot { grid-template-columns: 1fr; gap: 7px; }.skills-foot p { margin-bottom: 13px; }
  .projects-title-row { margin-bottom: 48px; }.projects-title-row > p { margin: 0; }.feature-project { min-height: 720px; grid-template-columns: 1fr; }.feature-copy { min-height: 415px; padding: 30px; background: linear-gradient(180deg, #17202d 76%, transparent); }.feature-copy h3 { font-size: 54px; }.project-visual { min-height: 310px; }.mastmo-visual { margin-top: -120px; }.browser-window { top: 23%; left: 15%; width: 70%; }.project-rail { grid-template-columns: 1fr; }.mini-project { min-height: 445px; }.timeline { margin-top: 56px; }.timeline:before { left: 6px; }.timeline-item { grid-template-columns: 24px 1fr; min-height: 0; padding-bottom: 40px; }.timeline-date { grid-column: 2; grid-row: 1; padding-top: 0; }.timeline-orb { grid-column: 1; grid-row: 1 / span 2; padding-top: 1px; }.timeline-orb i { margin-left: 0; }.timeline-content { grid-column: 2; grid-row: 2; padding: 22px 0 0; }.education-stack { min-height: 400px; }.edu-card.main { width: 90%; min-height: 300px; }.edu-card.back { min-height: 180px; }.edu-card h3 { margin-top: 29px; }.edu-card.main h3 { margin-top: 46px; }.cert-grid { margin-top: 55px; grid-template-columns: 1fr 1fr; }.cert-card { min-height: 245px; }.resume-paper { min-height: 430px; }.resume-paper h3 { margin-top: 66px; }.profile-strip { padding-bottom: 55px; }.profile-links { grid-template-columns: 1fr; }.profile-link { min-height: 122px; }.contact { padding: 105px 22px 21px; }.contact h2 { font-size: clamp(59px, 16vw, 95px); }.contact-form { display: block; }.form-fields { grid-template-columns: 1fr; }.form-fields label.wide { grid-column: auto; }.form-submit { margin-top: 24px; }.form-status { margin-top: 14px; }.contact footer { margin-top: 55px; gap: 15px; flex-direction: column; }.dialog-spec { gap: 28px; grid-template-columns: 1fr; }.architecture-nodes { gap: 6px; grid-template-columns: 1fr 12px 1fr 12px 1fr; }.architecture-nodes div { padding: 12px 4px; font-size: 8px; }.project-dialog { max-height: 90svh; }
}

@media (max-width: 800px) { .hero-stack-stage { top: 49%; left: 70%; width: 87vw; opacity: .83; }.stack-card { padding: 15px; }.stack-tag { font-size: 6px; }.stack-tag.tag-one { right: 1%; }.stack-tag.tag-two { left: -3%; } }
@media (max-width: 420px) { .stat-grid article { padding: 15px; }.stat-grid strong { font-size: 41px; }.hero-bottom { gap: 10px; }.feature-copy h3 { font-size: 46px; }.project-metrics { gap: 10px; }.cert-grid { grid-template-columns: 1fr; }.cert-card { min-height: 205px; }.contact-grid { gap: 21px; }.resume-actions { align-items: stretch; flex-direction: column; }.button { width: max-content; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } }