/* ==========================================================================
   G3 Mídia — camada de movimento
   ========================================================================== */

/* ---------- cursor personalizado ---------- */
@media (hover:hover) and (pointer:fine){
  .cur,.cur-ring{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:50%}
  .cur{width:7px;height:7px;background:var(--gold);margin:-3.5px 0 0 -3.5px;
       transition:opacity .3s var(--ease)}
  .cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.32);
       transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
                  border-color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease)}
  body.cur-on .cur-ring{width:66px;height:66px;margin:-33px 0 0 -33px;
       border-color:rgba(255,176,32,.85);background:rgba(255,176,32,.10)}
  html.has-cursor,html.has-cursor *{cursor:none !important}
}

/* ---------- revelação palavra a palavra ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w > i{
  display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .82s cubic-bezier(.16,1,.3,1);
}
.in-w .w > i{transform:none}

/* ---------- botão magnético ---------- */
.btn,.nav-cta,.float{will-change:transform}

/* ---------- card com inclinação 3D ---------- */
.tilt-wrap{perspective:1100px}
.card,.case{transform-style:preserve-3d}

/* ==========================================================================
   HERO ORBITAL
   ========================================================================== */
.hero-x{
  position:relative;overflow:hidden;
  padding:96px 0 84px;
  min-height:min(94vh,880px);
  display:flex;align-items:center;
}
.hero-x .wrap{width:100%}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}

.hero-x h1{
  font-size:clamp(38px,5.6vw,74px);font-weight:900;letter-spacing:-.042em;
  line-height:1.0;margin-top:22px;
}
.hero-x h1 em{
  font-style:normal;
  /* cor sólida primeiro: se o recorte do gradiente falhar (iOS antigo,
     navegador sem suporte), o texto continua visível em dourado */
  color:var(--gold);
  background-image:linear-gradient(96deg,var(--gold-2),var(--gold) 42%,var(--violet));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-x .lead{margin-top:22px;font-size:18.5px;max-width:52ch}

/* sistema orbital */
.orbit-sys{
  position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto;
  transform:translate3d(0,0,0);will-change:transform;
}
.orbit-glow{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(123,92,255,.42),rgba(47,155,255,.16) 45%,transparent 70%);
  filter:blur(24px);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}

.ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  border-radius:50%;border:1px dashed rgba(255,255,255,.13);
}
.ring.r1{width:46%;height:46%;animation:spin 30s linear infinite;border-color:rgba(255,255,255,.18)}
.ring.r2{width:70%;height:70%;animation:spin 52s linear infinite reverse;border-style:solid;border-color:rgba(255,255,255,.12)}
.ring.r3{width:94%;height:94%;animation:spin 84s linear infinite;border-color:rgba(255,255,255,.10)}
@keyframes spin{to{rotate:360deg}}

/* núcleo */
.core{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:23%;aspect-ratio:1;display:grid;place-items:center;
  border-radius:26%;rotate:45deg;
  background:linear-gradient(140deg,var(--blue),var(--violet) 58%,var(--gold));
  box-shadow:0 0 0 10px rgba(5,7,15,.9),0 26px 70px rgba(47,155,255,.5);
  animation:float 6s ease-in-out infinite;
}
.core img{width:56%;rotate:-45deg;filter:brightness(0) invert(1);opacity:.96}
@keyframes float{0%,100%{translate:-50% -50%}50%{translate:-50% -56%}}

/* satélites — cada um numa órbita própria, em % pra escalar no celular */
.sat{
  position:absolute;left:50%;top:50%;
  width:var(--d,70%);height:var(--d,70%);translate:-50% -50%;
  pointer-events:none;
  animation:spin var(--dur,26s) linear infinite;
  animation-delay:var(--delay,0s);
}
.sat > a{
  position:absolute;left:50%;top:0;
  translate:-50% -50%;pointer-events:auto;
  display:grid;place-items:center;
  width:62px;height:62px;border-radius:19px;
  background:rgba(12,18,38,.92);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  animation:spin var(--dur,26s) linear infinite reverse;
  animation-delay:var(--delay,0s);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  text-decoration:none;
}
.sat > a svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;opacity:.94}
.sat > a b{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .3s var(--ease);
}
.sat > a:hover{border-color:rgba(255,176,32,.7);background:rgba(255,176,32,.14);box-shadow:0 22px 54px rgba(255,176,32,.32)}
.sat > a:hover b{opacity:1;color:var(--gold)}
.orbit-sys:hover .sat,.orbit-sys:hover .sat > a{animation-play-state:paused}

/* partículas do fundo */
.spark{position:absolute;border-radius:50%;background:var(--blue);opacity:.65;
  animation:twinkle var(--tw,4s) ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.12;transform:scale(.6)}to{opacity:.85;transform:scale(1)}}

/* ==========================================================================
   PORTFÓLIO EM SCROLL HORIZONTAL
   ========================================================================== */
.hscroll{position:relative}
.hscroll-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:88px 0 76px;
}
.hscroll-track{flex:0 0 auto;display:flex;gap:26px;padding-inline:max(28px,calc((100vw - var(--wrap))/2));will-change:transform}
.hcard{
  flex:0 0 340px;padding:30px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,0) 46%),var(--panel);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.hcard:hover{border-color:rgba(47,155,255,.45);transform:translateY(-6px)}
.hcard .logo-tile{width:150px;height:94px;margin-bottom:22px}
.hcard h3{font-size:20px}
.hcard p{color:var(--muted);font-size:14.5px;line-height:1.62;margin-top:10px}
.hscroll-head{
  flex:0 0 auto;
  padding:0 max(28px,calc((100vw - var(--wrap))/2));
}
.hscroll-bar{
  position:absolute;left:max(28px,calc((100vw - var(--wrap))/2));bottom:36px;
  width:min(260px,40vw);height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;
}
.hscroll-bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--violet),var(--gold))}

/* ==========================================================================
   LINHA DO MÉTODO QUE SE DESENHA
   ========================================================================== */
.timeline{position:relative;margin-top:64px;padding-left:64px}
.timeline::before{
  content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;
  background:rgba(255,255,255,.10);border-radius:2px;
}
.timeline-fill{
  position:absolute;left:27px;top:8px;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--blue),var(--violet) 55%,var(--gold));
  box-shadow:0 0 18px rgba(123,92,255,.55);
}
.tstep{position:relative;padding:0 0 52px}
.tstep:last-child{padding-bottom:0}
.tstep::before{
  content:"";position:absolute;left:-45px;top:6px;width:16px;height:16px;border-radius:50%;
  background:#0b1020;border:2px solid rgba(255,255,255,.18);transition:all .45s var(--ease);
}
.tstep.lit::before{
  border-color:var(--gold);background:var(--gold);
  box-shadow:0 0 0 6px rgba(255,176,32,.16),0 0 22px rgba(255,176,32,.6);
}
.tstep .phase-k{color:var(--blue)}
.tstep.lit .phase-k{color:var(--gold)}
.tstep h3{margin-top:10px;font-size:25px}
.tstep p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.68}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .orbit-sys{max-width:400px}
  .hero-x{min-height:0;padding:64px 0 72px}
}
@media (max-width:720px){
  .orbit-sys{max-width:320px}
  .sat > a{width:52px;height:52px;border-radius:16px}
  .sat > a svg{width:23px;height:23px}
  .timeline{padding-left:44px}
  .timeline::before,.timeline-fill{left:15px}
  .tstep::before{left:-37px;width:14px;height:14px}
  .hcard{flex-basis:270px;padding:24px}
  .hscroll-pin{height:auto;position:static;display:block;overflow-x:auto;overflow-y:visible;
    scrollbar-width:none;padding:0 0 20px;gap:0}
  .hscroll-pin::-webkit-scrollbar{display:none}
  .hscroll-head{position:static;padding:0 0 28px}
  .hscroll-bar{display:none}
  .hscroll-track{transform:none !important;padding-inline:var(--pad)}
}
@media (prefers-reduced-motion:reduce){
  .ring,.core,.sat,.sat > a,.orbit-glow,.spark{animation:none !important}
  .w > i{transform:none !important}
}