/* ============================================================
   Horizon — additive styles: products dropdown, language
   switch, and product-page layout. Loaded AFTER site.css so
   the original marketing stylesheet stays untouched.
   ============================================================ */

/* ---------- nav: products dropdown ---------- */
.nav__drop { position: relative; }
.nav__drop-btn {
  font-family: var(--hz-font-sans);
  font-size: 14.5px; font-weight: 500;
  color: var(--hz-fg-on-dark-2);
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--hz-dur-base), background var(--hz-dur-base);
}
.nav__drop-btn:hover,
.nav__drop.open .nav__drop-btn { color: var(--hz-fg-on-dark-1); background: rgba(255,255,255,0.05); }
.nav__drop-btn .chev { transition: transform var(--hz-dur-base) var(--hz-ease-out); }
.nav__drop.open .nav__drop-btn .chev { transform: rotate(180deg); }

.nav__drop-menu {
  position: absolute; top: calc(100% + 12px); left: -8px;
  width: 360px;
  background: rgba(10,31,48,0.96);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-lg);
  padding: 8px;
  box-shadow: var(--hz-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--hz-dur-base) var(--hz-ease-out),
              transform var(--hz-dur-base) var(--hz-ease-out),
              visibility var(--hz-dur-base);
}
.nav__drop.open .nav__drop-menu { opacity: 1; visibility: visible; transform: none; }
.nav__drop-item {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 13px; row-gap: 2px;
  align-items: start;
  padding: 13px 14px; border-radius: var(--hz-r-md);
  transition: background var(--hz-dur-fast);
}
.nav__drop-item:hover { background: rgba(255,255,255,0.05); }
.nav__drop-item .n {
  grid-row: 1 / span 2;
  font-family: var(--hz-font-mono); font-size: 12px; font-weight: 500;
  color: var(--hz-hero); padding-top: 2px;
}
.nav__drop-item .t {
  font-family: var(--hz-font-display); font-weight: 600; font-size: 15.5px;
  letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1);
}
.nav__drop-item .d { font-size: 13px; line-height: 1.4; color: var(--hz-fg-on-dark-3); }

/* dropdown variants: plain (no number) item + section divider + narrow menu */
.nav__drop-item--plain { grid-template-columns: 1fr; }
.nav__drop-sep { height: 1px; background: var(--hz-ink-4); margin: 6px 14px; }
.nav__drop-menu--narrow { width: 320px; }

/* form legal note + visible send-failure notice (shared by both forms) */
.contact__legal { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--hz-fg-on-dark-3); font-weight: 300; }
.contact__legal a { color: var(--hz-fg-on-dark-2); text-decoration: underline; text-underline-offset: 2px; }
.contact__legal a:hover { color: var(--hz-hero); }
.contact__err { margin-top: 16px; padding: 14px 16px; border-radius: var(--hz-r-md); background: rgba(214,69,61,0.12); border: 1px solid rgba(214,69,61,0.5); font-size: 14px; line-height: 1.55; color: var(--hz-fg-on-dark-1); }
.contact__err[hidden] { display: none; }
.contact__err a { color: var(--hz-hero); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- wayfinding: current page + current section ---------- */
/* the page you are on reads in lime; the section you are scrolled to reads bright */
.nav__links > a.is-current,
.nav__drop.has-current > .nav__drop-btn { color: var(--hz-hero); }
.nav__links > a.is-section,
.nav__drop.has-section > .nav__drop-btn { color: var(--hz-fg-on-dark-1); }
.nav__links > a { position: relative; }
/* out-of-flow underline — an in-flow dot grew the link and shunted the whole
   fixed bar sideways every time the active section changed */
.nav__links > a.is-section::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 7px;
  height: 2px; border-radius: 2px; background: var(--hz-hero);
}
.nav__drop-item.is-current,
.nav__drop-item.is-section { background: rgba(206,239,67,0.07); }
.nav__drop-item.is-current .t,
.nav__drop-item.is-section .t { color: var(--hz-hero); }
.nav__mobile > a.is-current,
.nav__mobile > a.is-section { color: var(--hz-hero); }

/* ---------- language switch ---------- */
.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--hz-ink-4); border-radius: 999px;
  padding: 3px; gap: 2px; background: rgba(255,255,255,0.03);
}
.lang-switch button {
  font-family: var(--hz-font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  font-weight: 500; padding: 5px 11px; border-radius: 999px; border: 0;
  background: transparent; color: var(--hz-fg-on-dark-3); cursor: pointer;
  transition: color var(--hz-dur-base), background var(--hz-dur-base);
}
.lang-switch button:hover { color: var(--hz-fg-on-dark-1); }
.lang-switch button.active { background: rgba(255,255,255,0.14); color: var(--hz-fg-on-dark-1); }

/* team: real leadership, photo slots + short bios */
.team-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .team-grid--3 { grid-template-columns: 1fr; } }
.person image-slot.person__ph,
.person img.person__ph {
  width: 100%; height: auto; aspect-ratio: 4 / 5; display: block; margin-bottom: 18px;
  border-radius: var(--hz-r-md); overflow: hidden;
}
.person img.person__ph { object-fit: cover; background: var(--hz-ink-3); }
.person__bio { font-size: 13px; line-height: 1.5; color: var(--hz-fg-on-dark-2); margin: 10px 0 0; }

/* make module cards clickable without changing their look */
a.mod { text-decoration: none; color: inherit; display: block; }
.mod__more {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--hz-font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--hz-hero); font-weight: 500;
}
.mod__more .arr { transition: transform var(--hz-dur-base) var(--hz-ease-out); }
a.mod:hover .mod__more .arr { transform: translateX(4px); }

/* ============================================================
   FOOTER enhancements (loaded after site.css)
   ============================================================ */
.footer { padding-top: 52px; }
.footer__brand img { height: 30px; width: auto; }
.footer__brand p { max-width: 38ch; margin-top: 18px; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-md);
  color: var(--hz-fg-on-dark-2);
  transition: color var(--hz-dur-base), background var(--hz-dur-base), border-color var(--hz-dur-base), transform var(--hz-dur-base);
}
.footer__social a:hover { color: var(--hz-ink); background: var(--hz-hero); border-color: var(--hz-hero); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; }
.footer__top { gap: 56px 80px; }
.footer__bottom { margin-top: 40px; }
@media (min-width: 861px) { .footer__cols { gap: 56px; } }

/* ============================================================
   CONTACT: form + direct sales-lead card (home page CTA)
   ============================================================ */
.cta__grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px;
  align-items: start; max-width: 1040px; margin: 44px auto 0; text-align: left;
  position: relative; z-index: 5;
}
@media (max-width: 860px) { .cta__grid { grid-template-columns: 1fr; gap: 28px; max-width: 620px; } }
.cta__grid .contact { max-width: none; margin: 0; }
.cta__grid .contact__done { max-width: none; margin: 0; }
.cta__formcol { min-width: 0; }

/* person-first CTA: direct line to sales, minimal form behind a toggle */
.cta__direct {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: 210px 1fr; align-items: stretch;
  max-width: 720px; margin: 44px auto 0; padding: 0;
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-lg); overflow: hidden; text-align: left;
}
.cta__direct-ph { width: 100%; height: 100%; min-height: 230px; border-radius: 0; object-fit: cover; object-position: center top; display: block; }
.cta__direct-body { min-width: 0; padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 640px) {
  .cta__direct { grid-template-columns: 1fr; }
  .cta__direct-ph { aspect-ratio: 3 / 2; min-height: 0; height: auto; }
  .cta__direct-body { padding: 24px 22px 26px; text-align: center; }
}
.cta__direct-label { margin: 0; font-family: var(--hz-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.cta__direct-name { margin-top: 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--hz-font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); }
@media (max-width: 640px) { .cta__direct-name { justify-content: center; } }
.cta__direct-role { font-family: var(--hz-font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--hz-hero); }
.cta__direct-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 640px) { .cta__direct-actions { justify-content: center; } }
.cta__direct-actions .btn { display: inline-flex; align-items: center; gap: 9px; }
.cta__direct-mail { margin: 12px 0 0; font-family: var(--hz-font-mono); font-size: 12.5px; color: var(--hz-fg-on-dark-3); overflow-wrap: anywhere; }
.cta__or { position: relative; z-index: 5; margin-top: 24px; }
.cta__write {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; cursor: pointer; padding: 12px 22px;
  border: 1px solid var(--hz-ink-4); border-radius: 999px;
  font-family: var(--hz-font-sans); font-size: 16px; font-weight: 500;
  color: var(--hz-fg-on-dark-1); letter-spacing: -0.005em;
  transition: color var(--hz-dur-base), border-color var(--hz-dur-base), background var(--hz-dur-base);
}
.cta__write:hover { color: var(--hz-hero); border-color: var(--hz-hero); background: rgba(206,239,67,0.06); }
.cta__write .chev { transition: transform var(--hz-dur-base) var(--hz-ease-out); }
.cta__write[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cta__formwrap { position: relative; z-index: 5; max-width: 720px; margin: 16px auto 0; text-align: left; }
.cta__formwrap .contact, .cta__formwrap .contact__done { max-width: none; margin: 0; }

.salescard {
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-lg); padding: 26px;
}
.salescard .salescard__label {
  font-family: var(--hz-font-mono); font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--hz-fg-on-dark-3); margin: 0 0 20px;
  max-width: none; line-height: 1.5;
  line-height: 1.4;
}
.salescard__top { display: flex; align-items: center; gap: 16px; }
.salescard .salescard__ph {
  width: 84px; height: 84px; flex: none; display: block;
  border-radius: 50%; overflow: hidden; object-fit: cover;
}
.salescard__name { font-family: var(--hz-font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); }
.salescard__role { font-family: var(--hz-font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--hz-hero); margin-top: 4px; }
.salescard__links { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hz-ink-4); display: flex; flex-direction: column; gap: 14px; }
.salescard__link { display: flex; align-items: center; gap: 13px; color: var(--hz-fg-on-dark-1); transition: color var(--hz-dur-base); }
.salescard__link:hover { color: var(--hz-hero); }
.salescard__link svg { width: 18px; height: 18px; flex: none; color: var(--hz-hero); }
.salescard__link .val { display: flex; flex-direction: column; gap: 2px; }
.salescard__link .k { font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.salescard__link .v { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.salescard__link[href^="mailto:"] .v { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* ============================================================
   "Why Horizon" → support/service banner (text + photo)
   ============================================================ */
/* no card, no lime slab — the support block continues the section it lives in:
   one hairline, text left, a captioned photo right */
.service {
  position: relative; margin-top: 52px;
  display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--hz-ink-4); padding-top: 36px;
}
.service__text {
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 2;
}
.service__text h3 {
  font-family: var(--hz-font-display); font-weight: 600;
  font-size: clamp(23px, 2.3vw, 31px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--hz-fg-on-dark-1); margin: 0; max-width: 22ch; text-wrap: balance;
}
.service__text p {
  margin: 14px 0 0; font-size: 16px; line-height: 1.62;
  color: var(--hz-fg-on-dark-2); font-weight: 300; max-width: 44ch;
}
.service__btns { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.service__media { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.service__media img {
  display: block; width: 100%; height: 100%; min-height: 280px;
  object-fit: cover; object-position: 66% center;
  border-radius: var(--hz-r-lg);
}
.service__media figcaption {
  font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--hz-fg-on-dark-3);
}
@media (max-width: 820px) {
  .service { grid-template-columns: 1fr; gap: 26px; }
  .service__media { order: -1; }
  .service__media img { min-height: 230px; }
}

/* ============================================================
   PARTNERS: logo wall + rotating testimonials
   ============================================================ */
.logos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
@media (max-width: 920px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logos { grid-template-columns: repeat(2, 1fr); } }
.logo {
  background: #fff; border: 1px solid var(--hz-paper-4); border-radius: var(--hz-r-md);
  height: 92px; padding: 16px 20px; display: flex; align-items: center; justify-content: center;
  transition: transform var(--hz-dur-base), box-shadow var(--hz-dur-base);
}
.logo:hover { transform: translateY(-3px); box-shadow: var(--hz-shadow-sm); }
.logo__slot { width: 100%; height: 100%; display: block; }
.logo img.logo__slot { object-fit: contain; }

.tcar { position: relative; margin: 76px auto 0; max-width: 860px; text-align: center; }
/* All cards share one grid cell, so the track always keeps the height of the
   tallest quote — content below never shifts when the carousel rotates. */
.tcar__track { display: grid; }
.tcard {
  grid-area: 1 / 1; margin: 0; align-self: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--hz-ease-out), transform .55s var(--hz-ease-out);
  pointer-events: none;
}
.tcard[data-active] { opacity: 1; transform: none; pointer-events: auto; }
.tcard blockquote {
  margin: 0; font-family: var(--hz-font-display); font-weight: 600;
  font-size: clamp(21px, 2.5vw, 31px); line-height: 1.32; letter-spacing: -0.01em;
  color: var(--hz-fg-on-dark-1); text-wrap: pretty;
}
.tcard blockquote::before {
  content: '\201C'; display: block; font-size: 68px; line-height: 0.5;
  color: var(--hz-hero); margin: 0 0 20px;
}
.tcard figcaption { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tcard__logo {
  height: 66px; padding: 10px 24px; margin-bottom: 10px;
  background: #fff; border-radius: var(--hz-r-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.tcard__logo img { max-height: 44px; max-width: 188px; object-fit: contain; display: block; }
.tcard__logo--text {
  font-family: var(--hz-font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em; color: var(--hz-ink);
}
.tcard__name { font-family: var(--hz-font-display); font-weight: 600; font-size: 16px; color: var(--hz-fg-on-dark-1); }
.tcard__role { font-family: var(--hz-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--hz-hero); }
.tcar__nav { display: flex; gap: 10px; justify-content: center; margin-top: 38px; }
.tcar__dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--hz-ink-4); transition: background var(--hz-dur-base), transform var(--hz-dur-base);
}
.tcar__dot:hover { background: var(--hz-fg-on-dark-3); }
.tcar__dot.active { background: var(--hz-hero); transform: scale(1.3); }

/* ============================================================
   AKTUELT: news cards
   ============================================================ */
.news {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px;
}
@media (max-width: 900px) { .news { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
.ncard {
  display: flex; flex-direction: column;
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--hz-dur-base) var(--hz-ease-out), border-color var(--hz-dur-base), background var(--hz-dur-base);
}
.ncard:hover { transform: translateY(-4px); border-color: rgba(206,239,67,0.4); background: var(--hz-ink-3); }
.ncard__media { position: relative; aspect-ratio: 16 / 10; background: var(--hz-ink-3); overflow: hidden; }
.ncard__media image-slot { width: 100%; height: 100%; display: block; }
.ncard__media image-slot::part(frame) { background: var(--hz-ink-3); }
image-slot::part(empty) { color: var(--hz-fg-on-dark-3); }
.ncard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Branded fallback when a news item has no image yet — faint sea-waves on ink. */
.ncard__media--ph {
  background-color: var(--hz-ink-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23ceef43' stroke-opacity='0.13' stroke-width='1.5'%3E%3Cpath d='M0,74 C53,59 107,89 160,74 C213,59 267,89 320,74'/%3E%3Cpath d='M0,104 C53,89 107,119 160,104 C213,89 267,119 320,104'/%3E%3Cpath d='M0,134 C53,119 107,149 160,134 C213,119 267,149 320,134'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}
.ncard__cat {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hz-ink); background: var(--hz-hero);
  padding: 5px 10px; border-radius: var(--hz-r-pill); font-weight: 500;
}
.ncard__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.ncard__date { font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--hz-fg-on-dark-3); }
.ncard__title {
  font-family: var(--hz-font-display); font-weight: 600; font-size: 19px; line-height: 1.28;
  letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); margin: 10px 0 0; text-wrap: pretty;
}
.ncard__excerpt { font-size: 14px; line-height: 1.55; color: var(--hz-fg-on-dark-2); margin: 12px 0 0; font-weight: 300; }
.ncard__more {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hz-ink-4);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--hz-font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--hz-hero);
}
.ncard__more .arr { transition: transform var(--hz-dur-base) var(--hz-ease-out); }
.ncard:hover .ncard__more .arr { transform: translateX(4px); }
/* collapse is handled in news.js by rendering only the visible cards */
.news__foot { display: flex; justify-content: center; margin-top: 40px; }
.news-more {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hz-font-sans); font-weight: 600; font-size: 15px;
  color: var(--hz-fg-on-dark-1); background: var(--hz-ink-2);
  border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-pill);
  padding: 13px 26px; cursor: pointer;
  transition: background var(--hz-dur-base), border-color var(--hz-dur-base), transform var(--hz-dur-base) var(--hz-ease-out);
}
.news-more:hover { background: var(--hz-ink-3); border-color: var(--hz-paper-5); transform: translateY(-2px); }
.news-more .arr { color: var(--hz-hero); transition: transform var(--hz-dur-base) var(--hz-ease-out); }
.news-more__count { font-family: var(--hz-font-mono); font-size: 12px; color: var(--hz-fg-on-dark-3); }
.news__foot { display: flex; justify-content: center; margin-top: 44px; }

/* ============================================================
   INTERACTIVE MODEL SIMULATOR (#ai section)
   ============================================================ */
.sim { margin-top: 60px; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 28px; align-items: stretch; }
.sim > * { min-width: 0; }
@media (max-width: 1000px) { .sim { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .simkpis { grid-template-columns: 1fr; }
  .simflow { gap: 5px; }
  .simflow__node { min-width: 0; padding: 11px 3px; font-size: 9.5px; letter-spacing: 0.02em; }
}

/* shared panel chrome — echoes the Horizon desktop UI */
.simpanel {
  background: var(--hz-ink); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-lg); overflow: hidden; display: flex; flex-direction: column;
  position: relative;
}

/* first-use "drag the sliders" cue — a compact pill parked at the foot of the
   inputs panel. It used to dim the whole panel, hiding the very controls it was
   describing; now nothing is obscured. Fades on first use. */
.simhint {
  position: absolute; inset: auto 0 0 0; z-index: 6; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center; padding: 0 0 18px;
  opacity: 1; transition: opacity 0.5s ease;
}
.simhint.is-hidden { opacity: 0; }
.simhint__card {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(20,26,30,0.94); border: 1px solid var(--hz-ink-4);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  animation: simhintPop 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.simhint__demo { position: relative; width: 96px; height: 22px; display: flex; align-items: center; flex: none; }
.simhint__track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--hz-ink-3); }
.simhint__thumb {
  position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--hz-hero); border: 3px solid var(--hz-ink); box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  animation: simhintSlide 2.4s ease-in-out infinite;
}
.simhint__hand {
  position: absolute; left: -2px; top: 9px; width: 22px; height: 22px;
  color: var(--hz-fg-on-dark-1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: simhintSlide 2.4s ease-in-out infinite;
}
.simhint__txt {
  font-family: var(--hz-font-display); font-size: 13.5px; font-weight: 600;
  color: var(--hz-fg-on-dark-1); letter-spacing: 0.01em;
}
@keyframes simhintSlide {
  0%, 10% { transform: translateX(0); }
  50% { transform: translateX(72px); }
  90%, 100% { transform: translateX(0); }
}
@keyframes simhintPop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .simhint__thumb, .simhint__hand, .simhint__card { animation: none; }
  .simhint__thumb { transform: translateX(36px); }
  .simhint__hand { transform: translateX(36px); }
}
.simpanel__bar {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-bottom: 1px solid var(--hz-ink-4);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.simpanel__bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hz-ink-4); flex: none; }
.simpanel__bar .dot.live { background: var(--hz-hero); box-shadow: 0 0 0 4px rgba(206,239,67,0.16); }
.simpanel__title { font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-fg-on-dark-2); }
.simpanel__title b { color: var(--hz-fg-on-dark-1); font-weight: 600; }
.simpanel__body { padding: 20px 20px 22px; flex: 1; }

/* control groups by module */
.simgroup + .simgroup { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hz-ink-4); }
.simgroup__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.simgroup__tag {
  font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hz-ink); background: var(--hz-fg-on-dark-3); padding: 3px 8px; border-radius: var(--hz-r-pill); font-weight: 600;
  transition: background var(--hz-dur-base);
}
.simgroup[data-touched] .simgroup__tag { background: var(--hz-hero); }
.simgroup__name { font-family: var(--hz-font-display); font-weight: 600; font-size: 14px; color: var(--hz-fg-on-dark-1); }

.simctl { margin-top: 15px; }
.simctl__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.simctl__label { font-size: 13.5px; color: var(--hz-fg-on-dark-2); }
.simctl__val { font-family: var(--hz-font-mono); font-size: 13px; font-weight: 500; color: var(--hz-hero); font-variant-numeric: tabular-nums; white-space: nowrap; }
.simctl__right { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.simlock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex: none;
  border-radius: var(--hz-r-sm); cursor: pointer;
  background: transparent; border: 1px solid var(--hz-ink-4);
  color: var(--hz-fg-on-dark-3);
  transition: color var(--hz-dur-base), border-color var(--hz-dur-base), background var(--hz-dur-base);
}
.simlock:hover { color: var(--hz-fg-on-dark-1); border-color: var(--hz-fg-on-dark-3); }
.simlock svg { width: 14px; height: 14px; }
.simlock .simlock__closed { display: none; }
.simlock[aria-pressed="true"] {
  background: rgba(206,239,67,0.12); border-color: var(--hz-hero); color: var(--hz-hero);
}
.simlock[aria-pressed="true"] .simlock__open { display: none; }
.simlock[aria-pressed="true"] .simlock__closed { display: block; }
/* a locked control reads as held */
.simctl.is-locked .simctl__val { color: var(--hz-fg-on-dark-1); }
.simctl input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px;
  background: var(--hz-ink-3); outline: none; cursor: pointer; margin: 0;
}
/* Touch only: grow the control to a 44px grab area, with the visible 4px line
   painted as a centred background band and negative margins collapsing the box
   back to its original height. Pointer devices keep the original geometry
   exactly, so nothing about the desktop rendering changes. */
@media (pointer: coarse) {
  .simctl input[type=range] {
    height: 44px; margin: -20px 0; border-radius: 0;
    background: linear-gradient(var(--hz-ink-3), var(--hz-ink-3)) center / 100% 4px no-repeat;
  }
}
.simctl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--hz-hero); border: 3px solid var(--hz-ink); box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  transition: transform var(--hz-dur-fast);
}
.simctl input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.simctl input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--hz-hero);
  border: 3px solid var(--hz-ink); box-shadow: 0 1px 6px rgba(0,0,0,0.4); cursor: pointer;
}
.simctl__scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--hz-font-mono); font-size: 10px; color: var(--hz-fg-on-dark-3); }

.simreset {
  margin-top: 20px; width: 100%; padding: 10px; border-radius: var(--hz-r-md);
  background: transparent; border: 1px solid var(--hz-ink-4); color: var(--hz-fg-on-dark-2);
  font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: color var(--hz-dur-base), border-color var(--hz-dur-base), background var(--hz-dur-base);
}
.simreset:hover { color: var(--hz-fg-on-dark-1); border-color: var(--hz-fg-on-dark-3); background: rgba(255,255,255,0.03); }

/* optimizer button — primary lime action inside the Planner group */
.simopt {
  margin-top: 18px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--hz-r-md); border: 1px solid var(--hz-hero);
  background: var(--hz-hero); color: var(--hz-ink); cursor: pointer;
  font-family: var(--hz-font-display); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  transition: background var(--hz-dur-base), box-shadow var(--hz-dur-base), transform var(--hz-dur-fast);
}
.simopt:hover { background: #d8f262; box-shadow: 0 0 22px rgba(206,239,67,0.30); }
.simopt:active { transform: scale(0.99); background: #afc435; }
.simopt svg { width: 18px; height: 18px; flex: none; }
.simopt__sub {
  font-family: var(--hz-font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(10,31,48,0.62); padding-left: 8px; border-left: 1px solid rgba(10,31,48,0.22);
}

/* stocking-density guard */
.simdens {
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-md);
  padding: 15px 16px 14px; transition: border-color var(--hz-dur-base);
}
.simdens.warn { border-color: rgba(230,162,60,0.5); }
.simdens.bad { border-color: rgba(214,69,61,0.6); }
.simdens__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.simdens__label { font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.simdens__val { font-family: var(--hz-font-display); font-weight: 600; font-size: 18px; color: var(--hz-fg-on-dark-1); font-variant-numeric: tabular-nums; }
.simdens__val em { font-style: normal; font-family: var(--hz-font-mono); font-size: 11px; font-weight: 500; color: var(--hz-fg-on-dark-3); }
.simdens__track {
  position: relative; height: 10px; border-radius: 999px; background: var(--hz-ink-3); overflow: visible;
  margin-bottom: 20px;
}
.simdens__fill {
  height: 100%; border-radius: 999px; width: 0%;
  background: var(--hz-hero); transition: width var(--hz-dur-slow), background var(--hz-dur-base);
}
.simdens.warn .simdens__fill { background: var(--hz-warn, #e6a23c); }
.simdens.bad .simdens__fill { background: var(--hz-danger, #d6453d); }
.simdens__limit { position: absolute; top: -3px; bottom: -3px; left: 89.3%; width: 2px; background: var(--hz-fg-on-dark-2); border-radius: 2px; }
.simdens__limit-lbl {
  position: absolute; top: calc(100% + 5px); right: 0; white-space: nowrap;
  font-family: var(--hz-font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--hz-fg-on-dark-3);
}
.simdens__note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--hz-fg-on-dark-3); }
.simdens.bad .simdens__note { color: var(--hz-danger, #d6453d); }

/* right column: ripple flow + KPIs + chart */
.simout { display: flex; flex-direction: column; gap: 16px; }

/* module flow ripple */
.simflow { display: flex; align-items: center; gap: 8px; }
.simflow__node {
  flex: 1; text-align: center; padding: 12px 6px; border-radius: var(--hz-r-md);
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4);
  font-family: var(--hz-font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--hz-fg-on-dark-3);
  transition: color var(--hz-dur-base), border-color var(--hz-dur-base), background var(--hz-dur-base), box-shadow var(--hz-dur-base);
}
.simflow__node.pulse { color: var(--hz-ink); background: var(--hz-hero); border-color: var(--hz-hero); box-shadow: 0 0 20px rgba(206,239,67,0.25); }
.simflow__arrow { color: var(--hz-ink-4); flex: none; transition: color var(--hz-dur-base); }
.simflow__arrow.pulse { color: var(--hz-hero); }

/* KPI grid */
.simkpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kpi {
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-md);
  padding: 16px 16px 15px; position: relative; overflow: hidden;
}
.kpi__label { font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.kpi__val { font-family: var(--hz-font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--hz-fg-on-dark-1); margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums; transition: color var(--hz-dur-base); }
.kpi__val .u { font-size: 14px; color: var(--hz-fg-on-dark-3); font-weight: 500; margin-left: 3px; }
.kpi__delta { margin-top: 9px; font-family: var(--hz-font-mono); font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.kpi__delta.good { color: var(--hz-hero); }
.kpi__delta.bad { color: #ff7a6b; }
.kpi__delta.flat { color: var(--hz-fg-on-dark-3); }
.kpi.warn { border-color: rgba(255,122,107,0.5); }
.kpi.warn .kpi__val { color: #ff7a6b; }

/* biomass / MAB chart */
.simchart { background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-md); padding: 16px 18px 12px; }
.simchart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.simchart__t { font-family: var(--hz-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hz-fg-on-dark-2); }
.simchart__leg { display: flex; gap: 14px; font-family: var(--hz-font-mono); font-size: 10px; color: var(--hz-fg-on-dark-3); }
.simchart__leg span { display: inline-flex; align-items: center; gap: 5px; }
.simchart__leg i { width: 14px; height: 0; border-top: 2px solid var(--hz-hero); display: inline-block; }
.simchart__leg i.lim { border-top-style: dashed; border-color: var(--hz-fg-on-dark-3); }
.simchart svg { width: 100%; height: auto; display: block; }
.sim-note { font-size: 13px; line-height: 1.5; color: var(--hz-fg-on-dark-3); margin: 2px 2px 0; }
.sim-note b { color: var(--hz-fg-on-dark-1); font-weight: 500; }
.sim-disclaimer {
  margin: 22px auto 0; max-width: 640px; text-align: center;
  font-size: 13.5px; line-height: 1.55; color: var(--hz-fg-on-dark-3);
  font-style: italic;
}

/* ---------- scenario chips ---------- */
.simscen { margin-bottom: 20px; }
.simscen__label { display: block; font-family: var(--hz-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); margin-bottom: 8px; }
.simscen__row { display: flex; flex-wrap: wrap; gap: 8px; }
.simscen__chip {
  font-size: 12.5px; padding: 7px 14px; border-radius: var(--hz-r-pill);
  border: 1px solid var(--hz-ink-4); background: transparent; color: var(--hz-fg-on-dark-2);
  cursor: pointer;
  transition: color var(--hz-dur-base), border-color var(--hz-dur-base), background var(--hz-dur-base);
}
.simscen__chip:hover { color: var(--hz-hero); border-color: rgba(206,239,67,0.4); }
.simscen__chip.is-on { background: var(--hz-hero); border-color: var(--hz-hero); color: var(--hz-ink); font-weight: 600; }

.sim-scen-link { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--hz-hero); text-decoration: none; transition: color var(--hz-dur-base) var(--hz-ease-out); }
.sim-scen-link:hover { color: #d8f262; text-decoration: underline; }
.sim-scen-link .arr { transition: transform var(--hz-dur-base) var(--hz-ease-out); }
.sim-scen-link:hover .arr { transform: translateX(3px); }
.mods-connect { margin: 26px 0 0; text-align: center; }
.mods-connect a { font-size: 14.5px; font-weight: 600; color: var(--hz-fg-on-dark-2); text-decoration: none; transition: color var(--hz-dur-base) var(--hz-ease-out); }
.mods-connect a:hover { color: var(--hz-hero); }
/* ---------- plain-language story line ---------- */
.sim-story {
  margin: 0; padding: 12px 16px;
  border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-md);
  background: rgba(206,239,67,0.06);
  font-size: 13.5px; line-height: 1.55; color: var(--hz-fg-on-dark-2);
}
.sim-story b { color: var(--hz-hero); font-weight: 600; }

/* ---------- "more parameters" toggle ---------- */
.sim:not(.sim--adv) .simctl--adv, .sim:not(.sim--adv) .simgroup--adv { display: none; }
.simmore {
  margin-top: 18px; width: 100%; padding: 9px; border-radius: var(--hz-r-md);
  background: transparent; border: 1px dashed var(--hz-ink-4); color: var(--hz-fg-on-dark-3);
  font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.05em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: color var(--hz-dur-base), border-color var(--hz-dur-base);
}
.simmore:hover { color: var(--hz-hero); border-color: rgba(206,239,67,0.4); }
.simmore svg { transition: transform var(--hz-dur-base); }
.sim--adv .simmore svg { transform: rotate(180deg); }
.simmore__less { display: none; }
.sim--adv .simmore__more { display: none; }
.sim--adv .simmore__less { display: inline; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.phero {
  position: relative; overflow: hidden;
  padding: 132px 0 88px;
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(58,143,199,0.10), transparent 58%),
    radial-gradient(90% 70% at 12% 10%, rgba(206,239,67,0.05), transparent 55%),
    linear-gradient(to bottom, var(--hz-black) 0%, #0b2032 60%, var(--hz-ink) 100%);
}
.phero__inner { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.pcrumb {
  font-size: 13.5px; font-weight: 300;
  color: var(--hz-fg-on-dark-2); display: flex; align-items: center; gap: 9px; margin-bottom: 26px;
}
/* the links are the interactive part of the trail — they must not be the dimmest */
.pcrumb a { color: var(--hz-fg-on-dark-2); transition: color var(--hz-dur-base); }
.pcrumb a:hover { color: var(--hz-hero); }
.pcrumb .sep { color: var(--hz-fg-on-dark-3); opacity: 0.7; }
.pcrumb .here { color: var(--hz-fg-on-dark-1); }

.phero h1 {
  font-family: var(--hz-font-display); font-weight: 600;
  font-size: clamp(40px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.03em;
  margin: 18px 0 0; color: var(--hz-fg-on-dark-1); max-width: 20ch; text-wrap: balance;
}
.phero__lead {
  margin: 24px 0 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6;
  color: var(--hz-fg-on-dark-2); max-width: 62ch; font-weight: 300;
}
.phero__lead b { color: var(--hz-fg-on-dark-1); font-weight: 500; }
.phero__cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* Short viewports (13" laptops, split screens): tighten the hero so the CTA
   stays above the fold instead of hiding under it. */
@media (max-height: 820px) {
  .phero { padding-top: 112px; padding-bottom: 72px; }
  .phero h1 { font-size: clamp(34px, 4.6vw, 62px); }
  .phero__lead { margin-top: 20px; max-width: 58ch; }
  .phero__cta { margin-top: 24px; }
}

/* quick links to the underlying products */
.quick {
  margin-top: 64px;
}
.quick__label {
  font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--hz-fg-on-dark-3); margin-bottom: 16px;
}
.quick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .quick__grid { grid-template-columns: 1fr; } }
.ql {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-md); padding: 18px 20px;
  transition: border-color var(--hz-dur-base), transform var(--hz-dur-base), background var(--hz-dur-base);
}
.ql:hover { border-color: rgba(206,239,67,0.4); transform: translateY(-2px); background: var(--hz-ink-3); }
.ql__name { font-family: var(--hz-font-display); font-weight: 600; font-size: 16px; color: var(--hz-fg-on-dark-1); letter-spacing: -0.01em; }
.ql__more { font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--hz-hero); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ql:hover .ql__more .arr { transform: translateX(3px); }
.ql__more .arr { transition: transform var(--hz-dur-base) var(--hz-ease-out); }

/* prose + feature blocks reuse .band / .sect-head from site.css */
.prose { max-width: 820px; }
.prose p { margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: var(--hz-fg-on-dark-2); font-weight: 300; }
.prose p:first-child { margin-top: 0; }
.prose p b, .prose p strong { color: var(--hz-fg-on-dark-1); font-weight: 500; }
.prose em { color: var(--hz-hero); font-style: italic; }

/* CTRL capability grid (numbered, compact) */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
@media (max-width: 980px) { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .caps { grid-template-columns: 1fr; } }
.cap {
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-md); padding: 18px 18px 16px;
}
.cap__shot { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--hz-ink-3); margin: 0 0 14px; }
.cap__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cap__n { font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--hz-hero); }
.cap__h { font-family: var(--hz-font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); margin: 8px 0 6px; }
.cap__p { font-size: 13.5px; line-height: 1.5; color: var(--hz-fg-on-dark-3); margin: 0; font-weight: 300; }

/* key-feature grid (icon + title + body) */
.kfeat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
@media (max-width: 760px) { .kfeat { grid-template-columns: 1fr; } }
.kfeat__item {
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 13px;
  transition: border-color var(--hz-dur-base), transform var(--hz-dur-base), background var(--hz-dur-base);
}
.kfeat__item:hover { border-color: var(--hz-ink-4); background: var(--hz-ink-3); transform: translateY(-3px); }
.kfeat__ic {
  width: 44px; height: 44px; border-radius: var(--hz-r-md);
  background: rgba(206,239,67,0.08); color: var(--hz-hero);
  display: flex; align-items: center; justify-content: center;
}
.kfeat__item h4 { font-family: var(--hz-font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin: 0; color: var(--hz-fg-on-dark-1); }
.kfeat__item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--hz-fg-on-dark-2); }

/* four-up benefit row */
.bene { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
@media (max-width: 980px) { .bene { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bene { grid-template-columns: 1fr; } }
.bene__item { display: flex; flex-direction: column; gap: 12px; }
.bene__ic { width: 40px; height: 40px; color: var(--hz-hero); }
.bene__item h4 { font-family: var(--hz-font-display); font-weight: 600; font-size: 17px; margin: 0; color: var(--hz-hero); letter-spacing: -0.01em; }
.bene__item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--hz-fg-on-dark-2); }

/* product page CTA band -> links to home contact */
.pcta {
  position: relative; overflow: hidden; text-align: center;
  padding: 110px 0 120px;
  background:
    radial-gradient(90% 130% at 50% 120%, rgba(206,239,67,0.10), transparent 60%),
    linear-gradient(to bottom, var(--hz-ink) 0%, var(--hz-black) 100%);
}
.pcta__inner { position: relative; z-index: 5; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.pcta h2 {
  font-family: var(--hz-font-display); font-weight: 600;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.03em;
  margin: 20px auto 0; max-width: 18ch; color: var(--hz-fg-on-dark-1);
}
.pcta h2 .accent { color: var(--hz-hero); }
.pcta p { margin: 22px auto 0; font-size: 18px; color: var(--hz-fg-on-dark-2); max-width: 50ch; font-weight: 300; line-height: 1.55; }
.pcta__btns { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pcta .waves-anchor { height: 28vh; bottom: -1px; opacity: 0.7; }

@media (max-width: 880px) {
  .phero { padding: 140px 0 80px; }
}

/* ============================================================
   PRODUCT DETAIL BLOCKS (quick-links scroll to these)
   ============================================================ */
html { scroll-behavior: smooth; }

.quick__grid .ql { cursor: pointer; }

.pdetail { margin-top: 8px; }
.pblock {
  scroll-margin-top: 92px;
  padding: 54px 0;
  border-top: 1px solid var(--hz-ink-4);
  display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start;
}
.pblock:first-of-type { border-top: 0; padding-top: 4px; }
@media (max-width: 860px) { .pblock { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; } }
.pblock__id { font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.pblock__name { font-family: var(--hz-font-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; color: var(--hz-fg-on-dark-1); margin: 12px 0 0; }
.pblock__tag { font-family: var(--hz-font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--hz-hero); margin: 10px 0 0; }
.pblock__more { margin-top: 20px; display: inline-flex; gap: 7px; align-items: center; font-family: var(--hz-font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--hz-fg-on-dark-2); transition: color var(--hz-dur-base); }
.pblock__more:hover { color: var(--hz-hero); }
.pblock__more .arr { transition: transform var(--hz-dur-base) var(--hz-ease-out); }
.pblock__more:hover .arr { transform: translate(2px, -2px); }
.pblock__body p { font-size: 16px; line-height: 1.6; color: var(--hz-fg-on-dark-2); margin: 0; font-weight: 300; }
.pblock__body p b { color: var(--hz-fg-on-dark-1); font-weight: 500; }
.pblock__points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.pblock__points li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: var(--hz-fg-on-dark-2); }
.pblock__points li::before { content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 3px; background: var(--hz-hero-soft); box-shadow: inset 0 0 0 1.5px var(--hz-hero); }

/* lime flash when a quick-link jumps to a block */
.pblock { border-radius: var(--hz-r-lg); }
.pblock.flash { animation: pblockFlash 1.4s var(--hz-ease-out); }
@keyframes pblockFlash {
  0%   { box-shadow: 0 0 0 1px rgba(206,239,67,0); }
  16%  { box-shadow: 0 0 0 1px var(--hz-hero), 0 0 30px rgba(206,239,67,0.16); }
  100% { box-shadow: 0 0 0 1px rgba(206,239,67,0); }
}

/* ============================================================
   PRODUCT SCREENSHOTS — framed gallery + click-to-zoom
   ============================================================ */
.shots { display: grid; gap: 24px; margin-top: 8px; }
.shots--2 { grid-template-columns: repeat(2, 1fr); }
.shots--gallery { grid-template-columns: repeat(2, 1fr); }
.shots--gallery .shot--wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .shots--2, .shots--gallery { grid-template-columns: 1fr; } }

.shot {
  display: flex; flex-direction: column;
  background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-lg); overflow: hidden;
  transition: border-color var(--hz-dur-base), transform var(--hz-dur-base);
}
.shot:hover { border-color: rgba(206,239,67,0.4); transform: translateY(-3px); }
.shot__imgwrap { position: relative; background: #0c2334; cursor: zoom-in; line-height: 0; }
.shot__imgwrap img { width: 100%; height: auto; display: block; }
.shot__zoom {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: var(--hz-r-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,31,48,0.72); color: var(--hz-hero);
  opacity: 0; transition: opacity var(--hz-dur-base);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.shot__imgwrap:hover .shot__zoom { opacity: 1; }
.shot__zoom svg { width: 16px; height: 16px; }
.shot__cap {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; font-size: 13.5px; line-height: 1.4; color: var(--hz-fg-on-dark-2);
  border-top: 1px solid var(--hz-ink-4);
}
.shot__cap::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--hz-hero); }

/* contained (portrait/small) screenshots */
.shot--contain .shot__imgwrap { display: flex; justify-content: center; padding: 18px; background: var(--hz-ink); }
.shot--contain .shot__imgwrap img { width: auto; max-width: 100%; max-height: 560px; border-radius: var(--hz-r-sm); }

/* lightbox */
.shotbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 4vmin;
  background: rgba(6,18,28,0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--hz-dur-base); cursor: zoom-out;
}
.shotbox.open { opacity: 1; }
.shotbox img { max-width: 100%; max-height: 88vh; border-radius: var(--hz-r-md); border: 1px solid var(--hz-ink-4); box-shadow: var(--hz-shadow-lg); }
.shotbox__close { position: absolute; top: 22px; right: 26px; color: var(--hz-fg-on-dark-2); background: transparent; border: 0; cursor: pointer; transition: color var(--hz-dur-base); }
.shotbox__close:hover { color: var(--hz-hero); }
.shotbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--hz-fg-on-dark-2); background: rgba(12,16,20,0.6);
  border: 1px solid var(--hz-ink-4); cursor: pointer;
  transition: color var(--hz-dur-base), border-color var(--hz-dur-base), background var(--hz-dur-base);
}
.shotbox__nav:hover { color: var(--hz-hero); border-color: rgba(206,239,67,0.4); background: rgba(12,16,20,0.85); }
.shotbox__nav--prev { left: 22px; }
.shotbox__nav--next { right: 22px; }
@media (max-width: 640px) { .shotbox__nav { width: 44px; height: 44px; } .shotbox__nav--prev { left: 10px; } .shotbox__nav--next { right: 10px; } }
.shotbox__cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 13.5px; font-weight: 300; color: var(--hz-fg-on-dark-2); padding: 0 20px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.kontakt { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: start; max-width: 1100px; margin: 0 auto; }
@media (max-width: 920px) { .kontakt { grid-template-columns: 1fr; gap: 30px; max-width: 640px; } }
.kontakt__info { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.cblock { background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-lg); padding: 26px; }
.cblock__label { font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); margin: 0 0 18px; }

.cfacts { display: flex; flex-direction: column; gap: 18px; }
.cfact { display: flex; gap: 14px; align-items: flex-start; }
.cfact > svg { width: 20px; height: 20px; flex: none; color: var(--hz-hero); margin-top: 2px; }
.cfact__k { font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.cfact__v { font-size: 16px; color: var(--hz-fg-on-dark-1); margin-top: 4px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.cfact__v a { color: inherit; transition: color var(--hz-dur-base); }
.cfact__v a:hover { color: var(--hz-hero); }
.cfact__note { font-size: 13px; color: var(--hz-fg-on-dark-3); margin-top: 5px; line-height: 1.4; }

.depts { display: flex; flex-direction: column; }
.dept { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-top: 1px solid var(--hz-ink-4); }
.dept:first-child { border-top: 0; padding-top: 0; }
.dept a { font-size: 15px; color: var(--hz-fg-on-dark-1); font-weight: 500; transition: color var(--hz-dur-base); width: fit-content; }
.dept a:hover { color: var(--hz-hero); }
.dept span { font-size: 13px; color: var(--hz-fg-on-dark-2); line-height: 1.45; font-weight: 300; }

.cmap { border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-lg); overflow: hidden; }
.cmap iframe { display: block; width: 100%; height: 230px; border: 0; filter: saturate(0.82) brightness(0.92); }
.cmap__foot { padding: 13px 18px; font-size: 13px; color: var(--hz-fg-on-dark-2); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cmap__foot a { color: var(--hz-hero); }

.kontakt__form { background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-xl); padding: 32px; }
@media (max-width: 520px) { .kontakt__form { padding: 24px; } }
.kontakt__form h2 { font-family: var(--hz-font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); margin: 0 0 8px; }
.kontakt__form .lede { font-size: 15px; color: var(--hz-fg-on-dark-2); font-weight: 300; line-height: 1.55; margin: 0 0 24px; }
.kontakt__form .contact, .kontakt__form .contact__done { max-width: none; margin: 0; }

.contact select {
  width: 100%; box-sizing: border-box;
  background: rgba(10,31,48,0.6);
  border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-sm);
  padding: 13px 16px; font-family: var(--hz-font-sans); font-size: 15px;
  color: var(--hz-fg-on-dark-1); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ceef43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  transition: border-color var(--hz-dur-base) var(--hz-ease-out), box-shadow var(--hz-dur-base) var(--hz-ease-out);
}
.contact select:focus { border-color: var(--hz-hero); box-shadow: var(--hz-shadow-focus); outline: none; }
.contact select option { background: var(--hz-ink); color: var(--hz-fg-on-dark-1); }

/* ============================================================
   PRODUCT WORKFLOW ("how it's used")
   ============================================================ */
.flow { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 26px; counter-reset: flow; }
@media (min-width: 780px) { .flow { grid-template-columns: repeat(var(--steps, 4), 1fr); gap: 0; } }
.fstep { position: relative; padding-top: 54px; }
.fstep__n {
  position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hz-ink-4); background: var(--hz-ink); color: var(--hz-hero);
  font-family: var(--hz-font-mono); font-size: 15px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
@media (min-width: 780px) {
  .fstep { padding-right: 26px; }
  .fstep::before { content: ''; position: absolute; top: 20px; left: 46px; right: 8px; height: 1px; background: var(--hz-ink-4); z-index: 1; }
  .fstep:last-child::before { display: none; }
}
.fstep__h { margin: 0 0 6px; font-family: var(--hz-font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); }
.fstep__p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--hz-fg-on-dark-2); font-weight: 300; }

/* switch-reassurance line under CTAs */
.switch-note {
  margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--hz-fg-on-dark-3);
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.switch-note a { color: var(--hz-hero); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--hz-dur-base); }
.switch-note a:hover { border-bottom-color: var(--hz-hero); }

/* ============================================================
   LEGAL / PRIVACY PAGE
   ============================================================ */
.legal { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
.legal__toc {
  position: sticky; top: 96px; align-self: start;
  border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-lg);
  background: var(--hz-ink-2); padding: 20px; max-height: calc(100vh - 128px); overflow: auto;
}
.legal__toc-label {
  font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--hz-fg-on-dark-3); margin: 0 0 12px;
}
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal__toc li { counter-increment: toc; margin: 0; }
.legal__toc a {
  display: flex; gap: 9px; padding: 7px 0; font-size: 13px; line-height: 1.4;
  color: var(--hz-fg-on-dark-2); transition: color var(--hz-dur-base);
}
.legal__toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--hz-font-mono); font-size: 11px; color: var(--hz-hero); flex: none; }
.legal__toc a:hover { color: var(--hz-fg-on-dark-1); }

.legal__body { max-width: 760px; min-width: 0; }
.legal__updated {
  font-family: var(--hz-font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--hz-fg-on-dark-3); margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--hz-ink-4);
}
.legal__intro { font-size: 17px; line-height: 1.65; color: var(--hz-fg-on-dark-2); font-weight: 300; margin: 0 0 8px; }
.legal__intro a { color: var(--hz-hero); }

.legal__sec { padding-top: 44px; scroll-margin-top: 92px; }
.legal__sec h2 {
  font-family: var(--hz-font-display); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em; color: var(--hz-fg-on-dark-1); margin: 0 0 4px; display: flex; gap: 12px;
}
.legal__sec h2 .num { font-family: var(--hz-font-mono); font-size: 14px; color: var(--hz-hero); flex: none; padding-top: 6px; }
.legal__sec h3 { font-family: var(--hz-font-display); font-weight: 600; font-size: 17px; color: var(--hz-fg-on-dark-1); margin: 26px 0 0; }
.legal__sec p { font-size: 15.5px; line-height: 1.68; color: var(--hz-fg-on-dark-2); font-weight: 300; margin: 14px 0 0; }
.legal__sec p b, .legal__sec p strong { color: var(--hz-fg-on-dark-1); font-weight: 500; }
.legal__sec em { color: var(--hz-fg-on-dark-2); font-style: italic; }
.legal__sec a { color: var(--hz-hero); }
.legal__sec ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.legal__sec li {
  font-size: 15px; line-height: 1.6; color: var(--hz-fg-on-dark-2); font-weight: 300;
  padding-left: 20px; position: relative;
}
.legal__sec li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--hz-hero); opacity: 0.8; }
.legal__sec li b, .legal__sec li strong { color: var(--hz-fg-on-dark-1); font-weight: 500; }
.legal__note {
  margin-top: 18px; padding: 16px 20px; border: 1px solid var(--hz-ink-4);
  border-radius: var(--hz-r-md); background: var(--hz-ink-2);
  font-size: 14px; line-height: 1.6; color: var(--hz-fg-on-dark-2); font-weight: 300;
}
.legal__note em { color: var(--hz-fg-on-dark-1); font-style: normal; font-weight: 500; }

.legal__table { width: 100%; border-collapse: collapse; margin: 16px 0 0; font-size: 13.5px; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 11px 14px; border: 1px solid var(--hz-ink-4); line-height: 1.5; color: var(--hz-fg-on-dark-2); font-weight: 300; }
.legal__table th { font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); font-weight: 400; background: var(--hz-ink-2); }
.legal__table td:first-child { color: var(--hz-fg-on-dark-1); }
.legal__table td:last-child { font-family: var(--hz-font-mono); font-size: 12px; white-space: nowrap; }

@media (max-width: 920px) {
  .legal { grid-template-columns: 1fr; gap: 28px; }
  .legal__toc { position: static; max-height: none; }
}
@media (max-width: 520px) { .legal__table { font-size: 12px; } .legal__table th, .legal__table td { padding: 8px 9px; } }

/* ---------- home: the technology (growth model) ---------- */
.techstats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin-top: 10px; }
@media (max-width: 620px) { .techstats { grid-template-columns: 1fr; } }
.techstat { border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-lg); padding: 26px 28px; background: var(--hz-ink-2); }
.techstat__num { font-family: var(--hz-font-display); font-weight: 600; font-size: clamp(48px, 5.5vw, 68px); line-height: 1; letter-spacing: -0.02em; color: var(--hz-hero); font-variant-numeric: tabular-nums; }
.techstat__num em { font-style: normal; font-size: 0.45em; font-weight: 500; color: var(--hz-fg-on-dark-3); margin-left: 3px; }
.techstat__label { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--hz-fg-on-dark-2); font-weight: 300; max-width: 34ch; }
.tech-more { margin: 26px 0 0; }
.tech-more a { font-size: 14.5px; font-weight: 600; color: var(--hz-fg-on-dark-2); text-decoration: none; transition: color var(--hz-dur-base) var(--hz-ease-out); }
.tech-more a:hover { color: var(--hz-hero); }
.tech-more .arr { display: inline-block; transition: transform var(--hz-dur-base) var(--hz-ease-out); }
.tech-more a:hover .arr { transform: translateX(3px); }

/* ---------- plattformen: product ecosystem map ---------- */
.pmap { margin-top: 34px; }
@keyframes pmapPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(206,239,67,0.45); } 50% { box-shadow: 0 0 0 7px rgba(206,239,67,0); } }
.eco { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr; gap: 14px 0; align-items: center; max-width: 1120px; margin: 0 auto; }
.eco__col { display: flex; flex-direction: column; gap: 14px; }
.eco__arr { text-align: center; color: var(--hz-hero); font-size: 16px; }
.eco__card { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px; background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-md); text-decoration: none; transition: background var(--hz-dur-base) var(--hz-ease-out), border-color var(--hz-dur-base) var(--hz-ease-out), transform var(--hz-dur-base) var(--hz-ease-out); }
a.eco__card:hover { background: var(--hz-ink-3); border-color: rgba(206,239,67,0.35); transform: translateY(-2px); }
.eco__card--ext { border-style: dashed; opacity: 0.85; }
.eco__card--hub { border-color: rgba(206,239,67,0.5); background-image: radial-gradient(120% 140% at 50% 0%, rgba(206,239,67,0.08), transparent 65%); }
.eco__tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hz-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.eco__tag::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--hz-hero); }
.eco__card--ext .eco__tag::before { background: var(--hz-fg-on-dark-3); }
.eco__card h4 { margin: 0; font-family: var(--hz-font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; color: var(--hz-fg-on-dark); }
.eco__card p { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 300; color: var(--hz-fg-on-dark-2); }
@media (max-width: 960px) {
  .eco { grid-template-columns: 1fr; }
  .eco__arr { transform: rotate(90deg); }
}
.pmap__loop { margin: 16px auto 0; max-width: 1040px; text-align: center; font-size: 14px; color: var(--hz-fg-on-dark-2); }
.pmap__loop .arr { color: var(--hz-hero); margin-right: 6px; }
/* growth-model flow strip: history -> model -> forecasts */
.pmap__gm { margin: 30px auto 0; max-width: 1120px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; padding: 16px 20px; border: 1px dashed var(--hz-ink-4); border-radius: var(--hz-r-md); }
.pmap__gm-node { font-family: var(--hz-font-display); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; color: var(--hz-fg-on-dark); }
.pmap__gm-arr { color: var(--hz-fg-on-dark-3); font-size: 14px; }
.pmap__gm-lbl { font-family: var(--hz-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.pmap__gm-core { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(206,239,67,0.4); background: var(--hz-ink-2); font-family: var(--hz-font-display); font-weight: 600; font-size: 14.5px; color: var(--hz-hero); white-space: nowrap; }
.pmap__gm-core .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--hz-hero); animation: pmapPulse 2.4s var(--hz-ease-out) infinite; }
@media (max-width: 860px) {
  .pmap__ties { display: none; }
  .pmap__cycle { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
}
/* ---------- plattformen: starting points ---------- */
.pstart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 860px) { .pstart { grid-template-columns: 1fr; } }
.pstart__card { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 22px; background: var(--hz-ink-2); border: 1px solid var(--hz-ink-4); border-radius: var(--hz-r-lg); text-decoration: none; transition: background var(--hz-dur-base) var(--hz-ease-out), border-color var(--hz-dur-base) var(--hz-ease-out), transform var(--hz-dur-base) var(--hz-ease-out); }
.pstart__card:hover { background: var(--hz-ink-3); border-color: rgba(206,239,67,0.35); transform: translateY(-2px); }
.pstart__tag { font-family: var(--hz-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hz-fg-on-dark-3); }
.pstart__card h3 { margin: 0; font-family: var(--hz-font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; color: var(--hz-fg-on-dark); }
.pstart__card p { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 300; color: var(--hz-fg-on-dark-2); flex: 1; }
.pstart__go { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--hz-hero); }
.pstart__go .arr { display: inline-block; transition: transform var(--hz-dur-base) var(--hz-ease-out); }
.pstart__card:hover .pstart__go .arr { transform: translateX(3px); }

/* ============================================================
   ACCESSIBILITY — keyboard focus + pointer targets
   Loaded on every page, after site.css, so these win.
   ============================================================ */

/* Visible focus for every interactive element. Keyboard-only
   (:focus-visible), so mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--hz-hero);
  outline-offset: 2px;
  border-radius: inherit;
}
/* On the lime button itself an ink ring reads better than lime-on-lime */
.btn--hero:focus-visible,
.lang-switch button.active:focus-visible,
.simopt:focus-visible {
  outline-color: var(--hz-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(206,239,67,0.45);
}
/* Sliders: ring the whole control, not the invisible 44px box edge */
.simctl input[type=range]:focus-visible {
  outline: none;
}
.simctl input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(206,239,67,0.45), 0 1px 6px rgba(0,0,0,0.4);
}
.simctl input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(206,239,67,0.45), 0 1px 6px rgba(0,0,0,0.4);
}
.skip-link:focus-visible { outline: 2px solid var(--hz-ink); outline-offset: 2px; }

/* Pointer targets. Nav and the language switch grow everywhere (the bar has
   the room); the denser in-page controls grow on touch only, so desktop
   density is unchanged. */
/* direct children only — .nav__drop-item links live inside .nav__links and must
   keep their own grid layout */
.nav__links > a,
.nav__drop-btn { min-height: 44px; display: inline-flex; align-items: center; }
.lang-switch button { min-height: 34px; }
.nav__burger { width: 44px; height: 44px; }

@media (pointer: coarse) {
  .lang-switch button { min-height: 44px; padding-left: 15px; padding-right: 15px; }
  .simscen__chip,
  .simlock,
  .footer__col a,
  .footer__cookie-link,
  .tcar__dot,
  .faq__q { min-height: 44px; }
  .footer__col a { display: flex; align-items: center; }
  .simlock { min-width: 44px; }
  .mods-connect a,
  .tech-more a,
  .faq__foot a,
  .switch-note a,
  .pcrumb a,
  .sim-scen-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The whole news card is the link — its media used to lift on hover without navigating. */
a.ncard { color: inherit; text-decoration: none; }
a.ncard:focus-visible { outline: 2px solid var(--hz-hero); outline-offset: 3px; }