/* HB9Experts.ch — «Signalklar» corporate design (Manual 2026).
 * Flat surfaces only (Ink / Frost), Signal strictly as accent, hairlines in
 * Platin, labels in JetBrains Mono. No gradients, no shadows, no extra fonts. */

:root {
  /* Brand palette (docs/03_CI/brand-tokens.css) */
  --ink:      #0E2140;
  --frost:    #F1F4F8;
  --signal:   #2E6DA4;
  --welle:    #7FB6D9;
  --platin:   #C3CAD2;
  --graphit:  #6B7482;
  --white:    #FFFFFF;

  /* Derived tints (alpha only, no new hues) */
  --text-on-ink:   rgba(241, 244, 248, .8);
  --text-on-frost: rgba(14, 33, 64, .78);
  --hairline:       rgba(195, 202, 210, .28);
  --hairline-light: rgba(14, 33, 64, .14);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-on-ink);
  background: var(--ink);
}

::selection { background: var(--signal); color: var(--white); }

a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--welle);
  outline-offset: 3px;
}

section[id] { scroll-margin-top: 76px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 1.5rem;
  background: var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  text-decoration: none;
  letter-spacing: .02em;
}
.brand span { color: var(--welle); }

.site-header nav a {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(195, 202, 210, .85);
  text-decoration: none;
  margin-left: 1.4rem;
}
.site-header nav a:hover { color: var(--white); }

/* --------------------------------------------------------------- buttons */

.btn,
.contact-cta .email-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.2;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease,
              border-color .2s ease, color .2s ease;
}

.btn-primary,
.contact-cta .email-link {
  background: var(--signal);
  color: var(--white);
}
.btn-primary:hover,
.contact-cta .email-link:hover {
  background: #27608F;
  transform: translateY(-2px);
}

.btn-ghost {
  border: 1px solid rgba(195, 202, 210, .45);
  color: var(--frost);
}
.btn-ghost:hover {
  border-color: var(--welle);
  color: var(--white);
  transform: translateY(-2px);
}

.email-link { color: var(--signal); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  overflow: hidden;
  min-height: max(600px, calc(100svh - 64px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.5rem 1.5rem 4.5rem;
}

.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 920px;
}

.hero-status {
  position: absolute;
  top: 1.1rem;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0 1.6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(195, 202, 210, .75);
  animation: fade-in 1s ease .1s both;
}

/* Logo (light/silver variant for the dark hero, per brand manual). It locks in
   from soft focus while the orbit draws itself around it — a "signal lock". */
.hero-logo-wrap { margin: 0 0 1.3rem; }
.hero-logo {
  display: block;
  width: min(620px, 84vw);
  height: auto;
  margin: 0 auto;
  animation: logo-lock 1.15s cubic-bezier(.2, .75, .25, 1) .5s both;
}

@keyframes logo-lock {
  from {
    opacity: 0;
    transform: scale(.9);
    filter: blur(16px) brightness(1.7);
  }
  55% { filter: blur(1px) brightness(1.18); }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Tagline types itself out, caret blinks a few times, then disappears */
.hero-tagline {
  margin: 0 0 1.9rem;
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 1.7vw, .95rem);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--welle);
  white-space: nowrap;
}
.type-line {
  display: inline-block;
  clip-path: inset(-10% 100% -10% 0);
  animation: type-in 1s steps(26, end) 1.3s forwards;
}
@keyframes type-in { to { clip-path: inset(-10% -2% -10% 0); } }

.type-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: .35em;
  vertical-align: -.12em;
  background: var(--welle);
  opacity: 0;
  animation: caret-seq 2.2s linear 1.3s both;
}
@keyframes caret-seq {
  0%, 11% { opacity: 1; }
  12%, 24% { opacity: 0; }
  25%, 36% { opacity: 1; }
  37%, 49% { opacity: 0; }
  50%, 61% { opacity: 1; }
  62%, 74% { opacity: 0; }
  75%, 87% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

.hero-lead {
  margin: 0 auto 2.2rem;
  max-width: 56ch;
  font-size: 1.08rem;
  color: var(--text-on-ink);
  animation: fade-up .8s ease 1.75s both;
}

.hero-ctas {
  display: flex;
  gap: .9rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fade-up .8s ease 1.95s both;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  z-index: 2;
  transform: translate(-50%, 0);
  color: rgba(195, 202, 210, .7);
  animation: fade-in 1s ease 2.7s both, bob 2.8s ease-in-out 3.8s infinite;
}
.hero-scroll:hover { color: var(--welle); }

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ hero scene */

.star { fill: var(--frost); }
.stars { animation: fade-in 1.8s ease .35s both; }
.s1 { opacity: .5;  animation: tw1 5.5s ease-in-out infinite alternate; }
.s2 { opacity: .32; animation: tw2 7.5s ease-in-out 1.6s infinite alternate; }
.s3 { opacity: .18; animation: tw3 9s ease-in-out 3s infinite alternate; }
@keyframes tw1 { to { opacity: .15; } }
@keyframes tw2 { to { opacity: .08; } }
@keyframes tw3 { to { opacity: .45; } }

.orbit-line {
  fill: none;
  stroke: rgba(195, 202, 210, .5);
  stroke-width: 1.3;
  stroke-dasharray: 1965;
  stroke-dashoffset: 1965;
  animation: dash-draw 1.5s cubic-bezier(.45, 0, .2, 1) 1.05s forwards;
}

.trace-path {
  fill: none;
  stroke: rgba(195, 202, 210, .45);
  stroke-width: 1.2;
  stroke-dasharray: 390;
  stroke-dashoffset: 390;
  animation: dash-draw .9s ease 1.5s forwards;
}

@keyframes dash-draw { to { stroke-dashoffset: 0; } }

.trace-node {
  fill: var(--welle);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pop .45s cubic-bezier(.3, 1.5, .5, 1) 2.15s both,
             led-pulse 7s ease-in-out 5s infinite;
}
@keyframes node-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: .9; transform: scale(1); }
}
@keyframes led-pulse {
  0%, 100% { opacity: .9; }
  50%      { opacity: .4; }
}

.trace-dot { fill: var(--welle); }

/* Discreet members-intranet entry point on the end circuit node. The scene is
   pointer-events:none; this hotspot re-enables clicks just for the link. */
.login-hotspot { cursor: pointer; pointer-events: auto; }
.login-hit { fill: transparent; pointer-events: all; }
.login-node {
  fill: var(--welle);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .18s ease, transform .18s ease;
  /* steady (override the trace-node led-pulse) so it reads as clickable */
  animation: node-pop .45s cubic-bezier(.3, 1.5, .5, 1) 2.15s both;
}
.login-hotspot:hover .login-node,
.login-hotspot:focus-visible .login-node { fill: #fff; transform: scale(1.9); }
.login-hotspot:focus-visible { outline: none; }
.login-hotspot:focus-visible .login-hit {
  fill: rgba(127, 182, 217, .14);
  stroke: var(--welle);
  stroke-width: 1.4;
}
.login-ping {
  fill: none;
  stroke: var(--welle);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: login-ping 5s ease-out 4s infinite;
}
@keyframes login-ping {
  0%   { transform: scale(1);   opacity: 0; }
  12%  { opacity: .7; }
  55%  { transform: scale(4.5); opacity: 0; }
  100% { transform: scale(4.5); opacity: 0; }
}

.satellite { opacity: 0; animation: fade-in .7s ease 1.75s forwards; }
.sat-strut { stroke: var(--platin); stroke-width: 1.5; }
.sat-panel { fill: var(--signal); stroke: var(--welle); stroke-width: .8; }
.sat-grid  { stroke: rgba(127, 182, 217, .7); stroke-width: .7; }
.sat-body  { fill: var(--platin); }
.sat-window { fill: var(--ink); }
.sat-mast  { stroke: var(--platin); stroke-width: 1.5; }
.sat-dish  { fill: var(--welle); }
.sat-wave  { fill: none; stroke: var(--welle); stroke-width: 1.6; stroke-linecap: round; }

/* ----------------------------------------------------------------- bands */

.band { padding: 6.2rem 1.5rem; }
.band-frost { background: var(--frost); color: var(--text-on-frost); }
.band-ink   { background: var(--ink); color: var(--text-on-ink); }
.band-inner { max-width: var(--maxw); margin: 0 auto; }

.section-head { max-width: 720px; margin: 0 0 3rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--signal);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hairline-light); }
.band-ink .eyebrow { color: var(--welle); }
.band-ink .eyebrow::after { background: var(--hairline); }

.section-head h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
}
.band-ink .section-head h2 { color: var(--white); }

.section-lead { margin: 0; font-size: 1.05rem; }

/* --------------------------------------------------------------- pillars */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.pillar-card {
  background: var(--white);
  border: 1px solid rgba(14, 33, 64, .12);
  border-radius: 16px;
  padding: 1.9rem 1.7rem;
  transition: transform .25s ease, border-color .25s ease;
}
.pillar-card:hover {
  transform: translateY(-4px);
  border-color: var(--signal);
}

.pillar-icon { width: 60px; height: 60px; display: block; margin: 0 0 1.2rem; }

.pillar-label {
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--signal);
}

.pillar-card h3 {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
}
.pillar-card p:last-child { margin: 0; font-size: .98rem; }

/* ------------------------------------------------- emergency relay chain */

.chain {
  display: flex;
  align-items: flex-start;
  margin: 3.2rem 0 3rem;
}

.chain-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  min-width: 110px;
}

.chain-led {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--welle);
  animation: led-glow 6s ease-in-out var(--ld, 0s) infinite;
}
.chain-led::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--welle);
  opacity: 0;
  animation: led-ring 6s ease-out var(--ld, 0s) infinite;
}
@keyframes led-glow {
  0%, 4% { opacity: 1; }
  12%, 100% { opacity: .5; }
}
@keyframes led-ring {
  0%  { transform: scale(.4); opacity: .8; }
  22% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.chain-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(195, 202, 210, .8);
}

.chain-link {
  position: relative;
  flex: 1;
  height: 1px;
  margin: 5.5px .4rem 0;
  background: var(--hairline);
}
.chain-link::after {
  content: "";
  position: absolute;
  top: -2.5px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--welle);
  opacity: 0;
  animation: chain-dot 6s linear var(--cd, 0s) infinite;
}
@keyframes chain-dot {
  0%    { left: 0; opacity: 0; }
  2%    { opacity: 1; }
  20%   { opacity: 1; }
  21.5% { left: calc(100% - 6px); opacity: 0; }
  100%  { left: calc(100% - 6px); opacity: 0; }
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.spec { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }
.spec-label {
  margin: 0 0 .5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--welle);
}
.spec p:last-child { margin: 0; font-size: .95rem; }

/* ----------------------------------------------------- mentoring / morse */

.morse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  flex-wrap: wrap;
  margin: 3rem 0 .9rem;
}

.morse-chip {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid rgba(14, 33, 64, .25);
  border-radius: 999px;
  padding: .5rem .9rem;
}

.morse-seq { display: flex; align-items: center; gap: 7px; }

/* Morse glyphs light up in the real rhythm of «73» (--md per glyph) */
.m {
  display: inline-block;
  height: 7px;
  border-radius: 4px;
  background: rgba(14, 33, 64, .18);
  animation: m-lit 8s linear var(--md, 0s) infinite;
}
.m-dot  { width: 7px; }
.m-dash { width: 21px; }
.m-gap  { display: inline-block; width: 10px; }
@keyframes m-lit {
  0%, .9% { background: rgba(14, 33, 64, .18); }
  1.1%, 4.5% { background: var(--signal); }
  6%, 100% { background: rgba(14, 33, 64, .18); }
}

.morse-caption {
  margin: 0;
  text-align: center;
  font-size: .92rem;
  color: rgba(14, 33, 64, .62);
}

/* --------------------------------------------------------------- contact */

.band-contact { text-align: center; }
.band-contact .section-head { margin-left: auto; margin-right: auto; }
.band-contact .eyebrow { justify-content: center; }
.band-contact .eyebrow::after { display: none; }

.contact-cta { margin: 2.2rem 0 1.6rem; }

.contact-mono {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(195, 202, 210, .55);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 2.2rem 1.5rem 2.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(195, 202, 210, .65);
}
.site-footer p { margin: 0 0 .6rem; }

.intranet-link {
  display: inline-flex;
  color: var(--signal);
  opacity: .5;
  transition: opacity .2s ease, color .2s ease, transform .2s ease;
}
.intranet-link:hover, .intranet-link:focus-visible {
  opacity: 1;
  color: var(--welle);
  transform: translateY(-1px);
  outline: none;
}

/* --------------------------------------------------------------- reveals */

/* Guarded by html.js so no-JS visitors always see the content */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease var(--rd, 0s),
              transform .75s cubic-bezier(.2, .7, .2, 1) var(--rd, 0s);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-logo, .type-line, .type-caret, .hero-lead, .hero-ctas,
  .hero-status, .hero-scroll, .stars, .star, .orbit-line, .trace-path,
  .trace-node, .login-node, .login-ping, .chain-led, .chain-led::after,
  .chain-link::after, .m, .btn, .pillar-card, .contact-cta .email-link {
    animation: none;
    transition: none;
  }

  .login-node { opacity: .95; }
  .login-ping { opacity: 0; }

  .type-line { clip-path: none; }
  .type-caret { display: none; }
  .orbit-line, .trace-path { stroke-dashoffset: 0; }
  .trace-node { opacity: .9; transform: none; }
  .chain-link::after { opacity: 0; }
  .satellite, .trace-dot { display: none; }

  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 920px) {
  .pillar-grid, .spec-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .band { padding: 4.6rem 1.25rem; }

  .hero-status .status-mid { display: none; }
  .hero-tagline { letter-spacing: .22em; white-space: normal; }

  .site-header { padding: 0 1.1rem; }
  .site-header nav a { margin-left: .7rem; font-size: .66rem; letter-spacing: .1em; }

  .chain {
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
    margin: 2.6rem 0 2.4rem;
  }
  .chain-node {
    flex-direction: row;
    justify-content: flex-start;
    gap: .8rem;
    min-width: 0;
  }
  .chain-link {
    flex: none;
    width: 1px;
    height: 44px;
    margin: .2rem 0 .2rem 5.5px;
  }
  .chain-link::after {
    top: 0;
    left: -2.5px;
    animation-name: chain-dot-v;
  }
}

@keyframes chain-dot-v {
  0%    { top: 0; opacity: 0; }
  2%    { opacity: 1; }
  20%   { opacity: 1; }
  21.5% { top: calc(100% - 6px); opacity: 0; }
  100%  { top: calc(100% - 6px); opacity: 0; }
}