/* A left-aligned introduction above a wide, layered product stage. */
.hero.container { display: block; min-height: 0; padding-block: 76px 88px; }
.hero .hero-copy { max-width: 760px; padding: 0; }
/* Icon carousel: two large tiles in the middle, two small at the edges; hero-stage.js moves them along. */
.hero-icons { position: relative; width: 166px; height: 40px; margin-bottom: 26px; }
.hero-tile { position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; opacity: 0; background: linear-gradient(150deg, var(--b), var(--a)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .12), 0 6px 14px -6px var(--a); transform: translateX(var(--x, 156px)) scale(var(--k, .3)); transition: transform .75s cubic-bezier(.65, 0, .35, 1), opacity .5s ease; }
.hero-tile svg { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-tile img { width: 64%; height: 64%; }
.hero-tile.s0 { --x: 0px; --k: .66; opacity: 1; }
.hero-tile.s1 { --x: 40px; --k: 1; opacity: 1; }
.hero-tile.s2 { --x: 86px; --k: 1; opacity: 1; }
.hero-tile.s3 { --x: 126px; --k: .66; opacity: 1; }
.hero-tile.out { --x: -34px; --k: .3; opacity: 0; }
.hero-tile.jump { transition: none; }
.tile-owl { --a: #124BCE; --b: #4675F2; }
.tile-chat { --a: #1E8FEA; --b: #5BB6FA; }
.tile-bolt { --a: #F29A1F; --b: #F8C04E; }
.tile-team { --a: #16895B; --b: #36B884; }
.tile-inbox { --a: #172033; --b: #3A4560; }
.tile-lock { --a: #E2582B; --b: #F58A55; }
.tile-check { --a: #0E9F94; --b: #3BC9BC; }
.tile-chart { --a: #6B4BD8; --b: #957AF0; }
.hero-copy .hero-headline { font-size: clamp(48px, 4.6vw, 62px); font-weight: 560; letter-spacing: -.035em; line-height: 1.04; }
.hero-copy .hero-headline + p { max-width: 560px; margin-top: 20px; font-size: 19px; line-height: 1.5; }
.hero .hero-actions { gap: 10px; margin-top: 30px; }
.hero .hero-actions .button { min-height: 46px; padding: 11px 20px; gap: 14px; font-size: 15px; }
.hero .button-outline { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(23, 32, 51, .05); }
.hero .button-outline:hover { background: #fff; border-color: #c9d0db; }
.hero .hero-stage { margin-top: 64px; }
@media (max-width: 1023px) {
  .hero.container { padding-block: 56px 64px; }
  .hero-copy .hero-headline { font-size: clamp(42px, 6vw, 54px); }
  .hero-copy .hero-headline + p { font-size: 17px; max-width: 520px; }
  .hero .hero-stage { margin-top: 48px; }
}
@media (max-width: 767px) {
  .hero.container { padding-block: 36px 48px; }
  .hero-copy .hero-headline { font-size: clamp(36px, 9.4vw, 46px); }
  .hero-copy .hero-headline + p { font-size: 16px; margin-top: 16px; }
  .hero .hero-actions { margin-top: 24px; }
  .hero .hero-actions .button { font-size: 14px; min-height: 46px; padding: 11px 16px; }
  .hero .hero-actions .button .icon { display: inline-block; }
  .hero .hero-stage { margin-top: 36px; }
}
@media (max-width: 374px) {
  .hero-copy .hero-headline { font-size: 33px; }
  .hero .hero-actions { flex-wrap: wrap; }
}
/* The shared page transition owns arrival, keeping the hero from animating twice. */
html.motion-paused .hero * { animation: none !important; transition: none !important; }