* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 50% 0%, #141c2b 0, var(--bg) 42rem); font-family: var(--sans); overflow-x: hidden; }
body, button, a { cursor: default; }
a, button { color: inherit; }
a { text-decoration: none; }
button { border: 0; font: inherit; background: none; }
.page-wrap { width: min(calc(100% - 64px), var(--max)); margin-inline: auto; position: relative; z-index: 2; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--acid); color: #090b0d; }
.skip-link:focus { top: 1rem; }
.noise { position: fixed; inset: 0; z-index: 5; opacity: .055; pointer-events: none; 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='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
#neural-canvas { position: fixed; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; height: 36px; box-sizing: content-box; padding: 26px 32px; mix-blend-mode: screen; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { font-size: 1.6rem; line-height: 1; letter-spacing: -.12em; font-weight: 800; } .brand-logo { display: block; width: clamp(122px, 14.3vw, 185px); height: 46.8px; max-height: none; object-fit: contain; }
.brand-mark span { color: var(--acid); }
.brand-copy { display: grid; gap: 2px; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; }
.brand-copy small { color: var(--muted); font-size: 7px; letter-spacing: .18em; }
.topbar-meta { display: flex; gap: 22px; align-items: center; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.live-dot, .legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--acid); box-shadow: 0 0 16px var(--acid); }
.sound-toggle { padding: 7px 0; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.sound-toggle span { color: var(--acid); }
.scene-nav { position: fixed; right: 29px; top: 50%; z-index: 20; display: grid; gap: 15px; transform: translateY(-50%); }
.scene-nav-line { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 1px; background: var(--line); }
.scene-dot { position: relative; width: 15px; height: 15px; border: 1px solid var(--line-bright); border-radius: 50%; background: var(--bg); transition: all .4s var(--ease); }
.scene-dot i { position: absolute; right: 28px; top: 0; opacity: 0; color: var(--muted); font: 9px var(--mono); font-style: normal; transition: opacity .3s; }
.scene-dot:hover i, .scene-dot.is-active i { opacity: 1; }
.scene-dot.is-active { border-color: var(--acid); background: var(--acid); box-shadow: 0 0 20px rgba(155,124,255,.4); }
.scene { position: relative; min-height: 100vh; overflow: hidden; padding: 140px 0 100px; }
.eyebrow { margin: 0 0 28px; color: var(--acid); font: 10px var(--mono); letter-spacing: .16em; }
.eyebrow span { color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 24px; font-size: clamp(3rem, 7vw, 7.8rem); line-height: .88; letter-spacing: -.08em; font-weight: 700; }
h2 em, .hero-title em { color: var(--acid); font-style: normal; }
.muted, .section-aside { color: var(--muted); line-height: 1.75; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 800px) { .page-wrap { width: min(calc(100% - 36px), var(--max)); } .topbar { padding: 20px 18px; } .topbar-meta > span:not(.live-dot) { display: none; } .scene-nav { right: 14px; } .scene { padding-top: 120px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } }

.header-cv-link { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; gap: 16px; padding: 10px 15px; border: 1px solid rgba(170, 119, 255, .82); background: rgba(112, 54, 202, .2); color: #dccbff; font: 10px var(--mono); letter-spacing: .12em; transform: translate(-50%, -50%); box-shadow: 0 0 24px rgba(139, 92, 246, .24), inset 0 0 18px rgba(139, 92, 246, .12); transition: color .3s, background .3s, border-color .3s, box-shadow .3s, transform .3s; }
.header-cv-link:hover, .header-cv-link:focus-visible { border-color: #c4a4ff; background: rgba(139, 92, 246, .62); color: #fff; box-shadow: 0 0 30px rgba(139, 92, 246, .48); transform: translate(-50%, -54%); }
.header-cv-link span { color: #f0e8ff; }
@media (max-width: 800px) { .header-cv-link { padding: 9px 12px; font-size: 9px; } }
@media (max-width: 560px) { .header-cv-link { padding: 8px 10px; letter-spacing: .08em; } .header-cv-link span { display: none; } }