/* auTech Banner project derivative. DOM: .at-hero > .at-hero__inner > copy + visual + footer.
 * tokens.css binds --at-* on .at-hero. No global reset or shared-page selectors.
 */
.at-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--at-surface, #fff);
  color: var(--at-ink, #14171c);
  font-family: var(--at-font-body, Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
}
.at-hero *, .at-hero *::before, .at-hero *::after { box-sizing: border-box; }
.at-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--at-container-max, 1284px);
  min-height: 710px;
  margin-inline: auto;
  padding: 70px var(--at-gutter, 32px) 24px;
}
.at-hero__copy { position: relative; z-index: 3; width: 100%; max-width: 620px; min-width: 0; }
.at-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 25px;
  color: var(--at-brand, #0076DA);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .06em;
}
.at-hero__eyebrow > span { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.at-hero h1 {
  margin: 0 0 24px;
  font-size: var(--at-h1-size, 56px);
  font-weight: var(--at-h1-weight, 700);
  line-height: var(--at-h1-line-height, 68px);
  letter-spacing: var(--at-h1-tracking, .03em);
  overflow-wrap: normal;
}
.at-hero h1 em { color: var(--at-brand, #0076DA); font-style: normal; }
.at-hero__break { display: none; }
.at-hero__intro {
  max-width: 465px;
  margin: 0 0 28px;
  color: var(--at-text-muted, #515151);
  font-size: var(--at-intro-size, 16px);
  font-weight: 400;
  line-height: var(--at-intro-line-height, 1.65);
}
.at-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.at-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: var(--at-cta-height, 48px);
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--at-cta-radius, 11px);
  font-size: var(--at-cta-size, 15px);
  font-weight: var(--at-cta-weight, 500);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.at-hero__button--primary { background: var(--at-brand, #0076DA); color: #fff; box-shadow: 0 6px 16px #0076da18; }
.at-hero__button--primary:hover { background: var(--at-brand-hover, #0063b8); box-shadow: 0 8px 22px #0076da26; }
.at-hero__button--secondary { background: #fffffff2; color: var(--at-ink, #14171c); border-color: var(--at-line, #dcdcdc); }
.at-hero__button--secondary:hover { background: #f8f8f8; border-color: var(--at-brand, #0076DA); }
.at-hero__values { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; color: var(--at-text-muted, #626262); font-size: 12px; line-height: 1.5; }
.at-hero__values span + span { padding-left: 18px; border-left: 1px solid var(--at-line, #dcdcdc); }
.at-hero__visual {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
  background: #fff;
}
.at-hero__visual > picture,
.at-hero__city {
  position: absolute;
  top: -3%;
  right: -2%;
  bottom: 0;
  left: 28%;
  display: block;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000);
}
.at-hero__city > picture { position: absolute; inset: 0; display: block; }
.at-hero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; }
.at-hero__visual::after,
.at-hero__wash {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #fff, #ffffffe0 5%, transparent 29%), linear-gradient(90deg, #fff 0%, #fff 26%, #ffffffe6 35%, #ffffff52 44%, transparent 57%);
}
/* A parent-supplied wash uses this same paint contract, never a second wash. */
.at-hero__visual:has(> .at-hero__wash)::after { display: none; }
.at-hero__flow-canvas { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.at-hero[data-flow-failed="true"] .at-hero__flow-canvas { display: none; }
.at-hero__signal { position: absolute; z-index: 3; color: var(--at-ink, #14171c); font-size: 12px; font-weight: 550; line-height: 1.45; letter-spacing: .02em; text-shadow: 0 1px 7px #fff, 0 0 3px #fff; }
.at-hero__signal > i { display: none; }
.at-hero__signal small { display: block; margin-top: 2px; color: #404040; font-size: 8px; font-weight: 400; line-height: 1.4; letter-spacing: .08em; }
.at-hero__signal--ai { left: 71%; top: 24%; transform: translate(19px, -50%); }
.at-hero__signal--data { left: 93%; top: 49%; transform: translate(-100%, -155%); text-align: right; }
.at-hero__signal--product { left: 75%; top: 78%; transform: translate(19px, -50%); }
.at-hero__footer { position: relative; z-index: 3; display: flex; align-items: end; justify-content: space-between; gap: 20px; align-self: end; margin-top: 52px; }
.at-hero__footer b { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; }
.at-hero__footer small { display: block; margin-top: 6px; color: var(--at-text-muted, #626262); font-size: 10px; line-height: 1.5; letter-spacing: .08em; }
.at-hero__motion {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--at-line, #dcdcdc);
  border-radius: 24px;
  background: #fffffff5;
  color: #444;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}
.at-hero__motion:disabled { cursor: default; opacity: 1; }
.at-hero__pause { font-size: 14px; line-height: 1; }
.at-hero a:focus-visible, .at-hero button:focus-visible { outline: 3px solid var(--at-brand, #0076DA); outline-offset: 4px; }
@media (min-width: 1500px) {
  .at-hero__visual > picture, .at-hero__city { left: 34%; }
}
@media (width < 1024px) {
  .at-hero__inner { min-height: 0; padding: 70px var(--at-gutter, 32px) 24px; }
  .at-hero__copy { max-width: 700px; }
  .at-hero h1 { font-size: var(--at-h1-size, 44px); line-height: var(--at-h1-line-height, 1.2); letter-spacing: var(--at-h1-tracking, normal); }
  .at-hero__intro { max-width: 560px; }
  .at-hero__visual {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: calc(100% + 2 * var(--at-gutter, 32px));
    height: 410px;
    margin: 25px calc(-1 * var(--at-gutter, 32px)) 0;
    transform: none;
  }
  .at-hero__visual > picture, .at-hero__city { top: 0; right: 0; bottom: 0; left: 0; mask-image: none; -webkit-mask-image: none; }
  .at-hero__visual img { object-position: 62% 24%; }
  .at-hero__visual::after, .at-hero__wash { background: linear-gradient(0deg, #fff, #ffffffcf 5%, transparent 25%, transparent 88%, #ffffffcc); }
  .at-hero__signal--ai { left: 47%; top: 16%; transform: translate(19px, -50%); }
  .at-hero__signal--data { left: 87%; top: 49%; transform: translate(-100%, -155%); }
  .at-hero__signal--product { left: 50%; top: 80%; transform: translate(19px, -50%); }
  .at-hero__footer { margin-top: 0; padding-top: 3px; }
}
@media (width < 768px) {
  .at-hero__inner { padding: 48px var(--at-gutter, 20px) 20px; }
  .at-hero h1 { font-size: var(--at-h1-size, clamp(30px, 8vw, 36px)); line-height: var(--at-h1-line-height, 1.2); letter-spacing: var(--at-h1-tracking, normal); }
  .at-hero__break { display: block; }
  .at-hero__intro { max-width: 100%; font-size: var(--at-intro-size, 15px); line-height: var(--at-intro-line-height, 1.65); }
  .at-hero__eyebrow { margin-bottom: 20px; }
  .at-hero__values { gap: 8px 12px; font-size: 11px; }
  .at-hero__values span + span { padding-left: 12px; }
  .at-hero__visual { width: calc(100% + 2 * var(--at-gutter, 20px)); margin-inline: calc(-1 * var(--at-gutter, 20px)); }
  .at-hero__visual img { object-position: 62% 0%; }
  .at-hero__footer { gap: 12px; align-items: center; }
  .at-hero__footer b { font-size: 11px; }
  .at-hero__footer small { font-size: 9px; }
}
@media (max-width: 359px) {
  .at-hero__actions { align-items: stretch; }
  .at-hero__button { flex-basis: 100%; }
  .at-hero__footer { align-items: flex-start; }
  .at-hero__footer > span { max-width: 55%; }
}
@media (prefers-reduced-motion: reduce) {
  .at-hero *, .at-hero *::before, .at-hero *::after { animation: none !important; transition: none !important; }
}
.at-hero[data-motion-state="poster"] *,
.at-hero[data-motion-state="reduced"] * { animation: none !important; transition: none !important; }