/* Chartschmiede brand lockup refresh */
:root {
  --brand-bg-0: #020403;
  --brand-bg-1: #07100d;
  --brand-bg-2: #0c1914;
  --brand-accent: #64e8bf;
  --brand-accent-soft: rgba(100,232,191, 0.14);
  --brand-accent-2: #d6ffe8;
  --brand-gold: #d7b56d;
  --brand-grad: linear-gradient(135deg, #ffffff 0%, #b8ffe9 30%, #64e8bf 62%, #119a82 100%);
}

.brand-lockup-img,
.nav-brand-lockup,
.cs-lockup-img,
.navbar-brand-lockup,
.pro-lockup-img {
  display: block;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(100,232,191, .18));
}

.navbar-brand-lockup {
  width: 212px;
  max-width: min(54vw, 212px);
}

.cs-lockup-img {
  width: 208px;
  max-width: 100%;
}

.brand-lockup-inline {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-showcase {
  width: min(980px, calc(100vw - 44px));
  margin: 58px auto 0;
  border: 1px solid rgba(100,232,191, .18);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.12), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(100,232,191,.18), transparent 34%),
    linear-gradient(145deg, rgba(8,18,14,.96), rgba(3,8,6,.98));
  box-shadow: 0 32px 120px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
}

.brand-showcase-inner {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(320px, 1.14fr);
  gap: 28px;
  align-items: center;
  padding: 46px;
  position: relative;
}

.brand-showcase-inner::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
}

.brand-showcase-lockup {
  width: min(340px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.36))
          drop-shadow(0 0 22px rgba(100,232,191,.16));
}

.brand-showcase-kicker {
  margin-top: 24px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.brand-showcase-title {
  margin-top: 10px;
  color: #fff;
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: .98;
  text-align: left;
}

.brand-showcase-title span { color: var(--brand-accent); }

.brand-showcase-copy {
  margin-top: 16px;
  color: var(--text-2, var(--text-mid, #d0d5df));
  font-size: 15px;
  line-height: 1.65;
  max-width: 380px;
  text-align: left;
}

.brand-showcase-visual {
  position: relative;
  min-height: 300px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.brand-showcase-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.brand-chip-row {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.brand-chip-row span {
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.brand-chart-line { stroke: url(#chartLine); }

@media(max-width:860px) {
  .brand-showcase-inner { grid-template-columns: 1fr; padding: 28px; }
  .brand-chip-row { grid-template-columns: 1fr 1fr; }
  .brand-showcase-title,
  .brand-showcase-copy,
  .brand-showcase-kicker { text-align: center; margin-left: auto; margin-right: auto; }
  .brand-showcase-lockup { margin: 0 auto; }
}