/* A composição mantém a arte do pedestal e a interface em camadas independentes. */
.hero::before {
  background: linear-gradient(180deg, #00102b66 0, #00102b99 38%, #00102b99 100%), url('assets/connected-blue.png') center / cover no-repeat;
}
.hero::after { display: none; }
.hero-visual { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; justify-content: stretch; width: 100%; padding: 0; background: none; height: auto; }
.product-composition { position: relative; width: 100%; aspect-ratio: 1561 / 1007; isolation: isolate; }
.product-stage-art { position: absolute; left: -6%; top: 0; width: 112%; height: 100%; max-width: none; pointer-events: none; z-index: 1; mask-image: linear-gradient(to bottom, transparent 63%, #000 72%); }
.product-orbit-art { position: absolute; left: 0; top: -10.4839%; width: 100%; height: 110.4839%; max-width: none; overflow: visible; pointer-events: none; z-index: 0; }
.orbit-geometry { transform-origin: 500px 275px; transform: scaleY(var(--orbit-scale, 1)); }
.hero-orbit-outer { fill: none; stroke: url('#pc-orbit-colors'); stroke-width: 1.25; opacity: .7; vector-effect: non-scaling-stroke; }
.hero-orbit-glow { fill: none; stroke: #00bfff; stroke-width: 7; opacity: .65; filter: blur(3px); vector-effect: non-scaling-stroke; }
.hero-orbit-main { fill: none; stroke: #24e5ff; stroke-width: 1.7; filter: drop-shadow(0 0 5px #00bfff) drop-shadow(0 0 12px #007cff); vector-effect: non-scaling-stroke; }
.hero-orbit-nodes { fill: #06ecff; stroke: none; filter: drop-shadow(0 0 4px #00e5ff) drop-shadow(0 0 10px #0099ff); }
.hero-devices { position: absolute; left: 3.5%; top: auto; bottom: 19%; width: 93%; height: auto; max-width: none; max-height: none; margin: 0; object-fit: contain; z-index: 2; filter: drop-shadow(0 2px 5px #000b) drop-shadow(0 0 5px #20a9ff33); }
.stage-caption { position: absolute; left: 8%; right: 8%; top: 84%; z-index: 3; text-align: center; font-size: clamp(6px, .94vw, 14px); font-weight: 500; letter-spacing: clamp(1px, .22vw, 3.5px); line-height: 1.65; color: #eff8ff; text-shadow: 0 0 8px #279cff55; }
.hero-connections path { stroke-width: 1.3; opacity: .9; }
.hero-connections g { filter: drop-shadow(0 0 3px currentColor); }
.hero-feature { background: linear-gradient(100deg, #031a3be8, #020e27ec); }
.hero-feature > span:last-child { font-weight: 500; overflow-wrap: normal; word-break: normal; }
.hero-feature .whatsapp-emblem svg { transform: scale(1.22); }
.hero h1 .hero-title-line { background: none; color: #f5f8ff; }
.hero h1 .title-word { white-space: nowrap; background: none; }
.hero h1 .title-blue { color: #09c5ff; }
.hero h1 .title-green { color: #08e2a4; }
.hero h1 .title-gold { color: #ffca29; }
@supports (background-clip: text) {
  .hero h1 .title-word { background: var(--word-gradient); background-clip: text; color: transparent; }
  .hero h1 .title-blue { --word-gradient: linear-gradient(180deg, #29eeff 8%, #00aaff 92%); }
  .hero h1 .title-green { --word-gradient: linear-gradient(180deg, #09ffd5 8%, #00cb88 92%); }
  .hero h1 .title-gold { --word-gradient: linear-gradient(180deg, #ffe83d 8%, #ff9b16 92%); }
}
.pier-logo { display: inline-flex; align-items: center; gap: .04em; }
.pier-logo > .brand-dot { display: inline-block; flex: none; width: .16em; height: .16em; margin: 0 .015em; font-size: inherit; border-radius: 50%; background: currentColor; box-shadow: 0 0 .14em currentColor; transform: translateY(.025em); }
.pier-logo > .brand-dot:nth-child(1) { color: #ffcb2e; }
.pier-logo > .brand-dot:nth-child(2) { color: #08df94; }
.pier-logo > .brand-dot:nth-child(3) { color: #ff505d; }
/* Assets dedicados em alta resolução, sem ampliar recortes da referência. */
.white-visual img { clip-path: none; }
.testimonial-avatar { display: block; position: relative; width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border-radius: 50%; border: 1px solid #23c5ff; box-shadow: 0 0 10px #00aaff45; }
.testimonial-grid .testimonial-avatar img { display: block; position: absolute; left: -20%; top: -4%; width: 140%; height: 140%; max-width: none; object-fit: cover; object-position: center; border: 0; border-radius: 0; box-shadow: none; }
.form-status { margin: 0 0 16px; padding: 12px; border: 1px solid #25cfff55; border-radius: 8px; color: #c8edff; font-size: 13px; line-height: 1.55; }
.form-status[data-state="error"] { border-color: #ffbd6066; color: #ffddab; }
.form-status[data-state="success"] { border-color: #05e8a266; color: #92f7d3; }
.demo-whatsapp { display: block; margin-top: 18px; color: #8befff; font-size: 13px; line-height: 1.5; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.modal button:disabled { cursor: wait; opacity: .65; }
@media (max-width: 759px) {
  .hero::before { background: linear-gradient(180deg, #00132b44, #020d27 210px, #020d27 calc(100% - 250px), #00122b99), url('assets/connected-blue.png') center top / 100% auto no-repeat, url('assets/connected-blue.png') center bottom / 100% auto no-repeat; }
}
@media (min-width: 760px) {
  .hero-features { align-self: center; }
}
@media (min-width: 960px) and (min-height: 500px) {
  /* O produto ganha espaço sem reduzir a leitura nem exceder a altura do monitor. */
  .hero { grid-template-rows: auto minmax(0, 1fr); }
  .hero-highlights, .hero-next { display: none; }
  .hero-subtitle { max-width: 980px; }
  .product-composition { aspect-ratio: 1.62; }
  .hero-scene { --feature-width: clamp(170px, 17vw, 235px); --arc-clearance: clamp(30px, 8cqh, 56px); width: min(100%, calc((100cqh - var(--arc-clearance)) * 1.62 + 2 * var(--feature-width) + 2 * var(--scene-gap))); }
  .hero-visual { height: 100%; min-height: 0; align-items: end; }
  .hero-devices { height: auto; min-height: auto; margin-bottom: 0; max-height: none; }
  .hero-features { max-height: 370px; padding-top: 12px; padding-bottom: 36px; gap: clamp(20px, 3.5svh, 32px); justify-content: center; }
  .feature-orbit { width: clamp(40px, 7svh, 64px); height: clamp(40px, 7svh, 64px); flex-basis: clamp(40px, 7svh, 64px); }
  .feature-orbit svg { font-size: clamp(26px, 4.2svh, 37px); }
  .hero-feature { gap: 14px; }
  .hero-feature > span:last-child { font-size: clamp(12px, 1.7svh, 15.5px); }
}
@media (min-width: 960px) and (min-height: 500px) and (max-height: 699px) {
  .product-orbit-art { --orbit-scale: .9; }
  .hero-scene { --arc-clearance: clamp(12px, 4cqh, 24px); }
}