.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; padding: .8rem 1rem; background: #fff; color: #08070b; transform: translateY(-200%); font: 600 1rem Manrope, Arial, sans-serif }
.skip-link:focus { transform: translateY(0); outline: 3px solid #369bfa; outline-offset: 2px }
header.site-header, .hero > header.site-header { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; padding: 0 5vw; border-bottom: 1px solid rgba(255,255,255,.2); background: rgba(8,7,11,.92); position: relative; z-index: 20 }
.tool-page .release-grid h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .7rem; line-height: 1.4; letter-spacing: -.015em }
.tool-page :is(.nodemap,.verified) h3 { margin: 0; font: 600 .875rem/1.6 Manrope, Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--white) }
.site-header .brand { font: 800 1.7rem Manrope, Arial, sans-serif; letter-spacing: -.1em }
.site-header nav { display: flex; gap: 1.4rem; align-items: center; color: #cac3d2; font: 500 .75rem/1.4 "DM Mono", monospace; letter-spacing: .03em; text-transform: uppercase }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: #fff }
.site-header .site-contact { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: #faf8fc; color: #08070b; padding: .7rem 1rem; border: 0; border-radius: 0; font: 600 .84rem Manrope, Arial, sans-serif; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid #fff; outline-offset: 4px }
.hero .reel-background { background: linear-gradient(90deg, rgba(8,7,11,.55), rgba(8,7,11,.15)), url('assets/work-msi-qdoled.jpg') center / cover no-repeat }
.hero .hero-title { align-self: center; margin: 0 auto 0 0; font-size: clamp(2.8rem, 6vw, 6.5rem); line-height: 1; letter-spacing: -.065em; max-width: 10ch; text-shadow: 0 2px 22px #000 }
.form-status { color: #faf8fc; font-size: .875rem; line-height: 1.5; margin: 0 }
.form-status:empty { display: none }
@media (max-width: 760px) {
  header.site-header, .hero > header.site-header { height: auto; min-height: 76px; flex-wrap: wrap; gap: .4rem 1rem; padding: .75rem 5vw }
  .site-header nav { order: 3; width: 100%; gap: .9rem; overflow-x: auto; font: 500 .8125rem/1.4 Manrope, Arial, sans-serif; letter-spacing: 0; text-transform: none }
  .site-header nav a { white-space: nowrap }
  .site-header .site-contact { margin-left: auto }
  .hero .content { flex-wrap: wrap; align-content: center; gap: 1rem; padding: 3rem 6vw }
  .hero .hero-title { flex-basis: 100%; font-size: clamp(2.7rem, 12vw, 4.5rem); margin-bottom: 2rem }
  .hero .watch { margin: 0 }
}