:root {
      --bg: #0A0E1A;
      --surface: #121829;
      --surface-2: #1B2236;
      --border: #26304A;
      --primary: #9D89FC;
      --primary-hover: #8B76F5;
      --on-primary: #0A0E1A;
      --spark: #E9FA49;
      --pulse: #FF4F3F;
      --glow: #FF8F27;
      --signal: #1CB785;
      --text: #FFFFFF;
      --muted: #C8DDF1;
      --subtle: #8A97B4;
      --r-md: 12px;
      --r-lg: 16px;
      --r-xl: 24px;
      --pill: 999px;
      --ease: cubic-bezier(.22, .61, .36, 1);
      --spring: cubic-bezier(.34, 1.56, .64, 1);
      --maxw: 1180px;

      /* === Revento-faithful layer (doc 13 §2) === */
      /* light sections */
      --light: #FFFFFF;
      --light-2: #F4F1EA;
      --on-light: #0A0E1A;
      --on-light-muted: #5A6478;
      --on-light-border: rgba(10, 14, 26, .12);
      /* faithful radius scale */
      --r-pill: 100px;
      --r-card: 32px;
      --r-stat: 24px;
      --r-cta: 40px;
      /* chunky stroke / borders */
      --stroke: 3px;
      --btn-border: 4px;
      /* fluid display scale (Anton) */
      --fs-h1: clamp(2.375rem, 8vw, 6.25rem);
      /* 38 -> 100px */
      --fs-h2: clamp(2.25rem, 6vw, 5rem);
      /* 36 -> 80px */
      --fs-h4: clamp(2rem, 3.2vw, 2.5rem);
      /* 32 -> 40px */
      --fs-eyebrow: clamp(1.375rem, 2.2vw, 1.75rem);
      /* 22 -> 28px */
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 2
    }

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

    .mono {
      font-family: 'DM Mono', monospace
    }

    .display {
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      line-height: 1.02;
      letter-spacing: -.5px;
      text-transform: uppercase
    }

    .eyebrow {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--subtle)
    }

    .muted {
      color: var(--muted)
    }

    .subtle {
      color: var(--subtle)
    }

    .v {
      color: var(--primary)
    }

    .sp {
      color: var(--spark)
    }

    .pu {
      color: var(--pulse)
    }

    .gl {
      color: var(--glow)
    }

    .si {
      color: var(--signal)
    }

    /* ============================================================
       REVENTO-FAITHFUL FOUNDATION (doc 13 §2/§3/§4)
       Tokens em :root. Classes utilitárias reutilizadas nos grupos B-F.
       ============================================================ */

    /* --- Tipografia display fiel (Anton) --- */
    .h2-display {
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      line-height: 1.04;
      letter-spacing: -1.5px;
      font-size: var(--fs-h2);
    }

    .h4-display {
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      line-height: 1.1;
      letter-spacing: -.5px;
      font-size: var(--fs-h4);
    }

    /* Eyebrow grande estilo Revento ("Our Services!") — Anton colorido.
       Coexiste com .eyebrow (DM Mono) já existente. */
    .eyebrow-xl {
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0;
      line-height: 1.4;
      font-size: var(--fs-eyebrow);
      color: var(--pulse);
    }

    /* --- Sistema de fundo de seção (doc 13 §7) --- */
    .sec--dark {
      background: var(--bg);
      color: var(--text);
      --sec-ink: var(--text);
      --sec-stroke: var(--text);
    }

    .sec--light {
      background: var(--light);
      color: var(--on-light);
      --sec-ink: var(--on-light);
      --sec-stroke: var(--on-light);
    }

    .sec--light-2 {
      background: var(--light-2);
      color: var(--on-light);
      --sec-ink: var(--on-light);
      --sec-stroke: var(--on-light);
    }

    /* apenas títulos de seção viram Ink; cards controlam a própria cor */
    .sec--light .sec-head h2,
    .sec--light .sec-head h3,
    .sec--light .sec-head .display,
    .sec--light-2 .sec-head h2,
    .sec--light-2 .sec-head h3,
    .sec--light-2 .sec-head .display {
      color: var(--on-light);
    }

    .sec--light .sec-head p,
    .sec--light-2 .sec-head p,
    .sec--light p.on-light-muted {
      color: var(--on-light-muted);
    }

    /* --- Profundidade "flat/chunky" (doc 13 §2) --- */
    .flat {
      box-shadow: none !important;
    }

    /* --- Rotação de stickers (respeita reduced-motion) --- */
    .rot-1 { transform: rotate(-1.8deg); }
    .rot-2 { transform: rotate(14.07deg); }
    .rot-3 { transform: rotate(-5.62deg); }
    .rot-4 { transform: rotate(3.89deg); }
    .rot-5 { transform: rotate(-9.27deg); }
    .rot-6 { transform: rotate(5.55deg); }

    /* --- Pill-adesivo rotulado (doc 13 §4.2) --- */
    .sticker-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 16px;
      border-radius: var(--r-pill);
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 14px;
      line-height: 1.2;
      color: var(--on-light);
      background: var(--glow);
      white-space: nowrap;
      width: max-content;
    }

    .sticker-pill.is-spark { background: var(--spark); }
    .sticker-pill.is-pulse { background: var(--pulse); }
    .sticker-pill.is-glow { background: var(--glow); }
    .sticker-pill.is-primary { background: var(--primary); }
    /* Signal (verde) leva texto branco por contraste (doc 13 §5) */
    .sticker-pill.is-signal { background: var(--signal); color: #fff; }

    /* --- Botão-seta circular de canto (doc 13 §4.1) --- */
    .corner-arrow {
      position: absolute;
      right: 24px;
      bottom: 24px;
      width: 60px;
      height: 60px;
      border-radius: var(--r-pill);
      background: #fff;
      display: grid;
      place-items: center;
      border: 0;
      cursor: pointer;
      color: inherit;
      /* a cor da seta é definida por color no card */
    }

    .corner-arrow svg {
      width: 24px;
      height: 24px;
    }

    /* variante "entalhe": anel na cor do fundo da seção recorta o canto do card
       (mesma técnica do .stat .cnr). Definir --notch na seção/card. */
    .corner-arrow--notch {
      box-shadow: 0 0 0 6px var(--notch, var(--light));
    }

    /* --- Estrelas/sparkles decorativos (doc 13 §8) ---
       Usam o sprite /assets/stickers.svg; contorno Ink 3px via CSS. */
    .spark-ico {
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: 40px;
      height: 40px;
    }

    /* ==== decorative layers ==== */
    .grain {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: .05;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    }

    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .42;
      pointer-events: none;
      z-index: 0
    }

    .dots {
      background-image: radial-gradient(rgba(157, 137, 252, .14) 1.3px, transparent 1.3px);
      background-size: 26px 26px
    }

    .arc {
      position: absolute;
      border: 2px solid var(--border);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      opacity: .5
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: none;
      cursor: pointer;
      font-family: 'DM Sans';
      font-weight: 600;
      font-size: 16px;
      border-radius: var(--pill);
      padding: 14px 26px;
      transition: .2s var(--ease);
      white-space: nowrap
    }

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

    .btn-primary:hover {
      background: var(--primary-hover);
      transform: translateY(-1px)
    }

    .btn-ghost {
      background: var(--surface-2);
      color: var(--text);
      border: 1px solid var(--border)
    }

    .btn-ghost:hover {
      border-color: rgba(157, 137, 252, .5)
    }

    .btn .arrow {
      transition: transform .2s var(--ease)
    }

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

    /* nav estilo Revento: menu uppercase + CTA pill outline branco */
    .nav-links .lk {
      text-transform: uppercase;
      letter-spacing: 1.2px;
      font-size: 13px;
      font-weight: 500
    }

    /* CTA do header: violeta, casando com os demais CTAs */
    .nav-cta {
      background: var(--primary);
      color: var(--on-primary);
      border: 0;
      border-radius: var(--r-pill);
      padding: 11px 22px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      font-size: 14px
    }

    .nav-cta:hover {
      background: var(--primary-hover);
      color: var(--on-primary);
      border-color: transparent;
      transform: translateY(-1px)
    }

    /* nav */
    header.nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(10, 14, 26, .72);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border)
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: -.5px
    }

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

    .nav-links .lk {
      color: var(--muted);
      font-size: 15px
    }

    .nav-links .lk:hover {
      color: var(--text)
    }

    @media(max-width:820px) {
      .nav-links .lk {
        display: none
      }
    }

    /* mobile: nav compacta — CTA do header ocultado (o hero já tem CTA em destaque) */
    @media(max-width:560px) {
      .nav-links {
        gap: 12px
      }

      .nav-links .nav-cta {
        display: none
      }
    }

    /* hero */
    .hero {
      position: relative;
      padding: 96px 0 80px;
      overflow: hidden
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 40px;
      align-items: center;
      z-index: 2
    }

    @media(max-width:960px) {
      .hero-grid {
        grid-template-columns: minmax(0, 1fr);
        text-align: center
      }
    }

    .badge-deadline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--pill);
      padding: 8px 16px;
      font-size: 13px;
      color: var(--muted)
    }

    .badge-deadline .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--pulse);
      box-shadow: 0 0 0 4px rgba(255, 79, 63, .18);
      animation: pulse 2s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 4px rgba(255, 79, 63, .18)
      }

      50% {
        box-shadow: 0 0 0 7px rgba(255, 79, 63, .06)
      }
    }

    .h1 {
      font-size: var(--fs-h1);
      letter-spacing: -2px;
      margin: 22px 0 20px
    }

    .h1 .l2 {
      color: var(--primary)
    }

    .hero p.sub {
      font-size: clamp(1.05rem, 2vw, 1.28rem);
      color: var(--muted);
      max-width: 560px;
      margin-bottom: 30px
    }

    @media(max-width:960px) {
      .hero p.sub {
        margin-inline: auto
      }
    }

    /* hero centralizado (sem form — CTA leva ao cadastro) */
    .hero-center {
      max-width: 840px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 5
    }

    /* entrada coreografada do hero (CSS puro — sem depender de JS/LCP) */
    .hero-center>* {
      animation: heroIn .6s var(--ease) both
    }

    .hero-center>.badge-deadline {
      animation-delay: .04s
    }

    .hero-center>.h1 {
      animation-delay: .12s
    }

    .hero-center>.sub {
      animation-delay: .24s
    }

    .hero-center>.hero-cta {
      animation-delay: .36s
    }

    @keyframes heroIn {
      from {
        opacity: 0;
        transform: translateY(18px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

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

    .hero-center p.sub {
      margin-inline: auto
    }

    .hero-cta {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px
    }

    .btn-lg {
      font-size: 18px;
      padding: 17px 34px;
      font-weight: 700
    }

    /* capture card */
    .capture {
      position: relative;
      z-index: 5;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 22px;
      max-width: 560px;
      box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .6)
    }

    @media(max-width:960px) {
      .capture {
        margin-inline: auto
      }
    }

    .capture .lead {
      font-weight: 600;
      margin-bottom: 12px
    }

    .email-row {
      display: flex;
      gap: 10px
    }

    .email-row input {
      flex: 1;
      min-width: 0;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--pill);
      padding: 13px 18px;
      color: var(--text);
      font-family: 'DM Sans';
      font-size: 15px;
      outline: none;
      transition: .2s
    }

    .email-row input::placeholder {
      color: var(--subtle)
    }

    .email-row input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(157, 137, 252, .35)
    }

    @media(max-width:460px) {
      .email-row {
        flex-direction: column
      }

      .email-row .btn {
        justify-content: center
      }
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--subtle);
      font-size: 13px;
      margin: 16px 0
    }

    .divider::before,
    .divider::after {
      content: "";
      height: 1px;
      background: var(--border);
      flex: 1
    }

    .dropzone {
      display: block;
      border: 1.5px dashed var(--border);
      border-radius: var(--r-lg);
      padding: 16px 18px;
      text-align: center;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.5;
      cursor: pointer;
      transition: .2s;
      background: rgba(27, 34, 54, .4)
    }

    .dropzone:hover {
      border-color: var(--primary);
      color: var(--text);
      background: rgba(157, 137, 252, .06)
    }

    .dropzone b {
      color: var(--text)
    }

    .microproof {
      font-family: 'DM Mono', monospace;
      font-size: 12.5px;
      color: var(--subtle);
      margin-top: 16px;
      letter-spacing: .3px
    }

    .consent {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: .82rem;
      color: var(--subtle);
      margin-top: 20px;
      cursor: pointer;
      line-height: 1.45
    }

    .capture .dropzone {
      margin-top: 2px
    }

    .capture .cf-turnstile {
      margin-top: 20px
    }

    .capture .microproof {
      margin-top: 20px
    }

    .consent input {
      margin-top: 2px;
      accent-color: var(--primary);
      flex: none
    }

    .status {
      font-size: .9rem;
      margin-top: 12px;
      min-height: 1.1em;
      font-weight: 500
    }

    .status.ok {
      color: var(--signal)
    }

    .status.err {
      color: var(--pulse)
    }

    .dropzone.drag {
      border-color: var(--primary);
      background: rgba(157, 137, 252, .1);
      color: var(--text)
    }

    /* capture: ação única + anexo opcional */
    .cap-lead {
      font-weight: 600;
      font-size: 1.05rem;
      margin-bottom: 14px
    }

    .attach {
      margin-top: 12px
    }

    .dropzone .opt {
      display: inline-block;
      margin-left: 4px;
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--primary);
      background: rgba(157, 137, 252, .14);
      border-radius: var(--pill);
      padding: 2px 8px;
      vertical-align: middle
    }

    .dropzone[hidden],
    .filechip[hidden] {
      display: none
    }

    .filechip {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(28, 183, 133, .12);
      border: 1px solid rgba(28, 183, 133, .4);
      border-radius: var(--r-lg);
      padding: 12px 14px;
      color: var(--text);
      font-size: 14px
    }

    .filechip .fc-i {
      color: var(--signal);
      flex: none
    }

    .filechip .fc-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'DM Mono', monospace
    }

    .filechip .fc-x {
      background: none;
      border: none;
      color: var(--subtle);
      cursor: pointer;
      font-size: 15px;
      line-height: 1;
      padding: 3px 7px;
      border-radius: 6px
    }

    .filechip .fc-x:hover {
      color: var(--pulse);
      background: rgba(255, 79, 63, .1)
    }

    /* hero visual + seal */
    .hero-visual {
      position: relative
    }

    .hero-visual .diary {
      width: 100%;
      max-width: 460px;
      border-radius: var(--r-xl);
      display: block;
      margin: 0 auto;
      filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5))
    }

    @media(max-width:960px) {
      .hero-visual {
        display: none
      }
    }

    .hero-form {
      position: relative
    }

    .seal {
      position: absolute;
      top: -48px;
      right: 6px;
      width: 94px;
      height: 94px;
      z-index: 6
    }

    @media(max-width:960px) {
      .hero-form .seal {
        display: none
      }
    }

    .seal .ring {
      width: 100%;
      height: 100%;
      animation: spin 20s linear infinite
    }

    .seal text {
      font-family: 'DM Mono', monospace;
      font-size: 8.4px;
      letter-spacing: 2.4px;
      fill: var(--spark);
      text-transform: uppercase
    }

    .seal .core {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center
    }

    .seal .core svg {
      width: 38px;
      height: 38px
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    /* stickers */
    .sticker {
      position: absolute;
      z-index: 1;
      will-change: transform
    }

    .sticker svg {
      display: block;
      filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4))
    }

    .float {
      animation: float 5s ease-in-out infinite
    }

    .wig {
      animation: wig 4s ease-in-out infinite
    }

    @keyframes float {

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

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

    @keyframes wig {

      0%,
      100% {
        transform: rotate(-5deg)
      }

      50% {
        transform: rotate(5deg)
      }
    }

    /* faixa de pills-adesivo (hero) */
    .sticker-band {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 14px 18px;
      margin-top: 48px;
      position: relative;
      z-index: 2
    }

    /* stat teaser — notched cards w/ corner arrow */
    .teaser {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: 56px;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .teaser {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    /* fill sólido estilo Revento (doc 13 §4.7) */
    .stat {
      --fill: var(--spark);
      --notch: var(--bg);
      border-radius: var(--r-stat);
      padding: 26px 22px 22px;
      position: relative;
      isolation: isolate;
      border: 0;
      color: var(--on-light);
      /* Ink por padrão; verde sobrescreve p/ branco */
    }

    /* preenchimento com entalhe recortado (mesma técnica dos service cards) */
    .stat::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: var(--r-stat);
      background: var(--fill);
      -webkit-mask: radial-gradient(circle 27px at calc(100% - 30px) calc(100% - 30px), transparent 0 26px, #000 27px);
      mask: radial-gradient(circle 27px at calc(100% - 30px) calc(100% - 30px), transparent 0 26px, #000 27px)
    }

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

    .stat .num {
      font-family: 'Anton';
      font-size: clamp(2.2rem, 4.4vw, 3.1rem);
      line-height: 1;
      letter-spacing: -1px
    }

    .stat .lbl {
      font-family: 'DM Mono';
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 8px;
      opacity: .78
    }

    /* botão-seta branco no canto inferior-direito, aninhado no entalhe */
    .stat .cnr {
      position: absolute;
      z-index: 2;
      right: 10px;
      bottom: 10px;
      width: 40px;
      height: 40px;
      border-radius: var(--r-pill);
      display: grid;
      place-items: center;
      background: #fff;
    }

    .stat .cnr svg {
      width: 20px;
      height: 20px
    }

    .stat.a {
      --fill: var(--spark)
    }

    .stat.a .cnr {
      color: var(--spark)
    }

    .stat.b {
      --fill: var(--signal);
      color: #fff
    }

    .stat.b .cnr {
      color: var(--signal)
    }

    .stat.c {
      --fill: var(--glow)
    }

    .stat.c .cnr {
      color: var(--glow)
    }

    .stat.d {
      --fill: var(--primary)
    }

    .stat.d .cnr {
      color: var(--primary)
    }

    .teaser-cap {
      text-align: center;
      color: var(--subtle);
      font-size: 13px;
      margin-top: 14px;
      font-family: 'DM Mono'
    }

    /* section shell */
    section.blk {
      padding: 88px 0;
      position: relative;
      overflow: hidden
    }

    .sec-head {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 48px
    }

    .sec-head h2 {
      font-size: var(--fs-h2);
      letter-spacing: -1.5px;
      margin: 12px 0
    }

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

    /* wave divider */
    .wave {
      display: block;
      width: 100%;
      height: 60px
    }

    .wave path {
      fill: var(--surface)
    }

    /* urgency band */
    .urgency {
      background: linear-gradient(90deg, rgba(255, 79, 63, .12), rgba(157, 137, 252, .12));
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      position: relative;
      overflow: hidden
    }

    .urgency-in {
      text-align: center;
      padding: 48px 0;
      position: relative;
      z-index: 2
    }

    .urgency-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255, 79, 63, .12);
      border: 1px solid rgba(255, 79, 63, .4);
      color: #FF6A5A;
      border-radius: var(--pill);
      padding: 8px 18px;
      font-family: 'DM Mono';
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase
    }

    .urgency-pill .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #FF4F3F;
      animation: pulse 2s infinite
    }

    .countdown {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 10px;
      margin: 26px 0 18px
    }

    .cd-u {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 96px
    }

    .cd-u b {
      font-family: 'Anton';
      font-size: clamp(3.2rem, 10vw, 6rem);
      line-height: .85;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      letter-spacing: -1px
    }

    .cd-u span {
      font-family: 'DM Mono';
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--subtle);
      margin-top: 10px
    }

    .cd-colon {
      font-family: 'Anton';
      font-size: clamp(2.4rem, 7vw, 4.4rem);
      color: var(--primary);
      line-height: 1;
      opacity: .5
    }

    .cd-u b.tick {
      animation: cdpop .22s var(--ease)
    }

    @keyframes cdpop {
      0% {
        transform: translateY(-8px) scale(1.06);
        opacity: .55
      }

      100% {
        transform: none;
        opacity: 1
      }
    }

    .urgency-sub {
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto;
      font-size: 1.05rem
    }

    .urgency-sub b {
      color: var(--text)
    }

    @media(max-width:600px) {
      .cd-u {
        min-width: 66px
      }

      .countdown {
        gap: 4px
      }

      .cd-u span {
        font-size: 10px
      }
    }

    /* steps + connector */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .steps {
        grid-template-columns: 1fr
      }
    }

    .steps::before {
      content: "";
      position: absolute;
      top: 56px;
      left: 16%;
      right: 16%;
      height: 2px;
      z-index: -1;
      background-image: linear-gradient(90deg, var(--border) 60%, transparent 0);
      background-size: 14px 2px
    }

    @media(max-width:820px) {
      .steps::before {
        display: none
      }
    }

    .step {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 28px
    }

    .step .n {
      font-family: 'Anton';
      font-size: 2.4rem;
      color: var(--primary);
      line-height: 1
    }

    .step h3 {
      font-size: 1.25rem;
      margin: 12px 0 8px
    }

    .step p {
      color: var(--muted);
      font-size: .98rem
    }

    /* accordion numerado "como funciona" (doc 13 §4.4) */
    .method {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 940px;
      margin: 0 auto;
      position: relative;
      z-index: 2
    }

    .method details {
      background: #fff;
      color: var(--on-light);
      border-radius: var(--r-card);
      overflow: hidden;
      transition: background .2s var(--ease)
    }

    .method details[open] {
      background: var(--glow)
    }

    .method summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 26px 28px
    }

    .method summary::-webkit-details-marker {
      display: none
    }

    .method .mn {
      font-family: 'Anton', sans-serif;
      font-size: clamp(2.4rem, 5.5vw, 4rem);
      line-height: .9;
      letter-spacing: -2px;
      flex: none;
      min-width: 1.5em
    }

    .method .mt {
      font-family: 'Anton', sans-serif;
      text-transform: uppercase;
      font-size: clamp(1.2rem, 2.6vw, 1.8rem);
      letter-spacing: -.3px;
      line-height: 1.08;
      flex: 1
    }

    .method .mtog {
      flex: none;
      width: 48px;
      height: 48px;
      border-radius: var(--r-pill);
      background: #fff;
      color: var(--on-light);
      display: grid;
      place-items: center;
      font-family: 'DM Sans';
      font-size: 24px;
      font-weight: 500;
      line-height: 1
    }

    .method details[open] .mtog::after {
      content: "–"
    }

    .method details:not([open]) .mtog {
      background: #F1EEE6
    }

    .method details:not([open]) .mtog::after {
      content: "+"
    }

    .method .mbody {
      padding: 0 28px 30px calc(28px + 1.5em + 22px);
      max-width: 720px
    }

    .method .mbody p {
      font-size: 1.02rem;
      opacity: .82;
      line-height: 1.55
    }

    @media(max-width:640px) {
      .method .mbody {
        padding: 0 28px 26px 28px
      }
    }

    /* banda manifesto violeta (doc 13 §4.5) */
    .manifesto {
      position: relative;
      overflow: hidden;
      border-radius: var(--r-card);
      background: var(--primary);
      color: var(--on-primary);
      padding: clamp(52px, 7vw, 96px) clamp(28px, 5vw, 72px);
      text-align: center;
      isolation: isolate
    }

    /* shape rotacionado de fundo (~39.8deg) */
    .manifesto::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 60%;
      height: 200%;
      top: -50%;
      left: 60%;
      background: rgba(255, 255, 255, .10);
      transform: rotate(39.8deg);
      border-radius: 40px
    }

    .manifesto::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 42%;
      height: 200%;
      top: -50%;
      left: -22%;
      background: rgba(10, 14, 26, .08);
      transform: rotate(39.8deg);
      border-radius: 40px
    }

    .manifesto h2 {
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      font-size: var(--fs-h2);
      letter-spacing: -1.5px;
      line-height: 1.02;
      max-width: 16ch;
      margin: 0 auto
    }

    .manifesto .m-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 16px;
      justify-content: center;
      margin-top: 30px
    }

    .manifesto .brand-sig {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 26px;
      font-family: 'DM Mono', monospace;
      font-size: 13px;
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: .8
    }

    /* features */
    .feats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .feats {
        grid-template-columns: 1fr
      }
    }

    .feat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 26px;
      transition: .2s var(--ease)
    }

    .feat:hover {
      transform: translateY(-3px);
      border-color: rgba(157, 137, 252, .4)
    }

    .feat .ic {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      background: rgba(157, 137, 252, .14)
    }

    .feat h3 {
      font-size: 1.15rem;
      margin-bottom: 8px
    }

    .feat p {
      color: var(--muted);
      font-size: .96rem
    }

    /* bento grid */
    .bento {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, minmax(150px, 1fr));
      gap: 18px;
      position: relative;
      z-index: 2
    }

    /* service cards de cor sólida + entalhe de canto (doc 13 §4.1) */
    .bento .b {
      --fill: var(--glow);
      --notch: var(--light);
      color: var(--on-light);
      background: transparent;
      border: 0;
      border-radius: var(--r-card);
      padding: 34px;
      transition: transform .25s var(--ease);
      position: relative;
      isolation: isolate;
      overflow: visible;
      display: flex;
      flex-direction: column
    }

    /* camada de preenchimento com o entalhe recortado (círculo do fundo da seção) */
    .bento .b::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: var(--r-card);
      background: var(--fill);
      -webkit-mask: radial-gradient(circle 33px at calc(100% - 32px) calc(100% - 32px), transparent 0 32px, #000 33px);
      mask: radial-gradient(circle 33px at calc(100% - 32px) calc(100% - 32px), transparent 0 32px, #000 33px)
    }

    /* conteúdo acima do preenchimento */
    .bento .b>* {
      position: relative;
      z-index: 1
    }

    .bento .b:hover {
      transform: translateY(-4px)
    }

    /* variantes de cor (definem --fill) */
    .bento .b--glow { --fill: var(--glow) }
    .bento .b--primary { --fill: var(--primary) }
    .bento .b--spark { --fill: var(--spark) }
    .bento .b--pulse { --fill: var(--pulse) }
    .bento .b--signal { --fill: var(--signal); color: #fff }
    .bento .b--ink { --fill: var(--bg); color: #fff }

    .bento .b .ic {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      background: rgba(10, 14, 26, .14);
      color: var(--on-light);
      flex: none
    }

    .bento .b--signal .ic,
    .bento .b--ink .ic {
      background: rgba(255, 255, 255, .18);
      color: #fff
    }

    .bento .b h3 {
      font-size: 1.28rem;
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: -.3px;
      line-height: 1.1;
      margin-bottom: 10px
    }

    .bento .b p {
      color: inherit;
      opacity: .82;
      font-size: .95rem
    }

    /* botão-seta de canto: 56px, centrado no entalhe (34px das bordas) */
    .bento .b .corner-arrow {
      position: absolute;
      z-index: 2;
      right: 6px;
      bottom: 6px;
      width: 52px;
      height: 52px;
      color: var(--glow)
    }
    .bento .b--glow .corner-arrow { color: var(--glow) }
    .bento .b--primary .corner-arrow { color: var(--primary) }
    .bento .b--spark .corner-arrow { color: var(--spark) }
    .bento .b--pulse .corner-arrow { color: var(--pulse) }
    .bento .b--signal .corner-arrow { color: var(--signal) }
    .bento .b--ink .corner-arrow { color: var(--bg) }

    .bento .b-tall {
      grid-row: 1 / span 3
    }

    .bento .b-wide {
      grid-column: 2 / span 2;
      flex-direction: row;
      align-items: center;
      gap: 22px
    }

    .bento .b-wide .ic {
      margin-bottom: 0
    }

    /* leque de capas sobrepostas (filmes, séries, animes e novelas BR) */
    .b-poster-stack {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      margin-top: auto;
      padding-top: 24px
    }

    .b-poster-stack img {
      width: 62px;
      height: 92px;
      object-fit: cover;
      border-radius: 9px;
      border: 2px solid rgba(255, 255, 255, .85);
      box-shadow: 0 12px 22px -8px rgba(0, 0, 0, .55);
      margin-left: -20px;
      transition: transform .25s var(--ease)
    }

    .b-poster-stack img:first-child {
      margin-left: 0
    }

    .b-poster-stack img:nth-child(odd) {
      transform: rotate(-6deg)
    }

    .b-poster-stack img:nth-child(even) {
      transform: rotate(6deg) translateY(-4px)
    }

    .b-poster-stack:hover img {
      transform: none;
      margin-left: -8px
    }

    @media(max-width:820px) {
      .b-poster-stack img {
        width: 66px;
        height: 98px;
        margin-left: -16px
      }
    }

    .bento .rv:nth-child(2) {
      transition-delay: .05s
    }

    .bento .rv:nth-child(3) {
      transition-delay: .1s
    }

    .bento .rv:nth-child(4) {
      transition-delay: .15s
    }

    .bento .rv:nth-child(5) {
      transition-delay: .2s
    }

    .bento .rv:nth-child(6) {
      transition-delay: .25s
    }

    @media(max-width:820px) {
      .bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none
      }

      .bento .b-tall {
        grid-row: auto
      }

      .bento .b-wide {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start
      }
    }

    /* comparativo */
    .cmp {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      position: relative;
      z-index: 2
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 560px
    }

    th,
    td {
      padding: 16px 20px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      font-size: .98rem
    }

    thead th {
      font-family: 'DM Mono';
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--subtle)
    }

    thead th.us {
      color: var(--primary)
    }

    tbody td:first-child {
      color: var(--muted)
    }

    td.yes {
      color: var(--signal);
      font-weight: 600
    }

    td.us {
      background: rgba(157, 137, 252, .06)
    }

    tr:last-child td {
      border-bottom: none
    }

    /* pricing */
    .plans {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: start;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .plans {
        grid-template-columns: 1fr
      }
    }

    .plan {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 28px;
      position: relative
    }

    .plan.hot {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary), 0 24px 60px -24px rgba(157, 137, 252, .5);
      transform: translateY(-12px)
    }

    @media(max-width:820px) {
      .plan.hot {
        transform: none
      }
    }

    .plan .tag {
      position: absolute;
      top: -12px;
      left: 28px;
      background: var(--primary);
      color: var(--on-primary);
      font-size: 12px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: var(--pill)
    }

    .plan h3 {
      font-size: 1.3rem
    }

    .plan .price {
      display: flex;
      align-items: baseline;
      gap: 2px;
      margin: 10px 0 2px
    }

    .plan .price .cur {
      font-family: 'Anton';
      font-size: 1.4rem;
      color: var(--muted)
    }

    .plan .price .amt {
      font-family: 'Anton';
      font-size: 3rem;
      line-height: 1
    }

    .plan .price .per {
      font-family: 'DM Sans';
      font-size: 1rem;
      color: var(--subtle);
      font-weight: 600;
      margin-left: 2px
    }

    .price-note {
      font-family: 'DM Mono';
      font-size: 12px;
      color: var(--subtle);
      margin-bottom: 8px;
      min-height: 1em
    }

    .billing {
      display: flex;
      width: max-content;
      margin: 0 auto 40px;
      gap: 4px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--pill);
      padding: 5px;
      position: relative;
      z-index: 2
    }

    .bill-opt {
      border: none;
      background: transparent;
      color: var(--muted);
      font-family: 'DM Sans';
      font-weight: 600;
      font-size: 15px;
      padding: 9px 20px;
      border-radius: var(--pill);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: .2s var(--ease)
    }

    .bill-opt.on {
      background: var(--primary);
      color: var(--on-primary)
    }

    .bill-opt .save {
      font-family: 'DM Mono';
      font-size: 11px;
      background: rgba(28, 183, 133, .18);
      color: var(--signal);
      padding: 2px 7px;
      border-radius: var(--pill)
    }

    .bill-opt.on .save {
      background: rgba(10, 14, 26, .15);
      color: var(--on-primary)
    }

    .feats-list {
      list-style: none;
      margin: 16px 0 22px;
      padding: 0
    }

    .feats-list li {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: .93rem;
      color: var(--muted);
      margin: 9px 0
    }

    .feats-list li svg {
      flex: none;
      margin-top: 2px
    }

    .trial {
      font-family: 'DM Mono';
      font-size: 12px;
      color: var(--signal);
      margin-top: 12px;
      text-align: center
    }

    .plan .per {
      color: var(--subtle);
      font-size: .9rem;
      font-family: 'DM Mono'
    }

    .plan p.desc {
      color: var(--muted);
      font-size: .95rem;
      margin: 14px 0 20px
    }

    .plan .btn {
      width: 100%;
      justify-content: center
    }

    .lock {
      text-align: center;
      color: var(--subtle);
      font-size: .9rem;
      margin-top: 22px;
      position: relative;
      z-index: 2
    }

    /* poster-wall marquee */
    .marquee {
      overflow: hidden;
      -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      padding: 10px 0
    }

    .marquee .track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: scroll 30s linear infinite
    }

    .marquee:hover .track {
      animation-play-state: paused
    }

    .poster {
      width: 120px;
      height: 176px;
      border-radius: 12px;
      flex: none;
      position: relative;
      overflow: hidden;
      box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .75)
    }

    .poster::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 12px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1)
    }

    .poster:nth-child(odd) {
      transform: rotate(-3deg)
    }

    .poster:nth-child(even) {
      transform: rotate(3deg)
    }

    .poster img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    @keyframes scroll {
      to {
        transform: translateX(calc(-50% - 10px))
      }
    }

    .attrib {
      text-align: center;
      color: var(--subtle);
      font-size: .8rem;
      margin-top: 24px;
      position: relative;
      z-index: 2
    }

    .attrib a {
      color: var(--muted);
      text-decoration: underline;
      text-underline-offset: 2px
    }

    .attrib a:hover {
      color: var(--text)
    }

    /* trending 3D orbit carousel */
    .trending-stage {
      perspective: 1300px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      position: relative;
      z-index: 2
    }

    .orbit {
      position: relative;
      width: 150px;
      height: 222px;
      transform-style: preserve-3d;
      animation: orbitspin 46s linear infinite
    }

    .trending-stage:hover .orbit {
      animation-play-state: paused
    }

    .orbit .ocard {
      position: absolute;
      inset: 0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .85);
      backface-visibility: hidden
    }

    .orbit .ocard::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 14px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12)
    }

    .orbit .ocard img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    @keyframes orbitspin {
      from {
        transform: rotateY(0)
      }

      to {
        transform: rotateY(-360deg)
      }
    }

    @media(max-width:600px) {
      .trending-stage {
        perspective: 900px;
        height: 250px
      }

      .orbit {
        width: 120px;
        height: 178px
      }
    }

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

    /* final cta */
    .final {
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .final h2 {
      font-size: clamp(2.2rem, 5.5vw, 4rem);
      position: relative;
      margin-bottom: 18px;
      z-index: 2
    }

    .final p {
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto 28px;
      position: relative;
      z-index: 2
    }

    .final .cd {
      margin-top: 16px;
      font-family: 'DM Mono';
      color: var(--subtle);
      font-size: 13px;
      position: relative;
      z-index: 2
    }

    /* card navy do CTA final (doc 13 §4.6) */
    .cta-card {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: var(--bg);
      color: #fff;
      border-radius: var(--r-cta);
      padding: clamp(64px, 9vw, 120px) clamp(28px, 5vw, 64px);
      text-align: center
    }

    .cta-card h2 {
      color: #fff;
      margin-bottom: 18px
    }

    .cta-card p {
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto 30px
    }

    .cta-card .cd {
      margin-top: 18px;
      font-family: 'DM Mono';
      color: var(--subtle);
      font-size: 13px
    }

    @media(max-width:600px) {
      .cta-card .sticker-pill {
        display: none
      }
    }

    /* FAQ em seção clara */
    /* botão flutuante voltar-ao-topo */
    .to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 60;
      width: 52px;
      height: 52px;
      border: 0;
      border-radius: var(--r-pill);
      background: var(--primary);
      color: var(--on-primary);
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5);
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px);
      transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s, visibility .25s
    }

    .to-top.show {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .to-top:hover {
      background: var(--primary-hover);
      transform: translateY(-2px)
    }

    .to-top svg {
      width: 22px;
      height: 22px
    }

    @media(max-width:560px) {
      .to-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .to-top {
        transition: opacity .25s, visibility .25s
      }
    }

    /* footer estilo Revento (branco, wordmark gigante, links chevron) */
    footer.sec--light {
      background: var(--light);
      color: var(--on-light);
      padding: clamp(64px, 8vw, 110px) 0 40px;
      position: relative;
      z-index: 2
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 48px;
      align-items: start;
      margin-bottom: 48px
    }

    @media(max-width:760px) {
      .foot-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }
    }

    .foot-logo {
      display: inline-flex;
      align-items: center;
      gap: 16px
    }

    .foot-mark {
      width: clamp(52px, 7vw, 80px);
      height: clamp(52px, 7vw, 80px);
      flex: none
    }

    .foot-word {
      font-family: 'Anton', sans-serif;
      text-transform: uppercase;
      font-size: clamp(2.6rem, 7vw, 5rem);
      letter-spacing: -2px;
      line-height: .9;
      color: var(--on-light)
    }

    .foot-desc {
      margin-top: 22px;
      max-width: 420px;
      color: var(--on-light-muted);
      font-size: 1rem;
      line-height: 1.55
    }

    .foot-social {
      display: flex;
      gap: 12px;
      margin-top: 22px
    }

    .foot-social a {
      width: 42px;
      height: 42px;
      border-radius: var(--r-pill);
      background: var(--bg);
      color: #fff;
      display: grid;
      place-items: center;
      transition: .2s var(--ease)
    }

    .foot-social svg {
      width: 19px;
      height: 19px
    }

    .foot-social a:hover {
      background: var(--primary);
      color: var(--on-primary)
    }

    .foot-by {
      margin-top: 22px;
      color: var(--on-light-muted);
      font-size: .9rem
    }

    .foot-by a {
      color: var(--on-light);
      font-weight: 600;
      text-decoration: underline
    }

    .foot-links {
      display: flex;
      flex-direction: column;
      gap: 14px;
      justify-self: end
    }

    @media(max-width:760px) {
      .foot-links {
        justify-self: start
      }
    }

    .foot-links a {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: 'Anton', sans-serif;
      text-transform: uppercase;
      font-size: clamp(1.1rem, 2vw, 1.5rem);
      letter-spacing: -.2px;
      color: var(--on-light)
    }

    .foot-chev {
      width: 30px;
      height: 30px;
      border-radius: var(--r-pill);
      background: var(--primary);
      color: var(--on-primary);
      display: grid;
      place-items: center;
      font-size: 17px;
      line-height: 1;
      flex: none
    }

    .foot-links a:hover .foot-chev {
      background: var(--bg);
      color: #fff
    }

    .foot-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px 40px;
      flex-wrap: wrap;
      border-top: 1px solid var(--on-light-border);
      padding-top: 26px
    }

    .foot-copy {
      color: var(--on-light-muted);
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .foot-bottom .legal {
      border: 0;
      padding: 0;
      color: var(--on-light-muted);
      font-size: .8rem;
      line-height: 1.6;
      max-width: 640px;
      flex: 1;
      min-width: 280px
    }

    /* faq estilo Revento: 2 colunas, perguntas Anton, toggle navy à esquerda */
    .faq-grid {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 56px;
      align-items: start
    }

    @media(max-width:860px) {
      .faq-grid {
        grid-template-columns: 1fr;
        gap: 28px
      }
    }

    .faq-head {
      max-width: none;
      text-align: left
    }

    .faq-head .h2-display {
      color: var(--on-light);
      margin: 12px 0 16px
    }

    .faq-head p {
      color: var(--on-light-muted)
    }

    .faq {
      max-width: none;
      margin: 0;
      position: relative;
      z-index: 2
    }

    .faq details {
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--on-light-border);
      border-radius: 0;
      margin: 0;
      overflow: hidden
    }

    .faq details:last-child {
      border-bottom: 0
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 18px
    }

    .faq summary::-webkit-details-marker {
      display: none
    }

    .faq-tog {
      flex: none;
      width: 40px;
      height: 40px;
      border-radius: var(--r-pill);
      background: var(--bg);
      display: grid;
      place-items: center
    }

    .faq-tog::after {
      content: "+";
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: 22px;
      font-weight: 500;
      line-height: 1
    }

    .faq details[open] .faq-tog::after {
      content: "\2013"
    }

    .faq-q {
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      font-size: clamp(1.05rem, 1.7vw, 1.35rem);
      letter-spacing: -.2px;
      line-height: 1.14;
      color: var(--on-light)
    }

    .faq .ans {
      padding: 0 0 24px 58px;
      color: var(--on-light-muted);
      font-size: 1rem;
      max-width: 62ch
    }

    @media(max-width:860px) {
      .faq .ans {
        padding-left: 0
      }
    }

    /* reveal */
    .rv {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s var(--ease), transform .6s var(--ease)
    }

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

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

      .float,
      .wig,
      .seal .ring,
      .badge-deadline .dot,
      .marquee .track {
        animation: none
      }
    }

/* ---- language switcher (CSS-only dropdown, no JS) ---- */
.langsw{position:relative;display:inline-block}
.lang-cur{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--pill);padding:8px 14px;font-family:"DM Mono",monospace;font-size:13px;cursor:pointer;letter-spacing:.5px;line-height:1}
.lang-cur::after{content:"▾";opacity:.55;font-size:11px}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:174px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:6px;display:none;flex-direction:column;gap:2px;z-index:70;box-shadow:0 20px 44px rgba(0,0,0,.45)}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--muted);font-size:14px;text-decoration:none}
.lang-menu a:hover{background:var(--bg);color:var(--text)}
.lang-menu a.active{color:var(--primary);font-weight:600}
.langsw:hover .lang-menu,.langsw:focus-within .lang-menu{display:flex}
@media(max-width:720px){.lang-menu{right:auto;left:0}}

/* lista de recursos grátis (substitui a seção de pricing) */
.free-list{max-width:640px;margin:36px auto 0;list-style:none;padding:0;display:grid;gap:14px}
.free-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--muted)}
.sec--light .free-list li{color:var(--on-light)}
.free-list .ck{color:#1CB785;font-weight:800;flex:none;font-size:17px;line-height:1.4}
/* spinner do botão do formulário (loading) */
.btn-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;vertical-align:-2px;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn-spin{animation-duration:1.4s}}