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

    :root {
      --bg-base:    #010611;
      --bg-surface: #08101b;
      --bg-elevated:#0f2138;
      --border:     rgba(255,255,255,0.12);
      --white:      #f8fafc;
      --gray:       #94a3b8;
      --orange:     #fb923c;
      --green:      #22c55e;
      --blue:       #3b82f6;
      --purple:     #a855f7;
    }

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

    body {
      font-family: 'Manrope', sans-serif;
      background: var(--bg-base);
      color: var(--white);
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* ── NAVBAR (brutalismo) ────────────────────────── */
    .navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      height: 108px;
      padding: 0 40px;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(1,6,17,0.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: transform 380ms cubic-bezier(0.22,1,0.36,1),
                  background 300ms,
                  border-color 300ms;
    }

    .navbar.nav-hidden {
      transform: translateY(-100%);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .nav-logo img {
      height: 108px;
      width: auto;
      mix-blend-mode: screen;
      filter: brightness(1.1);
    }

    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
    }

    .nav-links a {
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: color 200ms;
    }

    .nav-links a:hover { color: var(--white); }

    .nav-cta {
      padding: 10px 22px;
      background: var(--white);
      color: var(--bg-base);
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      font-size: 14px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: box-shadow 220ms cubic-bezier(0.22,1,0.36,1), transform 220ms cubic-bezier(0.22,1,0.36,1);
    }

    .nav-cta:hover {
      box-shadow: 0 0 22px rgba(255,255,255,0.15);
      transform: translateY(-1px);
    }

    /* ── HERO ────────────────────────────────────────── */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 700px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--bg-base);
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.82);
      z-index: 1;
    }

    /* ── HERO BRAND (brutalismo) ─────────────────── */
    .hero-brand {
      position: absolute;
      bottom: 64px;
      left: 48px;
      z-index: 3;
    }

    .hero-brand-text {
      display: block;
      font-size: clamp(80px, 13vw, 200px);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.04em;
      line-height: 0.9;
      text-transform: uppercase;
      /* initial solid shadow — JS overrides on scroll */
      text-shadow:
        7px 7px 0px rgba(55,85,140,1),
        4px 4px 0px rgba(55,85,140,0.75),
        2px 2px 0px rgba(55,85,140,0.45);
      will-change: text-shadow;
    }

    .hero-brand-sub {
      display: block;
      font-size: clamp(16px, 2vw, 30px);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.04em;
      line-height: 0.9;
      text-transform: uppercase;
      margin-top: 12px;
      margin-left: 13px;
      text-shadow: 3px 3px 0px rgba(55,85,140,0.9);
      will-change: text-shadow;
    }

    .btn-primary {
      padding: 15px 30px;
      background: var(--white);
      color: var(--bg-base);
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      font-size: 15px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: box-shadow 220ms cubic-bezier(0.22,1,0.36,1), transform 220ms cubic-bezier(0.22,1,0.36,1);
    }

    .btn-primary:hover {
      box-shadow: 0 0 28px rgba(255,255,255,0.18);
      transform: translateY(-2px);
    }

    .btn-secondary {
      padding: 15px 30px;
      background: transparent;
      color: var(--white);
      font-family: 'Manrope', sans-serif;
      font-weight: 600;
      font-size: 15px;
      border: 1px solid rgba(255,255,255,0.2);
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: border-color 220ms, background 220ms;
    }

    .btn-secondary:hover {
      border-color: rgba(255,255,255,0.4);
      background: rgba(255,255,255,0.04);
    }

    .scroll-indicator {
      position: absolute;
      bottom: 44px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    .scroll-line {
      width: 1px;
      height: 44px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
      0%,100%{ opacity: 0.3; transform: scaleY(0.9); }
      50%    { opacity: 1;   transform: scaleY(1.05); }
    }

    /* HUD terminal */
    .hero-hud {
      position: absolute;
      bottom: 72px;
      left: 48px;
      z-index: 4;
      background: rgba(8,16,27,0.78);
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 20px 26px;
      min-width: 290px;
    }

    .hud-header {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      color: var(--orange);
      text-transform: uppercase;
      margin-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding-bottom: 10px;
    }

    .hud-line {
      font-family: 'Courier New', monospace;
      font-size: 12.5px;
      color: var(--gray);
      line-height: 2;
      display: flex;
      gap: 8px;
    }

    .hud-key { color: rgba(148,163,184,0.6); }
    .hud-val { color: var(--green); font-weight: 600; }
    .hud-cursor {
      display: inline-block;
      width: 7px;
      height: 13px;
      background: var(--orange);
      animation: blink 1s step-end infinite;
      vertical-align: text-bottom;
      margin-left: 2px;
    }

    @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

    /* ── TRUST BAR ───────────────────────────────────── */
    .trust-bar {
      padding: 0;
      background: var(--bg-surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      display: flex;
      align-items: stretch;
    }

    .trust-label {
      flex-shrink: 0;
      padding: 26px 40px;
      font-size: 13px;
      font-weight: 400;
      color: var(--gray);
      white-space: nowrap;
      border-right: 1px solid var(--border);
      display: flex;
      align-items: center;
    }

    .trust-scroll-wrapper {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .trust-scroll-wrapper::before,
    .trust-scroll-wrapper::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 72px;
      z-index: 1;
      pointer-events: none;
    }

    .trust-scroll-wrapper::before {
      left: 0;
      background: linear-gradient(to right, var(--bg-surface), transparent);
    }

    .trust-scroll-wrapper::after {
      right: 0;
      background: linear-gradient(to left, var(--bg-surface), transparent);
    }

    .trust-track {
      display: flex;
      align-items: center;
      animation: trustScroll 28s linear infinite;
      white-space: nowrap;
      height: 100%;
    }

    .trust-track:hover { animation-play-state: paused; }

    @keyframes trustScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .trust-name {
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.32);
      padding: 26px 22px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .trust-sep {
      color: var(--orange);
      font-size: 10px;
      opacity: 0.7;
    }

    /* ── PROBLEM SECTION ─────────────────────────────── */
    .problem-section {
      padding: 120px 48px;
      background: var(--bg-base);
    }

    .problem-grid {
      max-width: 1200px;
      margin: 0 auto 80px;
      display: grid;
      grid-template-columns: 1fr 64px 1fr;
      align-items: center;
    }

    .problem-col { padding: 0 32px; }

    .pizza-frame {
      position: relative;
      overflow: hidden;
      line-height: 0;
    }

    .pizza-frame img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      display: block;
    }

    .pizza-frame-bad img {
      filter: brightness(0.75) saturate(0.7) contrast(1.1);
    }

    .pizza-scan {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      z-index: 5;
      animation: scanDown 3.5s ease-in-out infinite;
    }

    .pizza-scan-red  { background: linear-gradient(90deg, transparent, #ff3333 40%, #ff3333 60%, transparent); }
    .pizza-scan-green{ background: linear-gradient(90deg, transparent, #22c55e 40%, #22c55e 60%, transparent); animation-delay: 1.2s; }

    @keyframes scanDown {
      0%  { top: 0;    opacity: 0; }
      5%  { opacity: 1; }
      95% { opacity: 1; }
      100%{ top: 100%; opacity: 0; }
    }

    .pizza-markers { position: absolute; inset: 0; z-index: 4; }

    .marker {
      position: absolute;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .marker-err {
      border: 1.5px dashed rgba(255,51,51,0.85);
      background: rgba(255,51,51,0.06);
    }

    .marker-ok {
      border: 1.5px solid rgba(34,197,94,0.85);
      background: rgba(34,197,94,0.06);
    }

    .marker-label {
      position: absolute;
      left: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      font-size: 11px;
      font-weight: 600;
      font-family: 'Courier New', monospace;
      white-space: nowrap;
      padding: 3px 10px;
      letter-spacing: 0.04em;
    }

    .marker-label-err {
      color: #ff4444;
      background: rgba(255,51,51,0.08);
      border: 1px solid rgba(255,51,51,0.25);
    }

    .marker-label-ok {
      color: var(--green);
      background: rgba(34,197,94,0.08);
      border: 1px solid rgba(34,197,94,0.25);
    }

    .marker-label-left {
      left: auto;
      right: calc(100% + 10px);
    }

    .verdict {
      display: inline-block;
      margin-top: 18px;
      padding: 7px 22px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .verdict-fail {
      background: rgba(255,51,51,0.08);
      border: 1px solid rgba(255,51,51,0.5);
      color: #ff4444;
    }

    .verdict-pass {
      background: rgba(34,197,94,0.08);
      border: 1px solid rgba(34,197,94,0.5);
      color: var(--green);
    }

    .problem-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 340px;
      position: relative;
    }

    .problem-divider::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: 50%;
      width: 1px;
      background: var(--border);
    }

    .problem-divider-text {
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      font-size: 11px;
      font-weight: 600;
      color: rgba(148,163,184,0.5);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      white-space: nowrap;
      background: var(--bg-base);
      padding: 16px 0;
      position: relative;
      z-index: 1;
    }

    .problem-headline {
      text-align: center;
      max-width: 860px;
      margin: 0 auto;
      font-size: clamp(20px, 2.8vw, 30px);
      font-weight: 700;
      line-height: 1.45;
      color: var(--white);
    }

    .section-title {
      text-align: center;
      font-size: clamp(26px, 3.5vw, 40px);
      font-weight: 700;
      color: var(--white);
      margin-bottom: 72px;
      letter-spacing: -0.02em;
    }

    .icon-orange { background: rgba(251,146,60,0.12); color: var(--orange); }
    .icon-purple { background: rgba(168,85,247,0.12); color: var(--purple); }
    .icon-green  { background: rgba(34,197,94,0.12);  color: var(--green);  }
    .icon-blue   { background: rgba(59,130,246,0.12); color: var(--blue);   }
    .icon-white  { background: rgba(248,250,252,0.07);color: var(--white);  }

    /* ── SHOWCASE ────────────────────────────────────── */
    .showcase-section {
      padding: 120px 48px;
      background: var(--bg-base);
      position: relative;
      overflow: hidden;
    }

    .showcase-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at center 40%, rgba(15,33,56,0.55) 0%, transparent 70%);
      z-index: 0;
    }

    .showcase-section .section-title {
      position: relative;
      z-index: 1;
      font-size: clamp(26px, 3.5vw, 44px);
      font-weight: 800;
      letter-spacing: -0.025em;
    }

    .showcase-wrap {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      margin: 0 auto;
    }

    .mock-window {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
    }

    .mock-titlebar {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border);
      padding: 13px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .mock-dots { display: flex; gap: 7px; }
    .mock-dot  { width: 11px; height: 11px; border-radius: 50%; }

    .mock-title-label {
      flex: 1;
      text-align: center;
      font-size: 12px;
      color: var(--gray);
      font-family: 'Courier New', monospace;
      letter-spacing: 0.04em;
    }

    .mock-breadcrumb {
      font-size: 11px;
      color: rgba(148,163,184,0.4);
      font-family: 'Courier New', monospace;
    }

    .mock-body {
      display: grid;
      grid-template-columns: 1fr 300px;
    }

    .mock-canvas {
      padding: 32px;
      background: #050d17;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 520px;
    }

    .pizza-svg-wrap {
      width: 100%;
      max-width: 420px;
      aspect-ratio: 1;
      position: relative;
    }

    .mock-sidebar {
      background: var(--bg-surface);
      border-left: 1px solid var(--border);
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow: hidden;
    }

    .sidebar-block {
      padding: 16px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .sidebar-block:last-child { border-bottom: none; }

    .sidebar-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(148,163,184,0.5);
      margin-bottom: 12px;
    }

    .score-item {
      margin-bottom: 10px;
    }

    .score-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .score-name { font-size: 12px; color: var(--gray); }
    .score-num  { font-size: 12px; font-weight: 700; }

    .score-bar-bg {
      height: 3px;
      background: rgba(255,255,255,0.06);
      border-radius: 2px;
    }

    .score-bar-fill {
      height: 3px;
      border-radius: 2px;
      transition: width 1s ease;
    }

    .comanda-mono {
      font-family: 'Courier New', monospace;
      font-size: 11.5px;
      color: var(--gray);
      line-height: 1.9;
    }

    .comanda-mono .hi    { color: var(--orange); }
    .comanda-mono .ok    { color: var(--green);  }
    .comanda-mono .muted { color: rgba(148,163,184,0.4); }

    .flavor-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--gray);
      padding: 3px 8px;
      border: 1px solid rgba(255,255,255,0.06);
      margin: 2px;
    }

    .flavor-dot { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }

    /* Annotation callouts below mock */
    .annot-row {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 12px;
      margin-top: 16px;
    }

    .annot-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      padding: 14px 16px;
      border-top-width: 2px;
    }

    .annot-card-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .annot-card-text {
      font-size: 12px;
      color: var(--gray);
      line-height: 1.55;
    }

    /* ── BENTO GRID ──────────────────────────────────── */
    .features-section {
      padding: 120px 48px;
      background: var(--bg-surface);
    }

    .features-section .section-title {
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
      font-size: clamp(22px, 3vw, 36px);
      line-height: 1.3;
    }

    .bento-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .bento-card {
      background: var(--bg-elevated);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 30px 28px;
      transition: border-color 220ms cubic-bezier(0.22,1,0.36,1),
                  transform     220ms cubic-bezier(0.22,1,0.36,1),
                  box-shadow    220ms cubic-bezier(0.22,1,0.36,1);
    }

    .bento-card:hover {
      border-color: rgba(255,255,255,0.24);
      transform: scale(1.015);
      box-shadow: 0 12px 48px rgba(0,0,0,0.5);
    }

    .bento-card.wide { grid-column: span 2; }

    .bento-icon {
      width: 46px;
      height: 46px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .bento-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 10px;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }

    .bento-text {
      font-size: 13.5px;
      color: var(--gray);
      line-height: 1.68;
    }

    /* ── NUMBERS ─────────────────────────────────────── */
    .numbers-section {
      padding: 80px 48px;
      background: var(--bg-surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .numbers-grid {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 48px;
      text-align: center;
    }

    .number-value {
      font-size: clamp(38px, 4.5vw, 56px);
      font-weight: 800;
      color: var(--white);
      line-height: 1;
      margin-bottom: 10px;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }

    .number-label {
      font-size: 14px;
      font-weight: 400;
      color: var(--gray);
      line-height: 1.4;
    }

    /* ── TESTIMONIAL ─────────────────────────────────── */
    .testimonial-section {
      padding: 120px 48px;
      background: var(--bg-base);
    }

    .testimonial-inner {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }

    .stars {
      display: flex;
      justify-content: center;
      gap: 5px;
      margin-bottom: 36px;
    }

    .star { color: var(--orange); font-size: 20px; line-height: 1; }

    .testimonial-quote {
      font-size: clamp(18px, 2.5vw, 28px);
      font-weight: 300;
      font-style: italic;
      color: var(--white);
      line-height: 1.58;
      margin-bottom: 48px;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .author-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 700;
      color: var(--gray);
      flex-shrink: 0;
    }

    .author-name  { font-size: 14px; font-weight: 700; color: var(--white); text-align: left; }
    .author-role  { font-size: 13px; color: var(--gray); text-align: left; }

    /* ── CTA SECTION ─────────────────────────────────── */
    .cta-section {
      padding: 140px 48px;
      background: var(--bg-base);
      position: relative;
      overflow: hidden;
    }

    .cta-radial {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 70% at center, rgba(15,33,56,0.65) 0%, transparent 65%);
      z-index: 0;
    }

    .cta-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 44px 44px;
    }

    .cta-content {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .cta-text { }

    .cta-headline {
      font-size: clamp(30px, 4vw, 52px);
      font-weight: 800;
      color: var(--white);
      line-height: 1.08;
      margin-bottom: 20px;
      letter-spacing: -0.025em;
    }

    .cta-sub {
      font-size: 17px;
      font-weight: 300;
      color: var(--gray);
      margin-bottom: 0;
      line-height: 1.65;
    }

    .cta-form {
      background: var(--bg-surface);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .form-input {
      background: var(--bg-elevated);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--white);
      font-family: 'Manrope', sans-serif;
      font-size: 14px;
      font-weight: 400;
      padding: 14px 18px;
      outline: none;
      transition: border-color 200ms;
      width: 100%;
    }

    .form-input::placeholder { color: rgba(148,163,184,0.4); }
    .form-input:focus { border-color: rgba(255,255,255,0.28); }

    .btn-cta {
      padding: 16px;
      background: var(--white);
      color: var(--bg-base);
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      font-size: 15px;
      border: none;
      cursor: pointer;
      width: 100%;
      margin-top: 6px;
      transition: box-shadow 220ms cubic-bezier(0.22,1,0.36,1), transform 220ms cubic-bezier(0.22,1,0.36,1);
    }

    .btn-cta:hover {
      box-shadow: 0 0 28px rgba(255,255,255,0.15);
      transform: translateY(-1px);
    }

    .form-disclaimer {
      font-size: 12px;
      color: rgba(148,163,184,0.55);
      text-align: center;
      margin-top: 10px;
    }

    /* ── FOOTER ──────────────────────────────────────── */
    .footer {
      background: var(--bg-surface);
      border-top: 1px solid rgba(255,255,255,0.07);
      position: relative;
      overflow: hidden;
    }

    .footer-bg {
      position: absolute;
      inset: 0;
      background-image: url('../conteudo/fundoFooter.jpeg');
      background-size: cover;
      background-position: center right;
      mix-blend-mode: screen;
      opacity: 0.18;
      z-index: 0;
    }

    .footer-inner {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      padding: 64px 48px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 40px;
    }

    .footer-brand { display: flex; flex-direction: column; gap: 8px; }

    .footer-logo-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-logo {
      height: 52px;
      width: auto;
      mix-blend-mode: screen;
      filter: brightness(1.1);
    }

    .footer-logo-name {
      font-size: 18px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -0.02em;
    }

    .footer-tagline {
      font-size: 13px;
      color: rgba(148,163,184,0.6);
    }

    .footer-nav {
      display: flex;
      gap: 32px;
    }

    .footer-nav a {
      font-size: 14px;
      color: var(--gray);
      text-decoration: none;
      transition: color 200ms;
    }

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

    .footer-copy {
      text-align: right;
      font-size: 13px;
      color: rgba(148,163,184,0.5);
    }

    /* ── ANIMATED FLOW SECTION ──────────────────────── */
    .flow-section {
      padding: 120px 48px;
      background: var(--bg-surface);
      overflow: hidden;
    }

    .flow-section .section-title { margin-bottom: 14px; }

    .flow-intro {
      text-align: center;
      font-size: 16px;
      font-weight: 300;
      color: var(--gray);
      margin-bottom: 64px;
      line-height: 1.65;
    }

    .flow-wrap {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 72px 1fr 72px 1fr 72px 1fr;
      align-items: start;
    }

    .flow-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .flow-scene {
      width: 100%;
      max-width: 234px;
      aspect-ratio: 220 / 200;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }

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

    .flow-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 68px;
    }

    .connector-svg { width: 72px; height: 24px; overflow: visible; }

    .flow-step-info { text-align: center; max-width: 200px; }

    .flow-step-num {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      color: var(--orange);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .flow-step-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 7px;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .flow-step-desc {
      font-size: 12.5px;
      color: var(--gray);
      line-height: 1.65;
    }

    /* ── FLOW ANIMATION ENGINE ── */
    .flow-anim {
      animation-duration: 14s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-play-state: paused;
      animation-fill-mode: both;
    }
    .flow-wrap.running .flow-anim { animation-play-state: running; }

    .pizza-emerge,
    .cap-frame,
    .detect-marker,
    .score-display { transform-box: fill-box; transform-origin: center center; }

    .oven-door-anim { transform-box: fill-box; transform-origin: 50% 0%; }
    .steam { transform-box: fill-box; transform-origin: center bottom; }
    .ai-scan-line, .ai-scan-glow { transform-box: fill-box; transform-origin: 0% 0%; }

    /* ── KF: Scene 1 (Forno) ── */
    @keyframes ovenGlow {
      0%,5%   { opacity:0 } 9%,20% { opacity:1 } 23%,100% { opacity:0 }
    }
    @keyframes doorOpen {
      0%,4%           { transform:translateY(0);   opacity:1   }
      10%,20%         { transform:translateY(38px);opacity:.14 }
      24%,100%        { transform:translateY(0);   opacity:1   }
    }
    @keyframes pizzaEmerge {
      0%,7%           { transform:translateY(-22px);opacity:0 }
      14%             { transform:translateY(0);    opacity:1 }
      20%             { transform:translateY(0);    opacity:1 }
      24%,100%        { transform:translateY(-22px);opacity:0 }
    }
    @keyframes steamRise {
      0%,11%  { transform:translateY(0);   opacity:0   }
      14%     {                            opacity:.55 }
      21%     { transform:translateY(-15px);opacity:0  }
      100%    { transform:translateY(0);   opacity:0   }
    }
    @keyframes pwrBlink {
      0%,48%,52%,100% { opacity:1 } 50% { opacity:.15 }
    }

    /* ── KF: Connectors ── */
    @keyframes conn1Draw {
      0%,19%  { stroke-dashoffset:80;opacity:0 }
      21%     { opacity:1 }
      28%,100%{ stroke-dashoffset:0 }
    }
    @keyframes arr1 { 0%,26%{ opacity:0 } 29%,100%{ opacity:.8 } }

    @keyframes conn2Draw {
      0%,39%  { stroke-dashoffset:80;opacity:0 }
      42%     { opacity:1 }
      50%,100%{ stroke-dashoffset:0 }
    }
    @keyframes arr2 { 0%,48%{ opacity:0 } 51%,100%{ opacity:.8 } }

    @keyframes conn3Draw {
      0%,61%  { stroke-dashoffset:80;opacity:0 }
      64%     { opacity:1 }
      71%,100%{ stroke-dashoffset:0 }
    }
    @keyframes arr3 { 0%,69%{ opacity:0 } 72%,100%{ opacity:.8 } }

    /* ── KF: Scene 2 (Camera) ── */
    @keyframes camFlash {
      0%,27%{ opacity:0 } 29%{ opacity:.5 } 32%,100%{ opacity:0 }
    }
    @keyframes capFrame {
      0%,28%  { opacity:0;transform:scale(1.12) }
      33%     { opacity:1;transform:scale(1)    }
      41%,100%{ opacity:0 }
    }
    @keyframes shutterTxt {
      0%,29%{ opacity:0 } 33%{ opacity:1 } 40%,100%{ opacity:0 }
    }
    @keyframes recBlink {
      0%,49%,51%,100%{ opacity:.7 } 50%{ opacity:.1 }
    }

    /* ── KF: Scene 3 (Segmentation lines) ── */
    @keyframes sl1 {
      0%,43%  { stroke-dashoffset:50;opacity:0 }
      45%     { opacity:1 }
      51%,64% { stroke-dashoffset:0;opacity:.85 }
      68%,100%{ opacity:0;stroke-dashoffset:50 }
    }
    @keyframes sl2 {
      0%,44.5%  { stroke-dashoffset:50;opacity:0 }
      46.5%     { opacity:1 }
      52.5%,64% { stroke-dashoffset:0;opacity:.85 }
      68%,100%  { opacity:0;stroke-dashoffset:50 }
    }
    @keyframes sl3 {
      0%,46%  { stroke-dashoffset:50;opacity:0 }
      48%     { opacity:1 }
      54%,64% { stroke-dashoffset:0;opacity:.85 }
      68%,100%{ opacity:0;stroke-dashoffset:50 }
    }
    @keyframes sl4 {
      0%,47.5%  { stroke-dashoffset:50;opacity:0 }
      49.5%     { opacity:1 }
      55.5%,64% { stroke-dashoffset:0;opacity:.85 }
      68%,100%  { opacity:0;stroke-dashoffset:50 }
    }
    @keyframes sl5 {
      0%,49%  { stroke-dashoffset:50;opacity:0 }
      51%     { opacity:1 }
      57%,64% { stroke-dashoffset:0;opacity:.85 }
      68%,100%{ opacity:0;stroke-dashoffset:50 }
    }
    @keyframes sl6 {
      0%,50.5%  { stroke-dashoffset:50;opacity:0 }
      52.5%     { opacity:1 }
      58.5%,64% { stroke-dashoffset:0;opacity:.85 }
      68%,100%  { opacity:0;stroke-dashoffset:50 }
    }
    @keyframes fi1 { 0%,50%{ opacity:0 } 54%,63%{ opacity:1 } 68%,100%{ opacity:0 } }
    @keyframes fi2 { 0%,51%{ opacity:0 } 55%,63%{ opacity:1 } 68%,100%{ opacity:0 } }
    @keyframes fi3 { 0%,52%{ opacity:0 } 56%,63%{ opacity:1 } 68%,100%{ opacity:0 } }
    @keyframes fi4 { 0%,53%{ opacity:0 } 57%,63%{ opacity:1 } 68%,100%{ opacity:0 } }
    @keyframes fi5 { 0%,54%{ opacity:0 } 58%,63%{ opacity:1 } 68%,100%{ opacity:0 } }
    @keyframes fi6 { 0%,55%{ opacity:0 } 59%,63%{ opacity:1 } 68%,100%{ opacity:0 } }

    @keyframes cursorPath {
      0%,41%   { transform:translate(110px,64px); opacity:0  }
      43%      { transform:translate(110px,64px); opacity:1  }
      46%      { transform:translate(149px,87px)             }
      49%      { transform:translate(149px,133px)            }
      52%      { transform:translate(110px,156px)            }
      55%      { transform:translate(70px,133px)             }
      58%      { transform:translate(70px,87px)              }
      61%      { transform:translate(110px,64px)             }
      63%,100% { transform:translate(110px,64px); opacity:0  }
    }

    /* ── KF: Scene 4 (AI detection) ── */
    @keyframes hudCorn {
      0%,64%  { opacity:0 } 67%,91%{ opacity:1 } 94%,100%{ opacity:0 }
    }
    @keyframes scanLn {
      0%,64%  { transform:translateY(0);  opacity:0   }
      66%     {                           opacity:.95  }
      75%     { transform:translateY(100px);opacity:.6 }
      77%,100%{ transform:translateY(0);  opacity:0   }
    }
    @keyframes scanGl {
      0%,64%  { transform:translateY(0);  opacity:0  }
      66%     {                           opacity:.6  }
      75%     { transform:translateY(100px);opacity:.2}
      77%,100%{ transform:translateY(0);  opacity:0  }
    }
    @keyframes mk1 {
      0%,69%  { transform:scale(0);  opacity:0 }
      72%     { transform:scale(1.3);opacity:1 }
      75%,91% { transform:scale(1);  opacity:1 }
      94%,100%{ opacity:0 }
    }
    @keyframes mk2 {
      0%,72%  { transform:scale(0);  opacity:0 }
      75%     { transform:scale(1.3);opacity:1 }
      78%,91% { transform:scale(1);  opacity:1 }
      94%,100%{ opacity:0 }
    }
    @keyframes mk3 {
      0%,75%  { transform:scale(0);  opacity:0 }
      78%     { transform:scale(1.3);opacity:1 }
      81%,91% { transform:scale(1);  opacity:1 }
      94%,100%{ opacity:0 }
    }
    @keyframes scr {
      0%,77%  { transform:scale(0);   opacity:0 }
      81%     { transform:scale(1.15);opacity:1 }
      84%,91% { transform:scale(1);   opacity:1 }
      94%,100%{ opacity:0 }
    }
    @keyframes vrd {
      0%,81%  { opacity:0 } 84%,91%{ opacity:1 } 94%,100%{ opacity:0 }
    }

    /* animation-name bindings */
    .flow-anim.oven-glow      { animation-name: ovenGlow   }
    .flow-anim.oven-door-anim { animation-name: doorOpen   }
    .flow-anim.pizza-emerge   { animation-name: pizzaEmerge}
    .flow-anim.steam.s1       { animation-name: steamRise  }
    .flow-anim.steam.s2       { animation-name: steamRise; animation-delay:-0.28s }
    .flow-anim.steam.s3       { animation-name: steamRise; animation-delay:-0.56s }
    .flow-anim.pwr-blink      { animation-name: pwrBlink; animation-duration:1.6s }

    .flow-anim.conn-anim.c1   { animation-name: conn1Draw }
    .flow-anim.conn-arrow.c1  { animation-name: arr1      }
    .flow-anim.conn-anim.c2   { animation-name: conn2Draw }
    .flow-anim.conn-arrow.c2  { animation-name: arr2      }
    .flow-anim.conn-anim.c3   { animation-name: conn3Draw }
    .flow-anim.conn-arrow.c3  { animation-name: arr3      }

    .flow-anim.cam-flash      { animation-name: camFlash  }
    .flow-anim.cap-frame      { animation-name: capFrame  }
    .flow-anim.shutter-text   { animation-name: shutterTxt}
    .flow-anim.rec-blink      { animation-name: recBlink; animation-duration:1.2s }

    .flow-anim.seg-line.sl1   { animation-name: sl1 }
    .flow-anim.seg-line.sl2   { animation-name: sl2 }
    .flow-anim.seg-line.sl3   { animation-name: sl3 }
    .flow-anim.seg-line.sl4   { animation-name: sl4 }
    .flow-anim.seg-line.sl5   { animation-name: sl5 }
    .flow-anim.seg-line.sl6   { animation-name: sl6 }
    .flow-anim.seg-fill.f1    { animation-name: fi1 }
    .flow-anim.seg-fill.f2    { animation-name: fi2 }
    .flow-anim.seg-fill.f3    { animation-name: fi3 }
    .flow-anim.seg-fill.f4    { animation-name: fi4 }
    .flow-anim.seg-fill.f5    { animation-name: fi5 }
    .flow-anim.seg-fill.f6    { animation-name: fi6 }
    .flow-anim.cursor-g       { animation-name: cursorPath; transform-box: view-box; transform-origin: 0 0 }

    .flow-anim.hud-corn       { animation-name: hudCorn  }
    .flow-anim.ai-scan-line   { animation-name: scanLn   }
    .flow-anim.ai-scan-glow   { animation-name: scanGl   }
    .flow-anim.detect-marker.m1{ animation-name: mk1     }
    .flow-anim.detect-marker.m2{ animation-name: mk2     }
    .flow-anim.detect-marker.m3{ animation-name: mk3     }
    .flow-anim.score-display  { animation-name: scr      }
    .flow-anim.ai-verdict     { animation-name: vrd      }

    @media (max-width: 1100px) {
      .flow-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
      }
      .flow-card    { width: calc(50% - 20px); max-width: 280px; }
      .flow-connector{ display: none; }
    }
    @media (max-width: 600px) {
      /* Flow compacto: esconde cenas SVG, mostra só os passos numerados */
      .flow-scene   { display: none; }
      .flow-connector{ display: none; }
      .flow-wrap    { flex-direction: column; gap: 0; align-items: stretch; }
      .flow-card    {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding: 18px 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }
      .flow-card:last-child { border-bottom: none; }
      .flow-step-info { text-align: left; max-width: 100%; }
      .flow-step-num  { display: block; margin-bottom: 4px; }
    }

    /* ── SCROLL ANIMATIONS ───────────────────────────── */
    .fade-up, .fade-left, .fade-right, .fade-scale {
      opacity: 0;
      will-change: opacity, transform;
    }

    .fade-up    { transform: translateY(40px); }
    .fade-left  { transform: translateX(-48px); }
    .fade-right { transform: translateX(48px); }
    .fade-scale { transform: translateY(24px) scale(0.97); }

    .fade-up, .fade-left, .fade-right, .fade-scale {
      transition: opacity 750ms cubic-bezier(0.16,1,0.3,1),
                  transform 750ms cubic-bezier(0.16,1,0.3,1);
    }

    .in-view {
      opacity: 1 !important;
      transform: none !important;
    }

    .delay-50  { transition-delay:  50ms; }
    .delay-100 { transition-delay: 100ms; }
    .delay-150 { transition-delay: 150ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-250 { transition-delay: 250ms; }
    .delay-300 { transition-delay: 300ms; }
    .delay-400 { transition-delay: 400ms; }
    .delay-500 { transition-delay: 500ms; }

    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }
    .delay-400 { transition-delay: 400ms; }
    .delay-500 { transition-delay: 500ms; }

    /* ── RESPONSIVE ──────────────────────────────────── */
    @media (max-width: 1024px) {
      .bento-grid { grid-template-columns: repeat(2,1fr); }
      .bento-card.wide { grid-column: span 2; }
      .numbers-grid { grid-template-columns: repeat(2,1fr); gap: 40px; }
      .mock-body { grid-template-columns: 1fr; }
      .mock-sidebar { display: none; }
      .annot-row { grid-template-columns: repeat(2,1fr); }
      .cta-content { grid-template-columns: 1fr; gap: 48px; max-width: 600px; }
      .pricing-card.featured { transform: none; }
    }

    @media (max-width: 768px) {
      /* ── Navbar ── */
      .navbar { padding: 0 20px; height: 52px; }
      .nav-links { display: none; }
      .nav-cta   { display: none; }
      .hero-brand { left: 20px; bottom: 40px; }

      /* ── Hero ── */
      .hero-video { display: none; }
      .hero { background: url('https://images.unsplash.com/photo-1513104890138-7c749659a591?w=1200&q=80') center/cover no-repeat; }

      /* ── Problem section ── */
      .problem-grid { grid-template-columns: 1fr; }
      .problem-divider { display: none; }
      .problem-col { padding: 0; margin-bottom: 40px; }
      .problem-col:last-child { margin-bottom: 0; }
      .marker-label { display: none; }   /* labels saem fora da imagem em telas pequenas */

      /* ── Showcase mock window ── */
      .mock-breadcrumb  { display: none; }
      .mock-title-label { font-size: 9px; letter-spacing: 0; }
      .mock-dots { gap: 5px; }
      .annot-row { grid-template-columns: 1fr; }

      /* ── Features ── */
      .bento-grid { grid-template-columns: 1fr; gap: 10px; }
      .bento-card.wide { grid-column: span 1; }
      .bento-card { padding: 22px 18px; border-radius: 12px; }
      .bento-icon { width: 38px; height: 38px; margin-bottom: 14px; }
      .bento-title { font-size: 14px; }
      .bento-text  { font-size: 12.5px; }

      /* ── Numbers ── */
      .numbers-grid { grid-template-columns: repeat(2,1fr); gap: 32px; }
      .number-value { font-size: clamp(30px, 8vw, 44px); }

      /* ── Case de sucesso — card compacto no mobile ── */
      .case-section    { padding: 48px 16px; }
      .case-card       { border-radius: 18px; }
      .case-card-quote { font-size: 13.5px; }
      .case-stat-value { font-size: 22px; }
      .case-stat-label { font-size: 11px; }

      /* Pricing rules movidas para após o CSS base — ver bloco abaixo */

      /* ── Footer ── */
      .footer-inner { grid-template-columns: 1fr; text-align: center; }
      .footer-copy  { text-align: center; }
      .footer-logo-wrap { justify-content: center; }
      .footer-nav { justify-content: center; flex-wrap: wrap; gap: 20px; }

      /* ── Padding das seções ── */
      .problem-section,
      .showcase-section,
      .features-section,
      .testimonial-section,
      .cta-section,
      .flow-section { padding: 60px 20px; }
      .numbers-section { padding: 48px 20px; }
      .case-section    { padding: 60px 20px; }
      .pricing-section { padding: 60px 20px; }
    }

    @media (max-width: 480px) {
      .hero-buttons { flex-direction: column; align-items: center; }
      .btn-primary, .btn-secondary { width: 100%; max-width: 320px; text-align: center; }
      .cta-form { padding: 28px 16px; }
      .mock-canvas { padding: 16px; min-height: 280px; }

      /* Case stats: 2 colunas mesmo em telas pequenas */
      .case-card-stats { grid-template-columns: 1fr 1fr; }

      /* Pricing: preço compacto */
      .pricing-price { align-items: center; }
      .pricing-amount { font-size: 36px; }
      .pricing-grid { padding: 0 4px; }

      /* Seções ainda menores */
      .problem-section,
      .showcase-section,
      .features-section,
      .testimonial-section,
      .cta-section,
      .flow-section,
      .case-section,
      .pricing-section { padding: 48px 16px; }
      .numbers-section { padding: 40px 16px; }

      /* Testimonial compacto */
      .testimonial-quote { font-size: 16px; }
    }

    /* ── CASE DE SUCESSO ────────────────────────────── */
    .case-section {
      background: #000;
      border-top: 1px solid rgba(251,146,60,0.15);
      border-bottom: 1px solid rgba(251,146,60,0.15);
    }

    .case-header {
      width: 100%;
      padding: 48px 0;
      background:
        radial-gradient(ellipse 70% 200% at 20% -10%, rgba(251,146,60,0.16) 0%, transparent 55%);
      border-bottom: 1px solid rgba(251,146,60,0.12);
    }

    .case-header-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .case-logo {
      height: 210px;
      width: auto;
      max-width: 480px;
      object-fit: contain;
      filter: brightness(1.1) saturate(1.05);
      display: block;
      flex-shrink: 0;
    }

    .case-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2em;
      color: var(--orange);
      text-transform: uppercase;
    }

    .case-body {
      max-width: 1400px;
      margin: 0 auto;
      padding: 72px 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .case-card-left { display: flex; flex-direction: column; }

    /* ── RELATO BRUTALISTA ── */
    .brut-quote { margin-bottom: 36px; }

    .brut-quote-mark {
      display: block;
      font-size: clamp(72px, 8vw, 120px);
      font-weight: 800;
      color: var(--orange);
      line-height: 0.75;
      margin-bottom: 12px;
      letter-spacing: -0.04em;
    }

    .brut-quote-text {
      font-size: clamp(15px, 1.4vw, 20px);
      font-weight: 700;
      color: var(--white);
      line-height: 1.5;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }

    .brut-quote-author {
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,0.07);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .brut-author-name {
      font-size: clamp(18px, 2vw, 26px);
      font-weight: 800;
      color: var(--white);
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .case-benefits { display: flex; flex-direction: column; gap: 10px; }

    .case-benefit {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      color: var(--gray);
      line-height: 1.5;
    }

    .case-check { color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

    /* ── STATS BRUTALISTAS 2×2 ── */
    .case-stats-brut {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }

    .brut-stat {
      padding: 24px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .brut-stat.brut-right {
      padding-left: 32px;
      border-left: 1px solid rgba(255,255,255,0.07);
    }

    .brut-stat:nth-last-child(-n+2) { border-bottom: none; }

    .brut-num {
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.04em;
      line-height: 1;
      display: block;
    }

    .brut-xl { font-size: clamp(64px, 7vw, 120px); }
    .brut-lg { font-size: clamp(48px, 5.5vw, 90px); }
    .brut-md { font-size: clamp(40px, 4.5vw, 72px); }

    .brut-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
    }

    @media (max-width: 900px) {
      .case-body {
        grid-template-columns: 1fr;
        padding: 48px 24px;
        gap: 40px;
      }
      .case-header { padding: 32px 0; }
      .case-header-inner { padding: 0 24px; }
      .case-logo { height: 90px; }
      .case-label { font-size: 10px; }
      .case-stats-brut { opacity: 1 !important; transform: none !important; }
      .brut-xl { font-size: clamp(52px, 13vw, 90px); }
      .brut-lg { font-size: clamp(38px, 9vw, 64px); }
      .brut-md { font-size: clamp(32px, 8vw, 56px); }
      .brut-stat.brut-right { padding-left: 20px; }
    }

    /* ── PRICING ────────────────────────────────────── */
    .pricing-section {
      padding: 120px 48px;
      background: var(--bg-base);
    }

    .pricing-section .section-title {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 16px;
      white-space: nowrap;
    }

    .pricing-intro {
      text-align: center;
      font-size: 16px;
      font-weight: 300;
      color: var(--gray);
      margin-bottom: 72px;
      line-height: 1.65;
    }

    .pricing-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: stretch;
    }

    .pricing-card {
      background: var(--bg-surface);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 36px 32px;
      position: relative;
      transition: border-color 220ms, box-shadow 220ms;
      display: flex;
      flex-direction: column;
    }

    .pricing-card:hover {
      border-color: rgba(255,255,255,0.18);
      box-shadow: 0 16px 56px rgba(0,0,0,0.5);
    }

    .pricing-card.featured {
      background: var(--bg-elevated);
      border-color: rgba(255,255,255,0.45);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 24px 64px rgba(0,0,0,0.6);
      transform: translateY(-8px);
    }

    .pricing-card.featured:hover {
      border-color: rgba(255,255,255,0.7);
    }

    .pricing-badge {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--white);
      color: var(--bg-base);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 4px 16px;
      border-radius: 20px;
      white-space: nowrap;
    }

    .pricing-plan-name {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gray);
      margin-bottom: 20px;
    }

    .pricing-card.featured .pricing-plan-name { color: var(--white); }

    .pricing-price {
      display: flex;
      align-items: flex-end;
      gap: 4px;
      margin-bottom: 6px;
      line-height: 1;
    }

    .pricing-currency {
      font-size: 18px;
      font-weight: 600;
      color: var(--gray);
      padding-bottom: 6px;
    }

    .pricing-amount {
      font-size: clamp(36px, 4vw, 48px);
      font-weight: 800;
      color: var(--white);
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;
    }

    .pricing-period {
      font-size: 14px;
      color: var(--gray);
      padding-bottom: 8px;
    }

    .pricing-impl {
      font-size: 12.5px;
      color: rgba(148,163,184,0.55);
      margin-bottom: 32px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .pricing-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 13px;
      margin-bottom: 32px;
      flex: 1;
    }

    .pricing-feature {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13.5px;
      color: var(--gray);
      line-height: 1.45;
    }

    .pf-check {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(34,197,94,0.12);
      border: 1px solid rgba(34,197,94,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .pf-check svg { display: block; }

    .pf-divider {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(148,163,184,0.35);
      padding: 8px 0 4px;
    }

    .btn-pricing {
      display: block;
      width: 100%;
      padding: 14px 20px;
      text-align: center;
      font-family: 'Manrope', sans-serif;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      border-radius: 8px;
      transition: transform 220ms cubic-bezier(0.22,1,0.36,1),
                  box-shadow 220ms cubic-bezier(0.22,1,0.36,1),
                  background 220ms;
      cursor: pointer;
      border: none;
    }

    .btn-pricing-outline {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.18);
      color: var(--white);
    }

    .btn-pricing-outline:hover {
      border-color: rgba(255,255,255,0.4);
      background: rgba(255,255,255,0.04);
      transform: translateY(-1px);
    }

    .btn-pricing-primary {
      background: var(--white);
      color: var(--bg-base);
    }

    .btn-pricing-primary:hover {
      box-shadow: 0 0 24px rgba(255,255,255,0.2);
      transform: translateY(-2px);
    }

    .pricing-note {
      text-align: center;
      font-size: 13px;
      color: rgba(148,163,184,0.45);
      margin-top: 40px;
    }

    @media (max-width: 900px) {
      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
      }
      /* Desabilita fade-up nos cards de planos em mobile */
      .pricing-card {
        opacity: 1 !important;
        transform: none !important;
        transition: border-color 220ms, box-shadow 220ms !important;
      }
      .pricing-card.featured { transform: none; }
    }

    /* ── MOBILE OVERRIDES (após CSS base) ─────────── */
    @media (max-width: 768px) {
      .pricing-card     { padding: 22px 16px; border-radius: 12px; }
      .pricing-amount   { font-size: 36px; }
      .pricing-features { gap: 9px; }
      .pricing-feature  { font-size: 12.5px; }
      .pf-check         { width: 14px; height: 14px; flex-shrink: 0; }
      .pricing-impl     { margin-bottom: 18px; padding-bottom: 16px; }
      .pricing-plan-name{ margin-bottom: 14px; }

      .case-section     { padding: 48px 16px; }
      .case-benefits    { gap: 8px; }
      .case-benefit     { font-size: 13px; }
      .case-stat        { padding: 16px 14px; border-radius: 10px; }
      .case-stat-value  { font-size: 22px; margin-bottom: 4px; }
      .case-stat-label  { font-size: 11px; }
    }

    /* ── WHATSAPP FLOAT ─────────────────────────────── */
    @media (max-width: 768px) {
      /* Textos longos não ficam sob o botão flutuante */
      .bento-text,
      .flow-step-desc,
      .testimonial-quote,
      .hero-sub { padding-right: 0; }

      /* Reduz o botão levemente no mobile */
      .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 18px;
        right: 16px;
      }
    }

    .whatsapp-float {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 999;
      width: 58px;
      height: 58px;
      background: #25d366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(37,211,102,0.45);
      transition: transform 220ms cubic-bezier(0.22,1,0.36,1),
                  box-shadow 220ms cubic-bezier(0.22,1,0.36,1);
      text-decoration: none;
    }

    .whatsapp-float:hover {
      transform: scale(1.1);
      box-shadow: 0 8px 32px rgba(37,211,102,0.6);
    }

    /* ── FORM STATES ────────────────────────────────── */
    .form-input.error { border-color: rgba(255,80,80,0.65) !important; }

    .btn-cta.success {
      background: var(--green) !important;
      color: var(--bg-base) !important;
      cursor: default;
    }

    /* ══ BRUTALIST OVERRIDES ══════════════════════════════════ */

    /* ── Backgrounds alternados ── */
    .problem-section  { background: #000; }
    .flow-section     { background: #000; }
    .showcase-section { background: var(--bg-base); }
    .features-section { background: #000; }
    .numbers-section  { background: #000; border-color: rgba(255,255,255,0.08); }
    .pricing-section  { background: var(--bg-base); }
    .cta-section      { background: #000; }
    footer.footer     { background: #000; border-top-color: rgba(255,255,255,0.08); }

    /* ── Trust bar ── */
    .trust-bar  { background: #000; }
    .trust-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--orange);
    }
    .trust-name {
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    /* ── Section titles ── */
    .section-title {
      text-transform: uppercase;
      letter-spacing: -0.03em;
      font-size: clamp(28px, 4.5vw, 64px);
      font-weight: 800;
      margin-bottom: 48px;
    }

    /* ── Problem section ── */
    .problem-headline {
      text-transform: uppercase;
      letter-spacing: -0.02em;
      font-size: clamp(16px, 2vw, 24px);
    }
    .verdict-fail, .verdict-pass { border-radius: 0; }

    /* ── Flow section ── */
    .flow-scene { border-radius: 0; }
    .flow-step-num {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.2em;
    }
    .flow-step-title {
      font-size: 16px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -0.02em;
    }

    /* ── Showcase ── */
    .mock-window      { border-radius: 0; box-shadow: none; border: 1px solid rgba(255,255,255,0.12); }
    .annot-card       { border-radius: 0; }
    .annot-card-label { letter-spacing: 0.1em; }

    /* ── Features/Bento ── */
    .bento-card {
      border-radius: 0;
      background: #000;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .bento-card:hover {
      transform: none;
      box-shadow: none;
      border-color: rgba(255,255,255,0.22);
    }
    .bento-title {
      font-size: 15px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -0.01em;
    }
    .bento-icon { border-radius: 0; }

    /* ── Numbers ── */
    .numbers-grid {
      max-width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .numbers-grid > div {
      padding: 48px 40px;
      border-right: 1px solid rgba(255,255,255,0.07);
    }
    .numbers-grid > div:last-child { border-right: none; }
    .number-value {
      letter-spacing: -0.04em;
      font-size: clamp(44px, 6vw, 80px);
    }
    .number-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
    }

    /* ── Pricing ── */
    .pricing-card         { border-radius: 0; background: #000; }
    .pricing-card.featured{
      background: #0a0a0a;
      border-color: rgba(255,255,255,0.55);
      transform: none;
      box-shadow: none;
    }
    .pricing-card:hover   { transform: none; box-shadow: none; }
    .pricing-badge        { border-radius: 0; }
    .btn-pricing-primary  { border-radius: 0; }
    .btn-pricing-outline  { border-radius: 0; }
    .pricing-plan-name    { letter-spacing: 0.15em; }
    .pricing-note         { letter-spacing: 0.05em; font-size: 11px; text-transform: uppercase; }

    /* ── CTA form ── */
    .cta-headline { text-transform: uppercase; letter-spacing: -0.03em; }
    .cta-form     { border-radius: 0; background: #000; border-color: rgba(255,255,255,0.12); }
    .form-input   { border-radius: 0; }
    .btn-cta      { border-radius: 0; letter-spacing: 0.05em; }

    /* ── Buttons globais ── */
    .btn-primary, .btn-secondary { border-radius: 0; }

    /* ── Footer ── */
    .footer-logo-name  { letter-spacing: 0.05em; text-transform: uppercase; }
    .footer-tagline    { letter-spacing: 0.08em; font-size: 11px; text-transform: uppercase; color: rgba(255,255,255,0.3); }
    .footer-nav a      { letter-spacing: 0.1em; font-size: 11px; text-transform: uppercase; }
    .footer-copy       { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.25); }

    @media (max-width: 768px) {
      .numbers-grid > div { padding: 32px 20px; }
    }

    /* CTA form — mais contraste */
    .cta-form   { border: 1px solid rgba(255,255,255,0.15); }
    .form-input {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.18);
      color: var(--white);
    }
    .form-input:focus { border-color: rgba(255,255,255,0.45); }
    .form-input::placeholder { color: rgba(255,255,255,0.35); }
    .btn-cta {
      background: var(--white);
      color: #000;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .btn-cta:hover { box-shadow: 0 0 32px rgba(255,255,255,0.2); }
    .form-disclaimer { letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }

    /* Números — cor branca garantida */
    .number-value { color: var(--white) !important; }

    /* ── FEATURES duas colunas ── */
    .features-section { padding: 0; }

    .features-layout {
      max-width: 1400px;
      margin: 0 auto;
      padding: 100px 80px;
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 80px;
      align-items: start;
    }

    .features-text {
      position: sticky;
      top: 128px;
    }

    .features-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 24px;
    }

    .features-title {
      font-size: clamp(26px, 3vw, 48px);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: var(--white);
    }

    .features-section .bento-grid {
      grid-template-columns: repeat(2, 1fr);
      max-width: 100%;
      gap: 12px;
    }

    .features-section .bento-card.wide { grid-column: span 2; }

    @media (max-width: 900px) {
      .features-layout {
        grid-template-columns: 1fr;
        padding: 60px 24px;
        gap: 40px;
      }
      .features-text { position: static; }
      .features-section .bento-grid { grid-template-columns: 1fr; }
      .features-section .bento-card.wide { grid-column: span 1; }
    }

    /* ── PROBLEM PIZZA SVG ANIMATIONS ──────────────────── */
    .pizza-anim-frame { line-height: 0; overflow: hidden; }
    .prob-pizza-svg   { width: 100%; display: block; }

    /* Circle scale-pop animations */
    .prob-cr1,.prob-cr2,.prob-cr3,
    .prob-cg1,.prob-cg2,.prob-cg3 {
      transform-box: fill-box;
      transform-origin: center center;
    }

    @keyframes probCR1 {
      0%,43%  { transform:scale(0);   opacity:0 }
      48%     { transform:scale(1.2); opacity:1 }
      52%,87% { transform:scale(1);   opacity:1 }
      93%,100%{ transform:scale(0);   opacity:0 }
    }
    @keyframes probCR2 {
      0%,53%  { transform:scale(0);   opacity:0 }
      58%     { transform:scale(1.2); opacity:1 }
      62%,87% { transform:scale(1);   opacity:1 }
      93%,100%{ transform:scale(0);   opacity:0 }
    }
    @keyframes probCR3 {
      0%,63%  { transform:scale(0);   opacity:0 }
      68%     { transform:scale(1.2); opacity:1 }
      72%,87% { transform:scale(1);   opacity:1 }
      93%,100%{ transform:scale(0);   opacity:0 }
    }
    @keyframes probLR1 { 0%,43%{opacity:0} 48%,87%{opacity:1} 93%,100%{opacity:0} }
    @keyframes probLR2 { 0%,53%{opacity:0} 58%,87%{opacity:1} 93%,100%{opacity:0} }
    @keyframes probLR3 { 0%,63%{opacity:0} 68%,87%{opacity:1} 93%,100%{opacity:0} }

    @keyframes probCG1 {
      0%,46%  { transform:scale(0);   opacity:0 }
      51%     { transform:scale(1.2); opacity:1 }
      55%,89% { transform:scale(1);   opacity:1 }
      95%,100%{ transform:scale(0);   opacity:0 }
    }
    @keyframes probCG2 {
      0%,56%  { transform:scale(0);   opacity:0 }
      61%     { transform:scale(1.2); opacity:1 }
      65%,89% { transform:scale(1);   opacity:1 }
      95%,100%{ transform:scale(0);   opacity:0 }
    }
    @keyframes probCG3 {
      0%,66%  { transform:scale(0);   opacity:0 }
      71%     { transform:scale(1.2); opacity:1 }
      75%,89% { transform:scale(1);   opacity:1 }
      95%,100%{ transform:scale(0);   opacity:0 }
    }
    @keyframes probLG1 { 0%,46%{opacity:0} 51%,89%{opacity:1} 95%,100%{opacity:0} }
    @keyframes probLG2 { 0%,56%{opacity:0} 61%,89%{opacity:1} 95%,100%{opacity:0} }
    @keyframes probLG3 { 0%,66%{opacity:0} 71%,89%{opacity:1} 95%,100%{opacity:0} }

    .prob-cr1 { animation: probCR1 5s linear infinite }
    .prob-cr2 { animation: probCR2 5s linear infinite }
    .prob-cr3 { animation: probCR3 5s linear infinite }
    .prob-lr1 { animation: probLR1 5s linear infinite }
    .prob-lr2 { animation: probLR2 5s linear infinite }
    .prob-lr3 { animation: probLR3 5s linear infinite }
    .prob-cg1 { animation: probCG1 5s linear infinite }
    .prob-cg2 { animation: probCG2 5s linear infinite }
    .prob-cg3 { animation: probCG3 5s linear infinite }
    .prob-lg1 { animation: probLG1 5s linear infinite }
    .prob-lg2 { animation: probLG2 5s linear infinite }
    .prob-lg3 { animation: probLG3 5s linear infinite }

    /* Pizza 3D — oculta no desktop, ativa só no mobile */
    .mob-pizza3d { display: none; }