:root {
      --navy-900: #0a2540;
      --navy-800: #0d3a5b;
      --navy-700: #123f63;
      --blue-600: #1487b3;
      --blue-500: #2aa7d6;
      --blue-100: #d5e6f5;
      --blue-50: #eff6fc;
      --red-500: #e0524f;
      --gray-700: #455363;
      --gray-500: #6b7a8c;
      --gray-200: #e4ebf1;
      --gray-100: #f4f7fa;
      --white: #ffffff;
      --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
      --font-body: "Inter", system-ui, sans-serif;
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --shadow-sm: 0 2px 8px rgba(10, 37, 64, .06);
      --shadow-md: 0 12px 32px rgba(10, 37, 64, .1);
      --container-w: 1160px
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 92px;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%
    }

    body {
      font-family: var(--font-body);
      color: var(--gray-700);
      background: var(--white);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      -webkit-tap-highlight-color: transparent
    }

    body.nav-open {
      overflow: hidden
    }

    a,
    button,
    .btn,
    input,
    select,
    textarea,
    label {
      touch-action: manipulation
    }

    img,
    svg {
      display: block;
      max-width: 100%
    }

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

    h1,
    h2,
    h3 {
      font-family: var(--font-display);
      color: var(--navy-900);
      line-height: 1.15;
      font-weight: 800
    }

    h1 {
      font-size: clamp(2.1rem, 4.2vw, 3.2rem);
      letter-spacing: -.02em
    }

    h2 {
      font-size: clamp(1.7rem, 3vw, 2.35rem);
      letter-spacing: -.01em
    }

    h3 {
      font-size: 1.1rem;
      font-weight: 700
    }

    .container {
      max-width: var(--container-w);
      margin: 0 auto;
      padding: 0 24px;
      padding-left: max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right))
    }

    .section {
      padding: 88px 0
    }

    .section-tint {
      background: var(--blue-50)
    }

    .section-dark {
      background: var(--navy-900)
    }

    .section>.container>.eyebrow,
    .section>.container>h2,
    .section>.container>.section-sub {
      text-align: center
    }

    .section>.container>.eyebrow {
      display: table;
      margin-left: auto;
      margin-right: auto
    }

    .section>.container>.section-sub {
      margin-left: auto;
      margin-right: auto
    }

    .section>.container>.tagline-inline {
      text-align: center
    }

    .section-dark .section-sub.text-light-muted {
      color: #d7e4f0
    }

    .section-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 44px
    }

    .section-head .eyebrow {
      display: inline-block;
      margin-bottom: 14px
    }

    .section-head .section-sub {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0
    }

    .pain-grid-slim {
      grid-template-columns: repeat(3, 1fr)
    }

    .cta-band {
      background: linear-gradient(120deg, var(--navy-800) 0%, #0f5a7a 55%, var(--blue-600) 100%);
      padding: 56px 0
    }

    .cta-band-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap
    }

    .cta-band-label {
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #dff0f8;
      margin-bottom: 8px
    }

    .cta-band-title {
      color: var(--white);
      font-size: clamp(1.4rem, 2.5vw, 1.85rem);
      max-width: 520px;
      margin: 0
    }

    .cta-band .btn-primary {
      background: var(--white);
      color: var(--navy-900)
    }

    .cta-band .btn-primary:hover {
      background: var(--blue-100);
      box-shadow: var(--shadow-md)
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      filter: blur(10px);
      transition: opacity .55s ease, transform .55s ease, filter .55s ease
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0)
    }

    @media(prefers-reduced-motion:reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none
      }
    }

    .text-light {
      color: var(--white)
    }

    .text-light-muted {
      color: #d7e4f0
    }

    .eyebrow {
      display: inline-block;
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--blue-600);
      background: var(--blue-100);
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 18px
    }

    .eyebrow-light {
      background: #ffffff29;
      color: #e8f4fb;
      border: 1px solid rgba(255, 255, 255, .28)
    }

    .section-sub {
      max-width: 620px;
      color: var(--gray-700);
      font-size: 1.05rem;
      margin-top: 12px;
      margin-bottom: 44px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .95rem;
      padding: 13px 26px;
      border-radius: 999px;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .btn:hover {
      transform: translateY(-1px)
    }

    .btn:focus-visible {
      outline: 3px solid var(--blue-500);
      outline-offset: 2px
    }

    .btn>* {
      position: relative;
      z-index: 1
    }

    .btn:after {
      content: "";
      position: absolute;
      top: -2px;
      right: -2px;
      bottom: -2px;
      left: -2px;
      background: linear-gradient(120deg, transparent 30%, rgba(42, 167, 214, .22) 45%, rgba(255, 255, 255, .65) 50%, rgba(42, 167, 214, .18) 60%, transparent 72%);
      transform: translate(-140%);
      opacity: 0;
      pointer-events: none;
      transition: transform .65s ease, opacity .25s ease
    }

    .btn:hover:after {
      transform: translate(140%);
      opacity: 1
    }

    .btn-primary {
      background: var(--navy-800);
      color: var(--white)
    }

    .btn-primary:hover {
      background: var(--navy-900);
      box-shadow: var(--shadow-md)
    }

    .btn-outline {
      background: transparent;
      color: var(--navy-800);
      border-color: var(--navy-800)
    }

    .btn-outline:hover {
      background: var(--navy-800);
      color: var(--white)
    }

    .section-dark .btn-outline {
      color: var(--white);
      border-color: #ffffff80
    }

    .section-dark .btn-outline:hover {
      background: var(--white);
      color: var(--navy-900)
    }

    .btn-ghost {
      background: var(--blue-100);
      color: var(--navy-800)
    }

    .btn-ghost:hover {
      background: var(--blue-500);
      color: var(--white)
    }

    .btn-on-dark {
      background: var(--white);
      color: var(--navy-900);
      box-shadow: 0 8px 24px #0000002e
    }

    .btn-on-dark:hover {
      background: var(--blue-100);
      color: var(--navy-900);
      box-shadow: 0 12px 28px #00000038
    }

    .btn-whatsapp-solid {
      background: #25d366;
      color: var(--white);
      border-color: #25d366;
      box-shadow: 0 8px 24px #25d36647
    }

    .btn-whatsapp-solid:hover {
      background: #1ebe57;
      border-color: #1ebe57;
      box-shadow: 0 12px 28px #25d36659
    }

    .section-dark .center-cta .btn-primary {
      background: var(--white);
      color: var(--navy-900);
      box-shadow: 0 8px 24px #0000002e
    }

    .section-dark .center-cta .btn-primary:hover {
      background: var(--blue-100);
      color: var(--navy-900);
      box-shadow: 0 12px 28px #00000038
    }

    .btn-lg {
      padding: 16px 32px;
      font-size: 1rem
    }

    .btn-block {
      width: 100%
    }

    .icon {
      width: 18px;
      height: 18px
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #ffffffeb;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--gray-200)
    }

    .header-inner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 24px;
      min-height: 76px;
      height: 76px
    }

    .brand {
      grid-column: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      min-width: 0
    }

    .brand-logo {
      height: 42px;
      width: auto;
      display: block
    }

    .brand-product {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .85rem;
      color: var(--blue-600);
      background: var(--blue-100);
      padding: 3px 10px;
      border-radius: 999px;
      white-space: nowrap
    }

    .header-actions {
      grid-column: 3;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0
    }

    .main-nav {
      grid-column: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: nowrap;
      min-width: 0
    }

    .main-nav a {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: .88rem;
      color: var(--navy-700);
      transition: color .15s ease;
      white-space: nowrap
    }

    .main-nav a:hover {
      color: var(--blue-600)
    }

    .btn-whatsapp {
      padding: 10px 14px;
      font-size: .82rem;
      white-space: nowrap
    }

    .header-actions .btn-primary {
      padding: 11px 18px;
      font-size: .86rem;
      white-space: nowrap
    }

    .nav-toggle {
      grid-column: 3;
      justify-self: end;
      display: none;
      flex-shrink: 0;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      border-radius: 10px;
      transition: background .15s ease
    }

    .nav-toggle:hover {
      background: var(--gray-100)
    }

    .nav-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--navy-900);
      border-radius: 2px;
      transition: transform .25s ease, opacity .2s ease
    }

    .site-header.is-open .nav-toggle span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    .site-header.is-open .nav-toggle span:nth-child(2) {
      opacity: 0
    }

    .site-header.is-open .nav-toggle span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    .nav-drawer {
      display: none;
      border-bottom: 1px solid var(--gray-200);
      background: var(--white);
      box-shadow: var(--shadow-md);
      max-height: calc(100dvh - 76px);
      overflow-y: auto;
      overscroll-behavior: contain
    }

    .nav-drawer .container {
      padding-top: 8px;
      padding-bottom: calc(20px + env(safe-area-inset-bottom))
    }

    .drawer-nav {
      display: flex;
      flex-direction: column;
      margin-bottom: 16px
    }

    .drawer-nav a {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1rem;
      color: var(--navy-700);
      display: flex;
      align-items: center;
      min-height: 52px;
      padding: 4px 2px;
      border-bottom: 1px solid var(--gray-200)
    }

    .drawer-nav a:active {
      color: var(--blue-600)
    }

    .drawer-actions {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .drawer-actions .btn {
      width: 100%
    }

    .site-header.is-open .nav-drawer {
      display: block;
      animation: drawer-in .22s ease both
    }

    @keyframes drawer-in {
      0% {
        opacity: 0;
        transform: translateY(-8px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .site-header.is-open .nav-drawer {
        animation: none
      }
    }

    .hero {
      position: relative;
      overflow: hidden;
      background: radial-gradient(ellipse 80% 60% at 85% 20%, rgba(42, 167, 214, .22), transparent 55%), radial-gradient(ellipse 50% 40% at 10% 80%, rgba(20, 135, 179, .12), transparent 50%), linear-gradient(165deg, #e8f4fb 0%, var(--white) 55%, #f7fbfe 100%);
      padding: 80px 0 72px
    }

    .hero-punch .hero-copy {
      animation: hero-in .7s ease both
    }

    .hero-punch .hero-visual {
      animation: hero-in .85s ease .12s both
    }

    @keyframes hero-in {
      0% {
        opacity: 0;
        transform: translateY(18px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

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

      .hero-punch .hero-copy,
      .hero-punch .hero-visual {
        animation: none
      }
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 48px;
      align-items: center
    }

    .hero-sub {
      font-size: 1.1rem;
      color: var(--gray-700);
      margin: 20px 0 32px;
      max-width: 520px
    }

    .hero-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 36px
    }

    .hero-cta-row .btn-primary {
      box-shadow: 0 10px 28px #0d3a5b47
    }

    .trust-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      list-style: none;
      font-size: .88rem;
      color: var(--gray-700)
    }

    .trust-strip strong {
      color: var(--navy-900);
      font-family: var(--font-display)
    }

    .hero-visual {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      min-height: 420px;
      padding-bottom: 44px
    }

    .neo-hero {
      position: absolute;
      left: -8%;
      bottom: 0;
      width: min(280px, 48%);
      height: auto;
      z-index: 2;
      filter: drop-shadow(0 16px 28px rgba(10, 37, 64, .18));
      animation: neo-float 4.5s ease-in-out infinite;
      pointer-events: none
    }

    @keyframes neo-float {

      0%,
      to {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-12px)
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .neo-hero {
        animation: none
      }
    }

    .phone-mock {
      width: 300px;
      background: var(--white);
      border-radius: 32px;
      box-shadow: var(--shadow-md);
      border: 8px solid var(--navy-900);
      overflow: hidden;
      position: relative;
      z-index: 1;
      margin-left: 18%
    }

    .phone-notch {
      height: 22px;
      background: var(--navy-900);
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      width: 110px;
      margin: 0 auto
    }

    .phone-header {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--navy-800);
      padding: 14px 16px
    }

    .phone-avatar {
      width: 34px;
      height: 34px;
      background: var(--blue-500);
      color: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 800;
      overflow: hidden;
      flex-shrink: 0
    }

    .phone-avatar-img {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center top;
      background: var(--navy-900)
    }

    .phone-name {
      color: var(--white);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .92rem
    }

    .phone-status {
      color: #d4eef8;
      font-size: .72rem
    }

    .phone-body {
      background: #e9edf2;
      padding: 18px 14px;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .bubble {
      max-width: 82%;
      padding: 10px 14px;
      border-radius: 14px;
      font-size: .82rem;
      line-height: 1.4;
      box-shadow: var(--shadow-sm)
    }

    .bubble-in {
      align-self: flex-start;
      background: var(--white);
      color: var(--navy-900);
      border-bottom-left-radius: 4px
    }

    .bubble-out {
      align-self: flex-end;
      background: var(--blue-600);
      color: var(--white);
      border-bottom-right-radius: 4px
    }

    .bubble-tag {
      background: var(--navy-800);
      font-size: .68rem;
      font-weight: 600;
      opacity: .9;
      padding: 6px 12px
    }

    .bubble.typing {
      display: flex;
      gap: 4px;
      align-items: center;
      padding: 12px 16px
    }

    .bubble.typing span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gray-500);
      animation: blink 1.4s infinite ease-in-out
    }

    .bubble.typing span:nth-child(2) {
      animation-delay: .2s
    }

    .bubble.typing span:nth-child(3) {
      animation-delay: .4s
    }

    @keyframes blink {

      0%,
      80%,
      to {
        opacity: .25
      }

      40% {
        opacity: 1
      }
    }

    .floating-card {
      position: absolute;
      background: linear-gradient(180deg, #fff, #f7fbff);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-md);
      border: 1px solid rgba(20, 135, 179, .22);
      padding: 10px 16px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--navy-900);
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 4
    }

    .floating-card-top {
      top: 8px;
      left: -20px
    }

    .floating-card-bottom {
      bottom: -48px;
      right: -100px;
      white-space: nowrap;
      background: linear-gradient(135deg, var(--navy-800) 0%, #0f5a7a 55%, var(--blue-600) 100%);
      border: 1px solid rgba(255, 200, 87, .45);
      color: var(--white);
      box-shadow: 0 12px 32px #0a254047, 0 0 0 1px #ffffff14 inset;
      padding: 12px 16px;
      gap: 10px;
      animation: floating-card-pulse 2.8s ease-in-out infinite
    }

    .floating-card-bottom strong {
      color: #7dd3fc;
      font-size: 1.05rem;
      font-family: var(--font-display)
    }

    .floating-card-badge {
      flex-shrink: 0;
      background: linear-gradient(180deg, #ffd875, #f5a623);
      color: var(--navy-900);
      font-family: var(--font-display);
      font-size: .65rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 999px
    }

    .floating-card-text {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px;
      line-height: 1.25
    }

    .floating-card-text em {
      font-style: normal;
      font-weight: 800;
      color: #ffc857
    }

    @keyframes floating-card-pulse {

      0%,
      to {
        transform: translateY(0);
        box-shadow: 0 12px 32px #0a254047, 0 0 0 1px #ffffff14 inset
      }

      50% {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px #0a254059, 0 0 24px #f5a62340
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .floating-card-bottom {
        animation: none
      }
    }

    @media(max-width:1200px) {
      .floating-card-bottom {
        bottom: -50px;
        right: -80px
      }
    }

    .floating-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #2ecc71;
      display: inline-block
    }

    @media(prefers-reduced-motion:reduce) {
      .bubble.typing span {
        animation: none
      }

      .btn:after {
        display: none;
        transition: none
      }
    }

    .pain-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 40px
    }

    .pain-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      padding: 26px 22px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }

    .pain-card p {
      font-size: .9rem;
      color: var(--gray-500);
      margin-top: 6px
    }

    .pain-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 45px #0a25401f;
      border-color: #1487b359
    }

    .card-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      background: var(--blue-100);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue-600);
      flex-shrink: 0
    }

    .card-icon svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .card-icon-light {
      background: #ffffff1f;
      color: #9fd3ea
    }

    .callout {
      border-radius: var(--radius-lg);
      padding: 40px;
      text-align: center
    }

    .callout-dark {
      background: var(--navy-800);
      color: var(--white)
    }

    .callout-dark .btn-primary {
      background: var(--white);
      color: var(--navy-900);
      box-shadow: 0 8px 24px #0000002e
    }

    .callout-dark .btn-primary:hover {
      background: var(--blue-100);
      color: var(--navy-900);
      box-shadow: 0 12px 28px #00000038
    }

    .callout-dark p {
      font-size: 1.15rem
    }

    .callout-detail {
      font-size: .95rem !important;
      color: #e2edf5;
      font-weight: 400;
      margin: 12px auto 24px;
      max-width: 560px
    }

    .callout-detail strong {
      color: var(--white);
      font-weight: 700
    }

    .callout-detail .text-alert {
      color: #ffc857;
      font-weight: 800;
      letter-spacing: .04em
    }

    .section-solucao {
      background: var(--white)
    }

    .solucao-hero {
      display: grid;
      grid-template-columns: minmax(260px, 340px) 1fr;
      gap: 56px;
      align-items: center
    }

    .solucao-teo-panel {
      background: linear-gradient(165deg, var(--navy-800) 0%, #0f5a7a 100%);
      border-radius: var(--radius-lg);
      padding: 32px 28px 36px;
      text-align: center;
      color: var(--white);
      box-shadow: var(--shadow-md);
      align-self: center
    }

    .neo-solucao-lg {
      width: min(220px, 100%);
      height: auto;
      margin: 0 auto 16px;
      filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .28))
    }

    .solucao-body {
      align-self: center
    }

    .solucao-teo-panel .neo-label {
      color: #dff0f8 !important;
      margin-bottom: 12px !important
    }

    .solucao-quote {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      font-style: normal;
      color: #e8f4fb;
      line-height: 1.5;
      margin: 0 0 24px
    }

    .solucao-body .eyebrow,
    .solucao-body h2,
    .solucao-lead {
      text-align: left
    }

    .solucao-body .eyebrow {
      display: inline-block;
      margin-left: 0
    }

    .solucao-lead {
      font-size: 1.05rem;
      color: var(--gray-700);
      margin: 12px 0 32px
    }

    .solucao-feature-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px
    }

    .solucao-feature {
      background: var(--blue-50);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      padding: 22px 20px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }

    .solucao-feature-wide {
      grid-column: 1 / -1;
      display: flex;
      align-items: flex-start;
      gap: 16px
    }

    .solucao-feature-wide .card-icon {
      margin-bottom: 0
    }

    .solucao-feature h3 {
      font-size: 1rem;
      margin-bottom: 6px
    }

    .solucao-feature p {
      font-size: .88rem;
      color: var(--gray-500);
      line-height: 1.45
    }

    .solucao-feature .card-icon {
      margin-bottom: 12px
    }

    .solucao-feature:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px #0a25401a;
      border-color: #1487b359
    }

    .section-meta {
      background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(42, 167, 214, .14), transparent 60%), var(--blue-50)
    }

    .meta-trust-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-bottom: 36px
    }

    .meta-trust-item {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      padding: 22px 16px;
      text-align: center;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }

    .meta-trust-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 36px #0a25401a;
      border-color: #1487b359
    }

    .meta-trust-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--blue-100);
      margin-bottom: 12px;
      position: relative
    }

    .meta-trust-icon:after {
      content: "";
      position: absolute;
      top: 7px;
      left: 11px;
      width: 5px;
      height: 10px;
      border: solid var(--blue-600);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg)
    }

    .meta-trust-item h3 {
      font-size: .92rem;
      margin-bottom: 6px
    }

    .meta-trust-item p {
      font-size: .78rem;
      color: var(--gray-500);
      line-height: 1.4
    }

    .meta-bonus-band {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 40px;
      align-items: center;
      background: linear-gradient(120deg, var(--navy-900) 0%, #0f5a7a 55%, var(--blue-600) 100%);
      border-radius: var(--radius-lg);
      padding: 36px 44px;
      box-shadow: var(--shadow-md)
    }

    .meta-bonus-badge {
      display: inline-block;
      background: #ffffff24;
      color: #dff0f8;
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 999px;
      margin-bottom: 10px
    }

    .meta-bonus-number {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 5vw, 3.6rem);
      font-weight: 800;
      color: var(--white);
      line-height: 1;
      margin-bottom: 6px
    }

    .meta-bonus-label {
      font-weight: 600;
      color: #e2edf5;
      font-size: .95rem
    }

    .meta-bonus-copy p {
      color: #d7e4f0;
      font-size: .95rem;
      margin-bottom: 20px;
      max-width: 480px
    }

    .meta-bonus-stat {
      text-align: center;
      min-width: 200px
    }

    .check-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 1rem;
      color: var(--navy-900);
      font-weight: 500
    }

    .check-list-lg li {
      font-size: 1.05rem
    }

    .check {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      background: var(--blue-100);
      border-radius: 50%;
      position: relative
    }

    .check:after {
      content: "";
      position: absolute;
      top: 5px;
      left: 8px;
      width: 5px;
      height: 10px;
      border: solid var(--blue-600);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg)
    }

    .solucao-tagline {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg);
      padding: 36px;
      box-shadow: var(--shadow-sm)
    }

    .solucao-tagline-neo {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 28px 32px
    }

    .neo-solucao {
      width: 140px;
      height: auto;
      flex-shrink: 0;
      filter: drop-shadow(0 8px 16px rgba(10, 37, 64, .12))
    }

    .neo-label {
      font-family: var(--font-display);
      font-size: .72rem !important;
      font-weight: 700 !important;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--navy-800) !important;
      margin-bottom: 8px !important
    }

    .solucao-tagline p {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--navy-900);
      margin-bottom: 22px
    }

    .solucao-tagline .neo-label+p {
      font-size: 1.1rem
    }

    .segment-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 32px
    }

    .segment-tab {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .9rem;
      padding: 12px 22px;
      border-radius: 999px;
      border: 1.5px solid var(--gray-200);
      background: var(--white);
      color: var(--gray-500);
      cursor: pointer;
      transition: all .15s ease
    }

    .segment-tab.is-active {
      background: var(--navy-800);
      color: var(--white);
      border-color: var(--navy-800)
    }

    .segment-tab:hover:not(.is-active) {
      border-color: var(--blue-500);
      color: var(--navy-800)
    }

    .segment-panel {
      display: none;
      background: var(--blue-50);
      border-radius: var(--radius-lg);
      padding: 36px 40px
    }

    .segment-panel.is-active {
      display: block
    }

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

    .feature-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      padding: 28px 24px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }

    .feature-card-highlight {
      background: var(--navy-800);
      border-color: var(--navy-800)
    }

    .feature-card-highlight h3,
    .feature-card-highlight p {
      color: var(--white)
    }

    .feature-card-highlight p {
      color: #dce8f2
    }

    .neo-feature {
      width: 64px;
      height: auto;
      margin-bottom: 12px;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25))
    }

    .feature-card p {
      font-size: .88rem;
      color: var(--gray-500);
      margin-top: 6px
    }

    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 45px #0a25401f;
      border-color: #1487b359
    }

    .journey {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-top: 8px
    }

    .journey-step {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      padding: 24px 18px;
      position: relative;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }

    .journey-num {
      width: 34px;
      height: 34px;
      background: var(--blue-600);
      color: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 800;
      margin-bottom: 14px
    }

    .journey-step p {
      font-size: .85rem;
      color: var(--gray-500);
      margin-top: 6px
    }

    .journey-step:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 45px #0a25401f;
      border-color: #1487b359
    }

    .journey-tagline {
      text-align: center;
      margin-top: 36px;
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--navy-800);
      font-size: 1.02rem
    }

    .two-col {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 56px;
      align-items: center
    }

    .tagline-inline {
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--navy-900);
      font-size: 1.05rem;
      margin-top: 28px
    }

    .highlight-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 40px;
      text-align: center;
      box-shadow: var(--shadow-md);
      border: 1px solid rgba(18, 63, 99, .12);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }

    .highlight-badge {
      display: inline-block;
      background: var(--blue-100);
      color: var(--blue-600);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .72rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 18px
    }

    .highlight-number {
      font-family: var(--font-display);
      font-size: 3.2rem;
      font-weight: 800;
      color: var(--navy-900);
      line-height: 1
    }

    .highlight-label {
      font-weight: 600;
      color: var(--navy-800);
      margin: 8px 0 16px
    }

    .highlight-detail {
      font-size: .88rem;
      color: var(--gray-500);
      margin-bottom: 24px
    }

    .highlight-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 45px #0a25401f;
      border-color: #1487b359
    }

    .compare-table {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--gray-200)
    }

    .compare-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr
    }

    .compare-row>div {
      padding: 18px 22px;
      font-size: .92rem
    }

    .compare-head {
      background: var(--navy-900)
    }

    .compare-head div {
      color: var(--white);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .85rem
    }

    .compare-row:not(.compare-head):nth-child(2n) {
      background: var(--gray-100)
    }

    .compare-label {
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--navy-900)
    }

    .compare-before {
      color: var(--gray-500);
      font-style: italic
    }

    .compare-after {
      color: var(--blue-600);
      font-weight: 600
    }

    .center-cta {
      text-align: center;
      margin-top: 44px
    }

    .center-cta .btn {
      min-width: min(100%, 320px)
    }

    .stel-behind-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr);
      gap: 40px;
      align-items: center;
      margin-top: 40px
    }

    .stel-fachada {
      margin: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: 0 20px 50px #00000059
    }

    .stel-fachada img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block
    }

    .stel-fachada-caption {
      padding: 14px 18px;
      background: #ffffff0f;
      font-family: var(--font-display);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: #c8d9e8;
      text-align: center
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin: 8px 0 32px
    }

    .pillars-grid-compact {
      grid-template-columns: repeat(2, 1fr);
      margin: 0
    }

    .pillar-box {
      background: #ffffff0f;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--radius-md);
      padding: 26px 22px
    }

    .pillar-box h3 {
      color: var(--white)
    }

    .pillar-box p {
      font-size: .86rem;
      color: #d0deea;
      margin-top: 6px
    }

    .logo-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 12px
    }

    .logo-slot {
      min-height: 100px;
      padding: 18px 20px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .logo-slot img {
      max-width: 100%;
      max-height: 56px;
      width: auto;
      height: auto;
      object-fit: contain;
      object-position: center
    }

    .logo-slot-dark {
      background: #1a1a1a;
      border-color: #1a1a1a
    }

    .logo-slot-sicredi {
      background: #78be20;
      border-color: #78be20
    }

    .logo-slot-sicredi img,
    .logo-slot-dark img {
      max-height: 48px
    }

    @media(max-width:980px) {
      .pain-grid-slim {
        grid-template-columns: repeat(2, 1fr)
      }

      .pain-grid-slim .pain-card:last-child {
        grid-column: 1 / -1
      }

      .cta-band-inner {
        flex-direction: column;
        align-items: flex-start
      }
    }

    @media(max-width:720px) {
      .logo-strip {
        grid-template-columns: repeat(2, 1fr)
      }

      .logo-slot {
        min-height: 88px;
        padding: 14px
      }

      .logo-slot img {
        max-height: 44px
      }
    }

    .section-oferta {
      background: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(42, 167, 214, .35), transparent 55%), linear-gradient(165deg, #071829 0%, var(--navy-900) 40%, #0a3d5c 100%);
      padding: 96px 0
    }

    .section-oferta .oferta-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 40px
    }

    .oferta-ribbon {
      display: inline-block;
      background: linear-gradient(90deg, #f5a623, #ffc857);
      color: var(--navy-900);
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 8px 18px;
      border-radius: 999px;
      margin-bottom: 20px;
      box-shadow: 0 4px 20px #f5a62373
    }

    .oferta-title {
      color: var(--white);
      font-size: clamp(1.9rem, 3.5vw, 2.75rem);
      margin-bottom: 14px
    }

    .oferta-accent {
      color: #7dd3fc;
      position: relative
    }

    .oferta-sub {
      color: #b8c9d8;
      font-size: 1.05rem;
      line-height: 1.6
    }

    .oferta-card {
      position: relative;
      background: var(--white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 0 0 1px #ffffff1f, 0 24px 80px #00000073, 0 0 60px #2aa7d626
    }

    .oferta-highlights {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      padding: 24px 32px;
      background: linear-gradient(90deg, var(--navy-800) 0%, #0f5a7a 100%);
      border-bottom: 3px solid #ffc857
    }

    .oferta-chip {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      border-radius: var(--radius-sm);
      flex: 1;
      min-width: min(100%, 260px)
    }

    .oferta-chip-primary {
      background: #ffffff1a;
      border: 1px solid rgba(125, 211, 252, .35)
    }

    .oferta-chip-gold {
      background: #ffc85726;
      border: 1px solid rgba(255, 200, 87, .45)
    }

    .oferta-chip-num {
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: 800;
      color: #7dd3fc;
      line-height: 1
    }

    .oferta-chip-tag {
      font-family: var(--font-display);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #ffc857;
      background: #ffc85733;
      padding: 4px 10px;
      border-radius: 999px
    }

    .oferta-chip-label {
      font-size: .88rem;
      font-weight: 600;
      color: #e2edf5
    }

    .oferta-chip-label s {
      color: #a9bccb;
      text-decoration-thickness: 1.5px
    }

    .oferta-chip-label strong {
      color: #ffc857;
      font-weight: 800
    }

    .oferta-body {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      align-items: stretch
    }

    .oferta-features {
      display: flex;
      flex-direction: column;
      padding: 28px 32px 32px;
      min-height: 100%
    }

    .oferta-includes {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .78rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--gray-500);
      margin-bottom: 16px;
      flex-shrink: 0
    }

    .oferta-list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 1fr;
      gap: 10px;
      flex: 1
    }

    .oferta-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .9rem;
      font-weight: 500;
      color: var(--navy-900);
      background: var(--blue-50);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      line-height: 1.35
    }

    .oferta-list .check {
      width: 22px;
      height: 22px;
      flex-shrink: 0
    }

    .oferta-action {
      position: relative;
      background: linear-gradient(165deg, var(--navy-900) 0%, #0f5a7a 50%, var(--blue-600) 100%);
      padding: 36px 32px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden
    }

    .oferta-action:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .12), transparent 55%);
      pointer-events: none
    }

    .oferta-teo {
      width: 88px;
      height: auto;
      margin-bottom: 8px;
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .3));
      position: relative;
      z-index: 1
    }

    .oferta-scarcity {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #ffc857;
      margin-bottom: 4px;
      position: relative;
      z-index: 1
    }

    .oferta-counter {
      font-family: var(--font-display);
      font-size: clamp(4rem, 8vw, 5.5rem);
      font-weight: 800;
      color: var(--white);
      line-height: 1;
      text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
      position: relative;
      z-index: 1
    }

    .oferta-counter-label {
      font-weight: 600;
      color: #e2edf5;
      font-size: 1rem;
      margin-bottom: 24px;
      position: relative;
      z-index: 1
    }

    .btn-oferta {
      background: linear-gradient(180deg, #ffc857, #f5a623);
      color: var(--navy-900);
      border-color: #ffc857;
      font-size: 1.05rem;
      padding: 18px 36px;
      box-shadow: 0 8px 32px #f5a62373;
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 280px
    }

    .btn-oferta:hover {
      background: linear-gradient(180deg, #ffd875, #ffc857);
      box-shadow: 0 12px 40px #f5a6238c;
      transform: translateY(-2px)
    }

    .oferta-note {
      font-size: .72rem;
      color: #b8c9d8;
      margin-top: 16px;
      line-height: 1.5;
      max-width: 240px;
      position: relative;
      z-index: 1
    }

    .plan-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }

    .plan-features {
      padding: 44px
    }

    .plan-cta {
      background: var(--navy-800);
      color: var(--white);
      padding: 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center
    }

    .plan-cta-label {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .78rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #dff0f8;
      margin-bottom: 10px
    }

    .plan-cta-text {
      font-size: 1rem;
      margin-bottom: 24px
    }

    .plan-cta .btn {
      margin: 0 auto
    }

    .plan-cta .btn-primary {
      background: var(--white);
      color: var(--navy-900);
      box-shadow: 0 8px 24px #0000002e
    }

    .plan-cta .btn-primary:hover {
      background: var(--blue-100);
      color: var(--navy-900);
      box-shadow: 0 12px 28px #00000038
    }

    .plan-note {
      font-size: .76rem;
      color: #d0deea;
      margin-top: 18px;
      line-height: 1.5
    }

    .plan-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 45px #0a25401f;
      border-color: #1487b359
    }

    .faq-list {
      max-width: 760px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .faq-item {
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      overflow: hidden
    }

    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      background: var(--white);
      border: none;
      text-align: left;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .98rem;
      color: var(--navy-900);
      cursor: pointer
    }

    .faq-icon {
      flex-shrink: 0;
      width: 12px;
      height: 12px;
      border-right: 2px solid var(--blue-600);
      border-bottom: 2px solid var(--blue-600);
      transform: rotate(45deg);
      transition: transform .2s ease
    }

    .faq-item.is-open .faq-icon {
      transform: rotate(-135deg)
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .25s ease;
      padding: 0 24px
    }

    .faq-item.is-open .faq-answer {
      max-height: 240px;
      padding: 0 24px 22px
    }

    .faq-answer p {
      font-size: .92rem;
      color: var(--gray-500)
    }

    .section-contact {
      background: linear-gradient(165deg, var(--navy-900) 0%, #0f3d5c 55%, var(--navy-800) 100%)
    }

    .contact-grid {
      align-items: start;
      gap: 56px;
      grid-template-columns: minmax(0, 400px) minmax(0, 440px);
      justify-content: center
    }

    .contact-aside-lead {
      color: #d7e4f0;
      font-size: 1.05rem;
      margin-bottom: 24px;
      max-width: 380px;
      line-height: 1.6
    }

    .contact-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
      max-width: 340px
    }

    .contact-actions .btn {
      width: 100%
    }

    .contact-trust {
      list-style: none;
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 340px
    }

    .contact-trust li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .88rem;
      color: #c8d9e8
    }

    .contact-trust li:before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue-500);
      flex-shrink: 0
    }

    .contact-phone {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #ffffff14;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      margin: 0;
      max-width: 340px;
      transition: background .18s ease, border-color .18s ease, transform .18s ease
    }

    .contact-phone:hover {
      background: #ffffff1f;
      border-color: #ffffff47;
      transform: translateY(-2px)
    }

    .contact-phone-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9fd3ea
    }

    .contact-phone-icon svg {
      width: 20px;
      height: 20px
    }

    .contact-phone-label {
      display: block;
      font-size: .72rem;
      color: #dff0f8
    }

    .contact-phone-number {
      display: block;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--white)
    }

    .lead-form {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 32px;
      box-shadow: 0 24px 60px #00000040;
      border: 1px solid rgba(255, 255, 255, .08)
    }

    .lead-form h3 {
      margin-bottom: 4px
    }

    .form-note {
      font-size: .82rem;
      color: var(--gray-500);
      margin-bottom: 20px
    }

    .field {
      display: block;
      margin-bottom: 14px
    }

    .field-other {
      display: none !important;
      margin-bottom: 14px
    }

    .field-other.is-open {
      display: block !important
    }

    .field span {
      display: block;
      font-size: .84rem;
      font-weight: 600;
      color: var(--navy-800);
      margin-bottom: 6px
    }

    .field input,
    .field select {
      width: 100%;
      padding: 12px 14px;
      min-height: 48px;
      border: 1.5px solid var(--gray-200);
      border-radius: var(--radius-sm);
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--navy-900);
      background: var(--white);
      transition: border-color .15s ease, box-shadow .15s ease
    }

    .field input:focus,
    .field select:focus {
      outline: none;
      border-color: var(--blue-500);
      box-shadow: 0 0 0 3px #2aa7d62e
    }

    .lead-form .btn-primary {
      box-shadow: 0 10px 28px #0d3a5b47
    }

    .form-success {
      margin-top: 14px;
      color: var(--blue-600);
      font-weight: 600;
      font-size: .88rem;
      text-align: center
    }

    .form-error {
      margin-top: 14px;
      color: var(--red-500);
      font-weight: 600;
      font-size: .88rem;
      text-align: center
    }

    .field-hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden
    }

    .thankyou-page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(42, 167, 214, .12), transparent 60%), linear-gradient(165deg, var(--navy-900) 0%, #0f3d5c 55%, var(--navy-800) 100%)
    }

    .site-header-minimal .header-inner {
      justify-content: center
    }

    .thankyou-main {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 48px 0 72px
    }

    .thankyou-card {
      max-width: 560px;
      margin: 0 auto;
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 48px 40px;
      text-align: center;
      box-shadow: 0 24px 60px #00000047
    }

    .thankyou-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 20px;
      color: var(--blue-600)
    }

    .thankyou-icon svg {
      width: 100%;
      height: 100%
    }

    .thankyou-card h1 {
      font-size: clamp(1.75rem, 4vw, 2.2rem);
      margin-bottom: 14px
    }

    .thankyou-lead {
      color: var(--gray-700);
      font-size: 1.02rem;
      line-height: 1.6;
      margin-bottom: 24px
    }

    .thankyou-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 32px;
      text-align: left;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto
    }

    .thankyou-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .9rem;
      color: var(--gray-700)
    }

    .thankyou-list li:before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue-600);
      flex-shrink: 0
    }

    .thankyou-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center
    }

    @media(max-width:480px) {
      .thankyou-card {
        padding: 36px 24px
      }

      .thankyou-actions {
        flex-direction: column;
        align-items: stretch
      }

      .thankyou-actions .btn {
        width: 100%
      }
    }

    .site-footer {
      background: var(--navy-900);
      padding: 40px 0
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px
    }

    .brand-mark-footer {
      color: var(--white)
    }

    .footer-logo {
      height: 40px;
      width: auto;
      display: block;
      background: #fffffff2;
      padding: 8px 12px;
      border-radius: 10px
    }

    .footer-tagline {
      color: #b8c9d8;
      font-size: .82rem;
      margin-top: 10px
    }

    .footer-contact {
      display: flex;
      gap: 24px;
      flex-wrap: wrap
    }

    .footer-contact a {
      color: #e2edf5;
      font-size: .86rem
    }

    .footer-contact a:hover {
      color: var(--white)
    }

    .neo-float {
      position: fixed;
      bottom: calc(20px + env(safe-area-inset-bottom));
      right: calc(20px + env(safe-area-inset-right));
      width: 120px;
      height: 150px;
      z-index: 90;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      transition: transform .2s ease
    }

    .neo-float:hover {
      transform: translateY(-4px) scale(1.04)
    }

    .neo-float img {
      width: 120px;
      height: auto;
      filter: drop-shadow(0 12px 24px rgba(10, 37, 64, .32));
      animation: neo-float 4.5s ease-in-out infinite
    }

    .neo-float-bubble {
      position: absolute;
      top: -2px;
      right: 0;
      background: var(--navy-800);
      color: var(--white);
      font-family: var(--font-display);
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .04em;
      padding: 5px 10px;
      border-radius: 999px;
      box-shadow: var(--shadow-sm)
    }

    @media(prefers-reduced-motion:reduce) {
      .neo-float img {
        animation: none
      }
    }

    .eyebrow-alert {
      color: #b23b38;
      background: #fbe5e4
    }

    .eyebrow-alert:before {
      content: "⚠";
      margin-right: 6px
    }

    .eyebrow-feature {
      max-width: 720px;
      white-space: normal;
      line-height: 1.45;
      letter-spacing: .04em;
      text-align: center;
      padding: 10px 18px
    }

    .api-compare {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 28px
    }

    .api-card {
      border-radius: var(--radius-lg);
      padding: 32px 30px;
      border: 1px solid var(--gray-200);
      background: var(--white);
      transition: transform .18s ease, box-shadow .18s ease
    }

    .api-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 45px #0a25401f
    }

    .api-card h3 {
      font-size: 1.2rem;
      margin: 14px 0 10px
    }

    .api-card>p {
      font-size: .95rem;
      color: var(--gray-700);
      margin-bottom: 18px
    }

    .api-card-bad {
      border-color: #e0524f59;
      background: linear-gradient(180deg, #fdf3f2 0%, var(--white) 60%)
    }

    .api-card-good {
      border-color: #1487b366;
      background: linear-gradient(180deg, #eef7fc 0%, var(--white) 60%);
      box-shadow: 0 12px 32px #1487b31f
    }

    .api-card-tag {
      display: inline-block;
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 999px
    }

    .api-tag-bad {
      color: #b23b38;
      background: #fbe5e4
    }

    .api-tag-good {
      color: var(--blue-600);
      background: var(--blue-100)
    }

    .api-mini-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .api-mini-list li {
      position: relative;
      padding-left: 30px;
      font-size: .92rem;
      color: var(--navy-900);
      line-height: 1.45
    }

    .api-mini-list li:before {
      position: absolute;
      left: 0;
      top: -1px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      font-weight: 800
    }

    .api-mini-bad li:before {
      content: "×";
      background: #fbe5e4;
      color: #d0413d
    }

    .api-danger {
      color: #c0322f;
      font-weight: 800;
      background: linear-gradient(transparent 60%, #e0524f38 0);
      padding: 0 2px;
      border-radius: 2px
    }

    .api-mini-good li:before {
      content: "✓";
      background: var(--blue-100);
      color: var(--blue-600)
    }

    .api-highlight {
      display: flex;
      align-items: center;
      gap: 22px;
      background: linear-gradient(120deg, var(--navy-900) 0%, #0f5a7a 55%, var(--blue-600) 100%);
      border-radius: var(--radius-lg);
      padding: 28px 34px;
      box-shadow: var(--shadow-md)
    }

    .api-highlight-icon {
      flex-shrink: 0;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #ffffff24;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9fd3ea
    }

    .api-highlight-icon svg {
      width: 26px;
      height: 26px
    }

    .api-highlight-tag {
      display: inline-block;
      font-family: var(--font-display);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #ffc857;
      margin-bottom: 6px
    }

    .api-highlight-body h3 {
      color: var(--white);
      font-size: 1.15rem;
      margin-bottom: 6px
    }

    .api-highlight-body p {
      color: #d7e4f0;
      font-size: .95rem
    }

    .api-highlight-body a {
      color: #9fd3ea;
      font-weight: 700;
      text-decoration: underline
    }

    .api-highlight-body a:hover {
      color: var(--white)
    }

    .dores-lead {
      text-align: center;
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--navy-900);
      font-size: 1.15rem;
      margin-bottom: 28px
    }

    .risk-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 40px
    }

    .risk-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: var(--white);
      border: 1px solid rgba(224, 82, 79, .22);
      border-left: 4px solid var(--red-500);
      border-radius: var(--radius-md);
      padding: 22px;
      transition: transform .18s ease, box-shadow .18s ease
    }

    .risk-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 45px #e0524f24
    }

    .risk-card p {
      font-size: .95rem;
      color: var(--navy-900);
      font-weight: 500;
      line-height: 1.45
    }

    .risk-icon {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #fbe5e4;
      position: relative;
      margin-top: 1px
    }

    .risk-icon:before,
    .risk-icon:after {
      content: "";
      position: absolute;
      top: 12px;
      left: 6px;
      width: 14px;
      height: 2px;
      background: #d0413d;
      border-radius: 2px
    }

    .risk-icon:before {
      transform: rotate(45deg)
    }

    .risk-icon:after {
      transform: rotate(-45deg)
    }

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 40px
    }

    .benefit-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-left: 4px solid var(--blue-600);
      border-radius: var(--radius-md);
      padding: 22px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
    }

    .benefit-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 45px #0a25401f;
      border-color: #1487b359;
      border-left-color: var(--blue-600)
    }

    .benefit-card p {
      font-size: .95rem;
      color: var(--navy-900);
      font-weight: 500;
      line-height: 1.45
    }

    .benefit-card-wide {
      grid-column: 1 / -1
    }

    .benefit-check {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--blue-100);
      position: relative;
      margin-top: 1px
    }

    .benefit-check:after {
      content: "";
      position: absolute;
      top: 6px;
      left: 10px;
      width: 5px;
      height: 11px;
      border: solid var(--blue-600);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg)
    }

    .callout-solucoes {
      background: var(--white);
      border: 1px solid rgba(20, 135, 179, .28);
      box-shadow: var(--shadow-md)
    }

    .callout-solucoes p {
      font-size: 1.15rem;
      color: var(--navy-900)
    }

    .callout-solucoes .callout-detail {
      color: var(--gray-700) !important;
      font-weight: 400
    }

    @media(max-width:980px) {

      .risk-grid,
      .benefit-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:720px) {
      .api-compare {
        grid-template-columns: 1fr;
        gap: 14px
      }

      .api-highlight {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 26px 22px
      }

      .risk-grid,
      .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
      }

      .risk-card,
      .benefit-card {
        flex-direction: column;
        gap: 10px
      }

      .benefit-card-wide {
        grid-column: 1 / -1
      }
    }

    @media(max-width:480px) {

      .risk-grid,
      .benefit-grid {
        gap: 10px
      }

      .risk-card,
      .benefit-card {
        padding: 16px 15px
      }

      .risk-card p,
      .benefit-card p {
        font-size: .9rem
      }
    }

    @media(max-width:1140px) {
      .main-nav {
        gap: 18px
      }

      .main-nav a {
        font-size: .82rem
      }

      .brand-logo {
        height: 36px
      }

      .header-actions .btn-primary {
        padding: 10px 16px;
        font-size: .82rem
      }
    }

    @media(max-width:1080px) {
      .header-inner {
        grid-template-columns: 1fr auto;
        gap: 16px
      }

      .main-nav,
      .header-actions {
        display: none
      }

      .nav-toggle {
        display: flex
      }

      .brand {
        grid-column: 1
      }
    }

    @media(max-width:980px) {

      .hero-grid,
      .two-col,
      .solucao-hero {
        grid-template-columns: 1fr
      }

      .solucao-teo-panel {
        position: static
      }

      .meta-trust-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .meta-bonus-band {
        grid-template-columns: 1fr;
        text-align: center
      }

      .meta-bonus-copy p {
        margin-left: auto;
        margin-right: auto
      }

      .meta-bonus-copy .btn {
        margin: 0 auto
      }

      .contact-aside-lead,
      .contact-phone,
      .contact-actions,
      .contact-trust {
        max-width: none
      }

      .hero-visual {
        margin-top: 28px;
        min-height: 340px;
        overflow: visible
      }

      .neo-hero {
        left: 0;
        width: min(180px, 40%);
        z-index: 2
      }

      .phone-mock {
        margin-left: 14%;
        z-index: 1
      }

      .floating-card-top,
      .floating-card-bottom {
        display: none
      }

      .pain-grid,
      .feature-grid,
      .journey,
      .pillars-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .stel-behind-layout {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .pillars-grid-compact {
        grid-template-columns: repeat(2, 1fr)
      }

      .plan-card,
      .oferta-body {
        grid-template-columns: 1fr
      }

      .oferta-list {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto
      }

      .oferta-highlights {
        flex-direction: column
      }

      .compare-row {
        grid-template-columns: 1fr 1fr
      }

      .compare-row .compare-label {
        grid-column: 1 / -1;
        padding-bottom: 4px
      }

      .compare-head {
        display: none
      }
    }

    @media(max-width:720px) {
      .section {
        padding: 64px 0
      }

      .feature-grid,
      .journey {
        grid-template-columns: 1fr
      }

      .pain-grid,
      .pain-grid-slim,
      .solucao-feature-grid,
      .pillars-grid,
      .pillars-grid-compact {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
      }

      .solucao-feature-wide {
        flex-direction: column
      }

      .phone-mock {
        width: 100%;
        max-width: 280px;
        margin-left: 8%
      }

      .neo-hero {
        width: min(150px, 38%)
      }

      .meta-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
      }

      .meta-trust-item:last-child {
        grid-column: 1 / -1
      }

      .neo-float {
        width: 92px;
        height: 116px
      }

      .neo-float img {
        width: 92px
      }

      .compare-table {
        border: none;
        border-radius: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 14px
      }

      .compare-row {
        grid-template-columns: 1fr;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        overflow: hidden
      }

      .compare-row:not(.compare-head):nth-child(2n) {
        background: var(--white)
      }

      .compare-row>div {
        padding: 14px 18px
      }

      .compare-label {
        background: var(--navy-900);
        color: var(--white);
        font-size: .95rem
      }

      .compare-before,
      .compare-after {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        font-style: normal;
        border-top: 1px solid var(--gray-200)
      }

      .compare-before:before,
      .compare-after:before {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: .7rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        flex-shrink: 0
      }

      .compare-before {
        color: var(--gray-500)
      }

      .compare-before:before {
        content: "Tradicional";
        color: var(--red-500)
      }

      .compare-after:before {
        content: "StelBot";
        color: var(--blue-600)
      }

      .compare-after {
        text-align: right
      }

      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
      }

      .footer-contact {
        flex-direction: column;
        gap: 12px
      }

      .footer-contact a {
        min-height: 32px;
        display: flex;
        align-items: center
      }
    }

    @media(max-width:480px) {
      .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right))
      }

      .section {
        padding: 52px 0
      }

      h1 {
        font-size: clamp(1.85rem, 8vw, 2.3rem)
      }

      .hero {
        padding: 56px 0
      }

      .hero-sub {
        font-size: 1rem
      }

      .hero-cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
      }

      .hero-cta-row .btn,
      .cta-band-inner .btn,
      .center-cta .btn {
        width: 100%
      }

      .trust-strip {
        gap: 8px 20px
      }

      .callout {
        padding: 28px 22px
      }

      .callout-dark p {
        font-size: 1.05rem
      }

      .lead-form {
        padding: 26px 20px
      }

      .oferta-features {
        padding: 24px 20px
      }

      .oferta-action {
        padding: 30px 20px 34px
      }

      .oferta-highlights {
        padding: 20px
      }

      .segment-panel {
        padding: 26px 20px
      }

      .meta-bonus-band {
        padding: 28px 22px
      }

      .solucao-teo-panel {
        padding: 28px 22px 30px
      }

      .pain-card {
        padding: 18px 15px
      }

      .pain-card h3 {
        font-size: 1rem
      }

      .solucao-feature,
      .pillar-box {
        padding: 18px 15px
      }

      .meta-trust-item {
        padding: 18px 14px
      }

      .pain-grid,
      .pain-grid-slim,
      .solucao-feature-grid,
      .pillars-grid,
      .pillars-grid-compact,
      .meta-trust-grid {
        gap: 10px
      }

      .card-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 10px
      }

      .brand-logo {
        height: 32px
      }

      .brand-product {
        font-size: .72rem;
        padding: 3px 8px
      }

      .header-inner {
        min-height: 64px;
        height: 64px
      }

      .nav-drawer {
        max-height: calc(100dvh - 64px)
      }
    }

    @media(max-height:480px)and (orientation:landscape) {
      .hero {
        padding: 40px 0
      }

      .hero-visual {
        min-height: 260px
      }

      .nav-drawer {
        max-height: 80dvh
      }
    }