/* GRAHL / camada "tech": robôs, grade, contador, rede, números (2026-10-04).
   Cores e fontes da marca; loops só com prefers-reduced-motion: no-preference. */

/* ---------- Topo: cena dos robôs ---------- */
.hero .hero-side { display: block; align-self: center; padding-top: 0; }
.gs-scene-wrap { position: relative; width: 100%; max-width: 560px; margin-left: auto; }
.gs-scene { display: block; width: 100%; height: auto; overflow: visible; }
.gs-scene g, .gs-scene rect, .gs-scene path, .gs-scene circle, .gs-scene ellipse, .gs-scene text { transform-box: fill-box; }
.gs-l-back, .gs-l-mid, .gs-l-front { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.gs-tags { font-family: "DM Mono", monospace; }
.gs-cursor { transform: translate(330px, 250px); }

@media (min-width: 901px) {
  .hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); align-items: center; }
}
@media (max-width: 900px) {
  .hero .hero-grid { grid-template-columns: 1fr; gap: 6px; }
  .hero .hero-side { order: -1; }
  .gs-scene-wrap { max-width: 400px; margin: 0 auto; }
}

/* Grade e linhas de mira do fundo do topo */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(58% - .5px), rgba(184,120,152,.35) calc(58% - .5px), rgba(184,120,152,.35) calc(58% + .5px), transparent calc(58% + .5px)),
    linear-gradient(0deg, transparent calc(30% - .5px), rgba(184,120,152,.28) calc(30% - .5px), rgba(184,120,152,.28) calc(30% + .5px), transparent calc(30% + .5px)),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 62% 45%, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%);
          mask-image: radial-gradient(ellipse at 62% 45%, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%);
}
.hero .hero-media { opacity: .14; filter: saturate(.5) blur(2px); }

/* Título letra por letra (letras criadas pelo JS) */
.gs-word { display: inline-block; white-space: nowrap; }
.gs-ch { display: inline-block; }
html.gs-tech .hero h1 .gs-line__inner { transform: none !important; opacity: 1 !important; transition: none !important; }

/* ---------- Contador e pontos de navegação ---------- */
.gs-pager { position: fixed; z-index: 35; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.gs-pager button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.gs-pager button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; transition: transform .3s ease, opacity .3s ease, background-color .3s ease; }
.gs-pager button[aria-current="true"]::before { opacity: 1; transform: scale(1.6); background: #b87898; }
.gs-pager button:focus-visible { outline: 2px solid #b87898; outline-offset: 2px; border-radius: 50%; }
.gs-pager { color: #f5f4f2; }
.gs-pager.is-light { color: #111214; }
.gs-counter { position: fixed; z-index: 35; left: 18px; bottom: 18px; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .16em; color: #f5f4f2; mix-blend-mode: difference; pointer-events: none; }
.gs-counter b { color: #b87898; font-weight: 500; mix-blend-mode: normal; }
html.gs-tech .gs-reading-progress { display: none; }
@media (max-width: 900px) { .gs-pager { display: none; } .gs-counter { left: 14px; bottom: 14px; font-size: 10px; } }

/* ---------- Encaixe de rolagem (desktop) ---------- */
@media (min-width: 901px) and (min-height: 680px) {
  html.gs-tech { scroll-snap-type: y proximity; }
  html.gs-tech main > section { scroll-snap-align: start; }
  html.gs-tech .crm-section, html.gs-tech .process-section, html.gs-tech .gs-numbers, html.gs-tech .about-section {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  }
}

/* ---------- Serviços: rede interativa ---------- */
.gs-services { position: relative; isolation: isolate; }
.gs-services > .container { position: relative; z-index: 1; }
.gs-net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.gs-net-hint { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); }
.gs-net-hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--plum); box-shadow: 0 0 0 4px rgba(100,51,79,.15); }

/* ---------- CRM: robô na linha ---------- */
.gs-flow-bot { position: absolute; left: -4px; top: 30px; width: 30px; height: 30px; z-index: 2; pointer-events: none; transform: translateY(-50%); }
.gs-flow-bot svg { width: 100%; height: 100%; display: block; }

/* ---------- Números ---------- */
.gs-numbers { padding: clamp(96px, 12vw, 150px) 0; background: #121316; position: relative; overflow: hidden; }
.gs-numbers::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 20%, rgba(100,51,79,.35), transparent 45%); }
.gs-numbers .container { position: relative; }
.gs-numbers-head h2 { margin: 40px 0 0; font-size: clamp(41px, 5.4vw, 72px); font-weight: 600; letter-spacing: -.075em; line-height: .98; }
.gs-numbers-head h2 i { color: #b87898; font-style: normal; }
.gs-numbers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 7vw, 90px); border-top: 1px solid var(--line-light); }
.gs-stat { padding: 30px 24px 10px 0; border-right: 1px solid var(--line-light); display: grid; gap: 14px; align-content: start; }
.gs-stat + .gs-stat { padding-left: 24px; }
.gs-stat:last-child { border-right: 0; }
.gs-stat__value { font-size: clamp(44px, 5vw, 76px); font-weight: 600; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.gs-stat__label { max-width: 220px; font-size: 13px; line-height: 1.6; color: #ffffff9e; }
@media (max-width: 900px) {
  .gs-numbers-grid { grid-template-columns: 1fr 1fr; }
  .gs-stat { padding: 26px 14px 20px 0; border-bottom: 1px solid var(--line-light); }
  .gs-stat + .gs-stat { padding-left: 0; }
  .gs-stat:nth-child(2n) { border-right: 0; padding-left: 14px; }
}

/* ---------- Contato: robô acenando ---------- */
.gs-bot-wave { width: 74px; margin: 0 0 18px; }
.gs-bot-wave svg { display: block; width: 100%; height: auto; overflow: visible; }
.gs-bot-wave g, .gs-bot-wave path, .gs-bot-wave circle, .gs-bot-wave ellipse { transform-box: fill-box; }

/* ---------- Animações (só sem pedido de redução de movimento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.gs-motion-on .gs-hover { animation: gsHover 4.4s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-bot-b .gs-hover { animation-duration: 5s; animation-delay: -1.6s; }
  html.gs-motion-on .gs-bot-c .gs-hover { animation: gsFly 6s ease-in-out infinite; }
  html.gs-motion-on .gs-eyes { animation: gsBlink 5.2s infinite; transform-origin: center; }
  html.gs-motion-on .gs-bot-b .gs-eyes { animation-delay: -2.1s; }
  html.gs-motion-on .gs-ant { animation: gsPulse 1.8s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-core { animation: gsPulse 2.6s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-ring { animation: gsRing 2.6s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-arm-paint { animation: gsPaint 2.2s ease-in-out infinite; transform-origin: 100% 40%; }
  html.gs-motion-on .gs-spark { animation: gsPulse .9s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-card { animation: gsCarry 9s cubic-bezier(.45,0,.2,1) infinite; transform-origin: center; }
  html.gs-motion-on .gs-prop { animation: gsProp .35s linear infinite; transform-origin: center; }
  html.gs-motion-on .gs-dot { animation: gsTyping 1.2s ease-in-out infinite; }
  html.gs-motion-on .gs-dot-2 { animation-delay: .15s; }
  html.gs-motion-on .gs-dot-3 { animation-delay: .3s; }
  html.gs-motion-on .gs-tag { animation: gsTag 7s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-tag-2 { animation-delay: -2.4s; }
  html.gs-motion-on .gs-tag-3 { animation-delay: -4.6s; }
  html.gs-motion-on .gs-orbit { animation: gsOrbit 5s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-halo { animation: gsHalo 6s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-strip { animation: gsPulse 2.4s ease-in-out infinite; }
  html.gs-motion-on .gs-cursor { animation: gsCursor 9s cubic-bezier(.6,0,.2,1) infinite; }
  html.gs-motion-on .gs-b { animation: gsBuild 9s cubic-bezier(.16,1,.3,1) infinite both; }
  html.gs-motion-on .gs-b1 { animation-delay: .35s; }
  html.gs-motion-on .gs-b2 { animation-delay: .6s; }
  html.gs-motion-on .gs-b3 { animation-delay: .85s; }
  html.gs-motion-on .gs-b4 { animation-delay: 1.1s; }
  html.gs-motion-on .gs-b5 { animation-delay: 1.45s; }
  html.gs-motion-on .gs-c1 { animation-delay: 1.85s; }
  html.gs-motion-on .gs-c2 { animation-delay: 2.05s; }
  html.gs-motion-on .gs-c3 { animation-delay: 2.25s; }
  html.gs-motion-on .gs-arm-wave { animation: gsWave 1.6s ease-in-out infinite; transform-origin: 0% 100%; }
  html.gs-motion-on .gs-bot-wave .gs-hover { animation: gsHover 3.6s ease-in-out infinite; }

  /* Entrada do topo: cena e letras */
  html.gs-motion-on .gs-scene-wrap { transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
  html.gs-motion-on.gs-hero-wait .gs-scene-wrap { opacity: 0; transform: translate3d(0, 30px, 0) scale(.94); }
  html.gs-tech .hero h1 .gs-ch { transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .7s ease; transition-delay: calc(.12s + var(--c) * 26ms); }
  html.gs-tech.gs-hero-wait .hero h1 .gs-ch { opacity: 0; transform: translate3d(0, .45em, 0) rotate(4deg); filter: blur(10px); }

  /* Números */
  .gs-stat { transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); }
  html.gs-tech .gs-numbers:not(.is-in) .gs-stat { opacity: 0; transform: translate3d(0, 24px, 0); }
  html.gs-tech .gs-numbers.is-in .gs-stat:nth-child(2) { transition-delay: .1s; }
  html.gs-tech .gs-numbers.is-in .gs-stat:nth-child(3) { transition-delay: .2s; }
  html.gs-tech .gs-numbers.is-in .gs-stat:nth-child(4) { transition-delay: .3s; }
}

@keyframes gsHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes gsFly { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(-10px, -9px) rotate(2deg); } }
@keyframes gsBlink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } }
@keyframes gsPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.88); } }
@keyframes gsRing { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .4; transform: scale(1.14); } }
@keyframes gsPaint { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
@keyframes gsCarry { 0%, 8% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(118px, -96px) scale(.72); } 48%, 100% { opacity: 0; transform: translate(126px, -104px) scale(.6); } }
@keyframes gsProp { 0% { transform: scaleX(1); } 50% { transform: scaleX(.25); } 100% { transform: scaleX(1); } }
@keyframes gsTyping { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@keyframes gsTag { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-10px); } }
@keyframes gsOrbit { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes gsHalo { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
@keyframes gsCursor { 0%, 6% { transform: translate(330px, 250px); } 22% { transform: translate(178px, 215px); } 30% { transform: translate(176px, 213px); } 48% { transform: translate(250px, 248px); } 66% { transform: translate(330px, 190px); } 84%, 100% { transform: translate(330px, 250px); } }
@keyframes gsBuild { 0% { opacity: 0; transform: translateY(5px); } 8% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes gsWave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(14deg); } }

/* ---------- Mini jogo "Conecte a rede" ---------- */
.gs-net-play { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0 0; padding: 10px 18px; border: 1px solid var(--plum); border-radius: 999px; background: transparent; color: var(--plum); font: 600 13px/1 Manrope, sans-serif; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.gs-net-play:hover, .gs-net-play:focus-visible { background: var(--plum); color: var(--white); }
.gs-net-play:focus-visible { outline: 2px solid #b87898; outline-offset: 3px; }
.gs-net-hint + .gs-net-play { margin-left: 0; }
.gs-net-hud { position: fixed; z-index: 45; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: center; max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 12px 20px; border-radius: 18px; background: rgba(17,18,20,.94); color: #f5f4f2; box-shadow: 0 18px 50px rgba(17,18,20,.35); border: 1px solid rgba(184,120,152,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gs-net-hud[hidden] { display: none; }
.gs-hud-k { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #ffffff8c; }
.gs-hud-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: #f5f4f2; min-width: 42px; }
.gs-hud-msg { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 1.5; text-align: center; }
.gs-hud-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex: 1 1 100%; }
.gs-hud-cta, .gs-hud-again { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font: 600 13px/1 Manrope, sans-serif; text-decoration: none; cursor: pointer; }
.gs-hud-cta { background: #64334f; color: #fff; border: 0; }
.gs-hud-again { background: transparent; color: #f5f4f2; border: 1px solid rgba(255,255,255,.3); }
.gs-hud-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #f5f4f2; cursor: pointer; font-size: 14px; }
.gs-hud-cta:focus-visible, .gs-hud-again:focus-visible, .gs-hud-x:focus-visible { outline: 2px solid #b87898; outline-offset: 2px; }
.gs-net-hud.is-end { padding: 16px 18px; }
@media (max-width: 900px) { .gs-net-hud { bottom: 86px; } }

/* ---------- Padrão tech nas outras páginas (sem jogo e sem rede) ---------- */
html.gs-boot .simple-hero h1, html.gs-boot .simple-project-hero h1, html.gs-boot .about-page-hero h1, html.gs-boot #hero h1 { opacity: 0; }
html.gs-tech [data-gs-chars] { animation: none !important; }
.simple-hero, .simple-project-hero, .about-page-hero { isolation: isolate; }
.simple-hero::after, .simple-project-hero::after, #hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(64% - .5px), rgba(184,120,152,.32) calc(64% - .5px), rgba(184,120,152,.32) calc(64% + .5px), transparent calc(64% + .5px)),
    linear-gradient(0deg, transparent calc(34% - .5px), rgba(184,120,152,.24) calc(34% - .5px), rgba(184,120,152,.24) calc(34% + .5px), transparent calc(34% + .5px)),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 66% 45%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%);
          mask-image: radial-gradient(ellipse at 66% 45%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%);
}
.simple-hero > .container, .simple-project-hero > .container { position: relative; z-index: 1; }

/* Robô construtor (Litoral Norte, cases e Sobre) */
.gs-hbot-wrap { pointer-events: none; }
.gs-hbot { display: block; width: 100%; height: auto; overflow: visible; }
.gs-hbot g, .gs-hbot rect, .gs-hbot path, .gs-hbot circle, .gs-hbot ellipse, .gs-hbot polyline { transform-box: fill-box; }
.simple-hero .gs-hbot-wrap, .simple-project-hero .gs-hbot-wrap { position: absolute; z-index: 0; right: max(16px, 4vw); top: 50%; width: clamp(240px, 27vw, 380px); transform: translateY(-46%); }
.about-page-hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); align-items: center; }
.about-page-hero .hero-side .gs-hbot-wrap { max-width: 440px; margin-left: auto; }
@media (min-width: 901px) {
  .simple-hero .container > :not(.gs-hbot-wrap), .simple-project-hero .container > :not(.gs-hbot-wrap) { max-width: min(760px, 62%); }
}
@media (max-width: 900px) {
  .simple-hero .gs-hbot-wrap, .simple-project-hero .gs-hbot-wrap { position: relative; right: auto; top: auto; transform: none; width: 210px; margin: 0 0 8px auto; }
  .about-page-hero .hero-grid { grid-template-columns: 1fr; }
  .about-page-hero .hero-side { order: -1; }
  .about-page-hero .hero-side .gs-hbot-wrap { max-width: 260px; margin: 0 auto; }
}

/* Planos: robôs em volta do logo 3D */
.gs-mark-bots { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.gs-mark-bot { position: absolute; width: clamp(86px, 9vw, 128px); }
.gs-mark-bot svg { display: block; width: 100%; height: auto; overflow: visible; }
.gs-mark-bot g, .gs-mark-bot path, .gs-mark-bot circle, .gs-mark-bot ellipse, .gs-mark-bot rect { transform-box: fill-box; }
.gs-mark-bot--a { left: 8%; top: 22%; }
.gs-mark-bot--b { right: 9%; bottom: 20%; }
@media (max-width: 900px) { .gs-mark-bot { width: 74px; } .gs-mark-bot--a { left: 4%; top: 10%; } .gs-mark-bot--b { right: 4%; bottom: 8%; } }

@media (prefers-reduced-motion: no-preference) {
  html.gs-tech [data-gs-chars] .gs-ch { transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .7s ease; transition-delay: calc(.08s + var(--c) * 24ms); }
  html.gs-tech.gs-enter-wait [data-gs-chars] .gs-ch { opacity: 0; transform: translate3d(0, .45em, 0) rotate(4deg); filter: blur(10px); }
  html.gs-tech .gs-hbot-wrap { animation: gsBotIn 1.2s cubic-bezier(.16,1,.3,1) .35s both; }
  html.gs-motion-on .gs-float-panel { animation: gsHover 5.4s ease-in-out infinite; animation-delay: -1.2s; }
  html.gs-motion-on .gs-mark-bot--a { animation: gsOrbitA 9s ease-in-out infinite; }
  html.gs-motion-on .gs-mark-bot--b { animation: gsOrbitB 11s ease-in-out infinite; }
}
@keyframes gsBotIn { from { opacity: 0; translate: 0 26px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes gsOrbitA { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(18px, 22px) rotate(3deg); } }
@keyframes gsOrbitB { 0%, 100% { transform: translate(0, 0) rotate(3deg); } 50% { transform: translate(-22px, -16px) rotate(-3deg); } }
@media (max-width: 900px) { .gs-counter { mix-blend-mode: normal; padding: 5px 9px; border-radius: 999px; background: rgba(17,18,20,.72); color: #f5f4f2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } }

/* ---------- Convite e palco do mini jogo (v2: palco próprio, nada por cima do conteúdo) ---------- */
.gs-net-invite { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 26px; }
.gs-net-invite .gs-net-hint { margin: 0; }
.gs-net-invite .gs-net-play { margin: 0; }
html.gs-game-open { overflow: hidden; }
.gs-game { position: fixed; inset: 0; z-index: 100; color: #f5f4f2; touch-action: manipulation; overflow: hidden;
  background: radial-gradient(circle at 75% 20%, rgba(100,51,79,.45), transparent 50%), radial-gradient(circle at 15% 85%, rgba(100,51,79,.3), transparent 45%), #0c0c0e; }
.gs-game[hidden] { display: none; }
.gs-game::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 64px 64px; }
.gs-game__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gs-game__top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: clamp(18px, 3vw, 34px) clamp(18px, 4vw, 56px); pointer-events: none; }
.gs-game__top > * { pointer-events: auto; }
.gs-game__label { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .16em; color: #b87898; }
.gs-game__brand h2 { margin: 8px 0 6px; font-size: clamp(28px, 4vw, 48px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.gs-game__how { margin: 0; max-width: 340px; font-size: 13px; line-height: 1.5; color: #ffffffa6; }
.gs-game__hud { display: flex; align-items: baseline; gap: 8px 12px; padding: 12px 18px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(231,184,208,.22); margin-left: auto; }
.gs-game__hud span { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #ffffff8c; }
.gs-game__hud b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; }
.gs-game__close { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.04); color: #f5f4f2; font-size: 16px; cursor: pointer; }
.gs-game__close:hover, .gs-game__close:focus-visible { background: #64334f; border-color: #b87898; }
.gs-game__count { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: clamp(80px, 14vw, 180px); font-weight: 700; letter-spacing: -.06em; color: #f5f4f2; text-shadow: 0 0 40px rgba(184,120,152,.7); }
.gs-game__count.is-pop { animation: gsCountPop .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes gsCountPop { from { opacity: 0; transform: scale(1.6); } 40% { opacity: 1; } to { opacity: .0; transform: scale(.9); } }
.gs-game__end { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); padding: 28px 26px; border-radius: 22px; text-align: center; background: rgba(17,18,20,.92); border: 1px solid rgba(231,184,208,.3); box-shadow: 0 30px 80px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gs-game__end[hidden] { display: none; }
.gs-game__msg { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: -.02em; }
.gs-game__best { margin: 0 0 22px; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .1em; color: #b87898; }
.gs-game__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gs-game__cta, .gs-game__again { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; font: 600 14px/1 Manrope, sans-serif; text-decoration: none; cursor: pointer; }
.gs-game__cta { background: #64334f; color: #fff; border: 0; }
.gs-game__again { background: transparent; color: #f5f4f2; border: 1px solid rgba(255,255,255,.3); }
.gs-game__cta:focus-visible, .gs-game__again:focus-visible, .gs-game__close:focus-visible { outline: 2px solid #e7b8d0; outline-offset: 3px; }
@media (max-width: 700px) {
  .gs-game__top { flex-wrap: wrap; }
  .gs-game__brand { flex: 1 1 calc(100% - 60px); }
  .gs-game__hud { order: 3; margin-left: 0; padding: 8px 14px; }
  .gs-game__hud b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gs-game__count.is-pop { animation: none; } }
@media (max-width: 700px) { .gs-game__top { gap: 12px; } .gs-game__brand { flex: 1 1 0; min-width: 0; } .gs-game__close { order: 2; } .gs-game__hud { order: 3; flex: 1 1 100%; justify-content: center; } }

/* =====================================================================
   Unificação com o sistema visual da página de Planos (2026-10-05)
   Topos escuros editoriais, órbitas e brilho, botões em pílula DM Mono,
   cabeçalho escuro ao rolar. Cores, fontes e logo da GRAHL inalterados.
   ===================================================================== */

/* ---------- Topos de todas as páginas ---------- */
.hero.dark-section, .simple-hero, .simple-project-hero {
  background: radial-gradient(circle at 85% 8%, rgba(100,51,79,.28), transparent 45%), linear-gradient(160deg, #050506 0%, #111214 100%);
}
.gs-blob { position: absolute; z-index: -1; width: 240px; height: 240px; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.gs-blob-a { right: 10%; top: 18%; background: rgba(100,51,79,.24); }
.gs-blob-b { left: 6%; bottom: 10%; background: rgba(184,120,152,.12); }
.gs-mouse-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(340px at var(--mx, 70%) var(--my, 30%), rgba(184,120,152,.12), transparent 60%); }
.hero .hero-kicker, .hero .eyebrow, .simple-hero .section-label, .simple-project-hero .section-label { color: #b87898; }
.hero h1, .simple-hero h1, .simple-project-hero h1 { font-weight: 800; letter-spacing: -.075em; }

/* ---------- Botões no padrão da página de Planos ---------- */
.button.button-plum {
  border-radius: 999px; padding: 17px 24px; gap: 12px;
  font: 500 11px/1 "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, translate .35s cubic-bezier(.16,1,.3,1);
}
.button.button-plum:hover, .button.button-plum:focus-visible { background: linear-gradient(90deg, #64334f, #b87898); color: #fff; box-shadow: 0 16px 40px rgba(100,51,79,.4); }
.hero .button-plum, .simple-hero .button-plum, .simple-project-hero .button-plum, .crm-section .button-plum { background: #f5f4f2; color: #050506; }
.hero .text-link.light-link {
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 16px 22px;
  font: 500 11px/1 "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; transition: border-color .3s ease;
}
.hero .text-link.light-link:hover, .hero .text-link.light-link:focus-visible { border-color: #8a526f; }

/* ---------- Cabeçalho escuro ao rolar ---------- */
.site-header.is-scrolled { background: rgba(5,5,6,.88) !important; color: #f5f4f2 !important; border-color: rgba(255,255,255,.06) !important; box-shadow: none !important; }
.site-header .header-cta { border: 1px solid rgba(255,255,255,.38) !important; background: transparent !important; color: inherit !important; border-radius: 999px; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.site-header .header-cta:hover, .site-header .header-cta:focus-visible { background: rgba(255,255,255,.08) !important; }

/* ---------- Órbitas e brilho atrás dos robôs (como o logo 3D dos Planos) ---------- */
.about-page-hero .gs-hbot-wrap { position: relative; z-index: 0; }
.gs-hbot-wrap::before, .gs-hbot-wrap::after { content: ""; position: absolute; left: 52%; top: 52%; border-radius: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.gs-hbot-wrap::before { width: 112%; aspect-ratio: 1; border: 1px solid rgba(184,120,152,.2); border-top-color: rgba(231,184,208,.65); }
.gs-hbot-wrap::after { width: 78%; aspect-ratio: 1; background: radial-gradient(circle, rgba(184,120,152,.32), rgba(100,51,79,.12) 42%, transparent 70%); filter: blur(10px); }

/* ---------- Home: card do jogo no topo ---------- */
.gs-game-card {
  position: relative; z-index: 0; width: min(420px, 100%); margin-left: auto; padding: 28px 26px 24px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #f5f4f2; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.gs-gc-orbits { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.gs-gc-orbits i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(184,120,152,.2); border-top-color: rgba(231,184,208,.6); }
.gs-gc-orbits i + i { inset: 16%; border-color: rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.35); }
.gs-gc-orbits b { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(184,120,152,.35), rgba(100,51,79,.12) 42%, transparent 70%); filter: blur(12px); }
.gs-gc-bot { position: absolute; right: -16px; top: -64px; width: 92px; pointer-events: none; }
.gs-gc-bot svg, .gs-photo-bot svg, .gs-guide__bot svg, .gs-plan-bot svg { display: block; width: 100%; height: auto; overflow: visible; }
.gs-gc-bot g, .gs-gc-bot path, .gs-gc-bot circle, .gs-gc-bot ellipse, .gs-gc-bot rect,
.gs-photo-bot g, .gs-photo-bot path, .gs-photo-bot circle, .gs-photo-bot ellipse, .gs-photo-bot rect,
.gs-guide__bot g, .gs-guide__bot path, .gs-guide__bot circle, .gs-guide__bot ellipse, .gs-guide__bot rect,
.gs-plan-bot g, .gs-plan-bot path, .gs-plan-bot circle, .gs-plan-bot ellipse, .gs-plan-bot rect { transform-box: fill-box; }
.gs-gc-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 500 10px/1.4 "DM Mono", monospace; letter-spacing: .18em; text-transform: uppercase; color: #b87898; }
.gs-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #b87898; box-shadow: 0 0 0 4px rgba(184,120,152,.2); }
.gs-gc-title { max-width: 300px; margin: 0 0 10px; font: 700 clamp(24px, 2.4vw, 32px)/1.05 Manrope, sans-serif; letter-spacing: -.05em; }
.gs-gc-text { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #ffffffa6; }
.gs-gc-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.gs-gc-steps li { display: grid; place-items: center; height: 34px; border-radius: 9px; border: 1px dashed rgba(184,120,152,.45); font: 500 12px "DM Mono", monospace; color: #b87898; }
.gs-gc-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border: 0; border-radius: 999px;
  background: #f5f4f2; color: #050506; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.gs-gc-play:hover, .gs-gc-play:focus-visible { background: linear-gradient(90deg, #64334f, #b87898); color: #fff; box-shadow: 0 16px 40px rgba(100,51,79,.4); }
.gs-gc-play:focus-visible { outline: 2px solid #e7b8d0; outline-offset: 3px; }
.gs-gc-play[hidden] { display: none; }
@media (max-width: 900px) {
  .hero .hero-side { order: 0; }
  .gs-game-card { margin: 78px auto 0; }
  .gs-gc-bot { right: 6px; top: -60px; width: 80px; }
}

/* ---------- Palco do jogo: etapas como botões reais ---------- */
.gs-steps-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gs-step {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 12px; border-radius: 999px; border: 1px solid rgba(231,184,208,.35); background: rgba(17,18,20,.82); color: #f5f4f2;
  font: 600 14px/1 Manrope, sans-serif; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.gs-step::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #b87898; box-shadow: 0 0 0 5px rgba(184,120,152,.18); }
.gs-step:hover, .gs-step:focus-visible { border-color: #e7b8d0; box-shadow: 0 0 0 4px rgba(184,120,152,.2), 0 10px 30px rgba(100,51,79,.45); outline: none; }
.gs-step.is-done { background: #64334f; border-color: #e7b8d0; cursor: default; }
.gs-step.is-done::before { background: #f5f4f2; box-shadow: 0 0 0 5px rgba(245,244,242,.2); }
.gs-step__n { display: none; font: 500 10px/1 "DM Mono", monospace; color: #e7b8d0; }
.gs-step.is-done .gs-step__n { display: inline; }
.gs-step.is-wrong { border-color: #ff9db8; box-shadow: 0 0 0 4px rgba(255,157,184,.25); }
.gs-step:disabled { cursor: default; }
.gs-guide { position: absolute; z-index: 3; left: clamp(14px, 3vw, 40px); bottom: clamp(14px, 3vw, 34px); display: flex; align-items: flex-end; gap: 12px; max-width: min(600px, calc(100vw - 28px)); }
.gs-guide__bot { flex: 0 0 auto; width: 78px; transition: transform .4s ease, filter .4s ease; }
.gs-guide__bubble { position: relative; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #f5f4f2; color: #111214; font-size: 14px; line-height: 1.5; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.gs-guide__bubble b { color: #64334f; }
.gs-guide__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gs-guide__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #64334f; color: #fff; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.gs-guide__btn--ghost { background: transparent; color: #64334f; border: 1px solid #64334f; }
.gs-guide__btn:focus-visible { outline: 2px solid #64334f; outline-offset: 2px; }
.gs-guide.is-sad .gs-guide__bot { transform: rotate(-9deg) translateY(4px); filter: saturate(.55) brightness(.85); }
.gs-game.is-v2 .gs-game__end .gs-game__msg { font-size: 17px; }
@media (max-width: 700px) {
  .gs-step { padding: 10px 14px 10px 10px; font-size: 13px; gap: 8px; }
  .gs-step::before { width: 11px; height: 11px; }
  .gs-guide__bot { width: 58px; }
  .gs-guide__bubble { font-size: 13px; padding: 12px 14px; }
}

/* ---------- Planos: robô que aponta o plano indicado ---------- */
.gs-has-bot { position: relative; }
.gs-plan-bot { position: absolute; z-index: 6; right: 14px; top: 14px; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.gs-plan-bot__bubble { padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: #64334f; color: #fff; font: 500 10px/1.3 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px rgba(100,51,79,.35); }
.gs-plan-bot__bot { width: 54px; }

/* ---------- Sobre: assistente na foto ---------- */
.about-page-hero ~ .about-section .about-visual, .about-section .about-visual { position: relative; }
.gs-photo-bot { position: absolute; z-index: 2; right: -12px; bottom: 24px; width: 120px; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.gs-photo-bot svg { width: 86px; }
.gs-photo-bot__panel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; width: 112px; padding: 9px 10px 10px; border-radius: 10px; background: rgba(17,18,20,.88); border: 1px solid rgba(184,120,152,.4); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.gs-photo-bot__panel span { grid-column: 1 / -1; margin-bottom: 4px; font: 500 9px/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #e7b8d0; }
.gs-photo-bot__panel i { height: 6px; border-radius: 3px; background: rgba(184,120,152,.25); }

/* ---------- Contato: robô reage ao formulário ---------- */
.gs-bot-wave { transition: transform .4s ease; }
.gs-bot-wave.is-attentive { transform: rotate(-6deg); }

/* ---------- 404: robô perdido com lanterna ---------- */
.gs-lost { width: min(240px, 60vw); margin: 0 auto 18px; }
.gs-lost svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Animações (somente sem pedido de redução de movimento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.gs-motion-on .gs-blob-a { animation: gsBlob 9s ease-in-out infinite; }
  html.gs-motion-on .gs-blob-b { animation: gsBlob 11s ease-in-out infinite reverse; }
  html.gs-motion-on .gs-hbot-wrap::before { animation: gsSpin 22s linear infinite; }
  html.gs-motion-on .gs-hbot-wrap::after { animation: gsGlow 5s ease-in-out infinite; }
  html.gs-motion-on .gs-gc-orbits i { animation: gsSpinPlain 22s linear infinite; }
  html.gs-motion-on .gs-gc-orbits i + i { animation-duration: 32s; animation-direction: reverse; }
  html.gs-motion-on .gs-gc-orbits b { animation: gsGlowPlain 5s ease-in-out infinite; }
  html.gs-motion-on .gs-live-dot { animation: gsPulse 1.4s ease-in-out infinite; }
  html.gs-motion-on .gs-gc-steps li { animation: gsChip 3.6s ease-in-out infinite; }
  html.gs-motion-on .gs-gc-steps li:nth-child(2) { animation-delay: .25s; }
  html.gs-motion-on .gs-gc-steps li:nth-child(3) { animation-delay: .5s; }
  html.gs-motion-on .gs-gc-steps li:nth-child(4) { animation-delay: .75s; }
  html.gs-motion-on .gs-gc-steps li:nth-child(5) { animation-delay: 1s; }
  html.gs-motion-on .gs-gc-steps li:nth-child(6) { animation-delay: 1.25s; }
  html.gs-motion-on .gs-pin circle { animation: gsPulse 1.8s ease-in-out infinite; transform-origin: center; }
  html.gs-motion-on .gs-pin-2 circle { animation-delay: .3s; }
  html.gs-motion-on .gs-pin-3 circle { animation-delay: .6s; }
  html.gs-motion-on .gs-pin-4 circle { animation-delay: .9s; }
  html.gs-motion-on .gs-arm-lens { animation: gsLens 3.4s ease-in-out infinite; transform-origin: 100% 50%; }
  html.gs-motion-on .gs-photo-bot__panel i { animation: gsFill 6s ease-in-out infinite; }
  html.gs-motion-on .gs-photo-bot__panel i:nth-of-type(2) { animation-delay: .4s; }
  html.gs-motion-on .gs-photo-bot__panel i:nth-of-type(3) { animation-delay: .8s; }
  html.gs-motion-on .gs-photo-bot__panel i:nth-of-type(4) { animation-delay: 1.2s; }
  html.gs-motion-on .gs-photo-bot__panel i:nth-of-type(5) { animation-delay: 1.6s; }
  html.gs-motion-on .gs-photo-bot__panel i:nth-of-type(6) { animation-delay: 2s; }
  html.gs-motion-on .gs-step.is-wrong { animation: gsShake .45s ease; }
  html.gs-motion-on .gs-guide.is-happy .gs-guide__bot { animation: gsJump .55s ease 2; }
  html.gs-motion-on .gs-bot-wave.is-cheer svg { animation: gsJump .55s ease 3; }
  html.gs-motion-on .gs-plan-bot { animation: gsPop .5s cubic-bezier(.34,1.56,.64,1) both; }
  .gs-lost__beam { animation: gsBeam 3.2s ease-in-out infinite; transform-box: view-box; transform-origin: 112px 70px; }
  .gs-lost__bot { animation: gsHover 3.6s ease-in-out infinite; transform-box: fill-box; }
  .gs-lost__eyes { animation: gsLook 3.2s ease-in-out infinite; transform-box: fill-box; }
  .gs-lost__q { animation: gsTag 2.4s ease-in-out infinite; transform-box: fill-box; }
}
@keyframes gsBlob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 24px); } }
@keyframes gsSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gsSpinPlain { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gsGlow { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes gsGlowPlain { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes gsChip { 0%, 70%, 100% { border-color: rgba(184,120,152,.45); color: #b87898; background: transparent; } 80% { border-color: #e7b8d0; color: #f5f4f2; background: rgba(184,120,152,.18); } }
@keyframes gsLens { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-10px, 14px) rotate(-6deg); } }
@keyframes gsFill { 0%, 10% { background: rgba(184,120,152,.25); } 25%, 85% { background: #b87898; } 100% { background: rgba(184,120,152,.25); } }
@keyframes gsShake { 0%, 100% { translate: 0 0; } 20% { translate: -8px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 3px 0; } }
@keyframes gsJump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
@keyframes gsPop { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes gsBeam { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(12deg); } }
@keyframes gsLook { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
.gs-photo-bot { right: -34px; bottom: -18px; width: 150px; } .gs-photo-bot svg { width: 104px; } .gs-photo-bot__panel { width: 132px; } @media (max-width: 900px) { .gs-photo-bot { right: 4px; bottom: -14px; width: 118px; } .gs-photo-bot svg { width: 80px; } .gs-photo-bot__panel { width: 112px; } }
@media (min-width: 901px) { .simple-project-hero h1 { font-size: clamp(46px, 5.6vw, 88px); } }

/* ---------- Serviços: robô com nível de bolha ao lado de "O nível certo" ---------- */
.gs-services .section-intro { position: relative; }
.gs-level-bot { position: absolute; z-index: 1; left: min(640px, 66%); top: 18px; width: clamp(250px, 24vw, 320px); pointer-events: none; }
.gs-level-bot svg { display: block; width: 100%; height: auto; overflow: visible; }
.gs-level-bot g, .gs-level-bot rect, .gs-level-bot ellipse, .gs-level-bot circle, .gs-level-bot path { transform-box: fill-box; }
.gs-level { transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.gs-lvl-bubble { transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.gs-lvl-eyes { transition: transform .4s ease; transform: translateX(-3px); }
.gs-level-say { position: absolute; left: 4%; top: -4px; margin: 0; padding: 9px 13px; border-radius: 12px 12px 12px 4px; background: #111214; color: #f5f4f2; font: 500 10px/1.35 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; max-width: 230px; box-shadow: 0 12px 30px rgba(17,18,20,.18); transition: background-color .3s ease; }
.gs-level-bot[data-level] .gs-level-say { background: #64334f; }
.gs-level-bot[data-level="1"] .gs-lvl-bubble { transform: translateX(-20px); }
.gs-level-bot[data-level="2"] .gs-lvl-bubble { transform: translateX(0); }
.gs-level-bot[data-level="3"] .gs-lvl-bubble { transform: translateX(20px); }
.gs-level-bot[data-level="1"] .gs-level { transform: rotate(-4deg); }
.gs-level-bot[data-level="3"] .gs-level { transform: rotate(4deg); }
@media (max-width: 1100px) { .gs-level-bot { left: auto; right: -12px; top: 64px; width: 230px; } }
@media (max-width: 900px) { .gs-level-bot { position: relative; left: auto; right: auto; top: auto; width: 240px; margin: 34px 0 0 auto; } }
@media (prefers-reduced-motion: no-preference) {
  html.gs-motion-on .gs-level-bot:not([data-level]) .gs-level { animation: gsLvlTilt 6s cubic-bezier(.45,0,.2,1) infinite; }
  html.gs-motion-on .gs-level-bot:not([data-level]) .gs-lvl-bubble { animation: gsLvlBubble 6s cubic-bezier(.45,0,.2,1) infinite; }
}
@keyframes gsLvlTilt { 0%, 8% { transform: rotate(-7deg); } 45%, 100% { transform: rotate(0deg); } }
@keyframes gsLvlBubble { 0%, 8% { transform: translateX(-24px); } 45%, 100% { transform: translateX(0); } }
@media (min-width: 1101px) { .gs-level-bot { left: min(700px, 72%); top: 6px; } }

/* ---------- CRM: texto e fluxo lado a lado (desktop) ---------- */
@media (min-width: 901px) {
  .crm-grid { grid-template-columns: minmax(110px, 14%) minmax(0, 1fr) minmax(260px, 30%); align-items: center; column-gap: 5%; }
  .crm-grid > .section-label { align-self: start; }
  .crm-grid > .crm-copy { grid-row: 1; }
  .crm-grid > .crm-flow { grid-area: 1 / 3; align-self: center; margin-top: 0; }
}

/* ---------- Correções v14: balão legível, títulos sem corte, menos espaço vazio ---------- */
.gs-services .section-intro .gs-level-say { color: #f5f4f2 !important; -webkit-text-fill-color: #f5f4f2; font: 500 10px/1.35 "DM Mono", monospace !important; letter-spacing: .1em; max-width: 230px; margin: 0; }
html.gs-motion-on .gs-line { padding-bottom: .24em; margin-bottom: -.24em; }
.gs-premium-home .portfolio-section { padding-bottom: clamp(72px, 7vw, 104px); }
.gs-services { padding-top: clamp(64px, 6vw, 88px); }

/* ---------- Planos: robôs montando um site no lugar da foto repetida ---------- */
.gs-build-scene { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 558 / 640; padding: 34px 18px 92px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 72% 18%, rgba(100,51,79,.42), transparent 55%), radial-gradient(circle at 15% 90%, rgba(184,120,152,.16), transparent 45%), linear-gradient(160deg, #050506 0%, #111214 100%);
  box-shadow: 0 30px 70px rgba(17,18,20,.25); }
.gs-build-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px; }
.gs-scene--panel { width: 100%; height: auto; overflow: visible; }
.gs-signature { position: absolute; left: 18px; right: 18px; bottom: 18px; margin: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gs-signature img { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid #b87898; }
.gs-signature figcaption { display: grid; gap: 3px; }
.gs-signature strong { color: #f5f4f2; font: 700 15px/1.1 Manrope, sans-serif; letter-spacing: -.02em; }
.gs-signature span { color: #b87898; font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.gs-scene--panel g, .gs-scene--panel rect, .gs-scene--panel path, .gs-scene--panel circle, .gs-scene--panel ellipse, .gs-scene--panel text { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  html.gs-motion-on .gs-typing-arm { animation: gsTyping2 .5s ease-in-out infinite alternate; transform-origin: 0% 50%; }
  html.gs-motion-on .gs-key { animation: gsKey 1.2s steps(1) infinite; }
  html.gs-motion-on .gs-key-2 { animation-delay: .2s; }
  html.gs-motion-on .gs-key-3 { animation-delay: .45s; }
  html.gs-motion-on .gs-key-4 { animation-delay: .7s; }
  html.gs-motion-on .gs-key-5 { animation-delay: .95s; }
}
@keyframes gsTyping2 { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes gsKey { 0%, 70%, 100% { fill-opacity: .1; } 10%, 40% { fill: #e7b8d0; fill-opacity: .9; } }

/* ---------- v16: menos espaço em branco ---------- */
/* Home: sem altura forçada de tela inteira e sem encaixe de rolagem */
html.gs-tech { scroll-snap-type: none !important; }
html.gs-tech main > section { scroll-snap-align: none !important; }
html.gs-tech .crm-section, html.gs-tech .process-section, html.gs-tech .gs-numbers, html.gs-tech .about-section { min-height: 0 !important; display: block !important; }
html.gs-tech .crm-section { padding-top: clamp(90px, 9vw, 130px); padding-bottom: clamp(90px, 9vw, 130px); }
html.gs-tech .gs-numbers { padding-top: clamp(80px, 8vw, 120px); padding-bottom: clamp(70px, 7vw, 110px); }
/* Planos: vão menor entre a nota de pagamento e "Da marca ao site", e título alinhado */
#planos { padding-bottom: clamp(48px, 5vw, 72px) !important; }
#marca { padding-top: clamp(56px, 5vw, 80px) !important; }
@media (min-width: 901px) { #marca > .section-intro { margin-left: max(0px, calc((100% - 1240px) / 2)); } }