/* =========================================================================
   TEMP IA — Seções
   ========================================================================= */

/* ============================================================== HERO === */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(5.5rem, 10vh, 7.5rem);
  padding-bottom: clamp(3.5rem, 7vh, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  opacity: .9;
}

/* Grade em perspectiva que corre em direção ao horizonte */
.hero__grid {
  position: absolute;
  left: -25%; right: -25%; bottom: -8%;
  height: 62%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(1, 250, 191, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 213, 252, .13) 1px, transparent 1px);
  background-size: 64px 64px;
  transform-origin: 50% 100%;
  animation: grid-move 5.5s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 55%, transparent);
  opacity: .55;
}

.hero__orb {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  will-change: transform;
}
.hero__orb--1 { width: 480px; height: 480px; top: -10%; left: -6%;  background: radial-gradient(circle, rgba(1, 250, 191, .34), transparent 68%); animation: drift 17s var(--e-inout) infinite; }
.hero__orb--2 { width: 560px; height: 560px; top: 8%;  right: -12%; background: radial-gradient(circle, rgba(1, 213, 252, .32), transparent 68%); animation: drift 22s var(--e-inout) infinite reverse; }
.hero__orb--3 { width: 420px; height: 420px; bottom: -14%; left: 34%; background: radial-gradient(circle, rgba(1, 126, 253, .22), transparent 68%); animation: drift 26s var(--e-inout) infinite; }

.hero__scan {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, .014) 3px 4px);
  opacity: .8;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
}

.hero__title {
  font-size: var(--fs-hero);
  margin-bottom: 1.15rem;
  letter-spacing: -.045em;
}
.hero__title .line { padding-bottom: .06em; margin-bottom: -.04em; }
.hero__title .line__in { background: linear-gradient(180deg, #fff 28%, #93A0BA 118%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__title .grad .line__in {
  background: var(--grad-brand);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 7s var(--e-inout) infinite;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--txt-2);
  max-width: 56ch;
  margin-bottom: 1.7rem;
}
.hero__lead strong { color: var(--txt); font-weight: 700; }

/* ------------------------------------------------------------- LEMA --- */
.motto {
  position: relative;
  margin-bottom: 1.7rem;
  padding-left: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.55vw, 1.28rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--txt);
  max-width: 48ch;
}
.motto::before {
  content: '';
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 3px;
  border-radius: 3px;
  background: var(--grad-brand);
  box-shadow: 0 0 14px rgba(1, 213, 252, .55);
}
.motto em {
  font-style: normal;
  background: var(--grad-brand);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 6s var(--e-inout) infinite;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.7rem; }

.hero__meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(1rem, 3vw, 2.4rem);
  justify-content: start;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.hero__meta li { display: grid; gap: .12rem; }
.hero__meta b {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__meta span {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* ---------------------------------------------------- NÚCLEO 3D DO HERO */
.hero__visual { display: grid; place-items: center; }

.core {
  position: relative;
  width: min(470px, 78vw);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.core__glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 250, 191, .3), rgba(1, 213, 252, .16) 45%, transparent 68%);
  filter: blur(34px);
  animation: pulse-glow 4.5s var(--e-inout) infinite;
}

.core__ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(1, 250, 191, .3);
  transform-style: preserve-3d;
}
.core__ring--1 {
  width: 74%; height: 74%;
  margin: -37% 0 0 -37%;
  border-style: dashed;
  animation: spin3d 19s linear infinite;
}
.core__ring--2 {
  width: 92%; height: 92%;
  margin: -46% 0 0 -46%;
  border-color: rgba(1, 213, 252, .28);
  animation: spin-rev 26s linear infinite;
}
.core__ring--3 {
  width: 56%; height: 56%;
  margin: -28% 0 0 -28%;
  border-color: rgba(1, 126, 253, .26);
  border-style: dotted;
  animation: spin 13s linear infinite;
}

/* Ampulheta volumétrica — a marca em 3D.
   Seis lâminas em leque (30° entre si) recortadas em gravata-borboleta:
   giradas no eixo Y, a soma translúcida delas lê como um sólido de vidro. */
.core__hg {
  position: absolute;
  top: 50%; left: 50%;
  width: 122px; height: 164px;
  margin: -82px 0 0 -61px;
  transform-style: preserve-3d;
  animation: hg3d-spin 26s linear infinite;
}

.core__blade {
  position: absolute;
  inset: 0;
  transform: rotateY(calc(var(--b) * 30deg));
  clip-path: polygon(0 0, 100% 0, 54% 50%, 100% 100%, 0 100%, 46% 50%);
  background: linear-gradient(180deg,
    rgba(1, 250, 191, .30),
    rgba(1, 213, 252, .08) 46%,
    rgba(1, 213, 252, .08) 54%,
    rgba(1, 126, 253, .28));
  opacity: .34;
}
/* A lâmina frontal marca o contorno e dá leitura de silhueta */
.core__blade:first-child {
  opacity: .8;
  background: linear-gradient(180deg,
    rgba(1, 250, 191, .16),
    rgba(1, 213, 252, .05) 50%,
    rgba(1, 126, 253, .16));
  box-shadow: inset 0 0 40px rgba(1, 250, 191, .22);
}

/* Placas de topo e base, em perspectiva */
.core__cap {
  position: absolute;
  left: 50%;
  width: 138px; height: 138px;
  margin-left: -69px;
  border: 1px solid rgba(1, 250, 191, .5);
  border-radius: 50%;
  transform: rotateX(82deg);
  box-shadow: 0 0 26px rgba(1, 250, 191, .22);
}
.core__cap--t { top: -69px; }
.core__cap--b { bottom: -69px; border-color: rgba(1, 126, 253, .5); box-shadow: 0 0 26px rgba(1, 126, 253, .22); }

/* Aro do estrangulamento */
.core__neck {
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid rgba(1, 250, 191, .75);
  border-radius: 50%;
  transform: rotateX(80deg);
  box-shadow: 0 0 18px rgba(1, 250, 191, .55);
}

/* Grãos caindo do bulbo superior para o inferior */
.core__flow {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 46%;
  margin-left: -1.5px;
}
.core__flow i {
  position: absolute;
  left: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #01FABF;
  box-shadow: 0 0 9px #01FABF;
  animation: hg3d-fall 1.6s linear infinite;
}
.core__flow i:nth-child(2) { animation-delay: -.4s; }
.core__flow i:nth-child(3) { animation-delay: -.8s; }
.core__flow i:nth-child(4) { animation-delay: -1.2s; }

/* Satélites — um por solução */
.core__sat {
  position: absolute;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  background: rgba(11, 14, 23, .8);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color: var(--s, var(--c1));
  animation: float-y 7s var(--e-inout) infinite;
}
.core__sat .ico { width: 25px; height: 25px; stroke-width: 1.6; }
.core__sat::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 24px color-mix(in srgb, var(--s) 40%, transparent);
  opacity: .7;
}
.core__sat--1 { top: 3%;  left: 50%; --s: var(--sol-navalha-1);  animation-delay: 0s; }
.core__sat--2 { top: 26%; left: 92%; --s: var(--sol-smile-1);    animation-delay: -1.1s; }
.core__sat--3 { top: 74%; left: 92%; --s: var(--sol-camis-1);    animation-delay: -2.2s; }
.core__sat--4 { top: 97%; left: 50%; --s: var(--sol-question-1); animation-delay: -3.3s; }
.core__sat--5 { top: 74%; left: 8%;  --s: var(--sol-beaver-1);   animation-delay: -4.4s; }
.core__sat--6 { top: 26%; left: 8%;  --s: var(--sol-esquenta-1); animation-delay: -5.5s; }

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .5rem;
  color: var(--txt-3);
  z-index: 2;
}
.hero__mouse {
  width: 23px; height: 37px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  display: grid;
  justify-content: center;
  padding-top: 7px;
}
.hero__mouse i {
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--c1);
  box-shadow: 0 0 8px var(--c1);
  animation: float-y 1.9s var(--e-inout) infinite;
}
.hero__scrolltxt {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.hero__scroll:hover { color: var(--c1); }

/* =============================================================== HUB === */
.hub__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
}
.hcard {
  position: relative;
  padding: 1.7rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), var(--surface);
  overflow: hidden;
  transition: border-color .4s, transform .5s var(--e-out), box-shadow .5s;
}
.hcard:hover { border-color: rgba(1, 250, 191, .35); box-shadow: 0 22px 60px rgba(0, 0, 0, .5); }
.hcard__num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: transparent;
  -webkit-text-stroke: .6px var(--c1);
  margin-bottom: 1.5rem;
}
.hcard h3 { font-size: 1.16rem; margin-bottom: .55rem; }
.hcard p { font-size: var(--fs-sm); color: var(--txt-2); }
.hcard__glow {
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 250, 191, .5), transparent 68%);
  filter: blur(34px);
  opacity: .12;
  transition: opacity .5s, transform .7s var(--e-out);
  pointer-events: none;
}
.hcard:hover .hcard__glow { opacity: .38; transform: scale(1.3); }

/* ======================================================== PLATAFORMA === */
.platform { overflow: hidden; }
.platform__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.layers-list { margin-top: 2rem; display: grid; gap: .7rem; }
.layers-list li {
  position: relative;
  display: grid;
  gap: .18rem;
  padding: .95rem 1.15rem .95rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .022);
  cursor: default;
  transition: border-color .4s, background .4s, transform .4s var(--e-out);
}
.layers-list li:hover,
.layers-list li.is-hot {
  border-color: var(--line-strong);
  border-left-color: var(--c1);
  background: rgba(1, 250, 191, .05);
  transform: translateX(6px);
}
.layers-list b { font-family: var(--font-display); font-size: 1.02rem; }
.layers-list span { font-size: var(--fs-sm); color: var(--txt-2); }

/* Pilha isométrica */
.platform__stack { display: grid; place-items: center; min-height: 460px; perspective: 1300px; }
.iso {
  position: relative;
  width: 300px; height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-40deg);
  --fl: -18px;
  animation: float-t 8s var(--e-inout) infinite;
}
.iso__layer {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(1, 250, 191, .38);
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(1, 250, 191, .11), rgba(1, 213, 252, .07));
  box-shadow: 0 0 40px rgba(1, 250, 191, .1), inset 0 0 40px rgba(1, 250, 191, .06);
  transform: translateZ(var(--tz));
  transition: transform .6s var(--e-out), box-shadow .6s, border-color .6s, background .6s;
}
.iso__layer[data-layer="0"] { --tz: 168px; }
.iso__layer[data-layer="1"] { --tz: 112px; }
.iso__layer[data-layer="2"] { --tz: 56px;  }
.iso__layer[data-layer="3"] { --tz: 0px;   }

.iso__layer.is-hot {
  border-color: var(--c1);
  background: linear-gradient(140deg, rgba(1, 250, 191, .22), rgba(1, 213, 252, .12));
  box-shadow: 0 0 70px rgba(1, 250, 191, .32), inset 0 0 50px rgba(1, 250, 191, .14);
  transform: translateZ(calc(var(--tz) + 26px));
}

.iso__grid {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: .7;
}
.iso__label {
  position: absolute;
  left: 14px; top: 12px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 0 14px rgba(1, 250, 191, .6);
}
/* ========================================================== PROCESSO === */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.steps__line {
  position: absolute;
  top: 45px; left: 6%; right: 6%;   /* alinhado ao centro dos círculos 01–04 */
  height: 1px;
  background: var(--line-strong);
  overflow: hidden;                 /* prende o feixe: senão o translateX(100%) alarga a página */
  z-index: 0;
}
.steps__line i {
  position: absolute;
  inset: 0;
  background: var(--grad-line);
  transform-origin: left;
  animation: beam-sweep 3.4s var(--e-inout) infinite;
}
.step {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), var(--surface);
  transition: transform .5s var(--e-out), border-color .4s, box-shadow .5s;
}
.step:hover { transform: translateY(-8px); border-color: rgba(1, 213, 252, .4); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.step__idx {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(1, 250, 191, .4);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--c1);
  box-shadow: 0 0 0 6px rgba(5, 6, 10, .9), 0 0 22px rgba(1, 250, 191, .22);
}
.step h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.step p { font-size: var(--fs-sm); color: var(--txt-2); }

/* ======================================================== TECNOLOGIA === */
.tech { overflow: hidden; }   /* os chips da órbita giram além da caixa do anel */
.tech__inner {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.tech__orbit { display: grid; place-items: center; min-height: 460px; perspective: 1200px; }
.orbit {
  /* Diâmetro base do sistema. Os chips ficam num raio de --R/2 e ainda
     ocupam ~45px além disso — por isso o teto em vw fica bem abaixo de 100. */
  --R: min(450px, 68vw);
  position: relative;
  width: var(--R);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}
.orbit__core {
  position: absolute;
  top: 50%; left: 50%;
  width: 128px; height: 128px;
  margin: -64px 0 0 -64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(1, 250, 191, .45);
  background: radial-gradient(circle, rgba(1, 250, 191, .18), rgba(1, 213, 252, .08) 60%, transparent);
  box-shadow: 0 0 60px rgba(1, 250, 191, .28), inset 0 0 40px rgba(1, 213, 252, .2);
  animation: pulse-glow 4s var(--e-inout) infinite;
}
.orbit__core span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
}
.orbit__core em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .09);
  transform-style: preserve-3d;
}
.orbit__ring--a { --r: calc(var(--R) / 2); animation: orbit-a 32s linear infinite; }
.orbit__ring--b {
  inset: 32%;
  --r: calc(var(--R) * .34);
  border-color: rgba(1, 213, 252, .16);
  animation: orbit-b 24s linear infinite;
}

.orbit__slot {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateZ(var(--a)) translateX(var(--r)) rotateZ(calc(-1 * var(--a)));
}
.orbit__chip {
  position: absolute;
  left: 0; top: 0;
  display: block;
  padding: .3rem .66rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(11, 14, 23, .92);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-style: normal;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--txt-2);
  transform-origin: 50% 50%;
  translate: -50% -50%;           /* propriedade independente: não conflita com a animação */
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.orbit__ring--a .orbit__chip { animation: counter-orbit-a 30s linear infinite; }
.orbit__ring--b .orbit__chip { animation: counter-orbit-b 22s linear infinite; }

.tech__feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-top: 2rem;
}
.tfeat {
  display: grid;
  gap: .2rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .022);
  transition: border-color .4s, background .4s;
}
.tfeat:hover { border-color: rgba(1, 250, 191, .35); background: rgba(1, 250, 191, .045); }
.tfeat b { font-family: var(--font-display); font-size: .98rem; }
.tfeat span { font-size: var(--fs-sm); color: var(--txt-2); }

/* =============================================================== CTA === */
.cta { position: relative; overflow: hidden; }
.cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 420px at 18% 30%, rgba(1, 250, 191, .13), transparent 65%),
    radial-gradient(700px 460px at 84% 74%, rgba(1, 126, 253, .11), transparent 65%);
}
.cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.cta__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.cta__badges span {
  padding: .4rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .03);
  font-size: var(--fs-xs);
  color: var(--txt-2);
}