:root {
        --bg-base: #060814;
        --bg-card: #0c0d22;
        --bg-elev: #161a3a;
        --prim: #4d4ef2;
        --deep: #3730c9;
        --plight: #8b8cf9;
        --mag: #7c5cff;
        --cyan: #22d3ee;
        --ink: #eef1ff;
        --ink2: #a5b4fc;
        --ink3: #5b5e9c;
        --line: rgba(77, 78, 242, 0.15);
        --glass-bg: rgba(77, 78, 242, 0.04);
        --glass-border: rgba(77, 78, 242, 0.2);
      }
      html,
      body {
        background: var(--bg-base);
        color: var(--ink);
        font-family: "Inter", system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
      }
      body {
        overflow-x: hidden;
      }
      * {
        box-sizing: border-box;
      }
      ::selection {
        background: #4d4ef2;
        color: #fff;
      }
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      ::-webkit-scrollbar-track {
        background: #060814;
      }
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #4d4ef2, #3730c9);
        border-radius: 8px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #7c5cff, #4d4ef2);
      }

      .gradient-text {
        background: linear-gradient(
          135deg,
          #4d4ef2 0%,
          #7c5cff 50%,
          #22d3ee 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      .gradient-text-2 {
        background: linear-gradient(135deg, #4d4ef2 0%, #7c5cff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      .gradient-text *,
      .gradient-text-2 * {
        background: inherit;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }
      /* Descendentes (y, p, g, ç) eram cortados: com background-clip:text e o
         line-height 0.9 o gradiente não pinta abaixo da caixa da linha. Aqui
         estendemos a área pintada com padding-bottom e cancelamos o impacto no
         layout com margin-bottom negativa (margem vertical é ignorada em
         elementos inline, então não desloca nada). */
      .gradient-text,
      .gradient-text-2,
      .gradient-text *,
      .gradient-text-2 * {
        padding-bottom: 0.2em;
        margin-bottom: -0.2em;
      }
      .gborder {
        position: relative;
        border-radius: 18px;
        background: rgba(12, 13, 34, 0.6);
        /* blur reduzido (20→10px): backdrop-filter é caro em repaint no scroll
           e tem 19 cards .gborder. 10px mantém o efeito vidro com bem menos custo */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      /* MOBILE/TOUCH: desliga TODO backdrop-filter (o maior gargalo de pintura
         no scroll) e deixa os cards mais opacos para continuarem legíveis */
      @media (pointer: coarse) {
        *,
        *::before,
        *::after {
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }
        .gborder {
          background: rgba(12, 13, 34, 0.9);
        }
      }
      .gborder::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
          140deg,
          rgba(77, 78, 242, 0.55),
          rgba(124, 92, 255, 0.18) 35%,
          rgba(34, 211, 238, 0) 60%,
          rgba(77, 78, 242, 0.4)
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      .glow-strong {
        box-shadow:
          0 0 120px rgba(77, 78, 242, 0.55),
          0 0 240px rgba(124, 92, 255, 0.25);
      }

      .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 14px 24px;
        border-radius: 999px;
        font-family: "JetBrains Mono", monospace;
        font-weight: 500;
        letter-spacing: 0.06em;
        font-size: 13px;
        background: linear-gradient(
          135deg,
          #4d4ef2 0%,
          #7c5cff 50%,
          #3730c9 100%
        );
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.08) inset,
          0 12px 40px -8px rgba(77, 78, 242, 0.7),
          0 0 60px rgba(124, 92, 255, 0.25);
        transition:
          transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
          box-shadow 0.25s;
      }
      .pill:hover {
        transform: translateY(-1px) scale(1.02);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.12) inset,
          0 16px 50px -8px rgba(124, 92, 255, 0.9),
          0 0 90px rgba(77, 78, 242, 0.45);
      }
      .pill .arrow {
        transition: transform 0.25s;
      }
      .pill:hover .arrow {
        transform: translateX(6px);
      }

      .ghost {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 13px 22px;
        border-radius: 999px;
        font-family: "JetBrains Mono", monospace;
        font-weight: 500;
        letter-spacing: 0.06em;
        font-size: 13px;
        color: #eef1ff;
        border: 1px solid rgba(77, 78, 242, 0.4);
        background: rgba(77, 78, 242, 0.04);
        transition: all 0.25s;
        backdrop-filter: blur(10px);
      }
      .ghost:hover {
        border-color: #7c5cff;
        background: rgba(77, 78, 242, 0.1);
        box-shadow: 0 0 30px rgba(77, 78, 242, 0.3);
      }

      .eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #a5b4fc;
      }
      .eyebrow .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #22d3ee;
        box-shadow:
          0 0 12px #22d3ee,
          0 0 24px #22d3ee;
        margin-right: 0.6rem;
        animation: pulse 1.6s ease-in-out infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.5;
          transform: scale(0.7);
        }
      }

      .h-display {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        letter-spacing: -0.035em;
        line-height: 0.9;
      }
      .h-big {
        font-size: clamp(2.4rem, 6.8vw, 6.5rem);
      }
      .h-med {
        font-size: clamp(2rem, 4.8vw, 4.5rem);
      }

      .grid-bg {
        background-image:
          linear-gradient(rgba(77, 78, 242, 0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(77, 78, 242, 0.08) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(
          ellipse at center,
          #000 0%,
          transparent 75%
        );
        -webkit-mask-image: radial-gradient(
          ellipse at center,
          #000 0%,
          transparent 75%
        );
      }
      .noise {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        opacity: 0.04;
        /* mix-blend-mode: overlay removido - recombinar o ruído sobre o
           conteúdo a cada frame (camada fixa) era um grande gargalo de scroll */
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/></svg>");
      }

      .blob {
        position: absolute;
        border-radius: 50%;
        /* blur 120→90 + promoção a camada própria (translateZ): assim o blur
           caro é rasterizado UMA vez e só composto no scroll, em vez de
           re-rasterizar a cada repaint da região */
        filter: blur(90px);
        transform: translateZ(0);
        will-change: transform;
        pointer-events: none;
      }
      .blob.a {
        background: radial-gradient(circle, #3730c9 0%, transparent 70%);
        width: 600px;
        height: 600px;
      }
      .blob.b {
        background: radial-gradient(circle, #4d4ef2 0%, transparent 70%);
        width: 520px;
        height: 520px;
      }
      .blob.c {
        background: radial-gradient(circle, #7c5cff 0%, transparent 70%);
        width: 460px;
        height: 460px;
      }
      .blob.d {
        background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
        width: 380px;
        height: 380px;
      }

      .mascot-figure {
        width: 64%;
        aspect-ratio: 3/4;
        position: relative;
      }
      .mascot-figure svg {
        width: 100%;
        height: 100%;
        display: block;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
      }

      .orbit {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .orbit span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          #7c5cff 0%,
          #4d4ef2 60%,
          transparent 100%
        );
        box-shadow:
          0 0 12px #4d4ef2,
          0 0 24px #7c5cff;
      }

      .code-window {
        border-radius: 16px;
        overflow: hidden;
        background: #080a1a;
        border: 1px solid rgba(77, 78, 242, 0.28);
        box-shadow:
          0 30px 80px -20px rgba(77, 78, 242, 0.4),
          0 0 0 1px rgba(77, 78, 242, 0.15);
        font-family: "JetBrains Mono", monospace;
      }
      .code-window .titlebar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: #0c0d28;
        border-bottom: 1px solid rgba(77, 78, 242, 0.18);
        font-size: 11px;
        color: #5b5e9c;
        letter-spacing: 0.18em;
      }
      .code-window .titlebar .dots {
        display: flex;
        gap: 6px;
      }
      .code-window .titlebar .dots i {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #161a3a;
      }
      .code-window pre {
        padding: 22px 24px;
        font-size: 13px;
        line-height: 1.7;
        color: #c3c7ed;
        margin: 0;
        white-space: pre-wrap;
      }
      .tk-key {
        color: #7c5cff;
      }
      .tk-str {
        color: #22d3ee;
      }
      .tk-num {
        color: #8b8cf9;
      }
      .tk-method {
        color: #4d4ef2;
        font-weight: 600;
      }
      .tk-com {
        color: #5b5e9c;
        font-style: italic;
      }

      .dash {
        border-radius: 18px;
        background: linear-gradient(180deg, #0c0d22, #060814);
        border: 1px solid rgba(77, 78, 242, 0.25);
        padding: 22px;
        color: #eef1ff;
        box-shadow: 0 40px 80px -20px rgba(77, 78, 242, 0.45);
      }

      .hscroll-track {
        display: flex;
        gap: 32px;
        padding: 0 8vw;
        will-change: transform;
      }
      .solution-card {
        flex: 0 0 420px;
        height: 560px;
        padding: 36px 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 22px;
        position: relative;
        overflow: hidden;
      }
      .solution-card .num {
        font-family: "JetBrains Mono", monospace;
        font-size: 5rem;
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 1;
      }

      .check {
        width: 18px;
        height: 18px;
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: linear-gradient(135deg, #4d4ef2, #7c5cff);
        color: #060814;
      }

      .field {
        width: 100%;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(77, 78, 242, 0.35);
        padding: 14px 2px;
        color: #eef1ff;
        font-size: 15px;
        outline: none;
        transition: border-color 0.25s;
      }
      .field::placeholder {
        color: #5b5e9c;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .field:focus {
        border-image: linear-gradient(90deg, #4d4ef2, #7c5cff) 1;
      }

      .pp-logo-mark {
        display: inline-block;
        width: var(--ppl-size, 32px);
        height: var(--ppl-size, 32px);
        background: linear-gradient(135deg, #4d4ef2 0%, #6d6ef7 100%);
        -webkit-mask: url("/images/home/logo-white.svg") center / contain no-repeat;
        mask: url("/images/home/logo-white.svg") center / contain no-repeat;
        flex-shrink: 0;
      }
      .pp-logo-mark.glow {
        filter: drop-shadow(0 0 18px rgba(77, 78, 242, 0.55));
      }

      #preloader {
        position: fixed;
        inset: 0;
        background: #060814;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30px;
      }
      #preloader .plogo-mark {
        --ppl-size: 92px;
        animation: pplogoFloat 2.4s ease-in-out infinite;
      }
      @keyframes pplogoFloat {
        0%,
        100% {
          transform: translateY(0) scale(1);
        }
        50% {
          transform: translateY(-6px) scale(1.04);
        }
      }
      #preloader .plogo {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        font-size: clamp(2.4rem, 6vw, 4.5rem);
        letter-spacing: -0.04em;
      }
      #preloader .pbar {
        width: min(360px, 60vw);
        height: 1px;
        background: rgba(77, 78, 242, 0.2);
        position: relative;
        overflow: hidden;
      }
      #preloader .pbar i {
        position: absolute;
        inset: 0;
        width: 0%;
        background: linear-gradient(90deg, #4d4ef2, #7c5cff, #22d3ee);
        box-shadow: 0 0 12px #4d4ef2;
      }
      #preloader .pct {
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        letter-spacing: 0.18em;
        color: #a5b4fc;
      }

      .nav-item {
        position: relative;
      }
      .nav-item > a {
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        letter-spacing: 0.14em;
        color: #eef1ff;
      }
      .nav-item > a::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 4px;
        height: 1px;
        background: linear-gradient(90deg, #4d4ef2, #7c5cff);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s;
      }
      .nav-item:hover > a::after {
        transform: scaleX(1);
      }
      .nav-dd {
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 240px;
        background: rgba(12, 13, 34, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 14px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: all 0.25s;
      }
      .nav-item:hover .nav-dd {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      .nav-dd a {
        display: block;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 13px;
        color: #eef1ff;
      }
      .nav-dd a:hover {
        background: rgba(77, 78, 242, 0.08);
        color: #7c5cff;
      }

      .reveal-word {
        display: inline-block;
        overflow: hidden;
        vertical-align: bottom;
      }
      .reveal-word > span {
        display: inline-block;
        transform: translateY(110%);
        opacity: 0;
      }

      .progress-bar {
        height: 2px;
        background: rgba(77, 78, 242, 0.15);
        position: relative;
        border-radius: 2px;
        overflow: hidden;
      }
      .progress-bar i {
        position: absolute;
        inset: 0;
        width: 0%;
        background: linear-gradient(90deg, #4d4ef2, #7c5cff, #22d3ee);
        box-shadow: 0 0 12px rgba(77, 78, 242, 0.6);
      }

      /* === scroll horizontal: setas de navegação + dica === */
      .hscroll-nav-group {
        display: flex;
        gap: 10px;
        pointer-events: auto;
      }
      .hscroll-nav {
        width: 44px;
        height: 44px;
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(77, 78, 242, 0.4);
        background: rgba(77, 78, 242, 0.08);
        backdrop-filter: blur(10px);
        color: #8b8cf9;
        padding: 0;
        cursor: pointer;
        transition:
          transform 0.2s,
          background 0.2s,
          border-color 0.2s,
          color 0.2s,
          opacity 0.2s,
          box-shadow 0.2s;
      }
      .hscroll-nav svg {
        width: 20px;
        height: 20px;
        transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1);
      }
      .hscroll-nav:hover {
        background: rgba(77, 78, 242, 0.18);
        border-color: #4d4ef2;
        transform: translateY(-2px);
        box-shadow: 0 0 24px rgba(77, 78, 242, 0.45);
        color: #fff;
      }
      .hscroll-nav.prev:hover:not(:disabled) svg {
        transform: translateX(-3px);
      }
      .hscroll-nav.next:hover:not(:disabled) svg {
        transform: translateX(3px);
      }
      .hscroll-nav:active {
        transform: translateY(0) scale(0.95);
      }
      .hscroll-nav:disabled {
        opacity: 0.28;
        cursor: default;
        transform: none;
        box-shadow: none;
        color: #5b5e9c;
      }

      .hscroll-hint {
        position: absolute;
        left: 50%;
        bottom: 84px;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 10px 20px;
        border-radius: 999px;
        border: 1px solid rgba(77, 78, 242, 0.35);
        background: rgba(12, 13, 34, 0.6);
        backdrop-filter: blur(12px);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #a5b4fc;
        white-space: nowrap;
        pointer-events: none;
        box-shadow: 0 0 30px rgba(77, 78, 242, 0.22);
        transition:
          opacity 0.5s ease,
          transform 0.5s ease;
      }
      .hscroll-hint .hh-arrow {
        display: inline-block;
        color: #4d4ef2;
        font-size: 15px;
        animation: hhNudge 1.2s ease-in-out infinite;
      }
      @keyframes hhNudge {
        0%,
        100% {
          transform: translateX(0);
          opacity: 0.65;
        }
        50% {
          transform: translateX(7px);
          opacity: 1;
        }
      }
      .hscroll-hint.is-done {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
      }
      @media (prefers-reduced-motion: reduce) {
        .hscroll-hint .hh-arrow {
          animation: none;
        }
      }
      .hscroll-hint .hh-text-m {
        display: none;
      }

      /* MOBILE: mantém o scroll "pinado" (rolar p/ baixo → move horizontal),
         igual ao desktop, e ainda permite ARRASTAR de lado para progredir.
         O swipe horizontal é tratado em JS; pan-y preserva o scroll vertical
         (rolar a página e sair da seção continuam funcionando). */
      @media (max-width: 1024px) {
        #hpin,
        #htrack,
        #htrack .solution-card {
          touch-action: pan-y;
        }
        .hscroll-hint .hh-text-d {
          display: none;
        }
        .hscroll-hint .hh-text-m {
          display: inline;
        }
      }

      .live-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(34, 211, 238, 0.08);
        border: 1px solid rgba(34, 211, 238, 0.25);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.14em;
        color: #22d3ee;
      }

      .lift {
        transition:
          transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
          box-shadow 0.35s;
      }
      .lift:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 80px -20px rgba(77, 78, 242, 0.5);
      }

      .cursor-dot,
      .cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        border-radius: 50%;
        pointer-events: none;
        z-index: 90;
        mix-blend-mode: screen;
      }
      .cursor-dot {
        width: 8px;
        height: 8px;
        background: #7c5cff;
        box-shadow: 0 0 16px #4d4ef2;
        transform: translate(-50%, -50%);
      }
      .cursor-ring {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(77, 78, 242, 0.5);
        transform: translate(-50%, -50%);
        transition:
          width 0.25s,
          height 0.25s,
          border-color 0.25s,
          background-color 0.25s;
      }
      body.hover-int .cursor-ring {
        width: 60px;
        height: 60px;
        border-color: #7c5cff;
        background: rgba(77, 78, 242, 0.08);
      }
      @media (hover: none) {
        .cursor-dot,
        .cursor-ring {
          display: none;
        }
      }

      .stat-divider {
        width: 1px;
        height: 38px;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(77, 78, 242, 0.5),
          transparent
        );
      }

      @keyframes float-y {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }
      @keyframes spin-s {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .spin-slow {
        animation: spin-s 40s linear infinite;
      }

      .stat-num {
        font-family: "JetBrains Mono", monospace;
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -0.02em;
      }

      @media (max-width: 1200px) {
        .hide-lg {
          display: none !important;
        }
      }
      @media (max-width: 1024px) {
        .solution-card {
          flex: 0 0 320px;
          height: 480px;
          padding: 26px 22px;
        }
      }

      @media (max-width: 480px) {
        .solution-card {
          flex: 0 0 280px;
          height: 440px;
          padding: 22px 20px;
        }
      }
      /* Notebooks com TELA BAIXA: os cards do scroll lateral são centralizados
         em #hpin (h-screen). Com pouca altura, sobrava pouco espaço no topo e o
         número do card ficava atrás da navbar fixa (~81px). Encurtamos a altura
         do card para o topo (centralizado) sobrar ~110px → ~29px de folga sob a
         navbar. min() garante que nunca passe dos 560px originais em telas altas. */
      @media (min-width: 1025px) and (max-height: 820px) {
        .solution-card {
          height: min(560px, calc(100vh - 220px));
        }
      }

      #hpin {
        height: 780px;
      }
      .hscroll-track {
        padding-top: 170px;    /* respira do .hscroll-header (~140px) */
        padding-bottom: 100px; /* respira da barra de progresso + setas */
      }
      @media (min-width: 1025px) {
        #hpin {
          height: 940px;
        }
        .hscroll-track {
          padding-top: 240px;
          padding-bottom: 110px;
        }
      }

      /* ===== HERO (SMIRCS-style) ===== */
      .hero-wrap {
        background:
          radial-gradient(
            ellipse at 50% 40%,
            rgba(55, 48, 201, 0.35) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse at 50% 100%,
            rgba(77, 78, 242, 0.25) 0%,
            transparent 60%
          ),
          #060814;
        /* cresce com a tela (100vh) mas para de expandir em 1080px.
           !important vence o utilitário min-h-screen do Tailwind */
        min-height: min(100vh, 1080px) !important;
      }
      .hero-vignette {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
          circle at 50% 55%,
          transparent 35%,
          rgba(6, 8, 20, 0.55) 75%,
          #060814 100%
        );
      }
      .hero-stage {
        position: relative;
        height: min(78vh, 820px);
        min-height: 560px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
      }
      .hero-word {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 800;
        letter-spacing: -0.05em;
        line-height: 0.85;
        font-size: clamp(7rem, 18vw, 18rem);
        color: #eef1ff;
        user-select: none;
        pointer-events: none;
        white-space: nowrap;
      }
      .hero-word-left {
        position: absolute;
        left: 3vw;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
      }
      .hero-ring {
        position: absolute;
        right: -2vw;
        top: 50%;
        transform: translateY(-50%);
        width: clamp(360px, 38vw, 560px);
        height: clamp(360px, 38vw, 560px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      .hero-ring::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(77, 78, 242, 0.5);
        box-shadow:
          inset 0 0 100px rgba(77, 78, 242, 0.25),
          0 0 80px rgba(77, 78, 242, 0.35),
          0 0 200px rgba(124, 92, 255, 0.18);
        background: radial-gradient(
          circle at 50% 50%,
          rgba(77, 78, 242, 0.1),
          transparent 70%
        );
      }
      .hero-ring::after {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 50%;
        border: 1px dashed rgba(77, 78, 242, 0.3);
      }
      .hero-word-right {
        position: relative;
        z-index: 2;
        font-size: clamp(6rem, 15vw, 15rem);
        letter-spacing: -0.06em;
        /* O Y final era cortado: background-clip:text recorta a pintura no limite
           da caixa, e o letter-spacing negativo encolhe a caixa à direita. Estende
           a área de pintura sem deslocar a centralização (padding e margin se anulam). */
        padding-right: 0.14em;
        margin-right: -0.14em;
      }
      .hero-ring-circle {
        position: absolute;
        inset: -4px;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        pointer-events: none;
      }

      .mascot-stage {
        position: relative;
        z-index: 5;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        pointer-events: none;
        /* move o mascote (e halo/spot/órbita/sombra junto) p/ a direita.
           .mascot-stage não é animado pelo GSAP, então transform é seguro aqui */
        transform: translateX(clamp(50px, 9vw, 180px)) translateY(40px);
      }
      .mascot-figure {
        position: relative;
        /* desce o mascote via `top` (não `transform`) p/ não conflitar com o
           idle bob do GSAP, que controla translateY em .mascot-figure */
        top: clamp(100px, 7vh, 90px);
        /* tamanho do mascote (largura segue via aspect-ratio). Mexer aqui em vez
           de transform:scale evita conflito com o idle bob do GSAP */
        height: 175%;
        aspect-ratio: 2752/1536;
        max-width: none;
        z-index: 5;
      }
      .mascot-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom center;
        filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 80px rgba(77, 78, 242, 0.45))
          drop-shadow(0 0 160px rgba(124, 92, 255, 0.25));
        display: block;
      }
      .mascot-halo {
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        width: min(72vh, 720px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(77, 78, 242, 0.45) 0%,
          rgba(55, 48, 201, 0.25) 30%,
          transparent 65%
        );
        filter: blur(20px);
        z-index: 1;
      }
      .mascot-spot {
        position: absolute;
        left: 51%;
        top: -50%;
        transform: translateX(-50%);
        width: min(40vh, 420px);
        height: 80%;
        background: linear-gradient(
          180deg,
          rgba(77, 78, 242, 0.18) 0%,
          rgba(124, 92, 255, 0.05) 60%,
          transparent 100%
        );
        clip-path: polygon(45% 0%, 55% 0%, 80% 100%, 20% 100%);
        filter: blur(6px);
        z-index: 2;
        mix-blend-mode: screen;
      }
      .mascot-ground {
        position: absolute;
        left: 50%;
        bottom: -2%;
        transform: translateX(-50%);
        width: 42%;
        height: 24px;
        border-radius: 50%;
        background: radial-gradient(
          ellipse,
          rgba(77, 78, 242, 0.55),
          transparent 70%
        );
        filter: blur(14px);
        z-index: 1;
      }
      .orbit {
        position: absolute;
        inset: 0;
        z-index: 4;
        pointer-events: none;
      }
      .orbit span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          #7c5cff 0%,
          #4d4ef2 60%,
          transparent 100%
        );
        box-shadow:
          0 0 12px #4d4ef2,
          0 0 24px #7c5cff;
      }

      .palm-logo3d {
        position: absolute;
        left: 20%;
        top: 55%;
        transform: translate(-50%, -50%);
        width: clamp(90px, 11vw, 170px);
        height: clamp(90px, 11vw, 170px);
        z-index: 7;
        pointer-events: none;
      }
      .palm-logo3d::before {
        content: "";
        position: absolute;
        inset: -30%;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(124, 92, 255, 0.55) 0%,
          rgba(77, 78, 242, 0.35) 28%,
          transparent 62%
        );
        filter: blur(18px);
        z-index: 0;
        pointer-events: none;
      }
      .palm-logo3d::after {
        content: "";
        position: absolute;
        inset: -8%;
        border-radius: 50%;
        border: 1px dashed rgba(124, 92, 255, 0.35);
        animation: spin-s 24s linear infinite;
        pointer-events: none;
      }
      #logo-3d-container {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
      }
      #logo-3d-container canvas {
        filter: drop-shadow(0 8px 28px rgba(77, 78, 242, 0.7))
          drop-shadow(0 0 40px rgba(124, 92, 255, 0.5));
      }

      .hero-scroll-ind {
        position: absolute;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        z-index: 20;
      }

      @media (max-width: 1024px) {
        /* hero vira coluna flex p/ o .hero-stage preencher a altura (flex:1) e o
           mascote ancorar no fundo (bottom:0) de forma consistente em qualquer tela */
        .hero-wrap {
          display: flex;
          flex-direction: column;
        }
        .hero-stage {
          flex: 1;
          height: auto;
          min-height: auto;
          flex-direction: column;
          padding: 30px 0 20px;
        }

        .hero-stage .mascot-spot {
          margin-top: -100px;
        }
        .hero-word-left {
          /* relative + z-index para o PUSHIN ficar POR CIMA do círculo do PAY
             (que é static); margin negativo aumenta a sobreposição */
          position: relative;
          z-index: 3;
          font-size: 8rem;
          text-align: center;
          /* fixo (sem vw) p/ a sobreposição não mudar conforme a largura,
             senão o grupo muda de altura e o PUSHIN "sobe" (justify-content:center) */
          left: unset;
          top: -20px;
        }
        .hero-word-right {
          font-size: 9.6rem;
          transform: translateY(50px);
        }
        .palm-logo3d {
          top: calc(55% - 100px);
        }
        .hero-ring {
          position: static;
          transform: none;
          margin: 0 auto;
          /* tamanho FIXO (sem vw) p/ o círculo não encolher e o grupo não se
             reposicionar conforme a largura; o que passar é cortado */
          width: 400px;
          height: 400px;
          transform: translateY(-260px);
        }
        .mascot-stage {
          /* ancorado ao FUNDO do hero (à frente, sobrepondo o círculo do PAY).
             absolute + bottom:0 garante a base no fundo em qualquer altura de tela */
          position: absolute;
          bottom: -20px;
          left: 0;
          right: 0;
          z-index: 4;
          transform: translateX(clamp(90px, 12vw, 240px));
          height: 60vh;
          min-height: 480px;
          width: 100%;
          align-items: flex-end;
        }
        .mascot-figure {
          height: 100%;
          width: auto;
          top: 0;
        }
        /* stats + botões fixos no rodapé do hero (como no desktop), sobrepondo
           a imagem do mascote - z-30 já fica acima do mascote (z-5).
           !important vence o utilitário .relative do Tailwind */
        .hero-bottom-wrap {
          position: absolute !important;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }

      /* === HERO: stats e botões empilhados verticalmente abaixo de md (768px) === */
      @media (max-width: 767.98px) {
        .hero-bottom {
          flex-direction: column;
          align-items: center;
          gap: 26px;
        }
        .hero-stats {
          flex-direction: column;
          align-items: center;
          gap: 14px;
        }
        .hero-stats .stat-divider {
          display: none;
        }
        /* No mobile os números (R$ 0,35 · D+0 · 99,9%) ficam sobre o fundo
           escuro do hero, e o tom azul #4d4ef2 do degrade somia. Clareamos o
           degrade (tons claros da própria marca) p/ garantir o contraste. */
        .hero-stats .stat-num {
          background: linear-gradient(135deg, #a7a9ff 0%, #c9b8ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
        }
        .hero-cta {
          flex-direction: column;
          align-items: stretch;
          gap: 12px;
          width: 100%;
          max-width: 300px;
          margin: 0 auto;
        }
        .hero-cta .pill,
        .hero-cta .ghost {
          width: 100%;
          justify-content: center;
          text-align: center;
        }
      }
      /* === PLACAS DE FATURAMENTO · LINHA DO TEMPO === */
      .pf-section {
        position: relative;
        padding: clamp(80px, 9vw, 140px) 0;
        overflow: hidden;
      }
      .pf-bg-glow {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 60% 50% at 50% 55%,
            rgba(var(--tier-glow, 77, 78, 242), 0.2),
            transparent 65%
          ),
          radial-gradient(
            circle at 12% 92%,
            rgba(16, 185, 129, 0.08),
            transparent 40%
          ),
          radial-gradient(
            circle at 92% 8%,
            rgba(192, 38, 211, 0.1),
            transparent 40%
          );
        pointer-events: none;
        transition: background 0.6s ease;
      }
      .pf-section .grid-bg {
        opacity: 0.35;
        mask: linear-gradient(
          180deg,
          transparent,
          black 25%,
          black 75%,
          transparent
        );
        -webkit-mask: linear-gradient(
          180deg,
          transparent,
          black 25%,
          black 75%,
          transparent
        );
      }
      .pf-container {
        position: relative;
        max-width: 1680px;
        margin: 0 auto;
        padding: 0 clamp(16px, 4vw, 40px);
      }

      .pf-header {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 40px;
        align-items: end;
        margin-bottom: clamp(40px, 5vw, 64px);
      }
      .pf-counter {
        text-align: right;
        font-family: "Space Grotesk", sans-serif;
      }
      .pf-counter-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.28em;
        color: #5b5e9c;
        text-transform: uppercase;
        margin-bottom: 6px;
      }
      .pf-counter-val {
        font-size: clamp(40px, 6vw, 84px);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.04em;
        color: #fff;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .pf-counter-val .rs {
        font-size: 0.4em;
        color: #5b5e9c;
        font-weight: 500;
        margin-right: 8px;
      }
      .pf-counter-suffix {
        margin-top: 8px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgb(var(--tier-glow, 77, 78, 242));
        font-weight: 600;
        transition: color 0.4s;
        min-height: 1.4em;
      }

      /* === TIMELINE STAGE === */
      .pf-timeline {
        position: relative;
        width: 100%;
        height: clamp(360px, 50vh, 560px);
      }
      .pf-path {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .pf-path .pf-path-bg {
        fill: none;
        stroke: rgba(77, 78, 242, 0.18);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
      }
      .pf-path .pf-path-fg {
        fill: none;
        stroke: url(#pf-grad);
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        /* dark halo separates the colored line from the bg glow (purple/green),
           so every segment reads its true color regardless of background */
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9))
          drop-shadow(0 0 7px rgba(0, 0, 0, 0.5));
      }
      .pf-path-tick {
        fill: none;
        stroke: rgba(77, 78, 242, 0.25);
        stroke-width: 1;
        stroke-dasharray: 2 4;
        vector-effect: non-scaling-stroke;
      }
      .pf-node {
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: clamp(64px, 7.2vw, 110px);
        aspect-ratio: 3 / 4;
        transform: translate(-50%, -50%) scale(1);
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
        opacity: 1;
        transition:
          transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1),
          filter 0.4s ease;
        z-index: 2;
        color: inherit;
        font: inherit;
      }
      .pf-node.lit {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      .pf-node:hover,
      .pf-node.active {
        transform: translate(-50%, -50%) scale(1.25);
        z-index: 6;
      }
      .pf-node-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 14px 28px rgba(var(--tg, 77, 78, 242), 0.55));
        transition: filter 0.4s;
        display: block;
      }
      .pf-node:hover .pf-node-img,
      .pf-node.active .pf-node-img {
        filter: drop-shadow(0 18px 36px rgba(var(--tg, 77, 78, 242), 0.9));
      }
      .pf-node-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 130%;
        aspect-ratio: 1;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s;
      }
      .pf-node-ring::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: conic-gradient(
          from 0deg,
          transparent 60%,
          rgba(var(--tg, 77, 78, 242), 0.9) 78%,
          transparent 95%
        );
        -webkit-mask: radial-gradient(
          circle,
          transparent 47%,
          black 48%,
          black 49.5%,
          transparent 50%
        );
        mask: radial-gradient(
          circle,
          transparent 47%,
          black 48%,
          black 49.5%,
          transparent 50%
        );
        animation: pf-ring-spin 22s linear infinite;
      }
      .pf-node.active .pf-node-ring,
      .pf-node:hover .pf-node-ring {
        opacity: 1;
      }
      @keyframes pf-ring-spin {
        to {
          transform: rotate(360deg);
        }
      }
      .pf-node-label {
        position: absolute;
        top: 102%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 8px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        font-weight: 700;
        color: rgb(var(--tg, 77, 78, 242));
        white-space: nowrap;
        transition:
          color 0.4s,
          transform 0.4s;
      }
      .pf-node-rank {
        position: absolute;
        bottom: 102%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 6px;
        font-family: "JetBrains Mono", monospace;
        font-size: 9px;
        letter-spacing: 0.16em;
        font-weight: 700;
        color: rgba(107, 91, 149, 0.7);
        white-space: nowrap;
      }
      .pf-node.lit .pf-node-rank {
        color: #bcc1de;
      }
      .pf-node.active .pf-node-rank,
      .pf-node:hover .pf-node-rank {
        color: rgb(var(--tg, 77, 78, 242));
      }

      .pf-baseline {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 18px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #5b5e9c;
        padding: 4px 0;
        border-top: 1px dashed rgba(77, 78, 242, 0.15);
      }
      .pf-baseline span:nth-child(2) {
        color: rgba(107, 91, 149, 0.6);
      }

      /* === DETAIL CARD === */
      .pf-detail {
        position: relative;
        margin-top: clamp(48px, 6vw, 80px);
        padding: clamp(20px, 2.6vw, 36px) clamp(24px, 3vw, 44px);
        border: 1px solid rgba(77, 78, 242, 0.18);
        border-radius: 22px;
        background: linear-gradient(
          180deg,
          rgba(22, 26, 58, 0.5),
          rgba(12, 13, 34, 0.7)
        );
        backdrop-filter: blur(20px);
        display: grid;
        grid-template-columns: auto auto 1fr auto auto;
        gap: clamp(16px, 2.4vw, 36px);
        align-items: center;
        overflow: hidden;
      }
      .pf-arrow {
        position: relative;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 1px solid rgba(77, 78, 242, 0.3);
        background: rgba(12, 13, 34, 0.65);
        color: rgb(var(--tier-glow, 77, 78, 242));
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition:
          transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1),
          border-color 0.3s,
          background 0.3s,
          color 0.3s,
          box-shadow 0.3s;
        flex-shrink: 0;
        font: inherit;
        padding: 0;
        z-index: 4;
      }
      .pf-arrow svg {
        width: 22px;
        height: 22px;
        transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1);
      }
      .pf-arrow:hover:not(:disabled) {
        border-color: rgb(var(--tier-glow, 77, 78, 242));
        background: rgba(var(--tier-glow, 77, 78, 242), 0.18);
        box-shadow:
          0 0 0 4px rgba(var(--tier-glow, 77, 78, 242), 0.12),
          0 14px 30px -8px rgba(var(--tier-glow, 77, 78, 242), 0.55);
        color: #fff;
      }
      .pf-arrow.prev:hover:not(:disabled) svg {
        transform: translateX(-3px);
      }
      .pf-arrow.next:hover:not(:disabled) svg {
        transform: translateX(3px);
      }
      .pf-arrow:active:not(:disabled) {
        transform: scale(0.93);
      }
      .pf-arrow:disabled {
        opacity: 0.35;
        cursor: not-allowed;
        border-color: rgba(77, 78, 242, 0.15);
        color: #5b5e9c;
      }
      .pf-arrow:focus-visible {
        outline: 2px solid rgb(var(--tier-glow, 77, 78, 242));
        outline-offset: 3px;
      }
      .pf-arrow-hint {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        font-family: "JetBrains Mono", monospace;
        font-size: 9px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(196, 181, 212, 0.55);
        white-space: nowrap;
        pointer-events: none;
      }
      .pf-detail::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgb(var(--tier-glow, 77, 78, 242)),
          transparent
        );
        transition: background 0.5s;
      }
      .pf-detail::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          circle at 100% 50%,
          rgba(var(--tier-glow, 77, 78, 242), 0.08),
          transparent 50%
        );
        pointer-events: none;
        transition: background 0.5s;
      }
      .pf-detail-col {
        position: relative;
      }
      .pf-detail-rank {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgb(var(--tier-glow, 77, 78, 242));
        font-weight: 700;
        transition: color 0.4s;
      }
      .pf-detail-rank b {
        display: block;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(28px, 3vw, 38px);
        letter-spacing: -0.02em;
        font-weight: 700;
        color: #fff;
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
      }
      .pf-detail-gem {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: rgb(var(--tier-glow, 77, 78, 242));
        margin-bottom: 8px;
        font-weight: 700;
        transition: color 0.4s;
      }
      .pf-detail-desc {
        color: #bcc1de;
        font-size: clamp(14px, 1.2vw, 16px);
        line-height: 1.55;
        max-width: 560px;
      }
      .pf-detail-value {
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(32px, 4vw, 56px);
        font-weight: 700;
        color: rgb(var(--tier-glow, 77, 78, 242));
        letter-spacing: -0.03em;
        line-height: 1;
        white-space: nowrap;
        transition: color 0.4s;
        font-variant-numeric: tabular-nums;
      }
      .pf-detail-value .rs {
        font-size: 0.42em;
        color: #5b5e9c;
        font-weight: 500;
        margin-right: 6px;
      }
      .pf-detail-value-sub {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #5b5e9c;
        margin-top: 6px;
        text-align: right;
      }

      @media (max-width: 900px) {
        .pf-header {
          grid-template-columns: 1fr;
          gap: 20px;
          align-items: flex-start;
        }
        .pf-counter {
          text-align: left;
        }
        .pf-timeline {
          height: clamp(320px, 56vh, 440px);
        }
        .pf-node {
          width: clamp(48px, 11vw, 76px);
        }
        .pf-node-label {
          font-size: 9px;
          letter-spacing: 0.14em;
        }
        .pf-node-rank {
          font-size: 8px;
        }
        .pf-detail {
          grid-template-columns: auto 1fr auto;
          grid-template-areas:
            "prev rank next"
            "prev gem next"
            "prev value next";
          gap: 14px 16px;
          text-align: left;
        }
        .pf-detail > .pf-arrow.prev {
          grid-area: prev;
        }
        .pf-detail > .pf-arrow.next {
          grid-area: next;
        }
        .pf-detail > .pf-detail-col:nth-of-type(1) {
          grid-area: rank;
        }
        .pf-detail > .pf-detail-col:nth-of-type(2) {
          grid-area: gem;
        }
        .pf-detail > .pf-detail-col:nth-of-type(3) {
          grid-area: value;
        }
        .pf-arrow {
          width: 44px;
          height: 44px;
        }
        .pf-arrow svg {
          width: 18px;
          height: 18px;
        }
        .pf-arrow-hint {
          display: none;
        }
        .pf-detail-value-sub {
          text-align: left;
        }
      }

      /* small screens: both arrows drop to a single row at the bottom, side by side
         (avoids the nowrap value pushing the side arrows outside the block) */
      @media (max-width: 480px) {
        .pf-detail {
          grid-template-columns: 1fr 1fr;
          grid-template-areas:
            "rank  rank"
            "gem   gem"
            "value value"
            "prev  next";
        }
        .pf-detail > .pf-arrow {
          margin-top: 8px;
        }
        .pf-detail > .pf-arrow.prev {
          justify-self: end;
        }
        .pf-detail > .pf-arrow.next {
          justify-self: start;
        }
      }

      /* === STICKY 01 === */
      .s01-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        max-width: 420px;
      }
      .s01-stat-num {
        font-family: "JetBrains Mono", monospace;
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        background: linear-gradient(135deg, #4d4ef2, #7c5cff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-variant-numeric: tabular-nums;
      }
      .s01-stat-lbl {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #5b5e9c;
        margin-top: 4px;
      }
      .s01-tabular {
        font-variant-numeric: tabular-nums;
      }
      .s01-chart-wrap {
        position: relative;
      }
      .s01-chart-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent 70%,
          rgba(6, 8, 20, 0.85) 100%
        );
        pointer-events: none;
      }
      .s01-stream {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        contain: layout;
      }
      .s01-stream-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        height: 270px;
        max-height: 270px;
        overflow: hidden;
        flex: 1 1 auto;
        min-height: 0;
        -webkit-mask-image: linear-gradient(
          180deg,
          #000 0%,
          #000 72%,
          rgba(0, 0, 0, 0.4) 92%,
          transparent 100%
        );
        mask-image: linear-gradient(
          180deg,
          #000 0%,
          #000 72%,
          rgba(0, 0, 0, 0.4) 92%,
          transparent 100%
        );
      }
      @media (max-width: 760px) {
        .s01-stream-list {
          height: 240px;
          max-height: 240px;
        }
      }
      .s01-stream-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 14px;
        padding: 10px 0;
        border-bottom: 1px dashed rgba(77, 78, 242, 0.1);
        position: relative;
      }
      .s01-stream-item:last-child {
        border-bottom: 0;
      }
      .s01-stream-item .s01-tag {
        font-size: 10px;
        letter-spacing: 0.16em;
        padding: 3px 8px;
        border-radius: 4px;
        background: rgba(77, 78, 242, 0.1);
        color: #a5b4fc;
      }
      .s01-stream-item.out .s01-tag {
        background: rgba(34, 211, 238, 0.1);
        color: #22d3ee;
      }
      .s01-stream-item .s01-val {
        font-variant-numeric: tabular-nums;
        font-weight: 500;
      }
      .s01-stream-item .s01-time {
        font-size: 11px;
        color: #5b5e9c;
      }
      .s01-stream-item.new {
        animation: s01-pop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      @keyframes s01-pop {
        0% {
          opacity: 0;
          transform: translateX(-12px);
          background: rgba(77, 78, 242, 0.1);
        }
        40% {
          background: rgba(77, 78, 242, 0.06);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
          background: transparent;
        }
      }
      .s01-stream-item.fade-out {
        animation: s01-fadeout 0.35s forwards;
      }
      @keyframes s01-fadeout {
        to {
          opacity: 0;
          transform: translateY(8px);
        }
      }

      .s01-map-wrap {
        position: relative;
      }
      .s01-map-legend {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 14px;
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.14em;
        color: #a5b4fc;
        text-transform: uppercase;
      }
      .s01-map-legend i {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        margin-right: 8px;
        vertical-align: middle;
        box-shadow: 0 0 6px currentColor;
      }
      .s01-map-wrap svg circle.pin {
        filter: drop-shadow(0 0 4px currentColor);
      }

      /* === STICKY 02 === */
      .s02-codewin {
        position: relative;
        overflow: visible;
      }
      .s02-cursor {
        display: inline-block;
        color: #7c5cff;
        animation: s02-blink 1s steps(2) infinite;
        margin-left: 2px;
      }
      @keyframes s02-blink {
        50% {
          opacity: 0;
        }
      }
      .s02-tabs {
        display: flex;
        gap: 0;
        padding: 0 16px;
        background: #070a1c;
        border-bottom: 1px solid rgba(77, 78, 242, 0.18);
        position: relative;
      }
      .s02-tab {
        padding: 14px 18px;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        letter-spacing: 0.04em;
        color: #5b5e9c;
        background: transparent;
        border: 0;
        cursor: pointer;
        transition: color 0.25s;
        position: relative;
        z-index: 1;
      }
      .s02-tab:hover {
        color: #a5b4fc;
      }
      .s02-tab.active {
        color: #eef1ff;
      }
      .s02-tab-indicator {
        position: absolute;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(90deg, #4d4ef2, #7c5cff, #22d3ee);
        box-shadow: 0 0 12px #4d4ef2;
        transition:
          left 0.35s cubic-bezier(0.4, 1.2, 0.4, 1),
          width 0.35s cubic-bezier(0.4, 1.2, 0.4, 1);
        border-radius: 2px;
      }
      .s02-panels {
        position: relative;
        min-height: 360px;
      }
      .s02-panel {
        position: absolute;
        inset: 0;
        padding: 24px 26px;
        margin: 0;
        font-size: 13px;
        line-height: 1.75;
        color: #c3c7ed;
        white-space: pre;
        overflow: auto;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition:
          opacity 0.3s ease,
          transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .s02-panel.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .s02-response {
        margin-top: 18px;
        border-radius: 14px;
        background: linear-gradient(
          180deg,
          rgba(124, 92, 255, 0.04),
          rgba(12, 13, 34, 0.7)
        );
        border: 1px solid rgba(124, 92, 255, 0.25);
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition:
          max-height 0.5s cubic-bezier(0.7, 0, 0.2, 1),
          opacity 0.35s,
          padding 0.4s;
        padding: 0 18px;
      }
      .s02-response.show {
        max-height: 340px;
        opacity: 1;
        padding: 14px 18px 18px;
      }
      .s02-resp-head {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.12em;
        padding-bottom: 10px;
        border-bottom: 1px dashed rgba(124, 92, 255, 0.2);
        margin-bottom: 10px;
      }
      .s02-resp-status {
        color: #22d3ee;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
      }
      .s02-resp-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 10px #22d3ee;
        animation: pulse 1.6s ease-in-out infinite;
      }
      .s02-resp-time {
        color: #7c5cff;
        font-weight: 600;
      }
      .s02-resp-size {
        color: #5b5e9c;
      }
      .s02-resp-path {
        color: #a5b4fc;
        margin-left: auto;
      }
      .s02-resp-body {
        margin: 0;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        line-height: 1.7;
        color: #c3c7ed;
        white-space: pre;
        min-height: 120px;
      }

      .s02-run-btn {
        cursor: pointer;
        font-family: "JetBrains Mono", monospace;
        letter-spacing: 0.16em;
      }
      .s02-run-btn .s02-run-icn {
        display: inline-block;
        color: #22d3ee;
        font-size: 9px;
        transition: transform 0.3s;
      }
      .s02-run-btn:hover .s02-run-icn {
        transform: scale(1.2);
      }
      .s02-run-btn.running {
        pointer-events: none;
        opacity: 0.7;
      }
      .s02-run-btn.running .s02-run-icn {
        animation: spin-s 1s linear infinite;
      }

      .s02-card {
        transition:
          transform 0.35s,
          border-color 0.35s;
      }
      .s02-card:hover {
        transform: translateY(-4px);
      }

      .s02-feats {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: 520px;
      }
      .s02-feats li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        font-size: 14px;
        color: #c3c7ed;
        line-height: 1.5;
      }
      .s02-feats .check {
        margin-top: 3px;
      }

      /* === TESTIMONIALS === */
      .ts2-section {
        position: relative;
      }
      .ts2-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
      }
      @media (max-width: 768px) {
        .ts2-meta {
          align-items: flex-start;
        }
      }
      .ts2-meta-num {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        font-size: 3rem;
        letter-spacing: -0.04em;
        line-height: 1;
      }
      .ts2-stars {
        display: flex;
        gap: 3px;
        color: #7c5cff;
        font-size: 14px;
        letter-spacing: 1px;
        filter: drop-shadow(0 0 6px #4d4ef2);
      }

      .ts2-stage {
        position: relative;
        padding: 50px 56px 60px;
        border-radius: 24px;
        background: linear-gradient(
          180deg,
          rgba(12, 13, 34, 0.85),
          rgba(6, 8, 20, 0.85)
        );
        border: 1px solid rgba(77, 78, 242, 0.25);
        box-shadow: 0 40px 100px -20px rgba(77, 78, 242, 0.4);
        min-height: 380px;
        overflow: hidden;
      }
      .ts2-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
          140deg,
          rgba(77, 78, 242, 0.6),
          transparent 50%,
          rgba(34, 211, 238, 0.4)
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      .ts2-slide {
        position: absolute;
        inset: 50px 56px 60px;
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.6s ease,
          transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        pointer-events: none;
      }
      .ts2-slide.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        position: relative;
        inset: auto;
      }
      @media (min-width: 1025px) {
        .ts2-stage {
          display: flex;
          gap: 48px;
          align-items: stretch;
          padding-bottom: 96px;
        }
        .ts2-slide.active {
          flex: 1 1 0;
          min-width: 0;
          display: flex;
          flex-direction: column;
        }
        .ts2-slide.active .ts2-author {
          margin-top: auto;
        }
        /* divisória vertical (em gradiente) entre os dois depoimentos,
           centralizada no gap de 48px */
        .ts2-slide.active + .ts2-slide.active::before {
          content: "";
          position: absolute;
          left: -24px;
          top: 0;
          bottom: 0;
          width: 1px;
          background: linear-gradient(
            180deg,
            transparent,
            rgba(77, 78, 242, 0.55) 20%,
            rgba(34, 211, 238, 0.45) 80%,
            transparent
          );
        }
      }
      .ts2-quote-mark {
        position: absolute;
        top: -30px;
        left: -10px;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        font-size: 14rem;
        line-height: 1;
        background: linear-gradient(
          135deg,
          rgba(77, 78, 242, 0.18),
          rgba(124, 92, 255, 0.05)
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        pointer-events: none;
        user-select: none;
      }
      .ts2-quote {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 500;
        font-size: clamp(1.4rem, 2.4vw, 2.1rem);
        line-height: 1.35;
        letter-spacing: -0.015em;
        color: #eef1ff;
        margin: 0 0 40px;
        max-width: 1100px;
      }
      .ts2-quote em {
        font-style: normal;
        background: linear-gradient(135deg, #4d4ef2, #7c5cff, #22d3ee);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }

      .ts2-author {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
      }
      .ts2-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        color: #fff;
        font-size: 18px;
        letter-spacing: 0.04em;
        box-shadow:
          0 0 0 1.5px rgba(255, 255, 255, 0.15) inset,
          0 12px 28px rgba(55, 48, 201, 0.5);
      }
      .ts2-author-name {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 600;
        font-size: 1.05rem;
        color: #eef1ff;
        letter-spacing: -0.01em;
      }
      .ts2-author-role {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #a5b4fc;
        margin-top: 2px;
      }
      .ts2-metric {
        margin-left: auto;
        padding-left: 24px;
        border-left: 1px solid rgba(77, 78, 242, 0.25);
        min-width: 120px;
      }
      .ts2-metric-val {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        font-size: 1.8rem;
        line-height: 1;
        letter-spacing: -0.02em;
      }
      .ts2-metric-lbl {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #5b5e9c;
        margin-top: 4px;
      }

      .ts2-nav {
        position: absolute;
        left: 56px;
        right: 56px;
        bottom: 22px;
        display: flex;
        align-items: center;
        gap: 18px;
        z-index: 3;
      }
      .ts2-nav-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(77, 78, 242, 0.35);
        background: rgba(77, 78, 242, 0.05);
        color: #eef1ff;
        font-size: 16px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s;
      }
      .ts2-nav-btn:hover {
        border-color: #7c5cff;
        color: #7c5cff;
        background: rgba(124, 92, 255, 0.08);
        box-shadow: 0 0 20px rgba(124, 92, 255, 0.3);
      }
      .ts2-dots {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .ts2-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(77, 78, 242, 0.25);
        transition: all 0.3s;
        cursor: pointer;
      }
      .ts2-dots span.active {
        width: 28px;
        border-radius: 4px;
        background: linear-gradient(90deg, #4d4ef2, #7c5cff);
        box-shadow: 0 0 12px rgba(77, 78, 242, 0.6);
      }
      .ts2-progress {
        flex: 1;
        height: 1px;
        background: rgba(77, 78, 242, 0.15);
        position: relative;
        overflow: hidden;
        border-radius: 1px;
      }
      .ts2-progress i {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0%;
        background: linear-gradient(90deg, #4d4ef2, #7c5cff, #22d3ee);
        box-shadow: 0 0 10px #7c5cff;
      }
      @media (max-width: 640px) {
        /* telas pequenas: a barra de progresso quebra para uma linha própria,
           acima dos controles (prev · dots · next) */
        .ts2-nav {
          flex-wrap: wrap;
        }
        .ts2-progress {
          order: -1;
          flex: 1 1 100%;
        }
        /* o nav agora tem 2 linhas (~83px com bottom:22px); reserva espaço no
           fundo do stage para ele não cobrir o conteúdo do slide.
           especificidade extra + !important vencem o override de padding menor */
        .ts2-section .ts2-stage {
          padding-bottom: 100px !important;
        }
      }

      .ts2-thumbs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }
      .ts2-thumb {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid rgba(77, 78, 242, 0.18);
        background: rgba(12, 13, 34, 0.5);
        cursor: pointer;
        transition: all 0.3s;
      }
      .ts2-thumb:hover {
        border-color: rgba(77, 78, 242, 0.4);
        transform: translateY(-3px);
      }
      .ts2-thumb.active {
        border-color: rgba(124, 92, 255, 0.55);
        background: rgba(77, 78, 242, 0.08);
        box-shadow: 0 12px 30px -10px rgba(77, 78, 242, 0.4);
      }
      .ts2-thumb-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        color: #fff;
        font-size: 13px;
        flex: none;
      }
      .ts2-thumb-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .ts2-thumb-name {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 600;
        font-size: 13px;
        color: #eef1ff;
      }
      .ts2-thumb-role {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.1em;
        color: #a5b4fc;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      @media (max-width: 1024px) {
        .ts2-stage {
          padding: 36px 30px 60px;
        }
        .ts2-nav {
          left: 30px;
          right: 30px;
        }
        .ts2-thumbs {
          grid-template-columns: repeat(2, 1fr);
        }
        .ts2-metric {
          margin-left: 0;
          padding-left: 0;
          border-left: 0;
          padding-top: 12px;
          border-top: 1px solid rgba(77, 78, 242, 0.2);
          width: 100%;
        }
      }

      /* === CTA FINAL === */
      .cta-section {
        position: relative;
      }
      .cta-bg-word {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: "Space Grotesk", sans-serif;
        font-weight: 800;
        font-size: clamp(8rem, 22vw, 22rem);
        letter-spacing: -0.06em;
        line-height: 0.85;
        -webkit-text-stroke: 1px rgba(77, 78, 242, 0.12);
        color: transparent;
        pointer-events: none;
        user-select: none;
        white-space: nowrap;
        z-index: 0;
      }

      .cta-mascot-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 1/1;
        max-width: 540px;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cta-mascot-halo {
        position: absolute;
        width: 90%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(77, 78, 242, 0.5) 0%,
          rgba(55, 48, 201, 0.2) 40%,
          transparent 70%
        );
        filter: blur(24px);
        z-index: 0;
        animation: cta-halo 5s ease-in-out infinite;
      }
      @keyframes cta-halo {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.85;
        }
        50% {
          transform: scale(1.1);
          opacity: 1;
        }
      }
      .cta-mascot-figure {
        position: relative;
        width: 90%;
        display: flex;
        justify-content: center;
        margin-left: -100px;
        z-index: 2;
        animation: cta-bob 5.5s ease-in-out infinite;
      }
      .cta-mascot-spot {
        position: absolute;
        left: 50%;
        bottom: 9%;
        transform: translate(-50%, 50%);
        width: 210%;
        height: 145px;
        border-radius: 50%;
        background: radial-gradient(
          ellipse,
          rgba(77, 78, 242, 0.7),
          transparent 70%
        );
        filter: blur(10px);
        z-index: 1;
      }
      .cta-mascot-img {
        position: relative;
        z-index: 2;
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 80px rgba(77, 78, 242, 0.45));
      }
      @keyframes cta-bob {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8px);
        }
      }

      .cta-chip {
        position: absolute;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 999px;
        background: linear-gradient(
          135deg,
          rgba(12, 13, 34, 0.95),
          rgba(6, 8, 20, 0.95)
        );
        border: 1px solid rgba(77, 78, 242, 0.35);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.06em;
        color: #eef1ff;
        box-shadow:
          0 14px 30px -8px rgba(77, 78, 242, 0.5),
          0 0 30px rgba(77, 78, 242, 0.18);
        backdrop-filter: blur(10px);
        white-space: nowrap;
      }
      .cta-chip > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4d4ef2, #7c5cff);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
      }
      .cta-chip-1 {
        top: 8%;
        left: -6%;
        animation: cta-chip-float 4s ease-in-out infinite;
      }
      .cta-chip-2 {
        top: 52%;
        right: -10%;
        animation: cta-chip-float 5s ease-in-out infinite -1.5s;
      }
      .cta-chip-3 {
        bottom: 12%;
        left: -2%;
        animation: cta-chip-float 4.5s ease-in-out infinite -0.8s;
      }
      @keyframes cta-chip-float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      /* === CTA - ajustes só no desktop (>1024px) === */
      @media (min-width: 1025px) {
        /* mascote ampliado; max-width:none vence o preflight do Tailwind
           (img{max-width:100%}) e flex-shrink:0 evita encolher no flex */
        .cta-mascot-img {
          width: 180%;
          max-width: none;
          flex-shrink: 0;
        }
        #orbit-cta {
          z-index: 1;
          transform: scale(1.2);
        }
        .cta-content {
          position: relative;
          z-index: 3;
        }
        .cta-chip {
          z-index: 6;
          font-size: 15px;
          padding: 14px 22px;
          gap: 10px;
        }
        .cta-chip > span {
          width: 24px;
          height: 24px;
          font-size: 13px;
        }
      }

      .cta-mini-form {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 14px;
        max-width: 520px;
        align-items: end;
      }
      .cta-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .cta-field-lbl {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #a5b4fc;
      }
      .cta-field input {
        width: 100%;
        background: rgba(12, 13, 34, 0.7);
        border: 1px solid rgba(77, 78, 242, 0.3);
        border-radius: 12px;
        padding: 14px 18px;
        color: #eef1ff;
        font-size: 15px;
        outline: none;
        transition: all 0.25s;
        font-family: "Inter", sans-serif;
      }
      .cta-field input::placeholder {
        color: #5b5e9c;
      }
      .cta-field input:focus {
        border-color: #7c5cff;
        background: rgba(77, 78, 242, 0.08);
        box-shadow: 0 0 0 4px rgba(77, 78, 242, 0.15);
      }
      .cta-mini-btn {
        padding: 14px 24px !important;
        font-size: 12px !important;
        white-space: nowrap;
      }

      .cta-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.1em;
        color: #a5b4fc;
      }
      .cta-trust span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .cta-trust-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 8px #22d3ee;
      }

      @media (max-width: 1024px) {
        .cta-mini-form {
          grid-template-columns: 1fr;
        }
        /* a coluna do grid não pode dimensionar-se ao mascote (460px), senão a
           coluna inteira transborda à esquerda. minmax(0,1fr) trava a coluna na
           largura do container, daí o wrap de 460px transborda centralizado */
        .cta-section .grid {
          grid-template-columns: minmax(0, 1fr);
        }
        .cta-mascot-wrap {
          /* largura MÍNIMA 460px: encolhe só até 460px (atingido em ~768px) e
             para. Uso `width` (não max-width) p/ poder transbordar em telas
             estreitas - o que passar é cortado pelo overflow-hidden da .cta-section */
          width: clamp(460px, 60vw, 560px) !important;
          max-width: none !important;
          aspect-ratio: auto !important;
          flex-direction: column;
          gap: 16px;
          /* centraliza mesmo quando transborda (margin:auto alinharia à esquerda
             e só transbordaria p/ a direita); justify-self centra na célula do grid */
          margin-inline: 0 !important;
          justify-self: center;
        }

        .cta-mascot-spot {
          left: 50%;
          bottom: 10%;
          transform: translate(-50%, 50%);
          width: 110%;
          height: 50px;
        }

        .cta-mascot-figure {
          margin-left: unset;
          width: 100% !important;
          max-width: none !important;
        }
        .cta-chips-group {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          width: 100%;
        }
        .cta-chip {
          position: static !important;
          display: inline-flex !important;
          margin: 0 !important;
          animation: none !important;
        }
        .cta-chip-1,
        .cta-chip-2,
        .cta-chip-3 {
          top: auto !important;
          left: auto !important;
          right: auto !important;
          bottom: auto !important;
          transform: none !important;
        }
        .cta-bg-word {
          font-size: clamp(6rem, 28vw, 16rem);
        }
      }

      /* === INSIGHTS hover enhancements === */
      .ins-card {
        position: relative;
        overflow: hidden;
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .ins-card:hover {
        transform: translateY(-8px);
      }
      .ins-thumb {
        position: relative;
        overflow: hidden;
        height: 200px;
      }
      .ins-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          circle at 50% 100%,
          rgba(77, 78, 242, 0.4),
          transparent 70%
        );
        opacity: 0;
        transition: opacity 0.4s;
      }
      .ins-card:hover .ins-thumb::after {
        opacity: 1;
      }
      .ins-thumb-shape {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .ins-card:hover .ins-thumb-shape {
        transform: scale(1.08);
      }
      .ins-tag {
        position: absolute;
        top: 14px;
        left: 14px;
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 4px;
        background: rgba(6, 8, 20, 0.7);
        color: #a5b4fc;
        border: 1px solid rgba(77, 78, 242, 0.3);
        backdrop-filter: blur(6px);
        z-index: 2;
      }
      .ins-arrow {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(6, 8, 20, 0.7);
        border: 1px solid rgba(77, 78, 242, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a5b4fc;
        font-size: 14px;
        backdrop-filter: blur(6px);
        z-index: 2;
        transform: translateX(-6px);
        opacity: 0;
        transition: all 0.4s;
      }
      .ins-card:hover .ins-arrow {
        transform: translateX(0);
        opacity: 1;
        color: #7c5cff;
        border-color: #7c5cff;
      }
      .ins-meta {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #5b5e9c;
      }
      .ins-meta i {
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #5b5e9c;
        flex: none;
      }

      /* === NEWSLETTER === */
      .nl-form {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr auto;
        gap: 18px;
        align-items: end;
      }
      .nl-field {
        position: relative;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(77, 78, 242, 0.3);
        transition: border-color 0.3s;
      }
      .nl-field:focus-within {
        border-color: #7c5cff;
      }
      .nl-field-lbl {
        position: absolute;
        left: 0;
        bottom: 8px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #5b5e9c;
        pointer-events: none;
        transition:
          transform 0.3s,
          color 0.3s,
          font-size 0.3s;
      }
      .nl-field input {
        width: 100%;
        background: transparent;
        border: 0;
        padding: 8px 0 6px;
        color: #eef1ff;
        font-size: 15px;
        outline: none;
      }
      .nl-field input:focus + .nl-field-lbl,
      .nl-field input:not(:placeholder-shown) + .nl-field-lbl {
        transform: translateY(-22px);
        font-size: 9px;
        color: #7c5cff;
      }
      @media (max-width: 1024px) {
        .nl-form {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 640px) {
        .nl-form {
          grid-template-columns: 1fr;
        }
      }

      /* === MOBILE BURGER + MENU === */
      .burger {
        display: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(77, 78, 242, 0.3);
        background: rgba(77, 78, 242, 0.05);
        position: relative;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        z-index: 60;
      }
      @media (max-width: 1200px) {
        .burger {
          display: inline-flex;
        }
      }
      .burger:hover {
        border-color: #7c5cff;
        background: rgba(124, 92, 255, 0.08);
        box-shadow: 0 0 20px rgba(77, 78, 242, 0.3);
      }
      .burger-bar {
        display: block;
        width: 18px;
        height: 1.8px;
        background: #eef1ff;
        border-radius: 2px;
        transition:
          transform 0.35s cubic-bezier(0.7, 0, 0.2, 1),
          opacity 0.25s,
          width 0.35s,
          background 0.3s;
      }
      .burger-bar:nth-child(2) {
        width: 14px;
        align-self: flex-end;
        margin-right: 13px;
      }
      .burger-bar:nth-child(3) {
        width: 10px;
      }
      .burger.open {
        border-color: rgba(124, 92, 255, 0.5);
        background: rgba(124, 92, 255, 0.1);
      }
      .burger.open .burger-bar {
        width: 20px;
        background: #fff;
        margin: 0;
      }
      .burger.open .burger-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .burger.open .burger-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .burger.open .burger-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      .mmenu {
        position: fixed;
        inset: 0;
        z-index: 55;
        pointer-events: none;
        visibility: hidden;
        background: rgba(6, 8, 20, 0);
        transition:
          background 0.5s ease,
          visibility 0s linear 0.5s;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      .mmenu.open {
        pointer-events: auto;
        visibility: visible;
        background: rgba(6, 8, 20, 0.97);
        transition:
          background 0.5s ease,
          visibility 0s linear 0s;
      }
      .mmenu-bg {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.6s 0.1s ease;
        overflow: hidden;
      }
      .mmenu.open .mmenu-bg {
        opacity: 1;
        overflow: visible;
      }
      .mmenu-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        pointer-events: none;
      }
      .mmenu-blob-a {
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, #3730c9, transparent 70%);
        top: -100px;
        right: -100px;
        animation: mmenu-float 8s ease-in-out infinite;
      }
      .mmenu-blob-b {
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, #7c5cff, transparent 70%);
        bottom: -80px;
        left: -80px;
        animation: mmenu-float 10s ease-in-out infinite -2s;
      }
      .mmenu-blob-c {
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, #22d3ee, transparent 70%);
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.35;
        animation: mmenu-float 12s ease-in-out infinite -4s;
      }
      @keyframes mmenu-float {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        50% {
          transform: translate(20px, -30px) scale(1.05);
        }
      }
      .mmenu-blob-c {
        transform-origin: center;
      }
      .mmenu-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(77, 78, 242, 0.08) 1px, transparent 1px),
          linear-gradient(90deg, rgba(77, 78, 242, 0.08) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(
          ellipse at center,
          #000 0%,
          transparent 75%
        );
        -webkit-mask-image: radial-gradient(
          ellipse at center,
          #000 0%,
          transparent 75%
        );
      }

      .mmenu-bigword {
        position: absolute;
        inset: auto 0 -50px 0;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 800;
        font-size: clamp(8rem, 28vw, 18rem);
        line-height: 0.85;
        letter-spacing: -0.06em;
        -webkit-text-stroke: 1px rgba(77, 78, 242, 0.1);
        color: transparent;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(80px);
        transition:
          opacity 0.8s 0.15s,
          transform 0.8s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow: hidden;
        display: flex;
      }
      .mmenu.open .mmenu-bigword {
        opacity: 1;
        transform: translateY(0);
      }
      .mmenu-bigword span {
        display: inline-block;
        padding-right: 0.3em;
      }
      @keyframes mmenu-marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      .mmenu-inner {
        position: relative;
        z-index: 2;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        padding: 24px 24px 30px;
        max-width: 640px;
        margin: 0 auto;
      }
      .mmenu-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 30px;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.5s 0.25s;
        position: sticky;
        top: 0;
        padding: 20px 0 14px;
        margin-top: -20px;
        z-index: 5;
      }
      .mmenu.open .mmenu-head {
        opacity: 1;
        transform: translateY(0);
      }
      .mmenu-live {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.22em;
        color: #22d3ee;
        padding: 5px 10px;
        border: 1px solid rgba(34, 211, 238, 0.25);
        border-radius: 999px;
        background: rgba(34, 211, 238, 0.06);
      }
      .mmenu-live-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 8px #22d3ee;
        animation: pulse 1.6s ease-in-out infinite;
      }

      .mmenu-close {
        margin-left: auto;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(77, 78, 242, 0.3);
        background: rgba(77, 78, 242, 0.05);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        flex: none;
      }
      .mmenu-close:hover {
        border-color: #7c5cff;
        background: rgba(124, 92, 255, 0.1);
        box-shadow: 0 0 24px rgba(124, 92, 255, 0.4);
        transform: rotate(90deg);
      }
      .mmenu-close span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 1.8px;
        background: #eef1ff;
        border-radius: 2px;
        transition: background 0.3s;
      }
      .mmenu-close span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      .mmenu-close span:nth-child(2) {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      .mmenu-close:hover span {
        background: #7c5cff;
      }

      .mmenu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
      }
      .mmenu-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        padding: 18px 18px 18px 4px;
        border-bottom: 1px solid rgba(77, 78, 242, 0.1);
        cursor: pointer;
        position: relative;
        opacity: 0;
        transform: translateX(-30px);
        transition:
          opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
          transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow: hidden;
      }
      .mmenu-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleX(0);
        transform-origin: left;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          rgba(77, 78, 242, 0.18),
          rgba(124, 92, 255, 0.04) 60%,
          transparent
        );
        border-radius: 14px;
        transition: transform 0.4s cubic-bezier(0.4, 1.2, 0.4, 1);
        z-index: -1;
      }
      .mmenu-item:hover::before,
      .mmenu-item:active::before {
        transform: translateY(-50%) scaleX(1);
      }
      .mmenu.open .mmenu-item {
        opacity: 1;
        transform: translateX(0);
      }
      .mmenu.open .mmenu-item:nth-child(1) {
        transition-delay: 0.3s;
      }
      .mmenu.open .mmenu-item:nth-child(2) {
        transition-delay: 0.38s;
      }
      .mmenu.open .mmenu-item:nth-child(3) {
        transition-delay: 0.46s;
      }
      .mmenu.open .mmenu-item:nth-child(4) {
        transition-delay: 0.54s;
      }
      .mmenu.open .mmenu-item:nth-child(5) {
        transition-delay: 0.62s;
      }
      .mmenu-num {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        color: #5b5e9c;
        background: linear-gradient(135deg, #4d4ef2, #7c5cff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
      }
      .mmenu-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
      }
      .mmenu-label {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        font-size: clamp(1.6rem, 6vw, 2.2rem);
        letter-spacing: -0.025em;
        line-height: 1;
        color: #eef1ff;
        transition:
          color 0.3s,
          transform 0.3s;
      }
      .mmenu-meta {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #a5b4fc;
      }
      .mmenu-arrow {
        font-size: 1.2rem;
        color: #a5b4fc;
        transform: translateX(-10px);
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .mmenu-item:hover .mmenu-arrow,
      .mmenu-item:active .mmenu-arrow {
        transform: translateX(0);
        opacity: 1;
        color: #7c5cff;
      }
      .mmenu-item:hover .mmenu-label {
        transform: translateX(6px);
        background: linear-gradient(90deg, #4d4ef2, #7c5cff, #22d3ee);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
      }

      .mmenu-cta {
        display: flex;
        gap: 12px;
        margin: 30px 0 22px;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .mmenu.open .mmenu-cta {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.72s;
      }
      .mmenu-cta-ghost,
      .mmenu-cta-pill {
        flex: 1;
        justify-content: center;
        padding: 14px 18px;
      }

      .mmenu-foot {
        padding-top: 18px;
        border-top: 1px solid rgba(77, 78, 242, 0.12);
        opacity: 0;
        transition: opacity 0.5s 0.82s;
      }
      .mmenu.open .mmenu-foot {
        opacity: 1;
      }
      .mmenu-foot-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .mmenu-foot-socials {
        display: flex;
        gap: 14px;
        color: #a5b4fc;
        font-size: 14px;
      }
      .mmenu-foot-socials a {
        transition: color 0.25s;
      }
      .mmenu-foot-socials a:hover {
        color: #7c5cff;
      }

      body.mmenu-open {
        overflow: hidden;
      }
      /* com o menu aberto, eleva a barra do topo (logo + burger→X) acima do
         overlay para que o próprio burger feche o menu */
      body.mmenu-open #nav {
        z-index: 60;
        background: rgba(6, 8, 20, 0.94) !important;
      }
      body.mmenu-open .mmenu-inner {
        padding-top: 100px;
      }

      /* =====================================================
         RESPONSIVE - 100% até 320px
         =====================================================
         Override agressivo para viewports estreitos. Toca apenas
         em propriedades de layout/escala; tipografia, cores e
         estrutura permanecem do design original.
      */
      html,
      body {
        overflow-x: hidden;
        max-width: 100%;
      }

      @media (max-width: 1024px) {
        .blob {
          filter: blur(60px);
          opacity: 0.5 !important;
        }
        .cursor-dot,
        .cursor-ring {
          display: none !important;
        }
        #tarifas .glow-strong {
          transform: none !important;
        }
      }

      @media (max-width: 760px) {
        .max-w-\[1680px\] {
          padding-left: 18px !important;
          padding-right: 18px !important;
        }

        section.py-32,
        section.py-40,
        section.py-24,
        section.py-20 {
          padding-top: 64px !important;
          padding-bottom: 64px !important;
        }

        .h-display {
          font-size: clamp(28px, 9vw, 44px) !important;
          line-height: 1.05 !important;
        }
        .h-big {
          font-size: clamp(30px, 10vw, 46px) !important;
        }
        .h-med {
          font-size: clamp(22px, 7vw, 32px) !important;
        }
        .eyebrow {
          font-size: 10px !important;
          letter-spacing: 0.16em !important;
        }

        h1.reveal-line,
        h1 {
          font-size: clamp(34px, 11vw, 56px) !important;
          line-height: 1.05 !important;
        }

        #nav .max-w-\[1680px\] {
          padding-top: 12px !important;
          padding-bottom: 12px !important;
        }
        #nav .pill {
          padding: 10px 14px !important;
          font-size: 11px !important;
        }
        #nav a span.font-display {
          font-size: 16px !important;
        }

        .grid.grid-cols-2,
        .grid.grid-cols-3,
        .grid.md\:grid-cols-5,
        .grid.md\:grid-cols-3,
        .grid.md\:grid-cols-2 {
          grid-template-columns: 1fr 1fr !important;
        }
        .grid.lg\:grid-cols-2,
        .grid.lg\:grid-cols-3,
        .grid.lg\:grid-cols-4 {
          grid-template-columns: 1fr !important;
        }

        footer .grid.grid-cols-2.md\:grid-cols-5 {
          grid-template-columns: 1fr 1fr !important;
          gap: 28px !important;
        }
        #preloader .plogo {
          font-size: 36px !important;
        }
        #preloader .plogo-mark {
          --ppl-size: 64px !important;
        }

        .hero-stage {
          min-height: auto !important;
          padding: 100px 0 60px !important;
        }
        .mascot-img,
        .cta-mascot-img {
          max-width: 90vw !important;
          height: auto !important;
        }
        .mascot-figure,
        .cta-mascot-figure {
          width: 100% !important;
          margin: 0 auto !important;
        }
        .mascot-figure {
          max-width: 320px !important;
        }
        .orbit {
          transform: scale(0.7);
        }

        .cta-bg-word,
        .ts-bigword,
        .mmenu-bigword,
        .testimonial-bigword {
          display: none !important;
        }

        .cta-chip {
          position: static !important;
          display: inline-flex !important;
          margin: 4px !important;
        }
        .cta-chip-1,
        .cta-chip-2,
        .cta-chip-3 {
          transform: none !important;
        }

        pre,
        code,
        .tk,
        .tk-code {
          font-size: 11px !important;
          line-height: 1.45 !important;
          overflow-x: auto !important;
          max-width: 100% !important;
          white-space: pre-wrap !important;
          word-break: break-word !important;
        }

        /* seção 02 - janela de código responsiva: cabe na tela; o código rola
           só dentro do bloco e as abas rolam se não couberem (sem estourar) */
        .s02-section .grid > * {
          min-width: 0;
        }
        .s02-tabs {
          overflow-x: auto;
          scrollbar-width: none;
        }
        .s02-tabs::-webkit-scrollbar {
          display: none;
        }
        .s02-tab {
          padding: 12px 12px;
          font-size: 11px;
        }
        .s02-tab-indicator {
          bottom: 0;
        }
        .s02-panel {
          white-space: pre !important;
          overflow: auto !important;
        }

        .faq-item summary {
          padding: 16px 18px !important;
          gap: 12px !important;
        }
        .faq-item summary .faq-q {
          font-size: 14.5px !important;
        }
        .faq-a {
          padding: 0 18px 18px 18px !important;
          font-size: 14px !important;
        }
        .faq-num {
          font-size: 10px !important;
          padding: 4px 8px !important;
        }

        .ts2-thumbs {
          grid-template-columns: repeat(2, 1fr) !important;
        }
        .ts2-stage {
          padding: 28px 22px 50px !important;
        }
        .ts2-quote {
          font-size: 18px !important;
          line-height: 1.45 !important;
        }

        .cta-section {
          padding: 80px 0 !important;
        }
        .cta-mini-form {
          grid-template-columns: 1fr !important;
        }
        .cta-trust {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 6px !important;
        }

        .grid.lg\:grid-cols-3.gap-6 {
          gap: 20px !important;
        }

        #tabs {
          flex-wrap: wrap !important;
          gap: 6px !important;
        }
        #tabs .tab-btn {
          font-size: 10px !important;
          padding: 6px 10px !important;
        }

        .s01-stats {
          grid-template-columns: 1fr 1fr !important;
        }
        .s01-stream-item {
          font-size: 11px !important;
        }

        .dash {
          padding: 18px !important;
        }

        footer .pp-logo-mark[style*="64px"] {
          --ppl-size: 40px !important;
        }
      }

      @media (max-width: 480px) {
        .max-w-\[1680px\] {
          padding-left: 14px !important;
          padding-right: 14px !important;
        }
        section.py-32,
        section.py-40,
        section.py-24,
        section.py-20 {
          padding-top: 48px !important;
          padding-bottom: 48px !important;
        }
        .h-display,
        .h-big {
          font-size: clamp(26px, 8.5vw, 38px) !important;
        }

        .grid.grid-cols-2,
        .grid.grid-cols-3,
        .grid.md\:grid-cols-5,
        .grid.md\:grid-cols-3,
        .grid.md\:grid-cols-2,
        footer .grid.grid-cols-2.md\:grid-cols-5 {
          grid-template-columns: 1fr !important;
        }
        .ts2-thumbs {
          grid-template-columns: 1fr !important;
        }
        .s01-stats {
          grid-template-columns: 1fr !important;
        }
        .grid.grid-cols-3.gap-6 {
          grid-template-columns: 1fr 1fr !important;
        }

        .grid.grid-cols-3.gap-6.max-w-lg {
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 12px !important;
        }
        .grid.grid-cols-3.gap-6.max-w-lg .font-display {
          font-size: 20px !important;
        }

        #nav a span.font-display {
          display: none !important;
        }
        #nav .pill {
          padding: 8px 12px !important;
          font-size: 10px !important;
          letter-spacing: 0.1em !important;
        }
        #nav .pill .arrow {
          display: none !important;
        }

        #preloader {
          gap: 22px !important;
          padding: 0 20px !important;
        }
        #preloader .plogo {
          font-size: 30px !important;
        }
        #preloader .plogo-mark {
          --ppl-size: 56px !important;
        }
        #preloader .pbar {
          width: 70vw !important;
        }

        .mascot-img,
        .cta-mascot-img {
          max-width: 78vw !important;
        }
        .orbit {
          display: none !important;
        }

        .faq-item summary {
          padding: 14px 14px !important;
          gap: 10px !important;
        }
        .faq-item summary .faq-q {
          font-size: 13.5px !important;
          line-height: 1.3 !important;
        }
        .faq-a {
          padding: 0 14px 16px 14px !important;
          font-size: 13.5px !important;
        }

        .grid.lg\:grid-cols-3 {
          gap: 16px !important;
        }

        .pill,
        .ghost {
          font-size: 11px !important;
          padding: 10px 16px !important;
        }
        .pill .arrow,
        .ghost .arrow {
          margin-left: 4px !important;
        }

        /* mantém o MESMO layout das resoluções maiores: [nº] [texto] [seta]
           alinhado à esquerda. (Antes virava "1fr auto" e, como o seletor que
           escondia o número estava errado - .num em vez de .mmenu-num -, o
           número ocupava a coluna larga e empurrava o texto para a direita.) */
        .mmenu-cta {
          flex-direction: column;
        }

        footer .pt-8.border-t {
          gap: 16px !important;
          padding-top: 22px !important;
        }
        footer .font-mono.text-\[11px\] {
          font-size: 9.5px !important;
          letter-spacing: 0.14em !important;
        }
      }

      @media (max-width: 380px) {
        .max-w-\[1680px\] {
          padding-left: 12px !important;
          padding-right: 12px !important;
        }
        .h-display,
        .h-big {
          font-size: clamp(24px, 8vw, 32px) !important;
          line-height: 1.08 !important;
        }
        h1.reveal-line,
        h1 {
          font-size: clamp(28px, 9.5vw, 42px) !important;
        }

        #nav .max-w-\[1680px\] {
          padding-left: 14px !important;
          padding-right: 14px !important;
        }
        #nav .pill {
          padding: 7px 10px !important;
          font-size: 9.5px !important;
        }
        #nav .pp-logo-mark {
          --ppl-size: 26px !important;
        }

        section.py-32,
        section.py-40 {
          padding-top: 40px !important;
          padding-bottom: 40px !important;
        }

        #preloader .plogo {
          font-size: 26px !important;
        }
        #preloader .plogo-mark {
          --ppl-size: 48px !important;
        }
        #preloader .pbar {
          width: 220px !important;
        }
        #preloader .pct {
          font-size: 12px !important;
        }

        .mascot-img,
        .cta-mascot-img {
          max-width: 84vw !important;
        }

        .eyebrow {
          font-size: 9px !important;
          letter-spacing: 0.14em !important;
        }

        .gap-10 {
          gap: 24px !important;
        }
        .gap-16 {
          gap: 32px !important;
        }
        .gap-20 {
          gap: 36px !important;
        }

        .footer-v2-helper,
        .blob {
          opacity: 0.25 !important;
        }
      }

      /* === HERO: abaixo de 760px mantém o MESMO padrão de ≤lg (sem reajustar
         tamanho de texto/mascote nem padding). O que não couber é simplesmente
         cortado pelo overflow-hidden da .hero-wrap. Seletores específicos +
         !important vencem os overrides genéricos (.h-display, h1, .mascot-img…)
         dos blocos 760/480/380. === */
      @media (max-width: 760px) {
        .hero-stage .hero-word-left {
          font-size: 8rem !important;
          line-height: 0.85 !important;
        }
        .hero-ring .hero-word-right {
          font-size: 9.6rem !important;
        }
        .hero-wrap .hero-stage {
          min-height: auto !important;
          padding: 30px 0 20px !important;
        }
        #mascot-hero .mascot-figure {
          max-width: none !important;
          width: auto !important;
          height: 100% !important;
          margin: 0 !important;
        }
        #mascot-hero .mascot-img {
          max-width: none !important;
          width: 100% !important;
          height: 100% !important;
        }
        #orbit-hero {
          transform: none !important;
        }
      }

      /* abaixo de 425px: leve redução do PUSHIN/PAY (vem depois do override ≤760,
         mesma especificidade + !important, então vence) */
      @media (max-width: 420px) {
        .hero-stage .hero-word-left {
          font-size: 6rem !important;
        }
        .hero-ring .hero-word-right {
          font-size: 7.2rem !important;
        }

        .hero-ring {
          width: 300px;
          height: 300px;
          transform: translateY(-200px);
        }
        /* empurra todo o mascote (+ halo/órbita/sombra) mais para a direita.
           sobrescreve o translateX(clamp(...)) do bloco ≤1024 por vir depois */
      }

      @media (max-width: 430px) {
        .mascot-stage {
          transform: translateX(130px);
        }
      }

      /* CTA: tira os caps de vw (90/78/84vw) da imagem do mascote p/ ela
         acompanhar o wrap (mín 460px) abaixo de 760px; o excedente é cortado
         pelo overflow-hidden da .cta-section */
      @media (max-width: 1024px) {
        .cta-mascot-img {
          max-width: none !important;
        }
      }

/* === PERFORMANCE: durante o scroll, desliga backdrop-filter (o re-borrão por
   frame, sobretudo da navbar sobre seções com imagens como Insights/Cases, era
   o maior gargalo). A navbar fica mais opaca p/ não ficar transparente em
   movimento. O efeito de vidro volta assim que o scroll para - imperceptível
   enquanto se move. Toggle feito por JS via classe body.is-scrolling. === */
body.is-scrolling *,
body.is-scrolling *::before,
body.is-scrolling *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.is-scrolling #nav {
  background: rgba(6, 8, 20, 0.92) !important;
}