.flowz-showcase {
  padding: 112px 32px 96px;
  border-block: 1px solid rgba(255,255,255,.07);
  background: #0b0a10;
  scroll-margin-top: 90px;
}
.flowz-showcase__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
  gap: 64px;
  align-items: center;
}
.flowz-showcase__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8ee7f6;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.flowz-showcase__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}
.flowz-showcase__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
}
.flowz-showcase__brand span span { color: #b69aff; }
.flowz-showcase__brand::after {
  content: '';
  width: 7px;
  height: 7px;
  margin: 0 0 4px -7px;
  align-self: flex-end;
  border-radius: 50%;
  background: #b69aff;
}
.flowz-showcase__signature {
  margin-top: 12px;
  color: #b4adbf;
  font-size: 13px;
}
.flowz-showcase__title {
  margin: 30px 0 20px;
  color: #f6f3ff;
  font-size: clamp(36px, 4.3vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.flowz-showcase__title span { color: #b69aff; }
.flowz-showcase__description {
  max-width: 400px;
  color: #c2bdce;
  font-size: 17px;
  line-height: 1.75;
}
.flowz-showcase__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 52px;
  margin-top: 30px;
  padding: 14px 24px;
  border: 1px solid #9870ee;
  border-radius: 12px;
  background: #7c3aed;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.flowz-showcase__link:hover { background: #6d28d9; transform: translateY(-2px); }
.flowz-showcase__link:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 5px; }
.flowz-showcase__link span { font-size: 21px; line-height: 1; }
.flowz-showcase__visual { min-width: 0; margin: 0; }
.flowz-showcase__screens {
  position: relative;
  padding: 32px 52px 38px 0;
  isolation: isolate;
}
.flowz-showcase__screens::before {
  content: '';
  position: absolute;
  inset: -35px -25px;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(124,58,237,.14), transparent 70%);
  pointer-events: none;
}
.flowz-showcase__desktop {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(192,170,255,.23);
  border-radius: 15px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.flowz-showcase__mobile {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: auto;
  border: 5px solid #1d192a;
  border-radius: 23px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.flowz-showcase__caption { margin-top: 18px; color: #e4dcec; font-size: 15px; font-weight: 500; }
.flowz-showcase__modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  color: #aaa1b9;
  font-size: 12px;
}
.flowz-showcase__modules li { display: flex; align-items: center; gap: 7px; }
.flowz-showcase__modules li::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #b69aff; }
@media (max-width: 960px) {
  .flowz-showcase { padding-block: 80px; }
  .flowz-showcase__inner { grid-template-columns: 1fr; gap: 36px; max-width: 700px; }
  .flowz-showcase__title { max-width: 560px; font-size: clamp(36px, 6.4vw, 54px); }
  .flowz-showcase__description { max-width: 540px; }
}
@media (max-width: 580px) {
  .flowz-showcase { padding: 64px 24px; }
  .flowz-showcase__eyebrow { font-size: 10px; }
  .flowz-showcase__title { font-size: clamp(32px, 9vw, 44px); }
  .flowz-showcase__description { font-size: 16px; }
  .flowz-showcase__screens { padding: 12px 28px 24px 0; }
  .flowz-showcase__desktop { border-radius: 9px; }
  .flowz-showcase__mobile { width: 27%; border-width: 3px; border-radius: 12px; }
  .flowz-showcase__modules { gap: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .flowz-showcase__link { transition: none; }
  .flowz-showcase__link:hover { transform: none; }
}