:root {
      --ink: #031957;
      --ink-2: #000000;
      --ink-3: #167dff;
      --paper: #f4f6fc;
      --paper-2: #ffffff;
      --brand: #2544e5;
      --brand-light: #4180c2;
      --brand-soft: rgba(37, 68, 229, .08);
      --valid: #1c7a5b;
      --line: #dde3f0;
      --line-2: #e9edf6;
      --muted: #000000;
      --muted-2: #000000;
      --ink-line: rgba(37, 68, 229, .16);
      --shadow-sm: 0 2px 8px rgba(33, 28, 28, .06);
      --shadow-md: 0 14px 30px rgba(33, 28, 28, .07);
      --shadow-lg: 0 24px 56px rgba(33, 28, 28, .12);
      --radius: 14px;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px
    }

    body {
      font-family: 'Google Sans', sans-serif;
      font-weight: 400;
      color: var(--ink);
      background: var(--paper);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    .display {
      font-family: 'Google Sans', sans-serif;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.025em
    }

    .mono {
      font-family: 'Google Sans', sans-serif
    }

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

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

    button {
      font-family: 'Google Sans', sans-serif;
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 28px
    }

    .eyebrow {
      font-family: 'Google Sans', sans-serif;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--brand);
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .eyebrow::before {
      content: "";
      width: 18px;
      height: 1px;
      background: var(--brand)
    }

    /* ===== SCROLL PROGRESS ===== */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0;
      z-index: 200;
      background: linear-gradient(90deg, var(--brand), var(--brand-light));
      transition: width .1s linear;
    }

    /* ===== TOASTS ===== */
    .toasts {
      position: fixed;
      top: 90px;
      right: 24px;
      z-index: 300;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none
    }

    .toast {
      pointer-events: auto;
      background: var(--ink);
      color: var(--paper);
      padding: 14px 18px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 18px 40px rgba(33, 28, 28, .25);
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 280px;
      max-width: 380px;
      transform: translateX(120%);
      opacity: 0;
      transition: transform .35s cubic-bezier(.5, 1.6, .4, 1), opacity .3s;
      border: 1px solid rgba(106, 169, 255, .18);
    }

    .toast.show {
      transform: translateX(0);
      opacity: 1
    }

    .toast .tic {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--valid);
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .toast .tic svg {
      width: 14px;
      height: 14px;
      color: #fff
    }

    .toast.exit {
      transform: translateX(120%);
      opacity: 0
    }

    /* ===== NAV ===== */
    nav {
      position: fixed;
      top: 12px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: calc(100% - 66px);
      max-width: 1160px;
      z-index: 200;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border: 1px solid rgba(255, 255, 255, 0.38);
      border-radius: 22px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1.5px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
      transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
    }

    .nav-in {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 11px;
      font-family: 'Google Sans', sans-serif;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: -.02em
    }

    .logo-img {
      height: 55px;
      width: auto;
      display: block
    }

    .logo-foot {
      background: #fff;
      padding: 11px 16px;
      border-radius: 12px;
      display: inline-flex
    }

    .logo-foot .logo-img {
      height: 56px
    }

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

    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      padding: 9px 15px;
      border-radius: 7px;
      color: var(--ink-2);
      transition: background .18s, color .18s;
    }

    .nav-links a:hover {
      background: rgba(37, 68, 229, .1);
      color: var(--ink)
    }

    .nav-cta {
      background: var(--ink) !important;
      color: var(--paper) !important;
      padding: 10px 18px !important;
      position: relative
    }

    .nav-cta:hover {
      background: var(--brand) !important
    }

    .nav-cta::after {
      content: "";
      position: absolute;
      top: 8px;
      right: 8px;
      width: 6px;
      height: 6px;
      background: #00ff5a;
      border-radius: 50%;
      animation: pulse 2s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .5;
        transform: scale(1.4)
      }
    }

    .nav-item.has-dropdown {
      position: relative
    }

    .nav-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      padding: 9px 15px;
      border-radius: 7px;
      color: var(--ink-2);
      background: none;
      border: none;
      cursor: pointer;
      transition: background .18s, color .18s;
    }

    .nav-dropdown-trigger:hover,
    .nav-dropdown-trigger.open {
      background: rgba(37, 68, 229, .1);
      color: var(--ink)
    }

    .nav-dropdown-trigger .chev {
      transition: transform .2s
    }

    .nav-dropdown-trigger.open .chev {
      transform: rotate(180deg)
    }

    .nav-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 230px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(33, 28, 28, .14);
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .18s, transform .18s, visibility .18s;
      z-index: 70;
    }

    .nav-dropdown.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
    }

    .nav-dropdown a {
      font-size: 14px;
      font-weight: 500;
      padding: 9px 12px;
      border-radius: 8px;
      color: var(--ink-2);
    }

    .nav-dropdown a:hover {
      background: rgba(37, 68, 229, .1);
      color: var(--ink)
    }

    .burger {
      display: none;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px;
      cursor: pointer;
      z-index: 60
    }

    .burger span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--ink);
      margin: 4px 0;
      transition: transform .25s, opacity .2s
    }

    .burger.open span:nth-child(1) {
      transform: translateY(6px) rotate(45deg)
    }

    .burger.open span:nth-child(2) {
      opacity: 0
    }

    .burger.open span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg)
    }

    .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(33, 28, 28, .45);
      backdrop-filter: blur(2px);
      z-index: 49;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s;
    }

    .drawer-overlay.show {
      opacity: 1;
      pointer-events: auto
    }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      padding: 80px 0 50px;
      overflow: hidden;
      background:
        radial-gradient(circle at 88% 18%, rgba(106, 169, 255, .12), transparent 42%),
        radial-gradient(circle at 12% 82%, rgba(37, 68, 229, .07), transparent 50%)
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: .5;
      background-image: repeating-radial-gradient(circle at 78% 35%, transparent 0, transparent 13px, var(--ink-line) 13px, var(--ink-line) 14px);
      -webkit-mask: radial-gradient(circle at 78% 35%, #000, transparent 62%);
      mask: radial-gradient(circle at 78% 35%, #000, transparent 62%);
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 690px;
      gap: 10px;
      align-items: start;
      padding-top: 18px
    }


    .hero h1 {
      font-size: clamp(40px, 6.4vw, 65px);
      margin: 18px 0 22px;
      font-weight: 800;
      letter-spacing: -.035em
    }

    .hero h1 em {
      font-style: normal;
      font-weight: 800;
      color: var(--ink-2);
    }

    .hero h1 em .via-grad {
      background: linear-gradient(115deg, #1b2f8f 0%, #2544e5 45%, #17c3ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p.lead {
      font-size: 18px;
      color: var(--ink-2);
      max-width: 520px;
      margin-bottom: 30px
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 38px;
      justify-content: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-weight: 600;
      font-size: 12px;
      padding: 14px 24px;
      border-radius: 9px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: transform .15s, background .18s, box-shadow .25s, border-color .18s;
      font-family: 'Google Sans', sans-serif;
    }

    .btn:active {
      transform: translateY(1px)
    }

    .btn-primary {
      background: var(--ink);
      color: var(--paper)
    }

    .btn-primary:hover {
      background: var(--brand);
      box-shadow: 0 12px 28px rgba(37, 68, 229, .32)
    }

    .btn-ghost {
      background: var(--paper-2);
      color: var(--ink);
      border-color: var(--line)
    }

    .btn-ghost:hover {
      border-color: var(--ink);
      background: #fff;
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm)
    }

    /* Trust badges no hero */
    .trust-row {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
      row-gap: 14px;
      padding-top: 6px;
      justify-content: center;
    }

    .trust-row .lbl {
      font-family: 'Google Sans', sans-serif;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-right: 8px
    }

    .trust-row .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      color: var(--ink-2);
      font-weight: 500
    }

    .trust-row .badge svg {
      width: 18px;
      height: 18px;
      color: var(--brand)
    }

    /* Stats Row inside Hero */
    .stat-row {
      display: flex;
      gap: 32px;
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      flex-wrap: wrap;
    }

    .stat {

      min-width: 110px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: center;
    }

    .stat .n {
      font-size: clamp(24px, 3vw, 32px);
      font-weight: 800;
      color: var(--brand);
      line-height: 1;
      letter-spacing: -.02em;
    }

    .stat .l {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      opacity: 0.75;
      line-height: 1.3;
    }

    /* LOJA dentro do hero */
    .hero-store {
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      position: relative;
      border-color: blue;
    }

    .hero-store::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      padding: 1px;
      background: linear-gradient(135deg, rgba(106, 169, 255, .4), transparent 40%, transparent 60%, rgba(37, 68, 229, .3));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .hero-store.pulse-aura {
      animation: loja-aura-pulse 1.5s ease-in-out;
    }

    @keyframes loja-aura-pulse {

      0%,
      100% {
        box-shadow: var(--shadow-lg), 0 0 0 0 rgba(37, 68, 229, 0);
      }

      20% {
        box-shadow: var(--shadow-lg), 0 0 0 2px rgba(37, 68, 229, .55), 0 0 22px 3px rgba(37, 68, 229, .35);
      }

      40% {
        box-shadow: var(--shadow-lg), 0 0 0 0 rgba(37, 68, 229, 0);
      }

      60% {
        box-shadow: var(--shadow-lg), 0 0 0 2px rgba(37, 68, 229, .55), 0 0 22px 3px rgba(37, 68, 229, .35);
      }

      80% {
        box-shadow: var(--shadow-lg), 0 0 0 0 rgba(37, 68, 229, 0);
      }
    }

    .store-head {
      padding: 16px 24px 4px;
      position: relative
    }

    .store-head h2 {
      font-size: 22px;
      margin: 4px 0
    }

    .store-head p {
      font-size: 13.5px;
      color: var(--muted)
    }

    .hero-store .config-fields {
      border-right: none;
      padding: 14px 24px 16px
    }

    .hero-store .field {
      margin-bottom: 12px
    }

    .hero-store .field:last-child {
      margin-bottom: 0
    }

    /* ===== Botões do configurador (.opts / .opt) ===== */
    .opts {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      width: 100%;
    }

    .opts .opt {
      flex: 1 1 0;
      min-width: 0;
      justify-content: center;
    }

    .opt {
      position: relative;
      font-family: 'Google Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      padding: 7px 12px;
      border: 1.5px solid var(--line);
      border-radius: 8px;
      cursor: pointer;
      background: var(--paper);
      transition: background .18s, border-color .18s, color .18s, transform .12s, box-shadow .2s;
      user-select: none;
      color: var(--ink-2);
      line-height: 1.25;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .opt:hover {
      border-color: var(--brand);
      color: var(--ink);
      background: var(--paper-2);
      transform: translateY(-1px)
    }

    .opt:focus-visible {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(37, 68, 229, .18)
    }

    .opt.active {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
      box-shadow: 0 4px 12px rgba(33, 28, 28, .18);
    }

    .opt.disabled {
      opacity: .32;
      cursor: not-help;
      pointer-events: none;
      text-decoration: line-through;
      background: var(--paper);
    }

    .opt.hidden {
      display: none;
    }

    .opt.disabled::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: var(--ink);
      color: var(--paper);
      font-family: 'Google Sans', sans-serif;
      font-size: 11.5px;
      font-weight: 500;
      line-height: 1.3;
      padding: 7px 11px;
      border-radius: 7px;
      white-space: nowrap;
      box-shadow: 0 8px 20px rgba(33, 28, 28, .25);
      opacity: 0;
      pointer-events: none;
      transition: all .2s;
      z-index: 5;
      text-decoration: none;
      letter-spacing: 0;
    }

    .opt.disabled::before {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--ink);
      opacity: 0;
      transition: opacity .2s;
      z-index: 5;
    }

    .opt.disabled:hover {
      opacity: .55
    }

    .opt.disabled:hover::after,
    .opt.disabled:hover::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    /* ===== Pequeno ponto de informação (ícone "i") + tooltip ===== */
    .opt .info-ic {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid currentColor;
      font-family: 'Google Sans', sans-serif;
      font-size: 9px;
      font-weight: 700;
      font-style: italic;
      line-height: 1;
      opacity: .4;
      cursor: help;
      position: relative;
      vertical-align: middle;
      text-decoration: none;
      flex: none;
      transition: opacity .2s, background .2s, color .2s, border-color .2s;
    }

    .opt:hover .info-ic {
      opacity: .85;
    }

    .opt .info-ic:hover {
      opacity: 1;
      background: var(--brand);
      color: var(--paper);
      border-color: var(--brand);
    }

    .opt.active .info-ic {
      border-color: rgba(244, 246, 252, .55);
      color: var(--paper);
      opacity: .7;
    }

    .opt.active .info-ic:hover {
      background: var(--brand-light);
      color: var(--ink);
      border-color: var(--brand-light);
      opacity: 1;
    }

    .opt .info-ic::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: var(--ink);
      color: var(--paper);
      font-family: 'Google Sans', sans-serif;
      font-size: 11.5px;
      font-weight: 500;
      font-style: normal;
      line-height: 1.3;
      padding: 7px 11px;
      border-radius: 7px;
      white-space: nowrap;
      box-shadow: 0 8px 20px rgba(33, 28, 28, .25);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s, transform .2s;
      z-index: 5;
      text-decoration: none;
      letter-spacing: 0;
      border: none;
      width: auto;
      height: auto;
    }

    .opt .info-ic::before {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--ink);
      opacity: 0;
      transition: opacity .2s;
      z-index: 5;
    }

    .opt .info-ic:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .opt .info-ic:hover::before {
      opacity: 1;
    }

    .store-foot {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 16px;
      align-items: center;
      padding: 16px 24px;
      border-top: 1px solid var(--line);
      background:
        repeating-radial-gradient(circle at 18% 50%, transparent 0, transparent 9px, rgba(37, 68, 229, .05) 9px, rgba(37, 68, 229, .05) 10px),
        linear-gradient(180deg, #fbfcff, var(--paper-2));
      position: relative;
    }

    /* ===== PRODUTO (imagem) ===== */
    #certCardWrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100px;
      padding: 4px;
    }

    .prod-img {
      width: 100%;
      max-width: 197px;
      height: auto;
      display: block;
      object-fit: contain;
      transition: transform .4s cubic-bezier(.5, 1.6, .4, 1), opacity .3s;
      animation: fadeUp .4s cubic-bezier(.4, 0, .2, 1);
    }

    .prod-img:hover {
      transform: translateY(-4px) scale(1.02)
    }

    /* Tamanho específico da imagem exibida quando o certificado "Nuvem" é selecionado */
    .prod-img-nuvem {
      max-width: 99px;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* preço */
    .price-meta {
      font-family: 'Google Sans', sans-serif;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 10px;
      line-height: 1.7
    }

    .price-meta b {
      color: var(--ink)
    }

    .price-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;

    }

    .price-val .small {
      font-size: 12px;
      color: var(--muted)
    }

    .price-val .big {
      font-family: 'Google Sans', sans-serif;
      font-size: 58px;
      font-weight: 800;
      line-height: 1
    }

    .price-val .big sup {
      font-size: 24px;
      top: -.85em;
      margin-right: 2px;
      font-weight: 500
    }

    .badge-valid {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--valid);




    }

    .badge-valid svg {
      width: 13px;
      height: 13px
    }

    /* breakdown */
    .breakdown {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px dashed var(--line-2);
      font-family: 'Google Sans', sans-serif;
      font-size: 11px;
      color: var(--muted);
      display: grid;
      gap: 5px;
    }

    .breakdown .ln {
      display: flex;
      justify-content: space-between;
      gap: 12px
    }

    .breakdown .ln b {
      color: var(--ink);
      font-weight: 500
    }

    .breakdown .ln.total {
      border-top: 1px solid var(--line);
      padding-top: 7px;
      margin-top: 5px;
      font-size: 12px;
      color: var(--ink);
      font-weight: 600;
    }

    .breakdown .ln.zero {
      opacity: .45
    }

    /* ===== SECTIONS ===== */
    section {
      position: relative
    }

    .band {
      padding: 45px 0
    }

    .band-ink {
      background: linear-gradient(180deg, var(--ink), var(--ink-3));
      color: var(--paper);
      margin: 0px 220px 0px 220px;
      border-radius: 50px;
    }

    .band-ink .eyebrow {
      color: var(--brand-light)
    }

    .band-ink .eyebrow::before {
      background: var(--brand-light)
    }

    .sec-head {
      max-width: 700px;
      margin-bottom: 52px
    }

    .sec-head h2 {
      font-size: clamp(28px, 4vw, 44px);
      margin: 14px 0 16px
    }

    .sec-head p {
      font-size: 16.5px;
      color: var(--muted)
    }

    .band-ink .sec-head p {
      color: rgb(255, 255, 255)
    }

    /* Target specific ID #servicos for white background customization */
    #servicos.band-ink {
      background: #ffffff;
      color: var(--ink);
    }

    #servicos.band-ink .sec-head p {
      color: var(--ink);
    }

    #servicos.band-ink .eyebrow {
      color: var(--brand);
    }

    #servicos.band-ink .eyebrow::before {
      background: var(--brand);
    }

    /* ============================================
       BAND-PROCESS — seção "4 etapas" em azul #2544e5
       ============================================ */
    .band-process {
      background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, .14), transparent 45%),
        radial-gradient(circle at 8% 90%, rgba(22, 125, 255, .35), transparent 55%),
        linear-gradient(180deg, #051044 0%, #2544e5 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .band-process::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: .55;
      background-image: repeating-radial-gradient(circle at 82% 22%, transparent 0, transparent 14px, rgba(255, 255, 255, .08) 14px, rgba(255, 255, 255, .08) 15px);
      -webkit-mask: radial-gradient(circle at 82% 22%, #000, transparent 60%);
      mask: radial-gradient(circle at 82% 22%, #000, transparent 60%);
      pointer-events: none;
    }

    .band-process>.wrap {
      position: relative;
      z-index: 1;
    }

    .band-process .sec-head h2 {
      color: #ffffff;
    }

    .band-process .sec-head p {
      color: rgba(255, 255, 255, 0.82);
    }

    /* Linha tracejada entre steps (deixa visível no azul) */
    .band-process .process-grid::before {
      background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0, rgba(255, 255, 255, .32) 6px, transparent 6px, transparent 12px);
    }

    /* Cards brancos com sombra mais forte (porque o fundo é escuro) */
    .band-process .step {
      background: #ffffff;
      border: 1px solid rgba(255, 255, 255, .35);
      box-shadow: 0 16px 36px rgba(7, 14, 60, .28);
    }

    .band-process .step:hover {
      box-shadow: 0 22px 46px rgba(7, 14, 60, .38);
      transform: translateY(-6px);
    }

    .band-process .step h3 {
      color: var(--ink);
    }

    .band-process .step p {
      color: var(--ink-2);
      opacity: 1;
    }

    /* Bolinha numerada: azul brand com anel branco */
    .band-process .step .num {
      background: var(--brand);
      color: #ffffff;
      box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px rgba(255, 255, 255, .35), 0 8px 18px rgba(7, 14, 60, .3);
    }

    /* stat-row em band-ink (versão clara para fundo escuro) */
    .stat-row-ink {
      border-top: none;
      justify-content: center;
      padding-top: 0;
      margin-top: 0;
    }

    .stat-row-ink .stat {
      align-items: center;
      text-align: center;

      border-radius: 10px;
      padding: 18px 22px;
      min-width: 130px;
    }

    .stat-row-ink .stat .n {
      font-size: clamp(28px, 3.4vw, 40px);
      color: var(--paper-2);
      font-family: 'Google Sans', sans-serif;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.02em;
    }

    .stat-row-ink .stat .l {
      font-size: 15px;
      font-weight: 500;
      color: var(--paper-2);
      font-family: 'Google Sans', sans-serif;
      margin-top: 8px;
      line-height: 1.35;
      letter-spacing: .02em;
      opacity: .75;
    }

    /* explainer cards */
    .ex-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .ex-card {
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
      transition: transform .25s, box-shadow .25s, border-color .25s;
      position: relative;
      overflow: hidden;
    }

    .ex-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: var(--brand);
      transition: width .35s;
    }

    .ex-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
      border-color: var(--brand-light)
    }

    .ex-card:hover::before {
      width: 100%
    }

    .ex-card .num {
      font-family: sans-serif;
      font-weight: 700;
      font-size: 11.5px;
      color: var(--brand);
      letter-spacing: .12em;
      margin-bottom: 4px
    }

    .ex-card h3 {
      font-size: 21px;
      margin: 14px 0 10px
    }

    .ex-card p {
      font-size: 14.5px;
      color: var(--muted)
    }

    .ex-icon {
      width: 42px;
      height: 42px;
      color: var(--ink);
      margin-bottom: 8px
    }

    /* comparison table */
    .compare-wrap {
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }

    .compare-wrap table {
      width: 100%;
      border-collapse: collapse
    }

    .compare-wrap th,
    .compare-wrap td {
      padding: 16px 20px;
      text-align: left;
      font-size: 14.5px;
      border-bottom: 1px solid var(--line-2)
    }

    .compare-wrap th {
      font-family: 'Google Sans', sans-serif;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
      background: var(--paper)
    }

    .compare-wrap th .badge-type {
      font-family: 'Google Sans', sans-serif;
      font-size: 22px;
      color: var(--ink);
      font-weight: 600;
      text-transform: none;
      letter-spacing: -.01em;
      display: block;
      margin-top: 2px;
    }

    .compare-wrap td:first-child {
      font-weight: 600;
      color: var(--ink-2);
      width: 30%
    }

    .compare-wrap td {
      color: var(--ink)
    }

    .compare-wrap tr:last-child td {
      border-bottom: none
    }

    .compare-wrap tr:hover td {
      background: rgba(37, 68, 229, .025)
    }

    .check {
      color: var(--valid);
      font-weight: 700
    }

    .cross {
      color: #cc4444;
      font-weight: 700;
      opacity: .5
    }

    .half {
      color: var(--muted-2);
      font-size: 13px
    }

    /* types-row */
    .types-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 40px
    }

    .type-chip {
      border: 1px solid var(--ink-line);
      border-radius: 14px;
      padding: 24px;
      background: rgba(255, 255, 255, .03);
      transition: transform .2s, border-color .2s, background .2s;
    }

    .type-chip:hover {
      transform: translateY(-4px);
      border-color: var(--brand);
      background: rgba(106, 169, 255, .06)
    }

    .type-chip .tag {
      font-family: 'Google Sans', sans-serif;
      font-size: 13px;
      color: white;
      font-weight: 600
    }

    .type-chip h4 {
      font-family: 'Google Sans', sans-serif;
      font-size: 21px;
      margin: 8px 0 10px;
      font-weight: 700;
      letter-spacing: -.02em
    }

    .type-chip p {
      font-size: 14px;
      color: rgb(244, 246, 252);
      line-height: 1.6
    }

    .type-chip .price {
      font-family: 'Google Sans', sans-serif;
      font-size: 26px;
      font-weight: 700;
      color: var(--paper);
      margin-top: 14px;
      letter-spacing: -.02em
    }

    .type-chip .price small {
      font-size: 13px;
      color: var(--muted-2);
      font-family: 'Google Sans', sans-serif;
      font-weight: 400
    }

    /* process timeline */
    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-top: 8px;
      position: relative
    }

    .process-grid::before {
      content: "";
      position: absolute;
      top: 34px;
      left: 8%;
      right: 8%;
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--line) 0, var(--line) 6px, transparent 6px, transparent 12px);
      z-index: 0;
    }

    .step {
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      text-align: center;
      position: relative;
      z-index: 1;
      transition: transform .2s, box-shadow .2s;
    }

    .step:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md)
    }

    .step .num {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--paper);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      font-family: 'Google Sans', sans-serif;
      font-size: 18px;
      font-weight: 700;
      box-shadow: 0 0 0 4px var(--paper-2), 0 0 0 5px var(--line);
    }

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

    .step p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.55
    }

    /* ============================================
       ECOSSISTEMA — carrossel showcase (1 card por vez)
       ============================================ */
    .eco-showcase-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 22px;
    }

    .eco-view-all {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Google Sans', sans-serif;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 18px;
      border-radius: 9px;
      border: 1.5px solid var(--line);
      background: var(--paper-2);
      color: var(--ink);
      cursor: pointer;
      transition: border-color .18s, transform .15s, background .18s;
    }

    .eco-view-all:hover {
      border-color: var(--brand);
      background: rgba(37, 68, 229, .06);
      transform: translateY(-1px);
    }

    .eco-view-all svg {
      width: 15px;
      height: 15px;
    }

    .eco-showcase {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      min-height: 340px;
      background: radial-gradient(circle at 88% 14%, rgba(255, 255, 255, .14), transparent 45%), radial-gradient(circle at 8% 90%, rgba(22, 125, 255, .35), transparent 55%), linear-gradient(180deg, #051044 0%, #2544e5 100%);
      border-radius: 50px;
    }

    .eco-showcase-text {
      position: relative;
      min-height: 280px;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 32px;
      background: rgb(255, 255, 255);
      margin: 0px 0px 0px 75px;
    }

    .eco-showcase-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 340px;
    }

    /* ===== Pilha de cards com setas ===== */
    .eco-stack {
      position: relative;
      width: 100%;
      max-width: 340px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .eco-stack-card {
      position: absolute;
      width: 100%;
      max-width: 300px;
      border: 1.5px solid var(--brand);
      border-radius: 18px;
      padding: 32px;
      background: #ffffff;
      box-shadow: var(--shadow-lg);
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
    }

    .eco-stack-card img {
      width: auto;
      height: 90px;
      object-fit: contain;
      margin: 0 auto 18px;
    }

    /* posição atual: em frente, centralizado */
    .eco-stack-card.pos-current {
      transform: translateX(0) translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
      z-index: 3;
    }

    /* posição próxima carta: atrás, ligeiramente à direita e menor */
    .eco-stack-card.pos-next {
      transform: translateX(26px) translateY(14px) scale(.92);
      opacity: .55;
      z-index: 2;
    }

    /* posição segunda carta atrás: ainda mais atrás */
    .eco-stack-card.pos-next2 {
      transform: translateX(46px) translateY(26px) scale(.85);
      opacity: .3;
      z-index: 1;
    }

    /* saindo pela esquerda */
    .eco-stack-card.pos-exit {
      transform: translateX(-120%) translateY(0) scale(.9);
      opacity: 0;
      z-index: 4;
    }

    /* escondida (fora do alcance) */
    .eco-stack-card.pos-hidden {
      transform: translateX(60px) translateY(34px) scale(.8);
      opacity: 0;
      z-index: 0;
    }

    .eco-stack-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #ffffff;
      border: 1.5px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 5;
      color: var(--ink);
      transition: border-color .18s, transform .15s, background .18s;
    }

    .eco-stack-arrow:hover {
      border-color: var(--brand);
      background: rgba(37, 68, 229, .06);
      transform: translateY(-50%) scale(1.06);
    }

    .eco-stack-arrow.prev {
      left: -6px;
    }

    .eco-stack-arrow.next {
      right: -6px;
    }

    .eco-stack-arrow svg {
      width: 16px;
      height: 16px;
    }

    @media (max-width: 480px) {
      .eco-stack-arrow.prev {
        left: -14px;
      }

      .eco-stack-arrow.next {
        right: -14px;
      }
    }

    .eco-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(14px);
      pointer-events: none;
      transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1);
      will-change: opacity, transform;
    }

    .eco-slide.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .eco-showcase-text .eco-slide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px;
    }

    .eco-slide .kind {
      font-family: 'Google Sans', sans-serif;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--brand);
      font-weight: 600;
      margin: 5px;
      display: inline-flex;
      align-items: center;
      width: fit-content;

    }

    .eco-slide h3 {
      font-size: 30px;
      margin-bottom: 14px;
      color: var(--ink);
    }

    .eco-slide p {
      font-size: 15.5px;
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 20px;
      max-width: 440px;
    }

    .eco-slide .eco-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 14px;
      color: #ffffff;
      background: var(--ink);
      padding: 11px 20px;
      border-radius: 9px;
      width: fit-content;
      transition: background .18s, transform .15s, box-shadow .2s;
    }

    .eco-slide .eco-link:hover {
      background: var(--brand);
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(37, 68, 229, .3);
    }

    .eco-showcase-visual .eco-slide {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .eco-showcase-visual .eco-card-visual {
      width: 100%;
      max-width: 340px;
      border: 1.5px solid var(--brand);
      border-radius: 18px;
      padding: 32px;
      background: #ffffff;
      box-shadow: var(--shadow-lg);
      text-align: center;
    }

    .eco-showcase-visual .eco-card-visual img {
      width: auto;
      height: 90px;
      object-fit: contain;
      margin: 0 auto 18px;
    }

    .eco-dots {
      display: flex;
      gap: 8px;
      margin-top: 26px;
      justify-content: center;
    }

    .eco-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--line);
      cursor: pointer;
      transition: background .2s, transform .2s;
      border: none;
      padding: 0;
    }

    .eco-dot.active {
      background: var(--brand);
      transform: scale(1.3);
    }

    /* Modal "ver todos" */
    .eco-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(3, 25, 87, .55);
      backdrop-filter: blur(4px);
      z-index: 400;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 60px 20px;
      overflow-y: auto;
    }

    .eco-modal-overlay.show {
      display: flex;
    }

    .eco-modal {
      background: var(--paper-2);
      border-radius: 20px;
      max-width: 1100px;
      width: 100%;
      padding: 36px;
      position: relative;
      box-shadow: var(--shadow-lg);
    }

    .eco-modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--paper);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--ink);
      transition: background .18s;
    }

    .eco-modal-close:hover {
      background: var(--line-2);
    }

    .eco-modal h2 {
      font-size: 26px;
      margin-bottom: 24px;
    }

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

    @media (max-width: 900px) {
      .eco-showcase {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .eco-showcase-visual {
        order: -1;
        min-height: 220px;
      }

      .eco-modal-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 560px) {
      .eco-modal-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ===== ECOSSISTEMA (cards usados no modal "ver todos") ===== */
    .eco-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .eco-card {
      border: 1.5px solid var(--brand);
      border-radius: 14px;
      padding: 28px;
      position: relative;
      background: #ffffff;
      transition: transform .25s, border-color .2s, background .2s;
      overflow: hidden;
      display: block;
      text-decoration: none;
      cursor: pointer;
    }

    .eco-card:hover {
      transform: translateY(-4px);
      border-color: var(--brand);
      background: rgba(37, 68, 229, .06);
    }

    .eco-card .eco-ic {
      width: 100%;
      height: 80px;
      color: var(--brand-light);
      margin-bottom: 18px;
      object-fit: contain;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .eco-card h3 {
      font-size: 22px;
      margin-bottom: 8px;
      color: black;
    }

    .eco-card .kind {
      font-family: 'Google Sans', sans-serif;
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: black;
      margin-bottom: 16px
    }

    .eco-card p {
      font-size: 14px;
      color: rgb(0, 0, 0);
      line-height: 1.6
    }

    .eco-card .eco-ic.eco-small {
      height: 60px;
    }



    .eco-card .arrow {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgb(0, 0, 0);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-light);
      opacity: 0;
      transform: translate(-6px, 6px);
      transition: all .25s;
    }

    .eco-card:hover .arrow {
      opacity: 1;
      transform: translate(0, 0)
    }

    .eco-card .arrow svg {
      width: 14px;
      height: 14px;
      color: black;
    }

    /* ===== INSTITUCIONAL / FAQ ===== */
    .inst-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 44px 54px;
      align-items: start
    }

    .inst-block {
      min-width: 0
    }

    .inst-block .eyebrow {
      margin-bottom: 4px
    }

    .inst-block p {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 14px;
      line-height: 1.7
    }

    .inst-block .inst-sub {
      font-family: 'Google Sans', sans-serif;
      font-size: 17px;
      font-weight: 700;
      margin: 26px 0 12px;
      letter-spacing: -.015em;
      color: var(--ink);
    }

    .inst-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 9px;
    }

    .inst-list li {
      position: relative;
      padding-left: 22px;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
    }

    .inst-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 0 3px rgba(37, 68, 229, .12);
    }

    .inst-list.inst-values li b {
      color: var(--ink);
      font-weight: 700;
    }

    .inst-block .stat-row {
      margin-top: 22px;
      padding-top: 22px
    }

    .faq-block h2 {
      font-size: clamp(24px, 2.6vw, 32px);
      margin: 12px 0 18px;
      letter-spacing: -.025em
    }

    .stat-row {
      display: flex;
      gap: 34px;

      flex-wrap: wrap;

      border-top: 1px solid var(--line-2)
    }

    .stat-row.stat-row-ink {
      border-top: none;
    }

    .stat .n {
      font-family: 'Google Sans', sans-serif;
      font-size: 38px;
      font-weight: 800;
      color: var(--brand);
      line-height: 1
    }

    .stat .l {
      font-size: 11px;
      color: var(--muted);
      font-family: 'Google Sans', sans-serif;
      margin-top: 6px
    }

    .faq-item {
      border-bottom: 1px solid var(--line)
    }

    .faq-q {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 22px 4px;
      cursor: pointer;
      font-weight: 600;
      font-size: 16px;
      transition: color .2s;
    }

    .faq-q:hover {
      color: var(--brand)
    }

    .faq-q .ic {
      font-family: 'Google Sans', sans-serif;
      color: var(--brand);
      transition: transform .25s;
      flex: none;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--ink-line);
      border-radius: 50%;
      font-size: 18px
    }

    .faq-item.open .faq-q .ic {
      transform: rotate(45deg);
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.65
    }

    .faq-a div {
      padding: 0 4px 22px
    }

    /* testimonials — carrossel de slides (1 por vez, autoplay 4s) */
    .test-carousel {
      position: relative;
    }

    .test-viewport {
      overflow: hidden;
      border-radius: var(--radius);
    }

    .test-grid {
      display: flex;
      transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    }

    .test-card {
      flex: 0 0 100%;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--paper-2);
      border: 1px solid var(--line);
      padding: 20px;
      min-height: clamp(180px, 20vw, 260px);
    }

    .test-card img {
      display: block;
      max-width: 100%;
      max-height: clamp(180px, 20vw, 260px);
      object-fit: contain;
      margin: auto;
    }

    .test-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--paper-2);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .2s, color .2s;
    }

    .test-nav:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand)
    }

    .test-nav.prev {
      left: -18px
    }

    .test-nav.next {
      right: -18px
    }

    /* ===== SUPORTE ===== */
    .sup-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .sup-card {
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 28px;
      transition: transform .2s, box-shadow .2s, border-color .2s;
    }

    .sup-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--brand-light)
    }

    .sup-card .sic {
      width: 36px;
      height: 36px;
      color: var(--brand);
      margin-bottom: 14px
    }

    .sup-card h3 {
      font-size: 19px;
      margin-bottom: 6px;
      color: rgb(0, 0, 0);
    }

    .sup-card p {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 16px;
      line-height: 1.6
    }

    .sup-card a {
      font-weight: 600;
      font-size: 14px;
      color: var(--ink);
      border-bottom: 2px solid var(--brand);
      padding-bottom: 2px;
      transition: color .2s
    }

    .sup-card a:hover {
      color: var(--brand)
    }

    /* CTA banner */
    .cta-banner {
      background: linear-gradient(135deg, var(--brand) 0%, var(--ink-2) 100%);
      color: var(--paper);
      border-radius: 20px;
      padding: 48px;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 30px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .cta-banner::before {
      content: "";
      position: absolute;
      top: -50%;
      right: -10%;
      width: 60%;
      height: 200%;
      background: repeating-radial-gradient(circle, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 2px, transparent 2px, transparent 16px);
      transform: rotate(-15deg);
      pointer-events: none;
    }

    .cta-banner h2 {
      font-size: clamp(26px, 3.6vw, 38px);
      margin-bottom: 10px
    }

    .cta-banner p {
      font-size: 16px;
      color: rgb(255, 255, 255);
      margin-bottom: 20px;
      max-width: 480px
    }

    .cta-banner .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .cta-banner .btn-primary {
      background: var(--paper);
      color: var(--ink)
    }

    .cta-banner .btn-primary:hover {
      background: #fff;
      box-shadow: 0 14px 32px rgba(0, 0, 0, .2)
    }

    .cta-banner .btn-ghost {
      background: transparent;
      color: var(--paper);
      border-color: rgba(244, 246, 252, .3)
    }

    .cta-banner .btn-ghost:hover {
      background: rgba(244, 246, 252, .1);
      border-color: #fff
    }

    .cta-banner .seal {
      justify-self: end;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Google Sans', sans-serif;
      font-size: 60px;
      font-weight: 800;
      letter-spacing: -.04em;
      color: var(--paper);
      position: relative;
      z-index: 1;
    }

    /* ===== FOOTER ===== */
    footer {
      background: var(--line);
      color: rgba(244, 246, 252, .7);
      padding: 60px 0 30px;
      border-top: 1px solid rgba(106, 169, 255, .2);
      margin-top: 35px;
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 30px;
      margin-bottom: 42px
    }

    .foot-grid h5 {
      font-family: 'Google Sans', sans-serif;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--brand-light);
      margin-bottom: 18px;
      font-weight: 500
    }

    .foot-grid a {
      display: block;
      font-size: 14px;
      margin-bottom: 10px;
      color: rgb(0, 0, 0);
      transition: color .2s
    }

    .foot-grid a:hover {
      color: var(--paper)
    }

    .foot-brand p {
      font-size: 14px;
      max-width: 300px;
      margin-top: 14px;
      line-height: 1.6;
      padding-left: 25px;
    }

    .foot-bottom {
      border-top: 1px solid rgba(106, 169, 255, .15);
      padding-top: 22px;
      font-size: 12.5px;
      font-family: 'Google Sans', sans-serif;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      color: rgb(0, 0, 0)
    }

    /* ===== WHATSAPP FAB (sempre visível) ===== */
    .wa-fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 90;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #25D366;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
      transition: transform .2s, background .2s, box-shadow .25s;
      animation: wa-enter .55s cubic-bezier(.5, 1.6, .4, 1) backwards,
        wa-pulse 2.4s ease-out infinite .65s;
      text-decoration: none;
    }

    .wa-fab:hover {
      background: #1ebe5d;
      transform: translateY(-2px) scale(1.06);
      box-shadow: 0 14px 32px rgba(37, 211, 102, .55);
      animation: wa-pulse 2.4s ease-out infinite;
    }

    .wa-fab:active {
      transform: translateY(0) scale(.96);
    }

    .wa-fab svg {
      width: 30px;
      height: 30px;
      color: #fff;
    }

    .wa-fab::before {
      content: "Fale conosco";
      position: absolute;
      right: calc(100% + 14px);
      top: 50%;
      transform: translateY(-50%) translateX(8px);
      background: var(--ink);
      color: var(--paper);
      font-family: 'Google Sans', sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 7px 12px;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s, transform .22s;
      box-shadow: 0 8px 20px rgba(33, 28, 28, .18);
    }

    .wa-fab::after {
      content: "";
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%) translateX(8px);
      border: 5px solid transparent;
      border-right-color: var(--ink);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s, transform .22s;
    }

    .wa-fab:hover::before,
    .wa-fab:hover::after {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    @keyframes wa-enter {
      from {
        transform: translateY(140%) scale(.55);
        opacity: 0;
      }

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

    @keyframes wa-pulse {
      0% {
        box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .55);
      }

      70% {
        box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 18px rgba(37, 211, 102, 0);
      }

      100% {
        box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    /* Mobile: sobe o WA pra não cobrir a FAB de compra */
    @media (max-width:900px) {
      .wa-fab {
        bottom: 90px;
        right: 18px;
        width: 54px;
        height: 54px;
      }

      .wa-fab svg {
        width: 26px;
        height: 26px;
      }
    }

    /* Floating mobile CTA */
    .fab {
      display: none;
      position: fixed;
      bottom: 18px;
      left: 18px;
      right: 18px;
      z-index: 80;
      background: var(--ink);
      color: var(--paper);
      border-radius: 14px;
      padding: 14px 20px;
      box-shadow: 0 16px 40px rgba(33, 28, 28, .35);
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      animation: slideUp .5s cubic-bezier(.5, 1.6, .4, 1) .8s backwards;
    }

    @keyframes slideUp {
      from {
        transform: translateY(120%);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    .fab .info {
      font-size: 11px;
      color: rgba(244, 246, 252, .6);
      font-family: 'Google Sans', sans-serif;
    }

    .fab .info b {
      display: block;
      color: var(--paper);
      font-size: 15px;
      font-family: 'Google Sans', sans-serif;
      font-weight: 700;
      letter-spacing: -.015em;
      margin-top: 1px
    }

    .fab .btn {
      padding: 11px 18px;
      font-size: 14px
    }

    /* reveal */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1)
    }

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

    .reveal[data-delay="1"] {
      transition-delay: .03s
    }

    .reveal[data-delay="2"] {
      transition-delay: .03s
    }

    .reveal[data-delay="3"] {
      transition-delay: .03s
    }

    .reveal[data-delay="4"] {
      transition-delay: .03s
    }

    /* fieldset-like details in name input on store */
    .name-row {
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px dashed var(--line-2)
    }

    .name-row label {
      display: block;
      font-family: 'Google Sans', sans-serif;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .name-row input {
      width: 100%;
      font-family: 'Google Sans', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      border: none;
      background: transparent;
      padding: 6px 0;
      border-bottom: 1px solid var(--line);
      transition: border-color .2s;
      outline: none;
    }

    .name-row input::placeholder {
      color: var(--muted-2);
      font-weight: 500
    }

    .name-row input:focus {
      border-bottom-color: var(--brand)
    }

    @media (max-width:900px) {

      .hero-grid,
      .config-grid,
      .inst-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 32px
      }

      .hero {
        padding: 100px 0 60px
      }

      /* .band-ink usava margin fixa de 220px por lado (linha ~960), o que
         força largura negativa em telas pequenas e faz o conteúdo interno
         vazar para fora do viewport (scroll horizontal). Reduzimos a margem
         e o raio para caber em telas de tablet/celular. */
      .band-ink {
        margin: 0 16px;
        border-radius: 24px;
      }

      /* Evita que o FAB fixo (.fab) e o WhatsApp fixo (.wa-fab) cubram os
         últimos links/copyright do rodapé quando a página é rolada até o fim. */
      footer {
        padding-bottom: 140px;
      }

      /* .eco-showcase-text tinha margin-left fixo de 75px + .eco-slide com
         padding de 48px — em telas pequenas isso sobra muito pouco espaço
         para o texto (h3/parágrafo ficam espremidos). */
      .eco-showcase-text {
        margin: 0;
        padding: 24px;
      }

      .eco-showcase-text .eco-slide {
        padding: 8px;
      }

      .eco-slide h3 {
        font-size: clamp(22px, 5vw, 26px);
      }

      /* Área de toque confortável (~44px) para os botões do configurador,
         e permite que quebrem em várias linhas em vez de espremer 6 opções
         numa única linha (ex: campo "Armazenamento"). */
      .opts .opt {
        flex: 1 1 auto;
        min-width: 84px;
      }

      .opt {
        min-height: 40px;
        padding: 9px 14px;
      }

      .config-fields {
        border-right: none;
        border-bottom: 1px solid var(--line)
      }

      .ex-grid,
      .eco-grid,
      .sup-grid,
      .types-row,
      .process-grid {
        grid-template-columns: 1fr 1fr
      }

      .process-grid::before {
        display: none
      }

      .foot-grid {
        grid-template-columns: 1fr 1fr
      }

      .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 82%;
        max-width: 340px;
        background: var(--paper-2);
        flex-direction: column;
        align-items: stretch;
        padding: 90px 24px 24px;
        gap: 4px;
        border-bottom: 1px solid var(--line);
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.5, 0, .2, 1);
        box-shadow: none;
        z-index: 55;
      }

      .nav-links.open {
        transform: translateX(0);
        box-shadow: -20px 0 50px rgba(33, 28, 28, .18);
      }

      .nav-links a {
        padding: 15px 16px;
        font-size: 15px;
        border-radius: 10px
      }

      .nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 15px 16px;
        font-size: 15px;
        border-radius: 10px
      }

      .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 12px;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
      }

      .nav-dropdown.open {
        max-height: 320px
      }

      .nav-dropdown a {
        padding: 12px 16px;
        font-size: 14px
      }

      .nav-cta {
        margin-top: 14px;
        text-align: center;
        justify-content: center
      }

      .burger {
        display: block;
        z-index: 60
      }

      .fab {
        display: flex
      }

      .cta-banner {
        grid-template-columns: 1fr;
        padding: 36px 28px;
        text-align: center
      }

      .cta-banner .actions {
        justify-content: center
      }

      .cta-banner .seal {
        margin: 0 auto
      }

      .store-foot {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 18px
      }

      .compare-wrap {
        font-size: 13px;
        overflow-x: auto
      }

      .compare-wrap th,
      .compare-wrap td {
        padding: 12px 14px
      }
    }

    @media (max-width:560px) {

      .ex-grid,
      .eco-grid,
      .sup-grid,
      .types-row,
      .process-grid {
        grid-template-columns: 1fr
      }

      .foot-grid {
        grid-template-columns: 1fr
      }

      .band {
        padding: 45px 0
      }

      .toasts {
        left: 16px;
        right: 16px;
        top: 80px
      }

      .toast {
        min-width: 0;
        max-width: none
      }

      /* Reduz ainda mais a margem lateral fixa do .band-ink em telas de
         celular (320-375px), evitando espremer o conteúdo interno. */
      .band-ink {
        margin: 0 10px;
        border-radius: 16px;
      }

      /* Modal "ver todos" (ecossistema) com menos padding para não sobrar
         pouco espaço útil em telas estreitas. */
      .eco-modal-overlay {
        padding: 20px 12px;
      }

      .eco-modal {
        padding: 24px 18px;
      }

      /* Preço grande (58px fixo) fica desproporcional em telas de 320-375px;
         reduz para não forçar quebras estranhas. */
      .price-val .big {
        font-size: 42px;
      }

      /* O botão #buy tem margin-right:40px inline no HTML, que sobra demais
         em telas estreitas do price-box; neutraliza no mobile. */
      #buy {
        margin-right: 0 !important;
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto
      }

      .reveal {
        opacity: 1;
        transform: none
      }
    }