/* Approved hero showcase: real Reltano builds instead of abstract decoration. */

.hero-showcase {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 1.35rem;
  color: #e9f3ff;
  background:
    radial-gradient(circle at 92% 4%, rgb(21 117 255 / 22%), transparent 17rem),
    linear-gradient(150deg, rgb(8 29 50 / 96%), rgb(4 13 24 / 98%));
  border: 1px solid rgb(103 177 255 / 18%);
  border-radius: 1.85rem;
  box-shadow: 0 34px 95px rgb(0 0 0 / 34%);
  isolation: isolate;
}

.hero-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -7rem;
  top: -8rem;
  width: 23rem;
  height: 23rem;
  border: 1px solid rgb(0 194 255 / 16%);
  border-radius: 50%;
  box-shadow: inset 0 0 70px rgb(30 64 255 / 6%);
}

.hero-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8%;
  bottom: -5%;
  width: 82%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00c2ff 30%, #1e40ff 78%, transparent);
  box-shadow: 0 0 28px rgb(0 194 255 / 64%);
  transform: rotate(-7deg);
}

.hero-showcase-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgb(255 255 255 / 2.3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 2.3%) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(135deg, black 10%, transparent 92%);
}

.hero-showcase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.05rem;
}

.hero-showcase-head > div {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}

.hero-showcase-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  color: #72dfff;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-showcase-kicker i {
  width: 0.43rem;
  height: 0.43rem;
  background: #19c9ff;
  border-radius: 50%;
  box-shadow: 0 0 14px rgb(25 201 255 / 80%);
}

.hero-showcase-head strong {
  color: #fff;
  font-size: clamp(1.08rem, 1.8vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.hero-showcase-head > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.62rem 0.8rem;
  color: #9db2c9;
  background: rgb(255 255 255 / 3.5%);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 0.8rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
  transition: 160ms ease;
}

.hero-showcase-head > a:hover {
  color: #fff;
  background: rgb(255 255 255 / 7%);
  border-color: rgb(88 215 255 / 25%);
  transform: translateY(-1px);
}

.hero-showcase-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.hero-product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.78rem;
  min-height: 21.5rem;
  padding: 0.8rem;
  color: #dce9f7;
  background: linear-gradient(165deg, rgb(11 31 52 / 95%), rgb(5 17 30 / 98%));
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgb(0 0 0 / 12%);
  text-decoration: none;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.hero-product-card:hover {
  color: #eaf5ff;
  border-color: rgb(70 188 255 / 30%);
  box-shadow: 0 22px 50px rgb(0 0 0 / 20%), 0 0 0 1px rgb(30 64 255 / 8%);
  transform: translateY(-3px);
}

.hero-product-card:focus-visible {
  outline: 2px solid #58d7ff;
  outline-offset: 3px;
}

.hero-product-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}

.hero-product-head > span:not(.hero-product-icon) {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.hero-product-head strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.76rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
}

.hero-product-head small {
  color: #7f95ad;
  font-size: 0.58rem;
  line-height: 1.35;
}

.hero-product-head > b {
  align-self: start;
  color: #23c9ff;
  font-size: 0.72rem;
  font-weight: 700;
}

.hero-product-icon {
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.68rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 8px 20px rgb(0 0 0 / 18%);
}

.hero-product-icon-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.16rem;
  padding: 0.45rem;
  background: linear-gradient(145deg, #06784c, #01c883);
}

.hero-product-icon-bars i {
  width: 0.25rem;
  background: #d5fff0;
  border-radius: 0.12rem 0.12rem 0 0;
}

.hero-product-icon-bars i:nth-child(1) { height: 42%; }
.hero-product-icon-bars i:nth-child(2) { height: 68%; }
.hero-product-icon-bars i:nth-child(3) { height: 95%; }

.hero-product-icon-calendar {
  color: #e7e8ff;
  background: linear-gradient(145deg, #4731d9, #6a51ff);
  font-size: 1.35rem;
}

.hero-product-icon-ai {
  color: #dffcff;
  background: linear-gradient(145deg, #0879ac, #00bdd9);
  font-size: 1.15rem;
}

.hero-mini-app {
  min-height: 12.7rem;
  padding: 0.68rem;
  background: rgb(5 15 27 / 78%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 0.8rem;
  box-shadow: inset 0 0 28px rgb(0 0 0 / 18%);
}

.hero-mini-tabs {
  display: flex;
  gap: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  color: #667b92;
  font-size: 0.5rem;
}

.hero-mini-tabs span.active {
  color: #eaf7ff;
  border-bottom: 1px solid #1db9ff;
}

.hero-mini-search {
  margin: 0.55rem 0;
  padding: 0.5rem 0.55rem;
  color: #6f859e;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 0.55rem;
  font-size: 0.48rem;
}

.hero-mini-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  padding: 0.46rem 0.18rem;
  color: #aebed0;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
  font-size: 0.52rem;
}

.hero-mini-row:last-child { border-bottom: 0; }
.hero-mini-row strong { color: #dce9f7; font-size: inherit; }
.hero-mini-row em { color: #35d5ff; font-style: normal; }

.dot {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}
.dot-green { color: #19d48e; background: #19d48e; }
.dot-blue { color: #436dff; background: #436dff; }
.dot-cyan { color: #1bd5ff; background: #1bd5ff; }

.hero-mini-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.hero-mini-title strong { color: #eaf4ff; font-size: 0.62rem; }
.hero-mini-title span { color: #6f849c; font-size: 0.48rem; }

.hero-mini-tabs-compact {
  display: inline-flex;
  padding: 0.18rem;
  gap: 0.15rem;
  background: rgb(255 255 255 / 3.5%);
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 0.45rem;
}
.hero-mini-tabs-compact span {
  padding: 0.26rem 0.42rem;
  border: 0;
  border-radius: 0.32rem;
}
.hero-mini-tabs-compact span.active {
  color: #fff;
  background: #145fff;
  border: 0;
}

.hero-mini-chart {
  height: 6.1rem;
  display: flex;
  align-items: end;
  gap: 0.28rem;
  margin: 0.6rem 0 0.5rem;
  padding: 0.55rem 0.3rem 0.25rem;
  background-image: linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 100% 1.65rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.hero-mini-chart i {
  flex: 1 1 0;
  height: var(--h);
  min-height: 0.9rem;
  background: linear-gradient(180deg, #6f74ff, #1a69ff 62%, #0ea5e9);
  border-radius: 0.18rem 0.18rem 0 0;
  box-shadow: 0 0 12px rgb(45 116 255 / 28%);
}

.hero-mini-summary {
  display: grid;
  gap: 0.16rem;
  padding: 0.5rem 0.55rem;
  background: rgb(255 255 255 / 3.2%);
  border: 1px solid rgb(255 255 255 / 5%);
  border-radius: 0.5rem;
}
.hero-mini-summary span { color: #71869f; font-size: 0.45rem; }
.hero-mini-summary strong { color: #eaf5ff; font-size: 0.58rem; }

.hero-mini-flow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 0.58rem;
}

.hero-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  padding: 0.52rem;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 0.58rem;
}
.hero-flow-step > span {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  color: #dff7ff;
  background: #145e9e;
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 800;
}
.hero-flow-step div { min-width: 0; display: grid; gap: 0.12rem; }
.hero-flow-step strong { color: #eaf5ff; font-size: 0.52rem; line-height: 1.2; }
.hero-flow-step small { color: #748aa3; font-size: 0.43rem; line-height: 1.25; }
.hero-flow-step-ai > span { background: linear-gradient(145deg, #4c3fe0, #673aff); }
.hero-flow-step-done > span { color: #effff9; background: #0e9c62; }

.hero-flow-line {
  width: 1px;
  height: 0.55rem;
  margin: 0 auto;
  background: linear-gradient(#15c9ff, #5865ff);
  box-shadow: 0 0 8px rgb(21 201 255 / 40%);
}

.hero-product-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.55rem 0.65rem;
  color: #8fbcff;
  background: rgb(15 73 149 / 16%);
  border: 1px solid rgb(51 138 255 / 26%);
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 760;
}
.hero-product-card:hover .hero-product-cta {
  color: #dff8ff;
  background: rgb(18 100 196 / 24%);
  border-color: rgb(45 188 255 / 40%);
}

/* Give the approved showcase enough visual weight without changing the hero architecture. */
@media (min-width: 981px) {
  .hero-grid-v2 {
    grid-template-columns: minmax(0, 0.83fr) minmax(570px, 1.17fr);
    gap: clamp(2rem, 3.2vw, 3.4rem);
  }
  .hero-copy-v2 h1 { max-width: 15.5ch; }
}

@media (max-width: 1100px) and (min-width: 981px) {
  .hero-grid-v2 {
    grid-template-columns: minmax(0, 0.78fr) minmax(550px, 1.22fr);
    gap: 1.7rem;
  }
  .hero-showcase { padding: 1.05rem; }
  .hero-product-card { padding: 0.7rem; }
  .hero-product-head strong { font-size: 0.71rem; }
  .hero-product-head small { font-size: 0.54rem; }
}

@media (max-width: 980px) {
  .hero-showcase {
    width: min(100%, 820px);
    margin-top: 0.25rem;
  }
  .hero-showcase-cards { gap: 0.85rem; }
  .hero-product-card { min-height: 20.5rem; }
}

@media (max-width: 720px) {
  .hero-showcase { padding: 1rem; border-radius: 1.35rem; }
  .hero-showcase-head { align-items: center; }
  .hero-showcase-head > a { padding: 0.5rem 0.6rem; font-size: 0.62rem; }
  .hero-showcase-cards { grid-template-columns: 1fr; }
  .hero-product-card { min-height: auto; padding: 0.82rem; }
  .hero-mini-app { min-height: 0; }
  .hero-product-head strong { font-size: 0.82rem; }
  .hero-product-head small { font-size: 0.62rem; }
  .hero-product-cta { font-size: 0.64rem; }
}

@media (max-width: 430px) {
  .hero-showcase-head {
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero-showcase-head > a { justify-self: start; }
}