/* ── Hero background video (Global & Modular Hero Pages) ────────── */
.mod-hero {
  display: grid;
  min-height: 86vh;
  grid-template-columns: 1fr;
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  align-items: center;
  padding: 5rem max(5%, calc((100% - 1280px)/2));
}

.mod-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mod-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.mod-hero-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(9,9,11,.65) 0%, rgba(9,9,11,.35) 55%, rgba(9,9,11,.15) 100%);
  pointer-events: none;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  z-index: 0;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    105deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.78) 42%,
    rgba(255,255,255,.32) 68%,
    rgba(255,255,255,.12) 100%
  );
  pointer-events: none;
}

/* ── Hero layout base ───────────────────────────────────────────── */
.hero, .product-hero {
  position: relative;
  min-height: calc(100svh - 4.6rem);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(20rem, 1.08fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2.2rem, 6vw, 5.2rem) clamp(1rem, 5vw, 4rem);
  overflow: hidden;
}

/* Posicionamento z-index global para elementos sobrepostos */
.hero-copy, .product-copy, .hero-stage, .section-copy,
.capability-grid, .flow-map, .comparison-panel, .ai-console,
.hardware-rail, .lead-form, .oee-dashboard, .loss-grid,
.simulator-card, .device-stack {
  position: relative;
  z-index: 1;
}

.hero-copy, .product-copy, .section-copy {
  display: grid;
  gap: 1.25rem;
}

.hero-lead   { max-width: 58ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem; }

.hero-proof span {
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .78);
  font-size: .8rem;
  font-weight: 800;
}

.hero-stage {
  min-height: 34rem;
  display: grid;
  place-items: center;
}

/* ── Hero photo-stage ───────────────────────────────────────────── */
.hero-photo-stage {
  position: relative;
  z-index: 1;
  min-height: clamp(28rem, 58vw, 42rem);
  overflow: visible;
  border-radius: 2.2rem;
}

.hero-photo-stage::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 2;
  background:
    radial-gradient(ellipse at 58% 50%, transparent 38%, rgba(244,247,255,.32) 63%, rgba(244,247,255,.92) 84%),
    linear-gradient(90deg, rgba(251,252,255,.92), transparent 22%, transparent 76%, rgba(244,247,255,.76));
  pointer-events: none;
}

.hero-photo-stage > img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  border-radius: 2.2rem;
  opacity: .92;
}

.photo-kpi, .photo-ai {
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1.05rem;
  color: #fff;
  background: rgba(7,17,31,.70);
  box-shadow: 0 20px 46px rgba(7,17,31,.20);
  backdrop-filter: blur(18px);
}

.photo-kpi { left: 1.3rem; bottom: 1.3rem; width: min(13rem, 44%); padding: 1rem; }
.photo-ai  { right: 1.3rem; top: 1.3rem; width: min(17rem, 48%); padding: 1rem; }

.photo-kpi strong {
  display: block;
  margin: .8rem 0;
  font-size: 3rem;
  line-height: .9;
}

.photo-ai p {
  margin-top: .85rem;
  color: rgba(255,255,255,.80);
  font-size: .86rem;
  line-height: 1.42;
}

/* ── Factory scene (decorativo) ─────────────────────────────────── */
.human-hero { min-height: min(42rem, 76svh); }

.factory-scene {
  position: relative;
  width: min(100%, 42rem);
  min-height: 36rem;
  isolation: isolate;
}

.scene-backdrop {
  position: absolute;
  inset: 7% 4% 10%;
  border-radius: 1.6rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.48)),
    linear-gradient(90deg, rgba(18,103,255,.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18,103,255,.08) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
  border: 1px solid rgba(18,103,255,.11);
}

.machine {
  position: absolute;
  bottom: 16%;
  border-radius: .8rem .8rem .35rem .35rem;
  background: linear-gradient(180deg, #eef4ff, #cfd9ec);
  border: 1px solid rgba(7,17,31,.10);
  box-shadow: 0 16px 34px rgba(7,17,31,.08);
}

.m1 { left: 8%;  width: 24%; height: 34%; }
.m2 { left: 36%; width: 20%; height: 42%; }
.m3 { right: 8%; width: 26%; height: 38%; }

.data-beam {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--purple-light), var(--purple), transparent);
  animation: beamTravel 5.5s linear infinite;
}

.b1 { left: 12%; right: 30%; top: 22%; }
.b2 { left: 24%; right: 10%; top: 42%; animation-delay: -1.8s; }
.b3 { left: 8%;  right: 18%; bottom: 30%; animation-delay: -3.2s; }

.people-group {
  position: absolute;
  z-index: 4;
  left: 13%;
  bottom: 13%;
  width: 30%;
  height: 34%;
}

.person {
  position: absolute;
  bottom: 0;
  width: 30%;
  height: 62%;
  border-radius: 999px 999px .6rem .6rem;
  background: linear-gradient(180deg, #1b2940, #0b1527);
  box-shadow: 0 18px 30px rgba(7,17,31,.18);
}

.person::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24%;
  width: 54%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #f1c9a8, #d99668);
  border: 3px solid rgba(255,255,255,.82);
}

.person i {
  position: absolute;
  left: 16%; right: 16%;
  top: 14%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-light), var(--purple));
}

.person-a { left: 0;   height: 58%; }
.person-b { left: 33%; height: 76%; background: linear-gradient(180deg, #1267ff, #0b1527); }
.person-c { right: 0;  height: 64%; background: linear-gradient(180deg, #14a879, #0b1527); }

.scene-device {
  position: absolute;
  z-index: 5;
  right: 2%;
  bottom: 0;
  width: min(47%, 21rem);
  filter: drop-shadow(0 28px 34px rgba(7,17,31,.28));
  animation: floatDevice 5s ease-in-out infinite;
}

.scene-gateway {
  position: absolute;
  z-index: 6;
  right: 37%;
  bottom: 8%;
  width: min(12%, 4.8rem);
  filter: drop-shadow(0 18px 24px rgba(7,17,31,.18));
}

.scene-card {
  position: absolute;
  z-index: 7;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 1.1rem;
  background: rgba(7,17,31,.88);
  color: #fff;
  box-shadow: 0 20px 52px rgba(7,17,31,.24);
  backdrop-filter: blur(18px);
}

.kpi-card   { left: 0;  top: 11%; width: min(12rem, 40%); padding: 1rem; }

.human-card {
  left: 7%;
  bottom: 4%;
  width: min(17rem, 52%);
  padding: .95rem;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  border-color: rgba(7,17,31,.10);
}

.human-card p {
  margin-top: .6rem;
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.35;
  font-weight: 800;
}

.avatar-row { display: flex; align-items: center; }

.avatar-row span {
  width: 2rem;
  aspect-ratio: 1;
  margin-right: -.45rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0c7a5, #19314f);
}

.avatar-row span:nth-child(2) { background: linear-gradient(135deg, #d69566, #1267ff); }
.avatar-row span:nth-child(3) { background: linear-gradient(135deg, #e8b78f, #13a779); }

.factory-scene .ai-card { right: 0; top: 3%; width: min(16rem, 48%); padding: 1rem; }

/* ── Hero live-cards ────────────────────────────────────────────── */
.hero-device {
  position: relative;
  z-index: 4;
  width: min(58%, 21rem);
  filter: drop-shadow(0 28px 36px rgba(7,17,31,.30));
  animation: floatDevice 5s ease-in-out infinite;
}

.hero-gateway {
  position: absolute;
  z-index: 5;
  left: 8%;
  bottom: 17%;
  width: min(18%, 5.75rem);
  filter: drop-shadow(0 18px 28px rgba(7,17,31,.22));
}

.live-card {
  position: absolute;
  z-index: 6;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1.1rem;
  background: rgba(7,17,31,.88);
  color: #fff;
  box-shadow: 0 20px 52px rgba(7,17,31,.28);
  backdrop-filter: blur(18px);
}

.oee-card { left: 0;  top: 18%; width: min(12rem, 42%); padding: 1rem; }
.ai-card  { right: 0; top: 8%;  width: min(16rem, 48%); padding: 1rem; }

.card-top {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  color: rgba(255,255,255,.64);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.oee-card strong, .kpi-card strong {
  display: block;
  margin: .8rem 0;
  font-size: 3rem;
  line-height: .9;
}

.metric-lines { display: grid; gap: .7rem; }

.metric-lines span {
  display: grid;
  grid-template-columns: 4.8rem 1fr 2rem;
  gap: .5rem;
  align-items: center;
  color: rgba(255,255,255,.72);
  font-size: .75rem;
  font-weight: 780;
}

.metric-lines i {
  height: .45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  overflow: hidden;
}

.metric-lines i::before {
  content: "";
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--purple);
  transform-origin: left;
  animation: growBar 3.8s ease-in-out infinite alternate;
}

.metric-lines span:nth-child(2) i::before { background: var(--purple-light); animation-delay: .25s; }
.metric-lines span:nth-child(3) i::before { background: var(--purple-mid); animation-delay: .5s; }

.ai-card p {
  margin-top: .85rem;
  color: rgba(255,255,255,.76);
  font-size: .86rem;
  line-height: 1.42;
}

/* ── Hero refinement overrides ──────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 4rem clamp(1.25rem, 5%, 4rem) 3rem;
  gap: 2.5rem;
  min-height: auto;
  background:
    radial-gradient(ellipse 55% 55% at 75% 45%, rgba(124,58,237,.18), transparent),
    radial-gradient(ellipse 35% 40% at 15% 85%, rgba(59,130,246,.12), transparent),
    var(--dark);
  color: #fff;
}

.hero::before { display: none; }
.hero h1 { color: #fff; }
.hero-copy { gap: 1.4rem; }
.hero-lead { color: rgba(255,255,255,.68); font-size: 1.08rem; max-width: 54ch; }

.hero .eyebrow {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--purple-light);
}

.hero .eyebrow::before { color: var(--purple-light); }

.hero-proof span {
  border: 0;
  border-left: 2px solid rgba(124,58,237,.5);
  border-radius: 0;
  background: transparent;
  padding: .08rem .6rem;
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  font-weight: 500;
}

/* Métricas de destaque no hero */
.hero-highlight-metric {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: .75rem 1.1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--purple-light);
  border-radius: 6px;
  width: fit-content;
  backdrop-filter: blur(10px);
  margin: .2rem 0;
  transition: transform .25s ease, border-color .25s ease;
}

.hero-highlight-metric:hover {
  transform: translateX(4px);
  border-color: rgba(167,139,250,.4);
  background: rgba(255,255,255,.08);
}

.hero-highlight-metric .metric-val {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.hero-highlight-metric .metric-desc {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.hero-highlight-metric .metric-desc strong {
  font-size: .88rem;
  color: #fff;
  font-weight: 600;
}

.hero-highlight-metric .metric-desc span {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
}

.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-actions .button { width: auto; }

.hero-actions .button.secondary {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}

.hero-actions .button.secondary:hover { background: rgba(255,255,255,.18); }

/* Photo-stage refinement */
.hero-photo-stage {
  min-height: 20rem;
  background: transparent;
  border-radius: 0;
}

.hero-photo-stage::before, .hero-photo-stage::after { display: none; }

.hero-photo-stage > img {
  border-radius: 14px;
  opacity: .92;
  filter: none;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 88%, transparent);
}

.photo-ai, .photo-kpi { display: none; }

/* ── Responsivo: hero ───────────────────────────────────────────── */
@media (max-width: 920px) {
  .hero, .product-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 2rem;
  }

  .hero-actions, .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button, .lead-form button { width: 100%; }

  .hero-stage {
    min-height: 32rem;
    margin-inline: -.5rem;
  }

  .hero-photo-stage {
    min-height: 26rem;
    margin-inline: -.35rem;
    border-radius: 1.4rem;
  }

  .hero-photo-stage > img {
    object-position: 58% center;
    border-radius: 1.4rem;
    mask-image: radial-gradient(ellipse at 58% 50%, black 48%, rgba(0,0,0,.88) 66%, transparent 92%);
    -webkit-mask-image: radial-gradient(ellipse at 58% 50%, black 48%, rgba(0,0,0,.88) 66%, transparent 92%);
  }

  .photo-kpi { left: .9rem; bottom: .9rem; width: 48%; padding: .85rem; }
  .photo-ai  { top: .9rem;  right: .9rem;  width: 52%; padding: .85rem; }

  .human-hero  { min-height: 35rem; }
  .factory-scene { min-height: 34rem; }
  .scene-backdrop { inset: 8% 2% 9%; }
  .scene-device { width: 56%; right: -5%; }
  .scene-gateway { right: 40%; width: 14%; }
  .people-group { left: 8%; width: 36%; }
  .kpi-card   { width: 44%; left: .2rem; top: 18%; }
  .human-card { left: 4%; width: 56%; }
  .factory-scene .ai-card { width: 55%; right: .2rem; }
  .hero-device  { width: 54%; }
  .hero-gateway { left: 5%; width: 18%; }
  .oee-card { width: 43%; left: .2rem; top: 24%; }
  .ai-card  { width: 54%; right: .2rem; }
}

@media (max-width: 420px) {
  .oee-card  { width: 46%; padding: .8rem; }
  .oee-card strong, .kpi-card strong { font-size: 2.4rem; }
  .metric-lines span { grid-template-columns: 3.9rem 1fr 1.5rem; font-size: .68rem; }
  .ai-card   { width: 56%; padding: .8rem; }
  .ai-card p { font-size: .75rem; }
  .hero-photo-stage { min-height: 24rem; }
  .photo-kpi strong { font-size: 2.35rem; }
  .photo-kpi { width: 50%; }
  .photo-ai  { width: 54%; }
  .photo-ai p { font-size: .74rem; }
  .factory-scene { min-height: 32rem; }
  .people-group  { left: 5%; bottom: 14%; width: 40%; }
  .scene-device  { width: 62%; }
  .scene-gateway { width: 15%; }
  .kpi-card  { width: 46%; padding: .8rem; }
  .human-card { width: 60%; padding: .8rem; }
  .human-card p { font-size: .78rem; }
}

@media (min-width: 1000px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    isolation: isolate;
    padding: 7rem max(5%, calc((100% - 1280px)/2)) 6rem;
    min-height: 700px;
  }

  .hero-copy { width: 50%; z-index: 2; }
  .hero h1   { font-size: 4.4rem; }

  .hero-photo-stage {
    position: absolute;
    inset: 0 0 0 42%;
    z-index: 1;
    min-height: unset;
  }

  .hero-photo-stage > img {
    border-radius: 0;
    opacity: .78;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 100%);
    object-position: 58% center;
  }

  .hero-actions { display: flex; }
  .hero-actions .button { width: auto; }
}