/* ETIV-System brand layer. Original logo: navy #203876 and cyan #00AADD.
   Holds the logo display, the hero atmosphere, the process graphic and the scenario illustrations. */

.brand-logo { display: block; width: 196px; height: auto; max-width: 100%; }
.site-footer .brand-logo { width: 210px; }

.hero {
  background:
    radial-gradient(ellipse 60% 70% at 82% 42%, rgb(0 170 221 / 16%) 0, transparent 70%),
    radial-gradient(ellipse at 88% 38%, #1b3864 0, transparent 57%),
    linear-gradient(120deg, #0b1734 12%, #12264b 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(147 198 236 / 16%) 1px, transparent 1.2px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent 30%, black 75%);
}

/* The orbit and connections echo the actual logo, without altering the logo file. */
.system-visual { position: relative; z-index: 1; width: 100%; max-width: 560px; margin: 0 auto; }
.system-visual > svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 50px rgb(0 0 0 / 25%)); }
.system-caption { fill: #b2cdee; font: 600 10px var(--font); letter-spacing: 1.6px; }
.system-core-title { fill: #fff; font: 600 25px var(--display); letter-spacing: -.6px; }
.system-core-sub { fill: #b4d4f1; font: 600 10px var(--font); letter-spacing: 2.1px; }
.system-phase > rect { fill: #f7fbff; stroke: #d8edf9; stroke-width: 1; }
.system-phase-number { fill: #1f557e; font: 600 10px var(--font); letter-spacing: 1.5px; }
.system-phase-title { fill: #1d3370; font: 600 16px var(--display); letter-spacing: -.3px; }
.system-phase > path { fill: none; stroke: #008bb7; stroke-width: 1.8; }

/* Illustrative scenario visuals (decorative, aria-hidden). */
.case-visual {
  position: relative;
  height: 210px;
  overflow: hidden;
  padding: 20px 22px;
  color: var(--heading);
  background: linear-gradient(160deg, #e6f2fd, #d6e8fa);
}
.case-visual-pharma { background: linear-gradient(160deg, #e3f6fd, #cdeaf7); }
.case-visual-industrie { background: linear-gradient(160deg, #eaeefb, #d9e1f6); }
.visual-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#8eaed12e 1px, transparent 1px), linear-gradient(90deg, #8eaed12e 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, black);
}
.visual-label {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #9dbbda;
  border-radius: 999px;
  background: rgb(255 255 255 / 70%);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1f4470;
}
.case-glyph {
  position: absolute;
  left: calc(50% - 42px);
  top: 62px;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid #a9c6e5;
  border-radius: 18px;
  background: #fff;
  color: var(--navy);
  box-shadow: 12px 12px 0 #99bbdd66;
  transform: rotate(-7deg);
  transition: transform .35s var(--ease);
}
.case-card:hover .case-glyph { transform: rotate(0deg) translateY(-4px); }
.case-glyph > .icon { width: 38px; height: 38px; max-width: none; stroke-width: 1.2; }
.case-visual-pharma .case-glyph { transform: rotate(7deg); box-shadow: 12px 12px 0 #75bedb66; }
.case-visual-industrie .case-glyph { transform: rotate(-4deg); box-shadow: 12px 12px 0 #9aafd966; }
.visual-bottom {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2a4c75;
}
.visual-bottom i { flex: 1; height: 1px; background: #7199be; }

.hero-bottom { position: relative; }

@media (max-width: 960px) {
  .hero::before { mask-image: linear-gradient(180deg, transparent 40%, black 85%); }
}
@media (max-width: 860px) {
  .brand-logo { width: 176px; }
}
@media (max-width: 640px) {
  .brand-logo { width: 168px; }
  .site-footer .brand-logo { width: 196px; }
}
@media (prefers-reduced-motion: reduce) {
  .case-card:hover .case-glyph { transform: none; }
}
@media print {
  .system-visual, .hero::before { display: none !important; }
}