/* Breakpoints, reduced motion and structural support for the markup.
   Load order is part of the cascade: keep the numeric prefixes in sequence. */
/* Breakpoints for the header and the first screen. */
.primary-nav { position: fixed; display: flex; justify-content: space-between; align-items: center; z-index: 200; pointer-events: none; width: auto; max-width: var(--content-max); margin-inline: auto; border: 1px solid rgba(243,241,234,.14); top: 16px; left: 24px; right: 24px; min-height: 64px; padding: 8px 10px 8px 22px; border-color: rgba(243,241,234,.17); border-radius: 16px; background: rgba(11,12,13,.94); box-shadow: 0 12px 34px rgba(0,0,0,.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }
.nav-logo { text-decoration: none; min-height: 40px; padding-inline: 4px; color: var(--fg); white-space: nowrap; font-size: 12px; letter-spacing: .2em; font-weight: 650; text-transform: none; display: inline-flex; gap: 10px; align-items: center }
.nav-logo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px rgba(179,255,72,.55) }
.nav-actions { display: flex; align-items: center; min-width: 0; padding-right: 0; gap: 14px }
.nav-links { display: flex; list-style: none; align-items: center; gap: 2px }
.nav-links a { text-transform: uppercase; text-decoration: none; transition: color .3s; display: flex; align-items: center; padding: 0 11px; color: var(--muted); min-height: 40px; letter-spacing: .1em; font-size: 12px; padding-inline: 14px; border-radius: 10px }
.nav-menu-toggle { display: none; align-items: center; gap: 10px; min-height: 42px; padding: 0 13px; border: 1px solid rgba(243,241,234,.18); border-radius: 10px; background: transparent; color: var(--color-paper-50); font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase }
.menu-lines { display: grid; gap: 4px; width: 16px }
.menu-lines::before { content: ''; display: block; width: 16px; height: 1px; background: currentColor; transition: transform .3s var(--ease-out) }
.menu-lines::after { content: ''; display: block; width: 16px; height: 1px; background: currentColor; transition: transform .3s var(--ease-out) }
.primary-nav.menu-open .menu-lines::before { transform: translateY(2.5px) rotate(45deg) }
.primary-nav.menu-open .menu-lines::after { transform: translateY(-2.5px) rotate(-45deg) }
.lang-switch { align-items: center; padding: 3px; border-radius: 999px; flex-shrink: 0; border-color: rgba(210,220,255,.15); display: flex!important; visibility: visible!important; opacity: 1!important; transform: none!important; background: #17191b!important; border: 1px solid rgba(255,255,255,.3)!important; position: static!important; top: auto!important; right: auto!important; z-index: auto!important; box-shadow: none }
.hero-portrait { position: absolute; z-index: 2; right: clamp(108px,11.5vw,184px); bottom: clamp(42px,6vh,76px); width: min(24vw,370px); aspect-ratio: 2/3; margin: 0; overflow: hidden; border-radius: 18px; background: var(--color-ink-950); box-shadow: 0 30px 70px rgba(11,12,13,.24) }
.hero-portrait::before { content: ''; position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(245,243,237,.18); border-radius: inherit; pointer-events: none }
.hero-portrait::after { content: ''; position: absolute; z-index: 3; right: 0; bottom: 0; width: 38%; height: 4px; background: var(--accent) }
.hero-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(.72) contrast(1.05); transition: transform .8s var(--ease-out),filter .4s ease }
.hero-portrait:hover img { transform: scale(1.018); filter: saturate(.9) contrast(1.03) }
.hero-portrait figcaption { position: absolute; z-index: 3; left: 16px; bottom: 16px; padding: 8px 10px; border-radius: 999px; background: rgba(11,12,13,.82); color: var(--color-paper-50); font: 700 9px var(--mono); letter-spacing: .11em; text-transform: uppercase; backdrop-filter: blur(8px) }
.hero-title { font-weight: 300; text-wrap: balance; overflow: visible; text-shadow: none; line-height: .91; letter-spacing: -.052em; font-size: var(--text-display); max-width: 64% }
.hero-sub { margin-top: 38px; color: var(--dim); font-weight: 400; text-wrap: pretty; line-height: 1.65; font-size: var(--text-body-lg); max-width: min(570px,48%) }
@media(max-width:1050px) {
  .primary-nav { left: 16px; right: 16px; padding-left: 18px }
  .nav-menu-toggle { display: inline-flex; margin-left: auto }
  .nav-actions { margin-left: 8px }
  .nav-links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid!important; gap: 4px; padding: 10px; border: 1px solid rgba(243,241,234,.16); border-radius: 16px; background: rgba(11,12,13,.98); box-shadow: 0 24px 54px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease,transform .25s var(--ease-out),visibility .25s }
  .primary-nav.menu-open .nav-links { opacity: 1; visibility: visible; transform: none }
  .nav-links li { display: block!important }
  .nav-links li:nth-child(-n+4) { display: block!important }
  .nav-links a { justify-content: space-between; min-height: 48px; padding: 0 16px; color: rgba(243,241,234,.72); font-size: 12px }
  .nav-links .nav-cta { margin-top: 4px; justify-content: center }
  .hero-portrait { right: 92px; width: clamp(220px,26vw,290px) }
  .hero-title { max-width: 63%; font-size: clamp(50px,7.6vw,84px) }
  .cli-feature-grid { grid-template-columns: 1fr; }
  .cli-feature-visual { min-height: 480px; }
  .engineering-head { grid-template-columns: 1fr; gap: 22px }
  .engineering-cases { grid-template-columns: repeat(2,1fr) }
  .engineering-case:nth-child(2) { border-right: 0 }
  .engineering-case:nth-child(-n+2) { border-bottom: 1px solid rgba(11,12,13,.18) }
  .product-head { grid-template-columns: 1fr; gap: 22px }
  .product-panel { grid-template-columns: 1fr }
  .product-screen { order: -1; min-height: 290px; border-left: 0; border-bottom: 1px solid rgba(243,241,234,.14) }
  .product-specs { grid-template-columns: repeat(2,1fr) }
  .product-spec:nth-child(2) { border-right: 0 }
  .product-spec:nth-child(-n+2) { border-bottom: 1px solid rgba(243,241,234,.16) }
}
@media(max-width:768px) {
  .primary-nav { top: 10px; left: 10px; right: 10px; min-height: 58px; padding: 7px 8px 7px 14px; border-radius: 14px }
  .product-points li { grid-template-columns: 1fr; gap: 5px; padding: 14px 2px }
  .product-cta { gap: 14px }
  .product-cta .btn-p { width: 100%; justify-content: center }
  .product-cta .btn-g { width: 100%; justify-content: center }
  .product-specs { grid-template-columns: 1fr }
  .product-spec { padding: 20px 2px; border-right: 0; border-bottom: 1px solid rgba(243,241,234,.16) }
  .product-spec:last-child { border-bottom: 0 }
  .product-spec strong { max-width: 100% }
  .nav-logo { font-size: 10px }
  .nav-menu-toggle { min-height: 40px; padding-inline: 11px }
  .nav-actions { margin-left: 0 }
  .lang-switch { padding: 2px }
  .lang-btn { min-width: 34px; min-height: 32px; padding-inline: 7px }
  .hero { display: flex; min-height: auto!important; padding-top: 92px!important; padding-bottom: 44px!important; justify-content: flex-start!important }
  .hero-portrait { position: relative; right: auto; bottom: auto; order: 0; width: min(72vw,300px); height: auto; aspect-ratio: 2/3; margin: 0 auto 28px; border-radius: 14px; box-shadow: 0 18px 44px rgba(11,12,13,.18) }
  .hero-portrait img { object-fit: contain; object-position: center }
  .hero-portrait figcaption { left: 12px; bottom: 12px; font-size: 8px }
  .hero-eyebrow { order: 1 }
  .hero-title { order: 2; max-width: calc(100% - 24px) }
  .hero-sub { order: 3; max-width: calc(100% - 24px) }
  .hero-cta { order: 4 }
  .signal-strip { order: 5 }
  .scroll-ind { order: 6 }
  .cli-feature-copy h2 { font-size: clamp(42px,12vw,66px) }
  .cli-feature-lead { margin-top: 22px }
  .cli-proof { margin-top: 30px }
  .cli-feature-actions { gap: 12px; margin-top: 28px }
  .cli-feature-actions .btn-p,.cli-feature-actions .btn-g { width: 100%; justify-content: center }
  .cli-feature-visual { min-height: 390px; }
  .cli-visual-caption { left: 18px; right: 18px; bottom: 18px; flex-direction: column; align-items: flex-start }
  .cli-visual-caption small { text-align: left }
}
@media(prefers-reduced-motion:reduce) {
  .w-canvas { display: none }
  .w-item { background: var(--color-system-900) }
  .screen-scan { animation: none; opacity: .5 }
  .cli-feature-visual { transition: none }
}
/* Structural support for the refactored markup.
   The project cards are real buttons and the dialog owns the page scroll lock,
   both of which need their defaults normalised rather than simulated. */
.w-item { appearance: none; -webkit-appearance: none; width: 100%; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left }
.w-content { position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(24px,3vw,42px); background: linear-gradient(180deg,transparent 0,rgba(11,12,13,.7) 34%,rgba(11,12,13,.98) 100%); display: block }
.w-title { font-weight: 300; max-width: 80%; font-size: clamp(24px,3vw,44px); line-height: 1.02; letter-spacing: -.035em; display: block }
.hero-title .ti-delayed { transition-delay: .08s }
body.modal-open { overflow: hidden }
/* The intro used to fade through a WebGL transition; the visible part was
   always just the loader's opacity. */
#loader { position: fixed; inset: 0; z-index: 700; background: var(--bg); transition: opacity .98s ease }
#loader.is-leaving { opacity: 0; pointer-events: none }
@media(prefers-reduced-motion:reduce) {
  #loader { transition: none }
}