/* Homepage first impression: a clear B2B offer and a product-led visual. */
.showcase.hero {
  color: #f8f8f2;
  min-height: 0;
  padding: 76px max(5.5%, calc((100% - 1400px)/2)) 34px;
  background:
    radial-gradient(circle at 78% 26%, rgba(67, 150, 166, .36), transparent 32%),
    radial-gradient(circle at 16% 90%, rgba(190, 150, 81, .16), transparent 36%),
    linear-gradient(120deg, #122d3a 0%, #183e4e 52%, #1d5264 100%);
}
.showcase.hero::before {
  opacity: .35;
  background-image: linear-gradient(#d8f0ed10 1px, transparent 1px), linear-gradient(90deg, #d8f0ed10 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 5%, #000 65%);
}
.showcase-inner {
  max-width: 1400px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 5%;
  min-height: 490px;
}
.showcase-copy { padding: 12px 0 25px; }
.showcase .hero-business {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f1d595;
  letter-spacing: .18em;
  margin: 0 0 48px;
  font-size: 11px;
}
.hero-business-mark { width: 19px; height: 2px; background: #f1d595; display: inline-block; }
.showcase .eyebrow { color: #a9d1d5; margin-bottom: 12px; font-size: 11px; letter-spacing: .2em; }
.showcase h1 {
  max-width: 760px;
  color: #fffdf6;
  font-size: clamp(50px, 5vw, 78px);
  line-height: 1.045;
  letter-spacing: -.052em;
  margin: 0 0 26px;
  text-wrap: balance;
}
.showcase h1 span { color: #efd192; font-weight: 600; }
.showcase-description { max-width: 560px; color: #c9dce0; font-size: 17px; line-height: 1.72; margin: 0; }
.showcase .hero-actions { display: flex; align-items: center; gap: 30px; margin: 31px 0 0; }
.showcase .button.dark {
  background: #e9c981;
  color: #193746;
  border-radius: 7px;
  box-shadow: 0 12px 26px #071d2850;
  padding: 16px 23px;
  font-weight: 700;
}
.showcase .button.dark:hover { background: #f5dca4; transform: translateY(-2px); }
.showcase .text-link { color: #f4f7f2; font-weight: 600; font-size: 14px; }
.showcase .text-link:hover, .hero-support-line a:hover { color: #f1d595; }
.showcase-specs { margin-top: 35px; color: #d1e2e2; font-size: 10px; letter-spacing: .12em; }
.showcase-specs span+span { border-left-color: #ffffff48; }
.hero-support-line { margin: 24px 0 0; font-size: 13px; color: #adc6cb; }
.hero-support-line a { color: #fff1ce; text-decoration: underline; text-underline-offset: 3px; }
.showcase-visual {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 430px;
  padding: 22px 24px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #f5efe0;
  box-shadow: 0 30px 70px #061c2d55, 0 0 0 8px #ffffff0d;
}
.showcase-visual-top, .showcase-caption { display: flex; justify-content: space-between; gap: 15px; color: #6d8790; font-size: 10px; letter-spacing: .16em; font-weight: 700; }
.showcase-visual-top span:last-child { color: #a48446; }
.showcase-visual>img { flex: 1; width: 100%; max-height: 345px; height: 345px; object-fit: contain; background: #fff; margin: 3px auto; border-radius: 0; }
.showcase-caption { margin: 0; padding-top: 15px; border-top: 1px solid #e1e8e8; }
.showcase-controls { max-width: 1400px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.showcase-choice {
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 22px;
  border: 1px solid #9cc8cf32;
  border-top: 2px solid #9cc8cf56;
  border-radius: 8px;
  background: #ffffff0a;
  color: #d5e7e8;
  transition: background .2s, border-color .2s, transform .2s;
}
.showcase-choice:hover { background: #ffffff16; transform: translateY(-2px); }
.showcase-choice[aria-pressed=true] { border-color: #e4c480; border-top-color: #e4c480; background: #ffffff15; color: #fff; }
.showcase-choice .choice-index { margin: 0 0 2px; color: #e3c88e; font-size: 10px; letter-spacing: .15em; }
.showcase-choice strong { font-size: 18px; letter-spacing: -.02em; line-height: 1.2; }
.showcase-choice small { color: #adcbcf; font-size: 12px; line-height: 1.4; }
.service-strip { padding-top: 26px; padding-bottom: 27px; background: #fcfaf5; }
.service-strip strong { color: #204454; }
.service-strip a:hover strong { color: #966b29; }
.collection-entry { padding-top: 70px; padding-bottom: 68px; }
.collection-intro h2 { font-size: clamp(28px, 2.35vw, 38px); }
.collection-tile { border-radius: 13px; }

@media (max-width: 1050px) {
  .showcase.hero { padding-top: 58px; }
  .showcase h1 { font-size: clamp(43px, 5vw, 58px); }
  .showcase-visual { min-height: 360px; }
  .showcase-visual>img { height: 285px; max-height: 285px; }
}
@media (max-width: 700px) {
  .showcase.hero { padding: 39px 5% 24px; }
  .showcase-inner { grid-template-columns: 1fr; gap: 28px; }
  .showcase-copy { padding: 0; }
  .showcase .hero-business { margin-bottom: 28px; font-size: 10px; }
  .showcase h1 { font-size: clamp(42px, 10vw, 58px); margin-bottom: 19px; }
  .showcase-description { font-size: 15px; }
  .showcase .hero-actions { margin-top: 24px; gap: 16px; }
  .showcase .button.dark { padding: 14px 16px; font-size: 12px; }
  .showcase .text-link { font-size: 12px; }
  .showcase-specs { margin-top: 23px; }
  .hero-support-line { margin-top: 17px; }
  .showcase-visual { min-height: 310px; padding: 16px; }
  .showcase-visual>img { height: 240px; max-height: 240px; }
  .showcase-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 25px; }
  .showcase-choice { padding: 11px 9px; gap: 4px; }
  .showcase-choice .choice-index { font-size: 8px; letter-spacing: .06em; }
  .showcase-choice strong { font-size: 12px; }
  .showcase-choice small { display: none; }
  .collection-entry { padding-top: 49px; padding-bottom: 49px; }
}
@media (max-width: 380px) {
  .showcase .hero-actions { align-items: flex-start; flex-direction: column; }
  .showcase-choice strong { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-choice, .showcase .button.dark { transition: none; }
}