/* base016 · Hero v2 — "Sua ideia. Nossa base. Uma solução."
   Campo de blocos interativo (canvas) + palco 3D com a "obra" sendo construída. */

.hx {
  --hx-teal: #04A09E; --hx-teal-l: #5CD3CE; --hx-ink: #0B0E0F;
  justify-content: flex-start; min-height: 0; padding: 116px 0 0; background: var(--hx-ink); isolation: isolate;
}
.hx-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }

/* Aurora: três manchas de luz teal que respiram devagar */
.hx-aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.hx-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.hx-aurora i:nth-child(1) { width: 52vw; height: 40vw; left: 24vw; top: -18vw; background: radial-gradient(closest-side, rgb(4 160 158 / .55), transparent); }
.hx-aurora i:nth-child(2) { width: 36vw; height: 30vw; left: -10vw; top: 28vw; background: radial-gradient(closest-side, rgb(44 195 190 / .28), transparent); }
.hx-aurora i:nth-child(3) { width: 40vw; height: 34vw; right: -12vw; top: 18vw; background: radial-gradient(closest-side, rgb(4 107 105 / .45), transparent); }

.hx-wrap { position: relative; z-index: 2; display: grid; justify-items: center; }
.hx-copy { display: grid; justify-items: center; text-align: center; max-width: 1080px; }

/* Selo */
.hx-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
  border: 1px solid rgb(92 211 206 / .28); background: rgb(4 160 158 / .08); backdrop-filter: blur(6px);
  font-family: "Saira", sans-serif; font-stretch: 87.5%; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--hx-teal-l);
}
.hx-pill b { color: rgb(92 211 206 / .45); font-weight: 600; }
.hx-pill-blk { width: 14px; height: 11px; background: var(--blk-t) center / 100% 100%; }

/* Título: o slogan, palavra a palavra */
.hx-title {
  margin-top: var(--s-5); font-family: "Saira", sans-serif; font-stretch: 87.5%; font-weight: 700;
  font-size: clamp(2.5rem, 1.1rem + 5vw, 5.6rem); line-height: .98; letter-spacing: -.025em; color: var(--on-dark-1); text-wrap: balance;
}
.hx-w { display: inline-block; }
.hx-ph1 { white-space: nowrap; }
.hx-base {
  background: linear-gradient(100deg, #8FE6E2 0%, #2CC3BE 35%, #04A09E 70%, #5CD3CE 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hx-sol { position: relative; color: transparent; -webkit-text-stroke: 1.5px rgb(242 245 245 / .9); text-shadow: 0 0 40px rgb(4 160 158 / .35); }
.hx-br { display: none; }

/* Texto de apoio */
.hx-lead strong { color: var(--on-dark-1); font-weight: 700; box-shadow: inset 0 -2px 0 rgb(4 160 158 / .7); }
.hx-lead { max-width: 58ch; margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark-2); text-wrap: pretty; }

.hx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); margin-top: var(--s-7); }
.hx-cta { box-shadow: 0 0 0 0 rgb(4 160 158 / .0), 0 12px 40px -8px rgb(4 160 158 / .55); }

/* ---------- Palco ---------- */
.hx-stage {
  --p: 0; --rx: 0; --ry: 0;
  position: relative; width: min(980px, 100%); margin-top: clamp(40px, 5vw, 64px); perspective: 1600px; pointer-events: none;
}
/* esmaece o pé do palco no escuro, sem cortar as laterais */
.hx::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(120px, 22vw, 260px); z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgb(11 14 15 / 0), var(--hx-ink) 92%);
}
.hx-tilt { position: relative; }
.hx-browser {
  transform-origin: 50% 0; will-change: transform;
  transform: rotateX(calc((1 - var(--p)) * 24deg + var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg)) scale(calc(.92 + var(--p) * .08));
}
/* elementos flutuantes: parallax 2D, ficam sempre na frente */
.hx-code, .hx-phone, .hx-chip { z-index: 2; }

/* Navegador */
.hx-browser {
  container-type: inline-size; position: relative; border-radius: 14px; overflow: hidden;
  background: #0E1213; border: 1px solid rgb(255 255 255 / .09);
  box-shadow: 0 0 0 1px rgb(4 160 158 / .12), 0 40px 120px -20px rgb(4 160 158 / .45), 0 30px 60px -30px #000;
}
.hx-browser::after { /* reflexo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / .07), transparent 35%);
}
.hx-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: #151A1B; border-bottom: 1px solid rgb(255 255 255 / .06); }
.hx-bar > i { width: 11px; height: 11px; border-radius: 50%; background: #2A3233; }
.hx-url {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; padding: 5px 14px; border-radius: 8px; background: #0B0E0F;
  font: 500 12px/1 "Manrope", sans-serif; color: #7D8789;
}
.hx-url .ico { width: 12px; height: 12px; color: var(--hx-teal-l); }

.hx-app { display: grid; grid-template-columns: 19% 1fr; aspect-ratio: 16 / 8.4; }
.hx-side { display: grid; align-content: start; gap: 1.1cqw; padding: 2cqw 1.6cqw; background: #101415; border-right: 1px solid rgb(255 255 255 / .05); }
.hx-logo { display: block; width: 7cqw; height: 2cqw; margin-bottom: 1.2cqw; border-radius: 4px; background: linear-gradient(90deg, #EEF2F2 0 58%, var(--hx-teal) 58%); opacity: .9; }
.hx-nav { display: block; padding: .8cqw 1cqw; border-radius: .6cqw; font: 600 1.15cqw/1 "Manrope", sans-serif; color: #7D8789; }
.hx-nav.is-act { color: #EEF2F2; background: rgb(4 160 158 / .16); box-shadow: inset 2px 0 0 var(--hx-teal); }

.hx-main { display: grid; grid-template-rows: auto auto 1fr; gap: 1.8cqw; padding: 2cqw 2.4cqw; min-width: 0; }
.hx-top { display: flex; align-items: center; justify-content: space-between; }
.hx-h { font: 700 1.9cqw/1 "Saira", sans-serif; font-stretch: 87.5%; color: #EEF2F2; }
.hx-av { width: 3cqw; height: 3cqw; border-radius: 50%; background: linear-gradient(135deg, var(--hx-teal-l), var(--hx-teal)); }

.hx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.hx-kpi { display: grid; gap: .9cqw; padding: 1.5cqw; border-radius: 1cqw; background: #151A1B; border: 1px solid rgb(255 255 255 / .05); }
.hx-kpi i { display: block; width: 45%; height: .8cqw; border-radius: 4px; background: #2A3233; }
.hx-kpi b { display: block; width: 70%; height: 1.8cqw; border-radius: 4px; background: linear-gradient(90deg, #DDE2E2, #A3ADAE); opacity: .85; }
.hx-blk { display: block; width: 2.6cqw; height: 2.1cqw; background: var(--blk-t) center / 100% 100%; }
.hx-blk.f { background-image: var(--blk-f); filter: brightness(2.2); }

.hx-panels { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4cqw; min-height: 0; }
.hx-chart, .hx-list { display: grid; align-content: start; gap: 1.2cqw; padding: 1.6cqw; border-radius: 1cqw; background: #151A1B; border: 1px solid rgb(255 255 255 / .05); min-height: 0; }
.hx-ph { display: block; width: 35%; height: .9cqw; border-radius: 4px; background: #2A3233; }
.hx-bars { display: flex; align-items: flex-end; gap: 1.2cqw; height: 14cqw; padding-top: .6cqw; border-bottom: 1px solid rgb(255 255 255 / .08); }
.hx-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .5cqw .5cqw 0 0; background: linear-gradient(180deg, var(--hx-teal-l), rgb(4 160 158 / .35)); transform-origin: bottom; }
.hx-bars i:nth-child(odd) { background: linear-gradient(180deg, #3D4546, rgb(61 69 70 / .4)); }
.hx-row { display: grid; grid-template-columns: 2.4cqw 1fr auto; align-items: center; gap: 1cqw; padding: .7cqw 0; border-bottom: 1px solid rgb(255 255 255 / .05); }
.hx-row i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #2A3233; }
.hx-row b { height: .9cqw; border-radius: 4px; background: #3D4546; }
.hx-row em { font: 700 .95cqw/1 "Manrope", sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .08em; padding: .45cqw .8cqw; border-radius: 99px; color: var(--hx-teal-l); background: rgb(4 160 158 / .16); }

/* Cartão de código */
.hx-code {
  position: absolute; left: -4%; top: 30%; width: 33%; min-width: 250px; border-radius: 12px; overflow: hidden;
  background: rgb(14 18 19 / .88); backdrop-filter: blur(12px); border: 1px solid rgb(92 211 206 / .22);
  box-shadow: 0 30px 60px -20px #000, 0 0 40px -10px rgb(4 160 158 / .4); transform: translate(calc(var(--ry) * -3px), calc(var(--rx) * 3px));
}
.hx-code-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 1px solid rgb(255 255 255 / .06); }
.hx-code-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2A3233; }
.hx-code-bar span { margin-left: 8px; font: 600 11px/1 "Manrope", sans-serif; color: #7D8789; }
.hx-code pre { margin: 0; padding: 14px 16px 16px; font: 500 13px/1.75 ui-monospace, "Cascadia Code", Consolas, monospace; color: #DDE2E2; white-space: pre; overflow: hidden; }
.hx-code .ln { display: block; }
.hx-code s { text-decoration: none; color: #C792EA; }
.hx-code q { quotes: none; color: #C3E88D; }
.hx-code u { text-decoration: none; color: var(--hx-teal-l); }
.hx-code .ok { color: var(--hx-teal-l); font-weight: 700; }

/* Celular */
.hx-phone {
  position: absolute; right: -2%; top: 16%; width: 21%; min-width: 150px; aspect-ratio: 9 / 18.5; padding: 9% 6% 0; border-radius: 28px;
  background: #0E1213; border: 6px solid #1C2122; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px -20px #000, 0 0 60px -12px rgb(4 160 158 / .45);
  display: grid; align-content: start; gap: 8px; overflow: hidden; transform: translate(calc(var(--ry) * 4px), calc(var(--rx) * -4px)) rotate(4deg);
}
.hx-notch { position: absolute; left: 50%; top: 8px; width: 34%; height: 14px; translate: -50% 0; border-radius: 99px; background: #1C2122; }
.hx-ph-top { display: flex; align-items: center; justify-content: space-between; }
.hx-ph-top .hx-logo { width: 46%; height: 10px; margin: 0; }
.hx-ph-top .hx-av { width: 18px; height: 18px; }
.hx-ph-hero { height: 70px; border-radius: 12px; background: linear-gradient(135deg, var(--hx-teal), #046B69); position: relative; overflow: hidden; }
.hx-ph-hero::after { content: ""; position: absolute; right: -10px; bottom: -6px; width: 60px; height: 48px; background: var(--blk-t) center / 100% 100%; filter: brightness(1.5); opacity: .45; }
.hx-ph-card { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: #151A1B; }
.hx-ph-card i { width: 22px; height: 22px; border-radius: 7px; background: rgb(4 160 158 / .3); }
.hx-ph-card b { height: 7px; border-radius: 4px; background: #3D4546; }
.hx-ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px 0 14px; background: #151A1B; }
.hx-ph-tabs i { width: 16px; height: 16px; border-radius: 5px; background: #2A3233; }
.hx-ph-tabs i:first-child { background: var(--hx-teal); }

/* Selos flutuantes */
.hx-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: rgb(21 26 27 / .9); backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .1);
  font: 700 14px/1 "Manrope", sans-serif; color: #EEF2F2; white-space: nowrap; box-shadow: 0 16px 40px -12px #000;
}
.hx-chip .ico { width: 16px; height: 16px; padding: 3px; border-radius: 50%; color: #0B0E0F; background: var(--hx-teal-l); stroke-width: 3; }
.hx-chip .hx-blk { width: 16px; height: 13px; }
.hx-chip--a { left: 14%; top: -22px; transform: translate(calc(var(--ry) * -5px), calc(var(--rx) * 5px)); }
.hx-chip--b { right: 16%; top: 62%; transform: translate(calc(var(--ry) * 6px), calc(var(--rx) * -6px)); }

/* ---------- Animações de entrada (só com movimento permitido) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hx-w { opacity: 0; translate: 0 .35em; filter: blur(8px); animation: hxWord .9s var(--ease-out) forwards; animation-delay: calc(var(--w) * 110ms + 150ms); }
  .js .hx-base { animation: hxWord .9s var(--ease-out) forwards, hxShine 3.2s ease-in-out 1.6s 2; animation-delay: calc(var(--w) * 110ms + 150ms), 1.6s; }
  .js .hx-aurora i { animation: hxBreathe 14s ease-in-out infinite alternate; }
  .js .hx-aurora i:nth-child(2) { animation-duration: 18s; animation-delay: -6s; }
  .js .hx-aurora i:nth-child(3) { animation-duration: 16s; animation-delay: -3s; }

  .js .hx-stage { opacity: 0; translate: 0 60px; animation: hxRise 1.2s var(--ease-out) .55s forwards; }
  /* a obra se monta: menu, cartões, gráfico, lista */
  .js .hx-nav { opacity: 0; translate: -10px 0; animation: hxIn .5s var(--ease-out) forwards; animation-delay: calc(1.2s + var(--k) * 70ms); }
  .js .hx-kpi { opacity: 0; translate: 0 -24px; animation: hxDrop .6s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: calc(1.5s + var(--k) * 120ms); }
  .js .hx-bars i { transform: scaleY(0); animation: hxGrow .7s var(--ease-out) forwards; animation-delay: calc(1.9s + var(--k) * 70ms); }
  .js .hx-row { opacity: 0; translate: 12px 0; animation: hxIn .5s var(--ease-out) forwards; animation-delay: calc(2.1s + var(--k) * 110ms); }
  .js .hx-code { opacity: 0; animation: hxPop .7s var(--ease-out) 1.1s forwards; }
  .js .hx-code .ln { clip-path: inset(0 100% 0 0); animation: hxType .55s steps(22) forwards; animation-delay: calc(1.5s + var(--k) * 520ms); }
  .js .hx-phone { opacity: 0; animation: hxPop .8s var(--ease-out) 1.4s forwards; }
  .js .hx-ph-card { opacity: 0; translate: 0 10px; animation: hxIn .5s var(--ease-out) forwards; animation-delay: calc(2s + var(--k) * 120ms); }
  .js .hx-chip { opacity: 0; animation: hxPop .6s var(--ease-out) forwards, hxBob 4s ease-in-out 3.6s 3 alternate; }
  .js .hx-chip--a { animation-delay: 3.6s, 4.2s; }
  .js .hx-chip--b { animation-delay: 2.8s, 3.4s; }
  .hx-cta { animation: hxGlow 2.4s ease-in-out 3s 2; }
}
@keyframes hxWord { to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes hxShine { 0% { background-position: 0 0; } 50% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes hxBreathe { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vw, 3vw) scale(1.15); } }
@keyframes hxRise { to { opacity: 1; translate: 0 0; } }
@keyframes hxIn { to { opacity: 1; translate: 0 0; } }
@keyframes hxDrop { to { opacity: 1; translate: 0 0; } }
@keyframes hxGrow { to { transform: scaleY(1); } }
@keyframes hxType { to { clip-path: inset(0 0 0 0); } }
@keyframes hxPop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes hxBob { to { translate: 0 -10px; } }
@keyframes hxGlow { 50% { box-shadow: 0 0 0 8px rgb(4 160 158 / .18), 0 12px 50px -6px rgb(4 160 158 / .8); } }

/* ---------- Responsivo ---------- */
@media (min-width: 1024px) { .hx-br { display: inline; } }
@media (max-width: 1023px) {
  .hx { padding-top: 136px; }
  .hx-code { left: -2%; top: 46%; min-width: 0; width: 42%; }
  .hx-code pre { font-size: 11px; }
  .hx-phone { right: 0; width: 24%; }
  .hx-chip--a { left: 6%; }
}
@media (max-width: 767px) {
  .hx-title { font-size: clamp(2.4rem, 1rem + 7.4vw, 3.2rem); line-height: 1.04; }
  .hx-ph1 { display: block; }
  .hx-actions { width: 100%; }
  .hx-actions .btn { width: 100%; justify-content: center; }
  .hx-stage { margin-top: 44px; width: 116%; margin-left: -8%; }
  .hx-code { display: none; }
  .hx-phone { width: 30%; min-width: 0; right: 2%; top: 22%; border-width: 4px; border-radius: 18px; gap: 5px; }
  .hx-ph-hero { height: 38px; }
  .hx-ph-card { padding: 5px; }
  .hx-ph-card:nth-of-type(n + 3) { display: none; }
  .hx-chip { font-size: 12px; padding: 8px 12px; }
  .hx-chip--a { left: 10%; top: -16px; }
  .hx-chip--b { display: none; }
  .hx-url { font-size: 10px; }
}
@media print { .hx-field, .hx-aurora, .hx-stage { display: none; } }