.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 20; background: rgb(10 10 13 / .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.header { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--nav-height) - 1px); border: 0; gap: 32px; }
.wordmark { display: inline-flex; align-items: baseline; position: relative; font-size: 2.6rem; font-weight: 700; letter-spacing: -.085em; line-height: 1; }
.wordmark .brand-x { margin: 0; font-size: inherit; font-weight: inherit; color: var(--accent); letter-spacing: inherit; }
.wordmark .brand-point { width: 7px; height: 7px; margin: 0 0 3px 5px; background: var(--accent); border-radius: 50%; }
.wordmark:hover { text-decoration: none; }
.primary-navigation { display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); margin-left: auto; }
.primary-navigation a { display: flex; align-items: baseline; gap: 9px; position: relative; color: #c4c4cb; font-size: .875rem; padding-block: 14px; text-decoration: none; transition: color .2s; }
.primary-navigation a::after { content: ''; position: absolute; bottom: 7px; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.primary-navigation a:hover { color: var(--ink); }
.primary-navigation a:hover::after { transform: scaleX(1); }
.header-cta { display: inline-flex; gap: 10px; align-items: center; border: 1px solid #45454f; border-radius: 100px; padding: 12px 20px; white-space: nowrap; font-size: .875rem; transition: border-color .2s, background .2s; }
.contact-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }
.header-cta:hover { background: #202027; border-color: var(--accent); text-decoration: none; }
.menu-toggle, .primary-navigation .nav-mobile-contact { display: none; }
.first-screen { position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; min-height: calc(100vh - var(--nav-height)); min-height: calc(100dvh - var(--nav-height)); background-image: linear-gradient(rgb(255 255 255 / .025) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px); background-size: 88px 88px; }
.hero-light { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 87% 30%, rgb(125 91 225 / .16), transparent 47%), radial-gradient(ellipse at 64% 80%, rgb(78 184 208 / .065), transparent 48%); }
.hero-screen { position: relative; flex: 1; display: flex; flex-direction: column; }
.hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "title journey" "copy journey"; align-content: center; align-items: start; gap: clamp(22px, 3.5vh, 36px) clamp(32px, 4vw, 64px); padding-block: clamp(26px, 4vh, 56px); }
.hero h1 { grid-area: title; min-width: 0; font-size: clamp(3.5rem, min(7.2vw, 10.8vh), 7.1rem); font-weight: 700; line-height: 1.045; letter-spacing: -.065em; }
.hero .hero-line { display: block; color: var(--ink); }
.hero .hero-line-secondary { color: #8d8d9b; font-size: .72em; line-height: 1.13; letter-spacing: -.055em; }
.hero .hero-line-secondary:nth-child(2) { margin-top: .3em; }
.hero .gradient-text { display: block; color: var(--accent); background: linear-gradient(110deg, #c2a5ff 5%, #a7b5fc 55%, #85dce9 100%); background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy { grid-area: copy; min-width: 0; }
.hero .intro { max-width: 590px; color: #a7a7b3; font-size: clamp(1rem, 1.32vw, 1.125rem); line-height: 1.65; }
.hero .intro strong { color: var(--ink); font-weight: 400; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 52px; padding: 16px 25px; border: 1px solid transparent; border-radius: 100px; background: var(--ink); color: #141419; font-size: .875rem; font-weight: 700; transition: background .25s, transform .25s, box-shadow .25s; }
.button:hover { background: #d9caff; color: #141419; transform: translateY(-3px); box-shadow: 0 8px 32px rgb(169 141 255 / .15); }
.button:active { transform: translateY(0); }
.text-link { display: inline-block; padding-block: 9px; font-size: .875rem; text-decoration: underline; text-decoration-color: #5c5c6c; text-underline-offset: 6px; transition: color .2s, text-decoration-color .2s; }
.text-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.hero-marquee { position: relative; display: flex; flex-shrink: 0; overflow: hidden; background: #14131c; border-block: 1px solid #373044; color: #d3c6f3; }
.marquee-window { flex: 1; min-width: 0; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 48s linear infinite; animation-play-state: paused; }
.hero-marquee.is-moving .marquee-track { animation-play-state: running; }
.marquee-group { display: flex; flex-shrink: 0; align-items: center; white-space: nowrap; gap: 38px; padding: 20px 19px; font-size: .875rem; line-height: 1.3; letter-spacing: .085em; text-transform: uppercase; }
.marquee-group span { display: flex; align-items: center; gap: 38px; }
.marquee-group span::after { content: ''; flex-shrink: 0; border-radius: 50%; height: 5px; width: 5px; background: var(--accent); box-shadow: 0 0 10px rgb(185 160 255 / .15); }
body.motion-enabled .hero-line { animation: hero-enter .85s both cubic-bezier(.2, .65, .2, 1); }
body.motion-enabled .hero-line:nth-child(2) { animation-delay: .1s; }
body.motion-enabled .hero-line:nth-child(3) { animation-delay: .2s; }
body.motion-enabled .hero-copy, body.motion-enabled .hero-journey { animation: hero-enter .9s .3s both cubic-bezier(.2, .65, .2, 1); }
body.motion-enabled .hero-light { animation: light-drift 18s ease-in-out infinite alternate; }
body.page-inactive *, body.page-inactive *::before, body.page-inactive *::after { animation-play-state: paused !important; }
.first-screen.is-offscreen *, .first-screen.is-offscreen *::before, .first-screen.is-offscreen *::after { animation-play-state: paused !important; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marquee-scroll { to { transform: translateX(var(--marquee-shift, -50%)); } }
@keyframes light-drift { to { transform: translate(-5%, 6%) scale(1.1); } }
@media (min-width: 1600px) { .hero { padding-block: 52px; } }
@media (max-width: 1000px) {
  .header { gap: 24px; }
  .primary-navigation { gap: 24px; }
  .header-cta { padding-inline: 15px; }
  .hero .actions { gap: 10px 18px; }
  .hero .button { padding-inline: 19px; }
}
@media (max-width: 760px) {
  :root { --nav-height: 72px; }
  .header { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
  .wordmark { font-size: 2.2rem; }
  .wordmark .brand-x, .wordmark .brand-point { display: inline-block; }
  .header-cta { margin-left: auto; padding: 9px 15px; font-size: .875rem; }
  .header-cta .contact-dot { display: none; }
  .primary-navigation { order: 3; width: 100%; justify-content: space-between; margin: 0; }
  .has-menu .menu-toggle { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 8px 0 8px 10px; border: 0; background: none; color: var(--ink); font: inherit; font-size: .875rem; cursor: pointer; }
  .menu-glyph { position: relative; width: 20px; height: 14px; }
  .menu-glyph::before, .menu-glyph::after { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 1px; background: currentColor; transition: transform .25s, top .25s; }
  .menu-glyph::after { top: 10px; }
  .is-menu-open .menu-glyph::before { top: 7px; transform: rotate(45deg); }
  .is-menu-open .menu-glyph::after { top: 7px; transform: rotate(-45deg); }
  .has-menu .primary-navigation { display: none; position: absolute; left: 0; top: 100%; padding: 16px 24px 24px; border-bottom: 1px solid var(--line); background: #111116; }
  .is-menu-open .primary-navigation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .is-menu-open .primary-navigation a { min-height: 55px; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
  .is-menu-open .primary-navigation .nav-mobile-contact { display: flex; color: var(--accent); border: 0; }
  .first-screen { background-size: 112px 112px; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "copy"; align-content: center; gap: 32px; padding-block: 40px; }
  .hero h1 { font-size: clamp(3rem, 15.5vw, 4.75rem); line-height: 1.02; letter-spacing: -.06em; }
  .hero .gradient-text { display: block; width: fit-content; }
  .hero .hero-line-secondary { color: #aaa7b7; font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.22; letter-spacing: -.045em; }
  .hero .hero-line-secondary:nth-child(2) { margin-top: 24px; }
  .hero .intro { max-width: 540px; font-size: 1rem; line-height: 1.65; }
  .hero .actions { display: grid; justify-items: center; max-width: 400px; margin-top: 32px; gap: 8px; }
  .hero .button { width: 100%; min-height: 56px; padding: 16px 20px; font-size: .9375rem; }
  .hero .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
  .marquee-group { padding-block: 14px; font-size: .75rem; }
}
@media (max-width: 440px) {
  .header-cta { display: none; }
  .has-menu .menu-toggle { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee-track { width: 100%; }
  .marquee-group { min-width: 0; width: 100%; padding: 16px 20px; gap: 12px 24px; white-space: normal; flex-wrap: wrap; }
  .marquee-group span { gap: 12px; }
  .marquee-group[aria-hidden] { display: none; }
  .hero-line, .hero-copy, .hero-journey { opacity: 1 !important; transform: none !important; }
}
@media print { .site-header, .hero-light, .hero-marquee { display: none; } .first-screen { min-height: auto; } }