:root {
  --lux-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --lux-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --lux-red: #ef1919;
  --lux-paper: #f4f1eb;
  --lux-ink: #050607;
  --lux-line: rgba(244, 241, 235, .16);
  --lux-glass: rgba(7, 8, 8, .68);
  --lux-haze: rgba(244, 241, 235, .06);
}

html {
  scroll-padding-top: 92px;
  overflow-x: clip !important;
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(239, 25, 25, .12), transparent 28rem),
    radial-gradient(circle at 86% 42%, rgba(255, 255, 255, .055), transparent 30rem),
    linear-gradient(180deg, #050607, #090a0a 42%, #050607);
  animation-name: luxPageFade !important;
  overflow-x: clip !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(115deg, transparent 0 37%, rgba(255, 255, 255, .16) 38%, transparent 39% 100%),
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 240px 100%, 100% 94px;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
  transform: translate3d(0, calc(var(--scroll, 0) * -.035px), 0);
}

@keyframes luxPageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.site-header,
header.nav.wrap {
  backdrop-filter: blur(22px) saturate(1.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
}

.site-header,
html.am-ambient-ready body > .site-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(5, 6, 6, .94), rgba(5, 6, 6, .72));
  border-bottom: 1px solid rgba(244, 241, 235, .12);
}

.site-header .nav {
  width: 100%;
  max-width: none;
  min-height: 78px;
  padding-inline: clamp(18px, 3.2vw, 46px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

header.nav.wrap {
  min-height: 62px;
  border: 1px solid rgba(244, 241, 235, .13);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)),
    rgba(4, 5, 5, .78);
  box-shadow: 0 18px 70px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .09);
}

.brand {
  letter-spacing: -.01em;
}

.brand-mark,
.brand img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 32px rgba(0, 0, 0, .42);
}

.nav-links a {
  min-height: 40px;
  border-radius: 999px;
  color: rgba(244, 241, 235, .72);
  transition:
    color 160ms ease,
    background 160ms ease,
    transform 160ms var(--lux-ease-out),
    box-shadow 180ms var(--lux-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: var(--lux-paper);
    background: rgba(255, 255, 255, .07);
    transform: translateY(-1px);
  }
}

.nav-links a:active,
.button:active,
.product-card:active,
.intent-card:active,
.magnetic:active {
  transform: scale(.97);
}

.nav-links .store-link,
.button.primary {
  box-shadow: 0 14px 36px rgba(239, 25, 25, .22), inset 0 1px rgba(255, 255, 255, .2);
}

.hero {
  overflow: clip;
  min-height: min(980px, 100svh);
  padding-top: clamp(126px, 13vh, 156px);
  border-bottom: 1px solid rgba(244, 241, 235, .1);
}

.hero::before {
  opacity: .58;
  mix-blend-mode: screen;
}

.hero-bg {
  filter: contrast(1.05) saturate(.98);
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 44%, transparent 0 20%, rgba(0, 0, 0, .46) 48%, rgba(0, 0, 0, .82)),
    linear-gradient(90deg, rgba(0, 0, 0, .96), rgba(0, 0, 0, .3) 46%, rgba(0, 0, 0, .72));
}

.hero-copy {
  max-width: 850px;
}

.hero-logo-plate {
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14),
    0 30px 80px rgba(0, 0, 0, .54),
    0 0 58px rgba(239, 25, 25, .22);
}

.hero-kicker,
.system-strip span,
.tag {
  letter-spacing: .12em;
}

.hero h1 {
  max-width: 9.2ch;
  text-shadow: 0 22px 62px rgba(0, 0, 0, .72);
}

.hero-heading-line.hot {
  color: var(--lux-red);
  text-shadow:
    0 0 32px rgba(239, 25, 25, .62),
    0 20px 54px rgba(0, 0, 0, .7);
}

.hero .lead {
  max-width: 760px;
  color: rgba(244, 241, 235, .86);
  text-wrap: balance;
}

.hero-machine {
  filter: drop-shadow(0 26px 64px rgba(0, 0, 0, .72));
}

.cover-node {
  border-radius: 14px;
  background: rgba(4, 5, 5, .6);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 22px 70px rgba(0, 0, 0, .64),
    0 0 32px rgba(239, 25, 25, .11);
}

@media (hover: hover) and (pointer: fine) {
  .cover-node:hover,
  .product-card:hover,
  .rack-shot:hover,
  .update-main:hover,
  .intent-card:hover {
    transform: translateY(-4px);
  }
}

.system-strip {
  top: 96px;
  border-block: 1px solid rgba(244, 241, 235, .11);
  background:
    linear-gradient(90deg, rgba(239, 25, 25, .06), transparent 42%, rgba(255, 255, 255, .04)),
    rgba(8, 8, 8, .68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.summer-sale {
  position: relative;
  overflow: clip;
  padding-block: clamp(46px, 6vw, 86px);
  background:
    radial-gradient(circle at 82% 18%, rgba(239, 25, 25, .16), transparent 25rem),
    linear-gradient(180deg, #080909, #050607);
}

.summer-sale::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(244, 241, 235, .09);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.summer-sale-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: stretch;
  min-height: 0 !important;
  border: 1px solid rgba(244, 241, 235, .14);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
    rgba(6, 7, 7, .72);
  box-shadow: 0 34px 110px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.summer-sale-poster {
  min-height: 0;
  border-radius: 20px;
  background: #030303;
}

.summer-sale-poster img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.summer-sale-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.summer-sale-copy h2 {
  max-width: 7ch;
  text-transform: uppercase;
  letter-spacing: -.035em;
}

.sale-code {
  border-color: rgba(239, 25, 25, .42);
  background:
    linear-gradient(90deg, rgba(239, 25, 25, .16), rgba(255, 255, 255, .05)),
    rgba(0, 0, 0, .34);
  box-shadow: 0 18px 48px rgba(239, 25, 25, .13);
}

.latest-update,
.machine-intent,
.brand-carousel,
.section,
.machine-grid {
  position: relative;
}

.latest-update::before,
.machine-intent::before,
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, .055) 47%, transparent 49%),
    radial-gradient(circle at 8% 24%, rgba(239, 25, 25, .08), transparent 24rem);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

.product-card,
.intent-card,
.update-main,
.update-link,
.rack-shot,
.metric,
.card {
  border-color: rgba(244, 241, 235, .13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018)),
    rgba(7, 8, 8, .78) !important;
  box-shadow: 0 24px 74px rgba(0, 0, 0, .35);
}

.product-card img,
.rack-shot img,
.update-main img,
.update-link img,
.card img {
  background: #030404;
}

.lux-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 520ms var(--lux-ease-out),
    transform 560ms var(--lux-ease-out);
}

.lux-reveal.is-lux-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
  .button,
  .product-card,
  .cover-node,
  .rack-shot,
  .update-main,
  .intent-card {
    transform: var(--lux-tilt, translateZ(0));
    transition:
      transform 180ms var(--lux-ease-out),
      box-shadow 180ms var(--lux-ease-out),
      border-color 180ms ease,
      background 180ms ease;
  }
}

.product-info h3,
.card .info h3 {
  text-wrap: balance;
}

.brand-carousel {
  overflow: hidden;
  border-block: 1px solid rgba(244, 241, 235, .1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
    #060707;
}

.logo-cell {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .075), transparent 72%),
    rgba(255, 255, 255, .018);
  border-color: rgba(255, 255, 255, .1);
}

.logo-cell img[src*="elektron"] {
  filter: invert(1) brightness(1.2) drop-shadow(0 0 14px rgba(255, 255, 255, .18));
}

.section-rail {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ticker {
  overflow: hidden;
}

.back-top {
  border: 1px solid rgba(244, 241, 235, .16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
    rgba(5, 6, 6, .76) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.am-support__launcher {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .2), transparent 32%),
    linear-gradient(145deg, rgba(239, 25, 25, .22), rgba(255, 255, 255, .035)),
    rgba(3, 4, 4, .94);
}

.am-support__launcher::after {
  content: "";
  width: 11px;
  height: 2px;
  right: 11px;
  bottom: 12px;
  border: 0;
  border-radius: 99px;
  background: var(--lux-red);
}

.am-support__panel {
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
    radial-gradient(circle at 18% 0, rgba(239, 25, 25, .14), transparent 19rem),
    rgba(5, 6, 6, .97);
}

.am-support__message {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}

@media (max-width: 920px) {
  .site-header {
    top: 0;
    padding: 0;
  }

  .site-header .nav {
    min-height: 72px;
    padding-inline: 14px;
  }

  header.nav.wrap {
    min-height: 56px;
    border-radius: 18px;
  }

  .site-header .brand span:last-child,
  header.nav.wrap .brand {
    font-size: .82rem;
  }

  .menu-toggle,
  .catalog-menu-toggle {
    display: grid !important;
    flex: 0 0 42px;
  }

  .site-header .nav-links,
  header.nav.wrap .nav-links {
    position: fixed !important;
    top: 80px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    max-height: min(72dvh, 520px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(244, 241, 235, .13);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
      rgba(5, 6, 6, .97);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .62);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity 180ms var(--lux-ease-out), transform 210ms var(--lux-ease-out), visibility 180ms linear;
    mask-image: none;
  }

  .site-header .nav-links.is-open,
  header.nav.wrap .nav-links.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .site-header .nav-links a,
  header.nav.wrap .nav-links a {
    min-height: 44px;
    justify-content: flex-start;
    padding: 0 14px;
    border: 1px solid rgba(244, 241, 235, .08);
    background: rgba(255, 255, 255, .035);
  }

  .system-strip {
    top: 78px;
  }

  .hero {
    min-height: auto;
    padding-top: 132px;
  }

  .hero-grid {
    align-items: end;
  }

  .hero h1 {
    max-width: 8.4ch;
  }

  .summer-sale-shell {
    grid-template-columns: 1fr;
  }

  .summer-sale-poster img {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

@media (max-width: 560px) {
  html {
    scroll-padding-top: 78px;
  }

  body::before {
    opacity: .1;
    background-size: 190px 100%, 100% 74px;
  }

  .site-header {
    padding: 0;
  }

  .site-header .nav {
    min-height: 72px;
    padding: 8px 14px !important;
  }

  header.nav.wrap {
    padding: 7px 9px !important;
  }

  .brand-mark,
  .brand img {
    width: 38px !important;
    height: 38px !important;
  }

  .hero {
    padding-top: 112px;
    padding-bottom: 34px;
  }

  .system-strip {
    top: 72px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 44px;
    align-items: center;
    background: rgba(5, 6, 6, .82);
  }

  .system-strip::-webkit-scrollbar {
    display: none;
  }

  .system-strip span {
    min-width: 74vw;
    min-height: 44px;
    padding-inline: 18px;
    align-items: center;
    font-size: .63rem;
  }

  .hero-logo-plate {
    width: 74px !important;
    margin-top: 50px !important;
    margin-bottom: 12px !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.48rem, 10.8vw, 2.95rem) !important;
    line-height: .9 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance;
  }

  .hero-heading-line {
    display: block;
    max-width: 100%;
    white-space: normal;
  }

  .hero .lead {
    max-width: 32ch;
  }

  .hero-actions {
    padding-right: 0 !important;
  }

  .hero-actions .button,
  .button-row .button {
    width: 100%;
    min-height: 44px !important;
  }

  .hero .hero-actions {
    gap: 10px;
    margin-bottom: 8px;
  }

  .summer-sale {
    padding-block: 34px;
  }

  .summer-sale-shell {
    border-radius: 18px;
    padding: 10px;
  }

  .summer-sale-copy {
    padding: 18px 4px 4px;
  }

  .summer-sale-copy h2 {
    max-width: none;
    font-size: clamp(2.35rem, 12vw, 3.8rem) !important;
  }

  .summer-sale-copy p {
    font-size: .95rem;
  }

  .sale-code {
    width: 100%;
    justify-content: space-between;
  }

  .product-stage,
  .intent-grid,
  .feature-row,
  .update-shell {
    gap: 14px !important;
  }

  .product-card img,
  .card img {
    aspect-ratio: 16 / 10 !important;
    object-fit: contain !important;
  }

  .product-info,
  .card .info {
    min-height: auto !important;
  }

  .card .info h3 {
    font-size: clamp(1.42rem, 7vw, 1.95rem) !important;
  }

  .am-support__launcher {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .am-support__panel {
    max-height: min(76dvh, 640px);
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .hero-bg,
  .hero-copy,
  .hero-machine,
  body::before {
    transform: none !important;
  }
}

/* Final visual corrections: no hero targeting reticle, campaign image leads, brand logos stay readable. */
.hero-cinema__reticle,
.hero-cinema__reticle::before,
.hero-cinema__reticle::after {
  display: none !important;
}

.summer-sale {
  padding-block: clamp(34px, 5.2vw, 72px) !important;
}

.summer-sale-shell {
  width: min(calc(100% - 28px), 1440px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

.summer-sale-poster {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  border-radius: 24px 24px 0 0 !important;
}

.summer-sale-poster img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
}

.summer-sale-copy {
  padding: clamp(24px, 3.8vw, 54px) !important;
  border-top: 1px solid rgba(244, 241, 235, .12);
  background:
    linear-gradient(90deg, rgba(239, 25, 25, .12), transparent 46%),
    rgba(3, 4, 4, .72);
}

.summer-sale-copy h2 {
  max-width: none !important;
}

.logo-cell img[src*="elektron"],
.brand-carousel img[src*="elektron"] {
  filter: brightness(0) invert(1) contrast(1.18) drop-shadow(0 0 14px rgba(255, 255, 255, .24)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Hero cleanup: one clear opening message, brighter portrait, no duplicated top rail. */
.system-strip {
  display: none !important;
}

.hero {
  padding-top: clamp(104px, 11vh, 138px) !important;
}

.hero-bg {
  opacity: .98 !important;
  filter: contrast(1.12) saturate(1.1) brightness(1.08) !important;
  background:
    radial-gradient(circle at 62% 10%, rgba(255, 195, 117, .13), transparent 22rem),
    linear-gradient(90deg, rgba(8, 8, 8, .92), rgba(8, 8, 8, .42) 42%, rgba(8, 8, 8, .08) 68%, rgba(8, 8, 8, .62)),
    linear-gradient(180deg, rgba(8, 8, 8, .02), rgba(8, 8, 8, .16) 56%, rgba(8, 8, 8, .9)),
    url("../assets/another-machines-hero.jpg") 58% center / cover no-repeat !important;
}

.hero-bg::before {
  background:
    radial-gradient(ellipse at 70% 43%, transparent 0 31%, rgba(0, 0, 0, .2) 56%, rgba(0, 0, 0, .54)),
    linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .52)) !important;
}

.hero::before {
  opacity: .34 !important;
}

.hero .hero-actions {
  margin-bottom: clamp(56px, 7vh, 92px) !important;
  position: relative;
  top: clamp(-14px, -.8vh, -6px) !important;
  z-index: 8;
}

.hero .hero-actions .button {
  position: relative;
  z-index: 9;
}

@media (max-width: 560px) {
  .hero-copy::after {
    display: none !important;
  }

  .hero-cinema__frame,
  .hero-cinema__meter,
  .hero-heading-line::after {
    display: none !important;
  }

  .hero .hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
    margin-bottom: 42px !important;
    padding-right: 0 !important;
    position: relative;
    top: 0 !important;
    z-index: 8;
  }

  .hero .hero-actions .button {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .summer-sale-shell {
    width: min(calc(100% - 24px), 1440px) !important;
    border-radius: 18px !important;
  }

  .summer-sale-poster {
    border-radius: 18px 18px 0 0 !important;
  }

  .summer-sale-copy {
    padding: 20px 14px 16px !important;
  }
}

/* 2026-07-26: expired campaign removed, mobile menu made explicit and legible. */
@media (max-width: 920px) {
  .menu-toggle,
  .catalog-menu-toggle {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(244, 241, 235, .3) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035)),
      rgba(7, 8, 8, .88) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .42) !important;
    z-index: 120 !important;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-toggle span,
  .catalog-menu-toggle span {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #f4f1eb !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, .22) !important;
    transform-origin: center !important;
    transition: transform 220ms var(--lux-ease-out), background-color 160ms ease, box-shadow 160ms ease !important;
  }

  .menu-toggle span:first-child,
  .catalog-menu-toggle span:first-child {
    transform: translateY(-5px) !important;
  }

  .menu-toggle span:last-child,
  .catalog-menu-toggle span:last-child {
    transform: translateY(5px) !important;
  }

  .menu-toggle[aria-expanded="true"],
  .catalog-menu-toggle[aria-expanded="true"] {
    border-color: rgba(230, 25, 25, .72) !important;
    background:
      linear-gradient(180deg, rgba(230, 25, 25, .3), rgba(255, 255, 255, .04)),
      rgba(10, 10, 10, .96) !important;
    box-shadow: 0 18px 42px rgba(230, 25, 25, .22), 0 18px 44px rgba(0, 0, 0, .55) !important;
  }

  .menu-toggle[aria-expanded="true"] span,
  .catalog-menu-toggle[aria-expanded="true"] span {
    background: #fff !important;
    box-shadow: 0 0 18px rgba(230, 25, 25, .5) !important;
  }

  .menu-toggle[aria-expanded="true"] span:first-child,
  .catalog-menu-toggle[aria-expanded="true"] span:first-child {
    transform: rotate(45deg) !important;
  }

  .menu-toggle[aria-expanded="true"] span:last-child,
  .catalog-menu-toggle[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg) !important;
  }

  .site-header .nav-links,
  header.nav.wrap .nav-links {
    top: calc(env(safe-area-inset-top, 0px) + 74px) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(74dvh, 540px) !important;
    gap: 9px !important;
    padding: 14px !important;
    border: 1px solid rgba(244, 241, 235, .18) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(230, 25, 25, .18), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)),
      rgba(4, 5, 5, .985) !important;
    box-shadow: 0 28px 86px rgba(0, 0, 0, .76), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    z-index: 110 !important;
  }

  .site-header .nav-links a,
  header.nav.wrap .nav-links a {
    min-height: 49px !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(244, 241, 235, .12) !important;
    background: rgba(255, 255, 255, .055) !important;
    color: rgba(255, 255, 255, .94) !important;
    font-size: .82rem !important;
    line-height: 1.1 !important;
    letter-spacing: .055em !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .site-header .nav-links a:hover,
  header.nav.wrap .nav-links a:hover,
  .site-header .nav-links a:focus-visible,
  header.nav.wrap .nav-links a:focus-visible {
    border-color: rgba(230, 25, 25, .42) !important;
    background: rgba(230, 25, 25, .16) !important;
    color: #fff !important;
  }
}

/* Mobile hero trim: remove the empty amber air pocket above the first visual. */
@media (max-width: 560px) {
  .hero {
    padding-top: 86px !important;
  }

  .hero-bg {
    filter: contrast(1.08) saturate(1.02) brightness(.96) !important;
    background:
      linear-gradient(180deg, rgba(5, 6, 7, .98) 0%, rgba(5, 6, 7, .68) 12%, rgba(5, 6, 7, .12) 34%, rgba(5, 6, 7, .9) 100%),
      linear-gradient(90deg, rgba(8, 8, 8, .9), rgba(8, 8, 8, .34) 48%, rgba(8, 8, 8, .7)),
      url("../assets/another-machines-hero.jpg") 64% center / cover no-repeat !important;
  }

  .hero-logo-plate {
    margin-top: 18px !important;
  }
}