/* ==========================================================================
   REAL CONCEPT — MAIN STYLESHEET
   Clean Code Architecture & Design System
   --------------------------------------------------------------------------
   Table of Contents:
   01. DESIGN TOKENS & CSS VARIABLES (:root)
   02. RESET & BASE TYPOGRAPHY
   03. 3D STAGE & SMOOTH SCROLL ENGINE
   04. HEADER & NAVIGATION MENU
   05. BUTTONS & UI COMPONENTS
   06. SECTION 01: HERO & VIDEO BACKGROUND
   07. SECTION 02: MANIFESTO
   08. SECTION 03: MERCADO & DIAGNÓSTICO
   09. SECTION 04: SOLUÇÕES & SERVIÇOS
   10. SECTION 05: REAL TECH & ESPECIALIDADES
   11. SECTION 06: PORTFÓLIO & FLAGSHIP CASES
   12. SECTION 07: MODELOS DE CONTRATAÇÃO
   13. SECTION 08: PROCESSO DE ENTREGA
   14. SECTION 09: SOBRE NÓS & CAROUSEL EQUIPE
   15. SECTION 10: CONTATO & FORMULÁRIO
   16. FOOTER
   17. RESPONSIVE BREAKPOINTS & ACCESSIBILITY
   ========================================================================== */

:root {
      --ink: #07061A;
      --ink-2: #0D0B26;
      --ink-3: #151236;
      --line: rgba(255, 255, 255, .09);
      --line-2: rgba(255, 255, 255, .16);
      --text: #F4F3FF;
      --muted: #ABA8CC;
      --dim: #7A779E;
      --blue: #1E11D6;
      --purple: #8800B2;
      --pink: #FF0261;
      --teal: #1FB3DD;
      --rose: #EE5F9C;
      --grad: linear-gradient(115deg, var(--blue) 0%, var(--purple) 52%, var(--pink) 100%);
      --grad-full: linear-gradient(115deg, var(--teal) 0%, var(--blue) 25%, var(--purple) 55%, var(--pink) 85%, var(--rose) 100%);
      --radius: 20px;
      --wrap: 1340px;
      --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      overflow: hidden !important;
      width: 100%;
      height: 100%;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    *::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important
    }

    .svg-sprite-defs {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
      pointer-events: none;
    }

    body {
      background: var(--ink);
      color: var(--text);
      font-family: var(--font);
      font-size: 17px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow: hidden !important;
      width: 100%;
      height: 100%;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important
    }

    img,
    svg {
      display: block
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      color: inherit
    }

    .wrap {
      width: 100%;
      max-width: var(--wrap);
      margin: 0 auto;
      padding: 0 24px
    }

    .wrap>* {
      min-width: 0
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0)
    }

    .grad-text {
      background: linear-gradient(100deg, #3FA9F5 0%, #5B4BFF 30%, #B23BE0 62%, #FF2E7E 100%);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 2px;
      border-radius: 2px;
      background: var(--grad)
    }

    .num {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .18em;
      color: var(--dim)
    }

    h1,
    h2,
    h3 {
      font-weight: 800;
      letter-spacing: -.025em;
      line-height: 1.08
    }

    h2 {
      font-size: clamp(30px, 4.2vw, 52px)
    }

    h3 {
      font-size: 21px;
      letter-spacing: -.01em;
      line-height: 1.25
    }

    p {
      color: var(--muted)
    }

    .lead {
      font-size: clamp(17px, 1.5vw, 20px);
      color: #E2E0FA;
      font-weight: 700
    }

    .sec-head {
      max-width: 860px;
      margin-bottom: clamp(18px, 2.6vh, 32px);
    }

    .sec-head h2 {
      margin-top: 18px;
      margin-bottom: clamp(10px, 1.4vh, 16px);
    }

    .sec-head p.lead {
      margin-bottom: clamp(8px, 1.2vh, 14px);
      line-height: 1.5;
    }

    .sec-head p+p {
      margin-top: 8px;
      line-height: 1.55;
    }

    /* ==============================================================
   PALCO 3D DE ZOOM PONTO A PONTO (SEM NENHUMA BARRA DE ROLAGEM)
   ============================================================== */
    #zoom-stage {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      perspective: 1200px;
      perspective-origin: 50% 50%;
      overflow: hidden;
      z-index: 5;
      background: var(--ink)
    }

    #zoom-grid {
      display: none !important;
    }

    #zoom-stars {
      display: none !important;
      background: none !important;
    }

    #zoom-viewport {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      pointer-events: none;
      z-index: 1;
      overflow: visible !important
    }

    /* ==============================================================
   ENQUADRAMENTO EXATO DO TAMANHO DA TELA (100vh / 100vw)
   ============================================================== */
    .zoom-section,
    section.zoom-section,
    footer.zoom-section {
      position: absolute !important;
      inset: 0 !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100svh !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      padding: 0 !important;
      margin: 0 !important;
      max-width: none !important;
      transform-origin: 50% 50% !important;
      transform-style: preserve-3d;
      will-change: transform, opacity;
      opacity: 0;
      visibility: hidden;
      pointer-events: none !important;
      z-index: 1 !important;
      overflow: visible !important;
    }

    .zoom-section:not(.is-active),
    .zoom-section:not(.is-active) * {
      pointer-events: none !important;
      z-index: 1 !important;
    }

    .zoom-section.is-active {
      visibility: visible !important;
      pointer-events: auto !important;
      z-index: 100 !important;
    }

    .zoom-section>.wrap,
    .zoom-section>div.wrap {
      width: 100%;
      max-width: var(--wrap);
      margin: auto !important;
      position: relative;
      box-sizing: border-box;
      padding: clamp(62px, 7.5vh, 76px) 24px clamp(14px, 2vh, 22px);
      overflow: visible !important;
      max-height: none !important;
    }

    .zoom-section>.wrap:not(.hero-grid):not(.manifesto-grid):not(.about-grid):not(.final-grid) {
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .hero-grid,
    .manifesto-grid,
    .about-grid,
    .final-grid {
      display: grid !important;
      align-items: center;
      align-content: center
    }

    .stagger-elem {
      will-change: transform, opacity, filter;
      transform-style: preserve-3d;
      transform-origin: 50% 50%;
      transition: none !important
    }

    .zoom-section .rv {
      transition: none !important
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 24px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 14.5px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
      white-space: nowrap
    }

    .btn svg {
      width: 16px;
      height: 16px;
      transition: transform .25s
    }

    .btn:hover svg {
      transform: translateX(3px)
    }

    .btn-primary {
      background: var(--grad);
      color: #fff;
      box-shadow: 0 10px 34px -10px rgba(255, 2, 97, .55)
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 44px -10px rgba(255, 2, 97, .7)
    }

    .btn-ghost {
      border-color: var(--line-2);
      background: rgba(255, 255, 255, .03)
    }

    .btn-ghost:hover {
      border-color: rgba(255, 255, 255, .4);
      background: rgba(255, 255, 255, .07)
    }

    .link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 14px;
      color: #fff
    }

    .link svg {
      width: 15px;
      height: 15px;
      transition: transform .25s
    }

    .link:hover svg {
      transform: translateX(4px)
    }

    .link span {
      background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
      transition: background-size .3s
    }

    .link:hover span {
      background-size: 100% 1px
    }

    :focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
      border-radius: 6px
    }

    /* Header: 100% invisível / transparente em todas as abas e seções */
    .header,
    .header.scrolled {
      position: fixed;
      inset: 0 0 auto;
      z-index: 50;
      background: transparent !important;
      border: none !important;
      border-bottom: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      pointer-events: none
    }

    .header .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
      gap: 20px;
      pointer-events: auto
    }

    .logo {
      display: flex;
      align-items: center;
      position: relative
    }

    .logo-stack {
      position: relative;
      display: flex;
      align-items: center;
      height: 36px
    }

    .logo-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1)
    }

    .logo-rc {
      opacity: 1;
      transform: translateY(0)
    }

    .logo-rt {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(calc(-50% + 8px));
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
      display: flex;
      align-items: center
    }

    .logo-rt-img {
      height: 36px;
      width: auto;
      display: block;
      filter: drop-shadow(0 0 16px rgba(16, 183, 216, .45))
    }

    body.theme-realtech .logo-rc {
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none
    }

    body.theme-realtech .logo-rt {
      opacity: 1;
      transform: translateY(-50%);
      pointer-events: auto
    }

    .logo .sym {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      display: block
    }

    .logo .wm {
      height: 19px;
      width: auto;
      aspect-ratio: 414 / 70;
      fill: #fff;
      overflow: visible;
      flex-shrink: 0;
      display: block
    }

    .nav {
      display: flex;
      gap: clamp(10px, 1.25vw, 20px);
      font-size: clamp(12.5px, 0.92vw, 14px);
      font-weight: 600;
      white-space: nowrap;
    }

    .nav a {
      color: #D5D3EE;
      position: relative;
      padding: 6px 0
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      border-radius: 2px;
      background: var(--grad);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s
    }

    .nav a:hover {
      color: #fff
    }

    .nav a:hover::after {
      transform: scaleX(1)
    }

    .nav a.active {
      color: #fff
    }

    .nav a.active::after {
      transform: scaleX(1)
    }

    .header .btn {
      padding: 9px 18px;
      font-size: 13.5px
    }

    .burger {
      display: none;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid var(--line-2);
      background: transparent;
      cursor: pointer;
      place-items: center
    }

    .burger span {
      display: block;
      width: 18px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      position: relative;
      transition: transform .3s
    }

    .burger span::before,
    .burger span::after {
      content: "";
      position: absolute;
      left: 0;
      width: 18px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: transform .3s, top .3s
    }

    .burger span::before {
      top: -6px
    }

    .burger span::after {
      top: 6px
    }

    .menu-open .burger span {
      background: transparent
    }

    .menu-open .burger span::before {
      top: 0;
      transform: rotate(45deg)
    }

    .menu-open .burger span::after {
      top: 0;
      transform: rotate(-45deg)
    }

    /* Top Scroll Reading Progress */
    #scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: var(--grad-full);
      z-index: 9999;
      box-shadow: none;
      pointer-events: none;
      transition: width .05s ease-out
    }

    /* ==============================================================
       NAVEGAÇÃO LATERAL: LINHA COM BOLINHAS (STAGE NAV)
       ============================================================== */
    .stage-nav {
      position: fixed;
      right: clamp(14px, 1.8vw, 26px);
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      pointer-events: auto;
      user-select: none;
      transition: opacity .4s ease;
    }

    .stage-nav-counter {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      color: #9BB4D6;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(7, 6, 26, .85);
      border: 1px solid rgba(255, 255, 255, .12);
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin-bottom: 2px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: background .4s, border-color .4s, color .4s;
    }

    body.theme-realtech .stage-nav-counter {
      background: rgba(4, 12, 34, .9);
      border-color: rgba(0, 229, 255, .25);
    }

    .stage-nav-counter .sn-cur {
      color: #fff;
    }

    body.theme-realtech .stage-nav-counter .sn-cur {
      color: #00E5FF;
    }

    .stage-nav-counter .sn-sep {
      opacity: .4;
      margin: 0 1px;
    }

    .stage-nav-counter .sn-tot {
      opacity: .6;
    }

    .stage-nav-rail {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 0;
    }

    /* Linha base vertical (conecta todas as bolinhas) */
    .stage-nav-track {
      position: absolute;
      top: 14px;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      background: rgba(255, 255, 255, .12);
      border-radius: 2px;
      z-index: 1;
      pointer-events: none;
    }

    body.theme-realtech .stage-nav-track {
      background: rgba(0, 180, 255, .15);
    }

    /* Linha de progresso preenchida (mostra o que já foi percorrido) */
    .stage-nav-progress {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: linear-gradient(180deg, var(--teal), var(--pink));
      border-radius: 2px;
      transition: height .15s ease-out;
    }

    body.theme-realtech .stage-nav-progress {
      background: linear-gradient(180deg, #0052D4, #00E5FF) !important;
    }

    .stage-nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(9px, 1.4vh, 15px);
      position: relative;
      z-index: 2;
    }

    .stage-nav-item {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .stage-nav-dot {
      background: none;
      border: none;
      padding: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      outline: none;
      color: inherit;
    }

    .stage-nav-dot:focus-visible .stage-nav-bullet {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
    }

    /* Bolinha padrão (quais faltam) */
    .stage-nav-bullet {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      border: 1.5px solid rgba(255, 255, 255, .4);
      transition: transform .28s cubic-bezier(.16, 1, .3, 1), background .28s ease, border-color .28s ease, box-shadow .28s ease, opacity .28s ease;
      display: block;
    }

    body.theme-realtech .stage-nav-bullet {
      background: rgba(0, 180, 255, .15);
      border-color: rgba(0, 229, 255, .35);
    }

    /* Áreas concluídas / passadas ("as que tem") */
    .stage-nav-dot.is-passed .stage-nav-bullet {
      background: #FFFFFF;
      border-color: #FFFFFF;
      opacity: .85;
      transform: scale(.92);
    }

    body.theme-realtech .stage-nav-dot.is-passed .stage-nav-bullet {
      background: #00E5FF;
      border-color: #00E5FF;
      opacity: .95;
    }

    /* Área atual ativa */
    .stage-nav-dot.is-active .stage-nav-bullet {
      width: 10px;
      height: 10px;
      background: #FFFFFF;
      border-color: var(--pink);
      transform: scale(1.15);
      box-shadow: 0 0 8px rgba(255, 2, 97, .7);
    }

    body.theme-realtech .stage-nav-dot.is-active .stage-nav-bullet {
      background: #FFFFFF;
      border-color: #00E5FF;
      box-shadow: 0 0 8px rgba(0, 229, 255, .8);
    }

    /* Hover na bolinha */
    .stage-nav-dot:hover .stage-nav-bullet {
      transform: scale(1.35);
      border-color: #fff;
      background: #fff;
    }

    body.theme-realtech .stage-nav-dot:hover .stage-nav-bullet {
      border-color: #00E5FF;
      background: #00E5FF;
    }

    /* Tooltip flutuante com número e nome da área */
    .stage-nav-tooltip {
      position: absolute;
      right: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1), visibility .2s;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border-radius: 8px;
      background: rgba(7, 6, 26, .94);
      border: 1px solid rgba(255, 255, 255, .16);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, .6);
      white-space: nowrap;
      font-size: 11px;
      font-weight: 600;
      color: #fff;
    }

    .stage-nav-tooltip::after {
      content: "";
      position: absolute;
      right: -4px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
      width: 7px;
      height: 7px;
      background: inherit;
      border-right: inherit;
      border-top: inherit;
    }

    body.theme-realtech .stage-nav-tooltip {
      background: rgba(4, 12, 34, .95);
      border-color: rgba(0, 229, 255, .3);
    }

    .stage-nav-dot:hover .stage-nav-tooltip,
    .stage-nav-dot:focus-visible .stage-nav-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(0);
    }

    .snt-num {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--teal);
    }

    body.theme-realtech .snt-num {
      color: #00E5FF;
    }

    .snt-title {
      color: #F0F4FF;
      font-size: 11.5px;
    }

    @media (max-width: 860px) {
      .stage-nav {
        display: none !important;
      }
    }

    /* Cards & Base Styles */
    .card {
      position: relative;
      background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: transform .35s, border-color .35s, background .35s
    }

    .card::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: var(--grad);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .35s;
      pointer-events: none
    }

    .card:hover {
      transform: translateY(-4px);
      background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02))
    }

    .card:hover::before {
      opacity: 1
    }

    /* 01 HERO */
    .hero {
      isolation: isolate;
      position: relative;
      overflow: hidden;
      background: var(--ink)
    }

    .hero-video-wrap {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 0;
      pointer-events: none
    }

    .hero-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center right;
      filter: brightness(0.64) contrast(1.08) blur(2px);
      transform: scale(1.05);
      display: block;
    }

    .hero-video-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background:
        linear-gradient(90deg, rgba(7, 6, 26, .88) 0%, rgba(7, 6, 26, .72) 42%, rgba(7, 6, 26, .32) 75%, rgba(7, 6, 26, .55) 100%),
        linear-gradient(180deg, rgba(7, 6, 26, .65) 0%, transparent 18%, transparent 75%, rgba(7, 6, 26, .95) 100%);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      width: 100%;
      position: relative;
      z-index: 2
    }

    .hero-content {
      max-width: clamp(540px, 58vw, 740px)
    }

    .hero h1 {
      font-size: clamp(30px, 4vw, 56px);
      margin: clamp(12px, 1.8vh, 20px) 0;
      letter-spacing: -.035em
    }

    .hero .lead {
      max-width: 560px
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: clamp(16px, 2.4vh, 28px)
    }

    /* 02 MANIFESTO */
    .manifesto {
      background: transparent !important;
    }

    .manifesto-content-spacious {
      width: 100%;
      max-width: 1220px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: clamp(14px, 2.2vh, 26px);
      text-align: left;
    }

    .manifesto-head {
      max-width: 1000px;
    }

    .manifesto-head h2 {
      font-size: clamp(28px, 3.2vw, 42px);
      line-height: 1.2;
      margin-top: 8px;
      margin-bottom: 0;
      color: #fff;
    }

    .manifesto-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(28px, 4.5vw, 64px);
      width: 100%;
    }

    .manifesto-columns .m-col {
      display: flex;
      flex-direction: column;
      gap: clamp(8px, 1.4vh, 14px);
    }

    .manifesto-columns p {
      font-size: clamp(14.5px, 1.1vw, 16.5px);
      line-height: 1.6;
      color: var(--muted, #B9B5E8);
    }

    .manifesto-columns p.lead {
      color: #fff;
      font-size: clamp(16px, 1.3vw, 18.5px);
      font-weight: 600;
    }

    .manifesto-pillars-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(14px, 2vw, 24px);
      width: 100%;
      margin-top: clamp(6px, 1.2vh, 12px);
      padding-top: clamp(12px, 1.8vh, 18px);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .m-pillar-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 20px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .m-pillar-card:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(0, 229, 255, 0.35);
    }

    .mp-num {
      font-size: 22px;
      font-weight: 800;
      font-family: inherit;
      background: linear-gradient(135deg, #00E5FF, #FF0261);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      flex-shrink: 0;
    }

    .mp-info h4 {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin: 0 0 2px 0;
    }

    .mp-info p {
      font-size: 13px;
      color: var(--muted, #B9B5E8);
      margin: 0;
      line-height: 1.35;
    }

    .manifesto-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(24px, 3.5vw, 48px);
      align-items: center;
      width: 100%
    }

    .manifesto-art.manifesto-dashboard {
      position: relative;
      width: 100%;
      max-width: clamp(320px, 28vw, 400px);
      margin: auto;
      border-radius: 20px;
      overflow: hidden;
      background: var(--ink-2);
      border: 1px solid var(--line-2);
      box-shadow: 0 20px 45px -15px rgba(0, 0, 0, .6);
      display: flex;
      flex-direction: column;
      gap: clamp(10px, 1.4vh, 14px);
      padding: clamp(16px, 2.2vh, 22px) clamp(16px, 1.8vw, 22px);
      text-align: left;
      aspect-ratio: auto;
      max-height: none;
    }

    .gp-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .gp-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--teal);
      text-transform: uppercase;
    }

    .gp-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal);
      animation: gpPulse 2s infinite ease-in-out;
    }

    @keyframes gpPulse {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: .35;
        transform: scale(.8);
      }
    }

    .gp-tag {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--dim);
      letter-spacing: .08em;
    }

    .gp-hero-card {
      background: var(--ink-3);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: transform .25s ease, border-color .25s ease;
    }

    .gp-hero-card:hover {
      transform: translateY(-2px);
      border-color: rgba(31, 179, 221, .35);
    }

    .gp-hc-top {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .gp-icon-wrap {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(31, 179, 221, .12);
      border: 1px solid rgba(31, 179, 221, .25);
      display: grid;
      place-items: center;
      color: var(--teal);
      flex-shrink: 0;
    }

    .gp-icon-wrap svg {
      width: 17px;
      height: 17px;
    }

    .gp-hc-meta {
      display: flex;
      flex-direction: column;
      gap: 1px;
      flex: 1;
    }

    .gp-hc-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      color: var(--teal);
      text-transform: uppercase;
    }

    .gp-hc-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #fff;
      margin: 0;
      letter-spacing: -.01em;
    }

    .gp-status-pill {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--pink);
      background: rgba(255, 2, 97, .12);
      border: 1px solid rgba(255, 2, 97, .25);
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }

    .gp-progress-track {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, .08);
      border-radius: 4px;
      overflow: hidden;
    }

    .gp-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--teal), var(--pink));
      border-radius: 4px;
    }

    .gp-metrics-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .gp-metric-box {
      background: var(--ink-3);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      transition: transform .25s ease, border-color .25s ease;
    }

    .gp-metric-box:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 2, 97, .3);
    }

    .gp-mb-label {
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--dim);
      text-transform: uppercase;
    }

    .gp-mb-val {
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.02em;
      line-height: 1.2;
    }

    .gp-mb-sub {
      font-size: 9.5px;
      color: var(--muted);
      line-height: 1.2;
    }

    .gp-pillars {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .gp-pillar-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 8px;
      font-size: 11px;
      transition: background .2s ease, border-color .2s ease;
    }

    .gp-pillar-item:hover {
      background: rgba(255, 255, 255, .06);
      border-color: rgba(255, 255, 255, .12);
    }

    .gp-pi-num {
      font-size: 9.5px;
      font-weight: 700;
      color: var(--pink);
    }

    .gp-pi-name {
      font-weight: 700;
      color: #fff;
    }

    .gp-pi-role {
      color: var(--muted);
      font-size: 10.5px;
      margin-left: auto;
    }

    .gp-pi-check {
      font-size: 11px;
      font-weight: 800;
      color: var(--teal);
    }

    .gp-footer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
      font-size: 10.5px;
      color: var(--muted);
      line-height: 1.35;
    }

    .gp-foot-icon {
      width: 14px;
      height: 14px;
      color: var(--teal);
      flex-shrink: 0;
    }

    .manifesto h2 {
      margin-top: 18px;
    }

    .manifesto .copy {
      margin-top: clamp(12px, 1.8vh, 20px);
      display: grid;
      gap: clamp(6px, 1.2vh, 12px);
      font-size: clamp(14px, 1.1vw, 16px);
      line-height: 1.5
    }

    .manifesto .copy p:last-child {
      color: #fff;
      font-weight: 600;
      font-size: clamp(15px, 1.2vw, 17.5px);
      padding-left: 14px;
      border-left: 3px solid;
      border-image: var(--grad) 1
    }

    /* 03 MERCADO */
    .market {
      background: var(--ink);
    }

    .challenges {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      width: 100%
    }

    .challenges .card {
      grid-column: auto !important;
      padding: clamp(12px, 1.8vh, 18px) 14px;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start
    }

    .challenges .icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--line);
      margin-bottom: 10px;
      flex-shrink: 0;
      transition: background .35s
    }

    .challenges .icon svg {
      width: 18px;
      height: 18px;
      stroke: #fff;
      fill: none;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .card:hover .icon {
      background: var(--grad);
      border-color: transparent
    }

    .challenges .card p {
      color: #DAD8F0;
      font-size: clamp(12.5px, .95vw, 14px);
      line-height: 1.4;
      font-weight: 500
    }

    .market-close {
      margin-top: clamp(14px, 2vh, 24px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(20px, 3vw, 40px);
      align-items: center;
      padding-top: clamp(12px, 1.6vh, 18px);
      border-top: 1px solid var(--line)
    }

    .market-close strong {
      font-size: clamp(16px, 1.5vw, 21px);
      line-height: 1.35;
      font-weight: 700;
      letter-spacing: -.015em;
      color: #fff
    }

    .market-close p {
      font-size: clamp(13.5px, 1vw, 15.5px)
    }

    /* 04 SOLUÇÕES */
    .solutions {
      background: transparent !important;
    }

    .solutions .sec-head {
      margin-bottom: clamp(18px, 2.6vh, 32px);
    }

    .solutions .sec-head p:not(.lead) {
      display: none
    }

    .sol-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(14px, 1.6vw, 22px);
      width: 100%;
    }

    .sol {
      display: flex;
      flex-direction: column;
      padding: clamp(12px, 1.4vh, 16px);
      border-radius: 20px;
      background: var(--ink-2);
      border: 1px solid var(--line-2);
      box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .6);
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .35s ease;
      position: relative;
    }

    .sol:hover {
      transform: translateY(-5px);
      border-color: rgba(255, 255, 255, .24);
      box-shadow: 0 22px 50px -15px rgba(0, 0, 0, .8);
    }

    .sol-media {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      overflow: hidden;
      background: #060515;
    }

    .sol-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .sol:hover .sol-img {
      transform: scale(1.06);
    }

    .sol-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(7, 6, 26, .85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, .15);
      color: #fff;
    }

    .sol-badge b {
      color: var(--teal);
      margin-right: 4px;
    }

    .sol:nth-child(1) .sol-badge b {
      color: var(--pink);
    }

    .sol:nth-child(2) .sol-badge b {
      color: #C084FC;
    }

    .sol:nth-child(3) .sol-badge b {
      color: #00E5FF;
    }

    .sol-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding-top: clamp(10px, 1.4vh, 14px);
    }

    .sol h3 {
      font-size: clamp(16px, 1.22vw, 18.5px);
      font-weight: 700;
      color: #fff;
      margin: 0 0 6px;
      letter-spacing: -.015em;
    }

    .sol .desc {
      font-size: clamp(11.5px, .84vw, 12.8px);
      line-height: 1.45;
      color: var(--muted);
      margin: 0 0 clamp(12px, 1.6vh, 18px);
    }

    .sol-btn {
      margin-top: auto;
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 16px;
      font-size: 12.5px;
      font-weight: 700;
      border-radius: 10px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .14);
      color: #fff;
      transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
    }

    .sol-btn svg {
      width: 15px;
      height: 15px;
      transition: transform .25s ease;
    }

    .sol:hover .sol-btn {
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .3);
    }

    .sol:hover .sol-btn svg {
      transform: translateX(3px);
    }

    .sol-btn-tech {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(0, 229, 255, .25);
      color: #E2E0FA;
    }

    .sol:hover .sol-btn-tech {
      background: rgba(0, 229, 255, .12);
      border-color: rgba(0, 229, 255, .45);
      color: #fff;
    }

    /* 05 REAL TECH */
    .realtech {
      overflow: hidden;
      isolation: isolate;
      background: #040C22
    }

    .realtech .glow {
      display: none !important;
    }

    .rt-wrap {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center;
      gap: clamp(10px, 1.8vh, 20px);
      width: 100%;
      max-width: 1200px
    }

    .rt-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 880px;
      gap: clamp(4px, 0.8vh, 8px);
      margin: 0 auto
    }

    .rt-top-line {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 6px
    }

    .rt-logo-img {
      height: clamp(24px, 3vh, 30px);
      width: auto;
      display: block;
      filter: drop-shadow(0 0 16px rgba(0, 229, 255, .45))
    }

    .rt-by {
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: lowercase;
      color: rgba(255, 255, 255, .55);
      font-style: italic;
      margin: 0 4px;
      user-select: none;
    }

    .rt-rc-brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      height: clamp(24px, 3vh, 30px);
    }

    .rt-rc-sym {
      height: clamp(24px, 3vh, 30px);
      width: clamp(24px, 3vh, 30px);
      display: block;
      flex-shrink: 0;
      filter: drop-shadow(0 0 14px rgba(255, 2, 97, .5));
    }

    .rt-rc-wm {
      height: clamp(14px, 1.8vh, 18px);
      width: auto;
      display: block;
      filter: drop-shadow(0 0 12px rgba(255, 255, 255, .25));
    }

    .rt-title {
      font-size: clamp(22px, 2.5vw, 36px);
      line-height: 1.18;
      letter-spacing: -.025em;
      color: #fff;
      margin-top: 18px;
      margin-bottom: clamp(10px, 1.4vh, 16px);
    }

    .grad-tech {
      background: linear-gradient(90deg, #00E5FF 0%, #1FB3DD 50%, #3B82F6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block
    }

    .rt-lead {
      font-size: clamp(13px, 1vw, 15px);
      line-height: 1.5;
      color: #E2E0FA;
      font-weight: 700;
      max-width: 820px;
      margin: 0 0 clamp(16px, 2.4vh, 28px);
    }

    /* Grid de Especialidades Real Tech */
    .rt-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(10px, 1.4vw, 18px);
      width: 100%;
      text-align: left
    }

    .rt-card {
      background: #081432;
      border: 1px solid rgba(0, 229, 255, .16);
      border-radius: 18px;
      padding: clamp(18px, 2.2vh, 26px) clamp(18px, 1.6vw, 24px);
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .7);
      transition: transform .35s, border-color .35s, box-shadow .35s
    }

    .rt-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(0, 229, 255, .4), transparent 60%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .35s;
      pointer-events: none
    }

    .rt-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 229, 255, .35);
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .85)
    }

    .rt-card:hover::before {
      opacity: 1
    }

    .rt-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px
    }

    .rt-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(0, 229, 255, .08);
      border: 1px solid rgba(0, 229, 255, .25);
      display: grid;
      place-items: center;
      color: #00E5FF;
      transition: background .3s, transform .3s, color .3s
    }

    .rt-card-icon svg {
      width: 18px;
      height: 18px
    }

    .rt-card:hover .rt-card-icon {
      background: #00E5FF;
      color: #000;
      transform: scale(1.08)
    }

    .rt-card-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #38BDF8
    }

    .rt-card h3 {
      font-size: clamp(17px, 1.25vw, 20px);
      color: #FFFFFF;
      font-weight: 700;
      margin: 0 0 8px;
      letter-spacing: -.02em
    }

    .rt-card-hook {
      color: #00E5FF;
      font-weight: 600;
      font-size: clamp(13px, .92vw, 14.5px);
      line-height: 1.5;
      margin: 0 0 10px;
    }

    .rt-card-desc {
      color: #94A3B8;
      font-size: clamp(12.5px, .88vw, 13.5px);
      line-height: 1.65;
      margin: 0;
    }

    /* Bottom Info & CTA */
    .rt-bottom-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 2px;
      padding-top: clamp(8px, 1.2vh, 12px);
      border-top: 1px solid rgba(0, 229, 255, .14);
      gap: 16px;
      flex-wrap: wrap
    }

    .rt-pill-info {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11.8px;
      font-weight: 600;
      color: #9BB4D6
    }

    .rt-btn {
      background: linear-gradient(115deg, #0052D4 0%, #0070F3 45%, #00E5FF 100%);
      box-shadow: 0 8px 24px -6px rgba(0, 229, 255, .45);
      padding: 9px 20px;
      font-size: 13px;
      color: #fff;
      border: none
    }

    .rt-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px -4px rgba(0, 229, 255, .7)
    }

    /* ==============================================================
   TEMA REAL TECH: PRETO E AZUL (ATIVA AO CHEGAR NA SEÇÃO 05)
   ============================================================== */
    body.theme-realtech {
      --ink: #040C22;
      --ink-2: #081432;
      --ink-3: #0D1D45;
      --line: rgba(0, 180, 255, .15);
      --line-2: rgba(16, 183, 216, .28);
      --text: #F0F6FF;
      --muted: #9BB4D6;
      --dim: #5E78A0;
      --blue: #0052D4;
      --purple: #0070F3;
      --pink: #10B7D8;
      --teal: #00E5FF;
      --rose: #00F0FF;
      --grad: linear-gradient(115deg, #0052D4 0%, #0070F3 52%, #10B7D8 100%);
      --grad-full: linear-gradient(115deg, #001438 0%, #0052D4 25%, #0070F3 55%, #10B7D8 85%, #00F0FF 100%);
    }

    #zoom-stage,
    #zoom-grid,
    #zoom-stars,
    .header,
    #scroll-progress,
    .header .btn,
    .realtech,
    .realtech .glow {
      transition: background .7s cubic-bezier(.16, 1, .3, 1), border-color .7s ease, box-shadow .7s ease, opacity .7s ease, color .4s ease, filter .7s ease !important;
    }

    body.theme-realtech #zoom-stage {
      background: #040C22 !important;
    }

    body.theme-realtech #zoom-grid {
      opacity: 0 !important;
      visibility: hidden !important;
    }

    body.theme-realtech #zoom-stars {
      background: none !important;
    }

    body.theme-realtech .realtech {
      background: #040C22 !important;
    }

    body.theme-realtech .realtech .glow {
      display: none !important;
    }

    body.theme-realtech .nav a {
      color: #9EB6DB;
    }

    body.theme-realtech .nav a:hover {
      color: #fff;
    }

    body.theme-realtech .nav a.active {
      color: #00E5FF !important;
      text-shadow: none !important;
    }

    body.theme-realtech .nav a::after {
      background: linear-gradient(90deg, #0052D4, #00E5FF) !important;
      box-shadow: none !important;
    }

    body.theme-realtech .header .btn-primary {
      background: linear-gradient(115deg, #0052D4 0%, #10B7D8 100%) !important;
      box-shadow: 0 4px 14px rgba(0, 82, 212, .4) !important;
      color: #fff !important;
    }

    body.theme-realtech .header .btn-primary:hover {
      box-shadow: 0 6px 20px rgba(0, 82, 212, .6) !important;
    }

    body.theme-realtech #scroll-progress {
      background: linear-gradient(90deg, #001438, #0052D4, #10B7D8, #00F0FF) !important;
      box-shadow: none !important;
    }

    /* Telemetry Dashboard Mock */
    .mock {
      position: relative;
      border-radius: 16px;
      border: 1px solid rgba(31, 179, 221, .25);
      background: linear-gradient(180deg, rgba(18, 15, 48, .92), rgba(8, 7, 28, .96));
      box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8), 0 0 35px -10px rgba(31, 179, 221, .2);
      overflow: hidden;
      max-height: clamp(190px, 25vh, 235px)
    }

    .mock-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 9px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .02)
    }

    .mock-bar i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2)
    }

    .mock-bar span {
      margin-left: 8px;
      font-size: 11px;
      color: var(--dim);
      font-weight: 600
    }

    .mock-live {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      color: var(--teal);
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .mock-pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 8px var(--teal);
      animation: scPulse 1.8s infinite
    }

    .mock-body {
      display: grid;
      grid-template-columns: 75px 1fr;
      min-height: clamp(150px, 20vh, 185px)
    }

    .mock-side {
      border-right: 1px solid rgba(255, 255, 255, .08);
      padding: 10px 8px;
      display: grid;
      gap: 6px;
      align-content: start
    }

    .mock-side i {
      height: 6px;
      border-radius: 3px;
      background: rgba(255, 255, 255, .08)
    }

    .mock-side i:first-child {
      background: linear-gradient(90deg, var(--teal), var(--blue));
      width: 85%
    }

    .mock-main {
      padding: 10px 12px;
      display: grid;
      gap: 8px;
      align-content: start
    }

    .kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px
    }

    .kpi {
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      padding: 6px 8px;
      background: rgba(255, 255, 255, .02)
    }

    .kpi .kpi-label {
      display: block;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--dim);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 2px
    }

    .kpi b {
      display: block;
      font-size: 12.5px;
      font-weight: 800;
      color: #fff
    }

    .chart {
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 8px;
      padding: 6px 8px;
      height: clamp(65px, 9.5vh, 85px);
      position: relative;
      background: rgba(255, 255, 255, .015);
      overflow: hidden
    }

    .chart svg {
      width: 100%;
      height: 100%;
      display: block
    }

    .chart .ln {
      fill: none;
      stroke: url(#gTech);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      animation: draw 3s ease forwards .4s
    }

    .in .chart .ln {
      animation-play-state: running
    }

    .flow {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .flow-pill {
      flex: 1;
      height: 24px;
      border-radius: 6px;
      border: 1px dashed rgba(31, 179, 221, .35);
      background: rgba(31, 179, 221, .05);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .flow-pill span {
      font-size: 9.5px;
      font-weight: 700;
      color: #DAD8F0;
      letter-spacing: .05em
    }

    .flow em {
      width: 12px;
      height: 2px;
      background: linear-gradient(90deg, var(--teal), var(--blue))
    }

    .mock-tag {
      position: absolute;
      right: 10px;
      bottom: 8px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--teal);
      background: rgba(31, 179, 221, .1);
      border: 1px solid rgba(31, 179, 221, .3);
      padding: 3px 7px;
      border-radius: 999px
    }

    /* Horizontal Service Pillars (Bottom Strip) */
    .rt-pillars {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%
    }

    .rt-pillar {
      padding: clamp(9px, 1.2vh, 12px) 12px;
      border-radius: 12px;
      border: 1px solid rgba(31, 179, 221, .16);
      background: rgba(31, 179, 221, .035);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: transform .3s, border-color .3s, background .3s;
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .rt-pillar:hover {
      transform: translateY(-3px);
      border-color: rgba(31, 179, 221, .45);
      background: rgba(31, 179, 221, .08)
    }

    .rt-pillar-top {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .rt-pillar-icon {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: rgba(31, 179, 221, .12);
      border: 1px solid rgba(31, 179, 221, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--teal);
      flex-shrink: 0
    }

    .rt-pillar-icon svg {
      width: 12px;
      height: 12px
    }

    .rt-pillar b {
      display: block;
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: -.01em;
      line-height: 1.2
    }

    .rt-pillar span {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.35;
      display: block
    }

    /* 06 PORTFÓLIO */
    .portfolio {
      background: transparent !important;
    }

    .portfolio.zoom-section > .wrap {
      padding-top: clamp(56px, 6.8vh, 76px);
      padding-bottom: clamp(14px, 2vh, 22px);
    }

    .portfolio .sec-head {
      margin-bottom: clamp(16px, 2.4vh, 28px);
    }

    .portfolio .sec-head h2 {
      margin: 18px 0 clamp(10px, 1.4vh, 16px);
      font-size: clamp(28px, 3.2vw, 44px);
    }

    .portfolio .sec-head p.lead {
      font-size: clamp(14.5px, 1.15vw, 17px);
      line-height: 1.5;
      font-weight: 700;
    }

    .cases {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(10px, 1.2vw, 16px);
      width: 100%;
    }

    .case {
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 16px;
    }

    .case-visual {
      aspect-ratio: 16/9;
      max-height: clamp(125px, 17.5vh, 170px);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--ink-2);
    }

    .case-banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .55s cubic-bezier(.2, .8, .2, 1);
    }

    .case:hover .case-banner-img {
      transform: scale(1.05);
    }

    .case-glass-card {
      width: 80%;
      padding: 12px 16px;
      border-radius: 14px;
      background: rgba(7, 6, 26, .72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--line-2);
      box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
      transition: transform .5s cubic-bezier(.2, .8, .2, 1)
    }

    .case:hover .case-glass-card {
      transform: scale(1.05) translateY(-3px)
    }

    .cgc-stat {
      font-size: clamp(19px, 1.9vw, 23px);
      font-weight: 800;
      letter-spacing: -.02em;
      color: #fff;
      line-height: 1.1
    }

    .cgc-lbl {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      margin: 3px 0 8px
    }

    .cgc-bar {
      height: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .1);
      overflow: hidden
    }

    .cgc-bar span {
      display: block;
      height: 100%;
      width: 78%;
      border-radius: 999px;
      background: var(--grad)
    }

    .cgc-bar.pink span {
      width: 92%;
      background: linear-gradient(90deg, var(--purple), var(--pink))
    }

    .cgc-bar.teal span {
      width: 86%;
      background: linear-gradient(90deg, var(--teal), var(--blue))
    }

    .cv1 {
      background: radial-gradient(circle at 70% 20%, rgba(255, 2, 97, .55), transparent 55%), radial-gradient(circle at 20% 90%, rgba(136, 0, 178, .6), transparent 60%), var(--ink-3)
    }

    .cv2 {
      background: radial-gradient(circle at 30% 20%, rgba(136, 0, 178, .6), transparent 55%), radial-gradient(circle at 80% 90%, rgba(30, 17, 214, .6), transparent 60%), var(--ink-3)
    }

    .cv3 {
      background: radial-gradient(circle at 70% 30%, rgba(31, 179, 221, .45), transparent 55%), radial-gradient(circle at 20% 90%, rgba(30, 17, 214, .65), transparent 60%), var(--ink-3)
    }

    .case-visual .lbl {
      position: absolute;
      top: 12px;
      left: 12px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .16em;
      color: #fff;
      background: rgba(7, 6, 26, .75);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      z-index: 2;
    }

    .case-body {
      padding: clamp(10px, 1.2vh, 14px) clamp(12px, 1.4vw, 18px);
    }

    .case-body .cat {
      color: #FF6B9E;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .case-body .cat.purple {
      color: #C084FC;
    }

    .case-body .cat.teal {
      color: #00F0FF;
    }

    .case-body h3 {
      font-size: clamp(16px, 1.4vw, 18px);
    }

    .case-body p {
      font-size: 12px;
      line-height: 1.4;
      margin-top: 4px !important;
      color: var(--muted);
    }

    .triad {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-top: clamp(8px, 1.2vh, 14px);
      padding: clamp(8px, 1vh, 12px) 20px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .02);
    }

    .triad p {
      color: #fff;
      font-weight: 700;
      font-size: clamp(13px, 1.2vw, 16px);
      letter-spacing: -.01em
    }

    .triad p span {
      color: var(--dim);
      font-weight: 500
    }

    .triad .btn {
      padding: 8px 16px;
      font-size: 13px;
    }

    /* 07 PROCESSO */
    .process {
      background: transparent !important;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      position: relative;
      counter-reset: s;
      width: 100%
    }

    .steps::before {
      content: "";
      position: absolute;
      left: 6%;
      right: 6%;
      top: 38px;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
      opacity: .5
    }

    .step {
      position: relative;
      text-align: left
    }

    .step .badge {
      position: relative;
      width: clamp(66px, 8.5vh, 82px);
      height: clamp(66px, 8.5vh, 82px);
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--ink-3);
      border: 1px solid var(--line-2);
      margin-bottom: 14px;
      transition: transform .35s, box-shadow .35s
    }

    .step:hover .badge {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px -14px rgba(136, 0, 178, .6)
    }

    .step .badge svg {
      width: clamp(24px, 3.2vh, 30px);
      height: clamp(24px, 3.2vh, 30px);
      stroke: #fff
    }

    .step .badge b {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 11px;
      font-weight: 800;
      background: var(--grad);
      color: #fff;
      box-shadow: 0 0 0 4px var(--ink)
    }

    .step h3 {
      font-size: 18px;
      margin-bottom: 4px
    }

    .step p {
      font-size: clamp(12.5px, .95vw, 14px)
    }

    .process-close {
      margin-top: clamp(18px, 2.5vh, 32px);
      text-align: center;
      font-size: clamp(17px, 1.6vw, 22px);
      font-weight: 700;
      letter-spacing: -.015em;
      color: #fff;
      line-height: 1.3
    }

    /* 09 SOBRE NÓS */
    .about {
      background: var(--ink);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1.45fr 0.85fr;
      gap: clamp(36px, 5vw, 72px);
      align-items: center;
      width: 100%
    }

    .about-grid h2 {
      margin-top: 18px;
      margin-bottom: clamp(10px, 1.4vh, 16px);
    }

    .about .copy {
      margin-top: clamp(12px, 1.8vh, 20px);
      display: grid;
      gap: clamp(6px, 1.2vh, 12px);
      font-size: clamp(14px, 1.1vw, 16px);
      line-height: 1.5;
    }

    .about .copy p:last-of-type {
      color: #fff;
      font-weight: 600
    }

    .about-grid .link,
    .about .link {
      margin-top: 18px;
    }

    .about-side {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      justify-self: center;
    }

    /* ==============================================================
       CARROSSEL 3D DA EQUIPE (SOBRE NÓS)
       ============================================================== */
    .about-carousel-container {
      width: 100%;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .about-carousel-stage {
      position: relative;
      width: 100%;
      height: clamp(390px, 48vh, 440px);
      perspective: 1200px;
      perspective-origin: 50% 50%;
    }

    .about-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transform: rotateY(70deg) translateZ(-140px) scale(0.86);
      transform-style: preserve-3d;
      transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  visibility 0.72s ease;
      pointer-events: none;
      z-index: 1;
    }

    .about-slide.is-active {
      opacity: 1;
      visibility: visible;
      transform: rotateY(0deg) translateZ(0) scale(1);
      pointer-events: auto;
      z-index: 2;
    }

    .about-slide.rotate-out-left {
      opacity: 0;
      visibility: hidden;
      transform: rotateY(-70deg) translateZ(-140px) scale(0.86);
      pointer-events: none;
      z-index: 1;
    }

    .about-slide.rotate-out-right {
      opacity: 0;
      visibility: hidden;
      transform: rotateY(70deg) translateZ(-140px) scale(0.86);
      pointer-events: none;
      z-index: 1;
    }

    .about-slide.from-right {
      transition: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      transform: rotateY(70deg) translateZ(-140px) scale(0.86) !important;
    }

    .about-slide.from-left {
      transition: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      transform: rotateY(-70deg) translateZ(-140px) scale(0.86) !important;
    }

    .about-modals-grid {
      display: flex;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      height: 100%;
    }

    .about-modals-grid > .about-glass-modal {
      width: 100%;
      max-width: 100%;
      height: 100%;
    }

    @media (max-width: 900px) {
      .about-grid {
        grid-template-columns: 1fr;
      }
      .about-side {
        align-items: center;
      }
      .about-carousel-container {
        margin: 0 auto;
        max-width: 310px;
      }
      .about-carousel-stage {
        height: 420px;
      }
    }

    @media (max-width: 600px) {
      .about-carousel-stage {
        height: 380px;
      }
      .about-carousel-container {
        max-width: 270px;
      }
    }

    .about-glass-modal {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 100%;
      background: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 30px;
      box-shadow: 0 35px 85px -15px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22);
      display: flex;
      overflow: hidden;
      will-change: transform, opacity;
      transition: border-color 0.4s ease, box-shadow 0.4s ease;
      user-select: none;
      cursor: pointer;
      outline: none;
    }

    .about-glass-modal::before {
      content: "";
      position: absolute;
      top: 0;
      left: 15%;
      right: 15%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      pointer-events: none;
      z-index: 2;
    }

    .about-glass-modal:hover,
    .about-glass-modal:focus-visible,
    .about-glass-modal.is-active {
      border-color: rgba(255, 255, 255, 0.38);
      box-shadow: 0 40px 95px -15px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 40px -5px rgba(136, 0, 178, 0.45);
    }

    .about-modal-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 0%;
      display: block;
      border-radius: 28px;
      transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
    }

    .img-amanda {
      object-position: center 0%;
    }

    .img-victor {
      object-position: center 3%;
    }

    .img-arthur {
      object-position: center 0%;
    }

    .img-gabriela {
      object-position: center 8%;
    }

    .img-lua {
      object-position: center 0%;
    }

    .img-thaina {
      object-position: center 0%;
    }

    /* ==============================================================
       CONTROLES DO CARROSSEL (2 SETAS EMBAIXO DAS FOTOS)
       ============================================================== */
    .about-carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: clamp(16px, 2vh, 24px);
      width: 100%;
      position: relative;
      z-index: 25;
      pointer-events: auto !important;
    }

    .about-nav-btn,
    .about-dot {
      pointer-events: auto !important;
      cursor: pointer !important;
    }

    .about-nav-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #FFFFFF;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      outline: none;
    }

    .about-nav-btn svg {
      width: 20px;
      height: 20px;
      transition: transform 0.25s ease;
    }

    .about-nav-btn:hover {
      background: linear-gradient(135deg, rgba(255, 2, 97, 0.25), rgba(136, 0, 178, 0.35));
      border-color: rgba(0, 240, 255, 0.6);
      color: #00F0FF;
      transform: translateY(-2px) scale(1.08);
      box-shadow: 0 12px 30px -4px rgba(255, 2, 97, 0.35), 0 0 25px rgba(0, 240, 255, 0.35);
    }

    .about-nav-btn:active {
      transform: translateY(0) scale(0.94);
    }

    .about-nav-btn.prev:hover svg {
      transform: translateX(-3px);
    }

    .about-nav-btn.next:hover svg {
      transform: translateX(3px);
    }

    .about-carousel-dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .about-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      outline: none;
    }

    .about-dot:hover {
      background: rgba(255, 255, 255, 0.6);
    }

    .about-dot.is-active {
      width: 26px;
      border-radius: 99px;
      background: linear-gradient(90deg, #FF0261, #00F0FF);
      box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
    }

    /* ==============================================================
       OVERLAY COM BLUR ESCURO NO HOVER E MOBILE
       ============================================================== */
    .modal-blur-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, 
        rgba(7, 6, 26, 0.30) 0%, 
        rgba(7, 6, 26, 0.68) 40%, 
        rgba(7, 6, 26, 0.92) 75%, 
        rgba(7, 6, 26, 0.98) 100%);
      backdrop-filter: blur(14px) saturate(180%);
      -webkit-backdrop-filter: blur(14px) saturate(180%);
      border-radius: 28px;
      padding: clamp(20px, 2.5vw, 32px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 6px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                  visibility 0.38s ease;
      z-index: 3;
      pointer-events: none;
    }

    .about-glass-modal:hover .modal-blur-overlay,
    .about-glass-modal:focus-visible .modal-blur-overlay,
    .about-glass-modal.is-active .modal-blur-overlay {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .about-glass-modal:hover .about-modal-img,
    .about-glass-modal:focus-visible .about-modal-img,
    .about-glass-modal.is-active .about-modal-img {
      transform: scale(1.05);
      filter: brightness(0.60) blur(1px);
    }

    .mbo-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      align-self: flex-start;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
      color: #FF6B9E;
      background: rgba(255, 2, 97, 0.16);
      border: 1px solid rgba(255, 2, 97, 0.35);
      margin-bottom: 2px;
    }

    .mbo-badge.tech {
      color: #00F0FF;
      background: rgba(0, 240, 255, 0.15);
      border-color: rgba(0, 240, 255, 0.4);
    }

    .mbo-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 6px currentColor;
    }

    .mbo-name {
      font-size: clamp(20px, 1.85vw, 24px);
      font-weight: 800;
      color: #FFFFFF;
      margin: 0;
      line-height: 1.2;
      letter-spacing: -0.015em;
    }

    .mbo-role {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--teal, #00F0FF);
      letter-spacing: 0.02em;
      line-height: 1.35;
      margin: 1px 0 0;
    }

    .mbo-desc {
      font-size: 12px;
      line-height: 1.55;
      color: #D6D3F5;
      margin: 6px 0 0;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      padding-top: 9px;
    }

    /* 10 INSIGHTS */
    .insights {
      background: var(--ink-2);
    }

    .ins-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: clamp(14px, 2vh, 22px);
    }

    .ins-head .sec-head {
      margin-bottom: 0
    }

    .posts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      width: 100%
    }

    .posts .post {
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 18px;
      cursor: pointer !important;
      text-decoration: none;
      color: inherit;
      position: relative;
      z-index: 20;
      pointer-events: auto !important;
      transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s, border-color .35s;
    }

    .posts .post * {
      pointer-events: none;
    }

    .post:hover {
      transform: translateY(-5px);
      border-color: rgba(0, 240, 255, 0.5);
      box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.8), 0 0 24px -4px rgba(0, 240, 255, 0.3);
    }

    .ins-head .btn {
      position: relative;
      z-index: 20;
      cursor: pointer !important;
      pointer-events: auto !important;
    }

    .ins-head .btn * {
      pointer-events: none;
    }

    .post .thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      position: relative;
      overflow: hidden;
      background: #0D0B26;
    }

    .post .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .post:hover .thumb img {
      transform: scale(1.02);
    }

    .post .thumb svg {
      position: absolute;
      right: -20px;
      bottom: -25px;
      width: 130px;
      opacity: .9;
      transition: transform .6s;
      z-index: 1;
    }

    .post:hover .thumb svg {
      transform: rotate(18deg) scale(1.05);
    }

    .t1 {
      background: linear-gradient(135deg, #1E11D6, #0D0B26)
    }

    .t2 {
      background: linear-gradient(135deg, #8800B2, #0D0B26)
    }

    .t3 {
      background: linear-gradient(135deg, #FF0261, #0D0B26)
    }

    .post .pb {
      padding: 14px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1
    }

    .post .ed {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .post h3 {
      font-size: 16px
    }

    .post p {
      font-size: 12.5px;
      line-height: 1.35
    }

    .post .link {
      margin-top: auto;
      padding-top: 4px;
      font-size: 12.5px
    }

    /* 11 CTA FINAL & CONTATO (SCROLL NORMAL INTEGRADO) */
    .final {
      isolation: isolate;
    }

    .final .bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--ink);
      pointer-events: none;
    }

    .final .bg svg {
      position: absolute;
      right: -100px;
      top: -80px;
      width: 420px;
      opacity: .07;
      fill: #fff;
      pointer-events: none;
    }

    .final.zoom-section {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      align-items: flex-start !important;
      justify-content: center !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }

    .final.zoom-section::-webkit-scrollbar {
      width: 6px;
    }

    .final.zoom-section::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.22);
      border-radius: 999px;
    }

    .final.zoom-section::-webkit-scrollbar-track {
      background: transparent;
    }

    .final-wrap {
      display: flex !important;
      flex-direction: column !important;
      width: 100%;
      max-width: var(--wrap);
      min-height: 100%;
      height: auto !important;
      max-height: none !important;
      padding: clamp(80px, 11vh, 110px) 24px clamp(48px, 6vh, 64px) !important;
      box-sizing: border-box;
      margin: 0 auto !important;
    }

    .final-grid {
      display: grid !important;
      grid-template-columns: 1fr 1.05fr;
      gap: clamp(36px, 5vw, 68px);
      align-items: center;
      width: 100%;
      min-height: calc(100vh - clamp(140px, 17vh, 180px));
      min-height: calc(100svh - clamp(140px, 17vh, 180px));
      box-sizing: border-box;
      padding: clamp(10px, 2vh, 24px) 0;
    }

    .final-info h2 {
      margin-top: 10px;
      margin-bottom: clamp(12px, 1.6vh, 18px);
      font-size: clamp(26px, 3.2vw, 40px);
      line-height: 1.15;
    }

    .final-info .lead {
      margin-bottom: 16px;
      font-size: clamp(14px, 1.25vw, 16px);
      line-height: 1.55;
      color: var(--muted);
    }

    .final-info .ask {
      margin-top: 8px;
      margin-bottom: 16px;
      color: #fff;
      font-weight: 700;
      font-size: clamp(15px, 1.3vw, 17.5px);
    }

    /* Canais diretos & Perks no Contato */
    .final-direct-channels {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
    }

    .direct-pill {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      text-decoration: none;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .direct-pill:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 2, 97, 0.45);
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(255, 2, 97, 0.15);
    }

    .direct-pill-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(30, 17, 214, 0.25);
      border: 1px solid rgba(30, 17, 214, 0.45);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      color: #8b7bff;
      transition: background 0.25s, color 0.25s;
    }

    .direct-pill:hover .direct-pill-icon {
      background: var(--grad);
      color: #fff;
      border-color: transparent;
    }

    .direct-pill-icon-wa {
      background: rgba(37, 211, 102, 0.15);
      border-color: rgba(37, 211, 102, 0.35);
      color: #25D366;
    }

    .direct-pill-icon svg {
      width: 18px;
      height: 18px;
    }

    .direct-pill-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .direct-pill-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      font-weight: 600;
    }

    .direct-pill-val {
      font-size: 13.5px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .final-perks {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 14px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .perk-tag {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      color: #D5D3EE;
    }

    .perk-tag svg {
      width: 15px;
      height: 15px;
      color: var(--pink);
      flex-shrink: 0;
    }

    .final-scroll-hint {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 20px;
      font-size: 11.5px;
      color: var(--muted);
      opacity: 0.75;
      animation: subtleFloat 2.4s ease-in-out infinite;
    }

    .final-scroll-hint svg {
      width: 14px;
      height: 14px;
      stroke: var(--pink);
    }

    @keyframes subtleFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(4px); }
    }

    .form {
      background: rgba(13, 11, 38, .78);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(136, 0, 178, 0.12);
      border-radius: 20px;
      padding: clamp(22px, 2.5vw, 32px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .field.full {
      grid-column: 1/-1;
    }

    .field label,
    .field legend {
      font-size: 12px;
      font-weight: 600;
      color: #D5D3EE;
      letter-spacing: .02em;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, .04);
      outline: none;
      transition: border-color .2s, background .2s, box-shadow .2s;
      font-size: 13.5px;
      font-family: inherit;
      color: #fff;
    }

    .field textarea {
      min-height: 72px;
      resize: vertical;
    }

    .field select option {
      background: var(--ink-2);
      color: #fff;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: var(--pink);
      background: rgba(255, 255, 255, .08);
      box-shadow: 0 0 0 3px rgba(255, 2, 97, 0.2);
    }

    .seg {
      border: 0;
      padding: 0;
      margin: 0;
    }

    .seg legend {
      margin-bottom: 6px;
    }

    .seg-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .seg label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.03);
      cursor: pointer;
      font-weight: 500;
      font-size: 12px;
      color: #E5E3F7;
      transition: border-color .2s, background .2s, color .2s;
      flex: 1 1 auto;
      min-width: 140px;
    }

    .seg label:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.25);
    }

    .seg input {
      accent-color: var(--pink);
      width: 14px;
      height: 14px;
    }

    .seg label:has(input:checked) {
      border-color: var(--pink);
      background: rgba(255, 2, 97, .12);
      color: #fff;
    }

    .consent {
      grid-column: 1/-1;
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.45;
      cursor: pointer;
    }

    .consent + .consent {
      margin-top: -2px;
    }

    .consent input {
      margin-top: 2px;
      accent-color: var(--pink);
      width: 14px;
      height: 14px;
      flex: none;
      cursor: pointer;
    }

    .consent a {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .form .btn {
      grid-column: 1/-1;
      width: 100%;
      padding: 13px 20px;
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: .02em;
      border-radius: 12px;
      margin-top: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 8px 24px rgba(255, 2, 97, 0.3);
      transition: transform .2s, box-shadow .2s;
    }

    .form .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(255, 2, 97, 0.45);
    }

    .form-ok {
      grid-column: 1/-1;
      display: none;
      padding: 14px;
      border-radius: 12px;
      background: rgba(31, 179, 221, .12);
      border: 1px solid rgba(31, 179, 221, .4);
      color: #fff;
      font-weight: 600;
      font-size: 13.5px;
      text-align: center;
    }

    .form.sent .form-ok {
      display: block;
    }

    /* 11 RODAPÉ INTEGRADO AO CONTATO */
    .final-footer {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin-top: clamp(70px, 11vh, 130px);
      padding-top: clamp(48px, 6vh, 70px);
      padding-bottom: clamp(60px, 8vh, 90px);
      width: 100%;
      position: relative;
    }

    .final-footer .foot-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
      gap: clamp(24px, 3.5vw, 48px);
    }

    .final-footer .foot-grid h4 {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 14px;
    }

    .final-footer .foot-grid ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .final-footer .foot-grid li a {
      color: var(--muted);
      font-size: 13px;
      transition: color .2s, transform .2s;
      display: inline-block;
    }

    .final-footer .foot-grid li a:hover {
      color: #fff;
      transform: translateX(3px);
    }

    .final-footer .foot-brand .logo .sym {
      width: 34px;
      height: 34px;
    }

    .final-footer .foot-brand .logo .wm {
      aspect-ratio: 414 / 70;
      height: 18px;
    }

    .final-footer .foot-brand p {
      margin-top: 10px;
      font-size: 12.5px;
      max-width: 280px;
      line-height: 1.5;
      color: var(--muted);
    }

    .final-footer .social {
      display: flex;
      gap: 9px;
      margin-top: 16px;
    }

    .final-footer .social a {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.03);
      display: grid;
      place-items: center;
      color: #D5D3EE;
      transition: all .25s ease;
    }

    .final-footer .social a:hover {
      background: var(--grad);
      border-color: transparent;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(255, 2, 97, 0.25);
    }

    .final-footer .social svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
      display: block;
    }

    .final-footer .foot-bottom {
      margin-top: clamp(36px, 5vh, 56px);
      padding-top: 22px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--dim);
    }

    .final-footer .foot-bottom b {
      color: #D5D3EE;
      font-weight: 600;
    }

    /* Reveal */
    .rv {
      opacity: 1;
      transform: none;
      transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1)
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    .rv.d1 {
      transition-delay: .08s
    }

    .rv.d2 {
      transition-delay: .16s
    }

    .rv.d3 {
      transition-delay: .24s
    }

    .rv.d4 {
      transition-delay: .32s
    }

    .rv.d5 {
      transition-delay: .4s
    }

    /* Responsive */
    @media (max-width:1080px) {

      .nav,
      .header .btn {
        display: none
      }

      .burger {
        display: grid
      }

      .menu-open .nav {
        display: flex;
        position: fixed;
        inset: 76px 0 auto;
        flex-direction: column;
        gap: 2px;
        padding: 14px 24px 24px;
        background: rgba(7, 6, 26, .98);
        border-bottom: 1px solid var(--line);
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .menu-open .nav a {
        font-size: clamp(15px, 3.2vh, 18px);
        padding: 8px 0;
      }

      .hero-grid,
      .manifesto-grid,
      .about-grid,
      .final-grid {
        grid-template-columns: 1fr
      }

      .rt-grid {
        grid-template-columns: 1fr;
        gap: 8px
      }

      .rt-card {
        padding: 16px 18px;
      }

      .rt-card-desc {
        display: block;
        line-height: 1.55;
      }

      .hero-3d-stage {
        height: 380px;
        margin-top: -10px
      }

      .board {
        width: 360px;
        height: 360px
      }

      .manifesto-art {
        max-width: 440px;
        aspect-ratio: auto;
      }

      .sol-grid,
      .cases,
      .posts {
        grid-template-columns: 1fr 1fr
      }

      .steps {
        grid-template-columns: 1fr 1fr;
        row-gap: 48px
      }

      .steps::before {
        display: none
      }

      .final-footer .foot-grid,
      .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
      }
    }

    @media (max-width:720px) {
      body {
        font-size: 16px
      }

      .btn {
        white-space: normal;
        text-align: center
      }

      .wrap {
        padding: 0 16px
      }

      .hero {
        padding-top: 110px
      }

      .hero-3d-stage {
        height: 280px
      }

      .board {
        width: 270px;
        height: 270px
      }

      .pc-king {
        width: 80px
      }

      .pc-queen {
        width: 66px
      }

      .pc-knight {
        width: 70px
      }

      .pc-rook {
        width: 50px
      }

      .pc-pawn {
        width: 40px
      }

      .pc-bishop {
        width: 48px
      }

      .challenges,
      .sol-grid,
      .cases,
      .posts,
      .market-close {
        grid-template-columns: 1fr
      }

      .challenges .card,
      .challenges .card:nth-child(4) {
        grid-column: auto
      }

      .rt-bottom-row {
        justify-content: center;
        text-align: center
      }

      .rt-lead {
        display: none
      }

      .mock {
        max-height: 180px
      }

      .mock-body {
        grid-template-columns: 1fr
      }

      .mock-side {
        display: none
      }

      .team-grid-staff {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px
      }

      .intern-card {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        gap: 10px
      }

      .intern-photo-box {
        width: 120px;
        height: 90px
      }

      .intern-header,
      .intern-status {
        justify-content: center
      }

      .form {
        grid-template-columns: 1fr;
        padding: clamp(18px, 4vw, 24px);
      }

      .seg-options {
        flex-direction: column;
      }

      .seg label {
        width: 100%;
        box-sizing: border-box;
      }

      .final-footer .foot-grid,
      .foot-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .sol {
        padding: 30px 24px
      }

      .triad {
        padding: 26px
      }

      .logo .wm {
        height: 18px
      }

      .logo-rt-img {
        height: 33px
      }
    }

    /* ==============================================================
       SUBTABS SEGMENTED PILL SWITCHER & COMPACT PANES
       ============================================================== */
    .subtab-nav {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 0 auto clamp(16px, 2.5vh, 26px);
      padding: 5px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
      border-radius: 999px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      z-index: 20;
      position: relative;
    }

    .subtab-nav::-webkit-scrollbar {
      display: none;
    }

    .subtab-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      font-family: inherit;
      font-size: clamp(12.5px, 1.2vw, 14px);
      font-weight: 600;
      color: var(--muted, #B9B5E8);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      min-height: 38px;
    }

    .subtab-btn:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.06);
    }

    .subtab-btn.is-active {
      color: #fff;
      background: linear-gradient(135deg, rgba(31, 179, 221, 0.25), rgba(238, 95, 156, 0.25));
      border-color: rgba(238, 95, 156, 0.45);
      box-shadow: 0 2px 14px rgba(238, 95, 156, 0.2);
    }

    .subtab-btn .subtab-icon {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      transition: transform 0.2s ease, stroke 0.2s ease;
      flex-shrink: 0;
    }

    .subtab-btn.is-active .subtab-icon {
      stroke: #FF0261;
      transform: scale(1.08);
    }

    .subtab-pane {
      display: none;
      width: 100%;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .subtab-pane.is-active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* Enquadramento Firme e Estável para as Seções com Sub-abas (Sem Pulos ou Desenquadramentos) */
    #sobre.zoom-section,
    #solucoes.zoom-section {
      align-items: flex-start !important;
      justify-content: center !important;
    }

    #sobre > .wrap,
    #solucoes > .wrap {
      margin: 0 auto !important;
      padding-top: clamp(68px, 9vh, 88px) !important;
      padding-bottom: 24px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    #sobre .subtab-nav,
    #solucoes .subtab-nav {
      margin-bottom: clamp(14px, 2.2vh, 24px) !important;
      flex-shrink: 0 !important;
    }

    #sobre .subtab-pane {
      min-height: clamp(440px, 56vh, 510px);
    }

    /* Enquadramento milimétrico do Pane Mercado para casar com Manifesto e Equipe */
    #pane-mercado .sec-head {
      margin-bottom: clamp(10px, 1.4vh, 18px) !important;
      text-align: center;
      max-width: 860px;
      margin-left: auto;
      margin-right: auto;
    }

    #pane-mercado .sec-head h2 {
      margin-top: 8px !important;
      margin-bottom: 8px !important;
    }

    #pane-mercado .sec-head p:not(.lead) {
      display: none !important;
    }

    #pane-mercado .challenges {
      gap: 10px !important;
    }

    #pane-mercado .challenges .card {
      padding: clamp(10px, 1.3vh, 14px) 12px !important;
    }

    #pane-mercado .market-close {
      margin-top: clamp(10px, 1.4vh, 16px) !important;
      padding-top: clamp(10px, 1.2vh, 14px) !important;
    }

    /* Link sutil e integrado no texto (subtle inline redirect) */
    .sol-inline-link {
      color: #00E5FF;
      text-decoration: underline;
      text-underline-offset: 3px;
      font-weight: 600;
      transition: color 0.2s ease, opacity 0.2s ease;
      white-space: nowrap;
    }

    .sol-inline-link:hover {
      color: #fff;
      opacity: 0.9;
    }

    .tab-txt-desktop {
      display: inline;
    }

    .tab-txt-mobile {
      display: none;
    }

    /* ==============================================================
       OTIMIZAÇÃO E ENQUADRAMENTO RESPONSIVO EXCLUSIVO PARA SMARTPHONES
       (NÃO ALTERA NADA NA EXPERIÊNCIA DO COMPUTADOR/DESKTOP)
       ============================================================== */
    @media (max-width: 860px) {
      .tab-txt-desktop {
        display: none !important;
      }

      .tab-txt-mobile {
        display: inline !important;
      }

      /* Viewport e enquadramento mobile firme sem transbordar tela */
      .zoom-section {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
      }

      .zoom-section.is-active {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        align-items: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        padding-top: 64px !important;
        padding-bottom: 30px !important;
      }

      .zoom-section > .wrap,
      #sobre > .wrap,
      #solucoes > .wrap {
        padding-top: 4px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 24px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      #sobre .subtab-pane,
      #solucoes .subtab-pane {
        min-height: auto !important;
      }

      /* Barra de sub-abas perfeitamente simétrica no mobile (Sem cortes de texto) */
      .subtab-nav {
        display: flex !important;
        width: 100% !important;
        max-width: 440px !important;
        margin: 2px auto 14px !important;
        padding: 4px !important;
        gap: 4px !important;
        justify-content: space-between !important;
        border-radius: 999px !important;
        box-sizing: border-box !important;
      }

      .subtab-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 8px 6px !important;
        font-size: 11.5px !important;
        justify-content: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
        min-height: 36px !important;
      }

      .subtab-btn .subtab-icon {
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0 !important;
      }

      /* Tipografia proporcional a smartphones (sem títulos gigantes ocupando a tela inteira) */
      .eyebrow {
        font-size: 10.5px !important;
        letter-spacing: .12em !important;
        margin-bottom: 4px !important;
      }

      h1 {
        font-size: clamp(23px, 6.2vw, 30px) !important;
        line-height: 1.2 !important;
      }

      h2 {
        font-size: clamp(19px, 5.2vw, 23px) !important;
        line-height: 1.25 !important;
        margin-top: 6px !important;
        margin-bottom: 8px !important;
      }

      .sec-head {
        margin-bottom: 12px !important;
        text-align: left !important;
        max-width: 100% !important;
      }

      .sec-head p.lead {
        font-size: 13.5px !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
      }

      /* No mobile, esconde o parágrafo prolixo secundário para enquadramento limpo */
      .sec-head p:not(.lead),
      #pane-mercado .sec-head p:not(.lead) {
        display: none !important;
      }

      /* Enquadramento da Visão de Mercado (Cards horizontais compactos e elegantes) */
      .challenges,
      #pane-mercado .challenges {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
      }

      .challenges .card,
      #pane-mercado .challenges .card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        background: rgba(18, 16, 42, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        min-height: auto !important;
      }

      .challenges .card .icon,
      #pane-mercado .challenges .card .icon {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .challenges .card .icon svg,
      #pane-mercado .challenges .card .icon svg {
        width: 17px !important;
        height: 17px !important;
      }

      .challenges .card p,
      #pane-mercado .challenges .card p {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        color: #E2E0FA !important;
        margin: 0 !important;
      }

      .market-close,
      #pane-mercado .market-close {
        margin-top: 12px !important;
        padding-top: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
      }

      .market-close strong {
        font-size: 14.5px !important;
        line-height: 1.3 !important;
      }

      .market-close p {
        font-size: 12px !important;
        line-height: 1.35 !important;
      }

      /* Enquadramento Perfeito do Vídeo de Xadrez no Mobile */
      .hero-video-wrap {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
      }

      .hero-video {
        object-position: 65% center !important;
        filter: brightness(0.60) contrast(1.15) !important;
        transform: scale(1.02) !important;
        display: block !important;
      }

      .hero-video-overlay {
        background:
          linear-gradient(180deg, rgba(7, 6, 26, 0.75) 0%, rgba(7, 6, 26, 0.32) 42%, rgba(7, 6, 26, 0.88) 100%) !important;
      }

      .hero {
        padding-top: 74px !important;
      }

      .hero-content {
        max-width: 100% !important;
      }

      .hero-content h1 {
        font-size: clamp(23px, 6.2vw, 30px) !important;
        line-height: 1.18 !important;
      }

      /* Manifesto no mobile (Livre de Tier List e com leitura direta e ampla) */
      .manifesto-content-spacious {
        max-width: 100% !important;
        gap: 12px !important;
      }

      .manifesto-columns {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      .manifesto-columns p {
        font-size: 13px !important;
        line-height: 1.4 !important;
      }

      .manifesto-pillars-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 8px !important;
        padding-top: 10px !important;
      }

      .m-pillar-card {
        padding: 10px 14px !important;
      }

      /* Equipe no mobile */
      .about-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
      }

      .about-grid .copy {
        margin-top: 6px !important;
        margin-bottom: 10px !important;
      }

      .about-grid .copy p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
      }

      .about-carousel-container {
        max-width: 290px !important;
        margin: 0 auto !important;
      }

      .about-carousel-stage {
        height: 350px !important;
      }

      /* Soluções no mobile */
      .sol-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
      }

      .card.sol {
        padding: 14px !important;
        border-radius: 16px !important;
      }

      .card.sol .sol-media {
        height: 130px !important;
        margin-bottom: 10px !important;
      }

      .card.sol h3 {
        font-size: 17px !important;
        margin-bottom: 4px !important;
      }

      .card.sol .desc {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
      }

      .card.sol .sol-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
      }

      /* Cases no mobile */
      .cases {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
      }

      .card.case {
        padding: 14px !important;
        border-radius: 14px !important;
      }

      .card.case .case-visual {
        height: 120px !important;
      }

      .card.case h3 {
        font-size: 16px !important;
      }

      .card.case p {
        font-size: 12px !important;
      }

      .triad {
        padding: 12px !important;
        margin-top: 12px !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 8px !important;
      }

      .triad p {
        font-size: 12.5px !important;
      }

      /* Processo no mobile */
      .steps {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
      }

      .step {
        padding: 12px !important;
        border-radius: 12px !important;
      }

      .step .badge {
        width: 30px !important;
        height: 30px !important;
        font-size: 11.5px !important;
      }

      .step h3 {
        font-size: 15px !important;
      }

      .step p {
        font-size: 12px !important;
      }

      .process-close {
        margin-top: 12px !important;
        font-size: 13.5px !important;
      }

      /* Real Tech no mobile */
      .rt-header {
        margin-bottom: 12px !important;
      }

      .rt-title {
        font-size: clamp(18px, 5vw, 22px) !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
      }

      .rt-lead {
        font-size: 12px !important;
        margin-bottom: 10px !important;
      }

      .rt-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
      }

      .rt-card {
        padding: 12px 14px !important;
        border-radius: 14px !important;
      }

      .rt-card h3 {
        font-size: 15.5px !important;
      }

      .rt-card-hook {
        font-size: 12px !important;
      }

      .rt-card-desc {
        font-size: 11.5px !important;
      }
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important
      }

      .rv {
        opacity: 1;
        transform: none
      }

      html {
        scroll-behavior: auto
      }
    }