<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://i.ytimg.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="preload" as="image" href="https://diretoaoproduto.com/wp-content/uploads/2026/03/LOGO-DIRETO-AO-PRODUTO-1.jpg" />
<link rel="preload" as="image" fetchpriority="high" href="https://i.ytimg.com/vi/EQtL6L7Dxd4/maxresdefault.jpg?v=20260510" />
<style>
  /* ===== ESCAPED WRAPPER FOR ELEMENTOR ===== */
  .dap-wrapper {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: hsl(220, 15%, 8%);
    color: hsl(0, 0%, 98%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
    width: 100%;
    min-height: 100vh;
    scroll-behavior: smooth;
  }

  /* Performance: lazy-render off-screen sections */
  .method,
  .why-for-you,
  .zero-barriers,
  .what-you-need,
  .why-results,
  .results,
  .authors,
  .faq-section,
  .footer-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
  }

  .dap-wrapper * {
    box-sizing: border-box;
  }

  .dap-wrapper :root {
    --bg: hsl(220, 15%, 8%);
    --fg: hsl(0, 0%, 98%);
    --card-bg: hsl(220, 15%, 12%);
    --muted: hsl(220, 10%, 60%);
    --green: #22c55e;
    --green-dark: #16a34a;
    --green-darker: #15803d;
    --green-400: #4ade80;
    --border: hsl(220, 15%, 20%);
    --radius: 0.75rem;
  }

  /* Redefine variables for scope if :root fails in shadow DOM or iframe */
  .dap-wrapper {
    --bg: hsl(220, 15%, 8%);
    --fg: hsl(0, 0%, 98%);
    --card-bg: hsl(220, 15%, 12%);
    --muted: hsl(220, 10%, 60%);
    --green: #22c55e;
    --green-dark: #16a34a;
    --green-darker: #15803d;
    --green-400: #4ade80;
    --border: hsl(220, 15%, 20%);
    --radius: 0.75rem;
  }

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

  .dap-wrapper a {
    text-decoration: none;
    color: inherit;
  }

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

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

  /* ===== UTILITIES ===== */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .container-lg {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .text-center {
    text-align: center;
  }

  .relative {
    position: relative;
  }

  .gradient-text {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .glass {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .glow-green {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
  }

  .section-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 18, 28, 0.95), var(--bg), rgba(15, 18, 28, 0.95));
    z-index: 0;
  }

  .section-content {
    position: relative;
    z-index: 10;
  }

  /* ===== ANIMATIONS ===== */
  .pulse-animation {
    animation: pulse-animation 2s ease-in-out infinite;
  }

  @keyframes pulse-animation {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    50% {
      transform: scale(1.05);
      box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }

    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
  }

  .pulse-animation-vip {
    animation: pulse-animation-vip 2s ease-in-out infinite;
  }

  @keyframes pulse-animation-vip {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7);
    }

    50% {
      transform: scale(1.05);
      box-shadow: 0 0 0 15px rgba(234, 179, 8, 0);
    }

    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
    }
  }

  /* Benefit card dropdown */
  .benefit-dropdown-card .benefit-inner {
    flex-direction: column;
    gap: 0;
  }

  .benefit-dropdown-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    gap: 1rem;
  }

  .benefit-dropdown-header .left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
  }

  .benefit-arrow {
    flex-shrink: 0;
    color: #9ca3af;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .benefit-dropdown-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    width: 100%;
  }

  .benefit-dropdown-body p {
    padding: 0.75rem 0 0 0;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .benefit-dropdown-card.open .benefit-arrow {
    transform: rotate(180deg);
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

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

  .fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
  }

  @keyframes bounce {

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

    50% {
      transform: translateY(-8px);
    }
  }

  .animate-bounce {
    animation: bounce 1.5s ease-in-out infinite;
  }

  @keyframes pulse-bg {

    0%,
    100% {
      opacity: 0.5;
    }

    50% {
      opacity: 1;
    }
  }

  .animate-pulse {
    animation: pulse-bg 3s ease-in-out infinite;
  }

  /* ===== HIGHLIGHT SWEEP ANIMATION ===== */
  .highlight-phrase {
    display: inline;
    position: relative;
    padding: 1px 5px;
    margin: 0;
    border-radius: 20px;
    border: 1.5px solid transparent;
    transition: border-color 0.5s ease-out,
      background 0.5s ease-out,
      color 0.5s ease-out;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .highlight-phrase.active {
    border-color: rgba(34, 197, 94, 0.7);
    background: rgba(34, 197, 94, 0.08);
    color: #fff;
    animation: highlight-pulse 2s ease-in-out infinite;
  }

  @keyframes highlight-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }

    50% {
      box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
  }

  /* Card hover */
  .card-hover {
    transition: all 0.3s ease;
  }

  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  /* Shine effect */
  .shine {
    position: relative;
    overflow: hidden;
  }

  .shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: 5;
  }

  .shine:hover::before {
    left: 100%;
  }

  /* ===== SCROLLBAR ===== */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #0f172a;
  }

  ::-webkit-scrollbar-thumb {
    background: #22c55e;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #16a34a;
  }

  /* ===== ICON ===== */
  .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ===== HEADER ===== */
  .header {
    background: #fff;
    padding: 1.5rem 1rem;
  }

  .header .inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .header img {
    height: 4.6rem;
    object-fit: contain;
  }

  /* ===== HERO ===== */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    overflow: hidden;
  }

  .hero .bg-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--bg), var(--bg), rgba(15, 18, 28, 0.95));
  }

  .hero .bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    will-change: opacity;
  }

  .hero .blob1 {
    top: 25%;
    left: 25%;
    width: 24rem;
    height: 24rem;
    background: rgba(34, 197, 94, 0.1);
  }

  .hero .blob2 {
    bottom: 25%;
    right: 25%;
    width: 20rem;
    height: 20rem;
    background: rgba(22, 163, 74, 0.05);
  }

  .hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
  }

  .hero h1 {
    font-size: clamp(1.875rem, 5vw, 3.75rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 1rem;
  }

  .hero .subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
  }

  .hero .text-green {
    color: var(--green-400);
  }

  .hero .text-green-bold {
    color: var(--green-400);
    font-weight: 600;
  }

  /* Video */
  .video-label {
    color: var(--green-400);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .video-label .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--green-400);
  }

  .video-container {
    position: relative;
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }

  @supports not (aspect-ratio: 16 / 9) {
    .video-container {
      padding-bottom: 56.25%;
      height: 0;
    }
  }

  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  @keyframes video-pulse-red {
    0% {
      box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.65);
      border-color: rgba(249, 115, 22, 1);
    }

    50% {
      box-shadow: 0 0 0 20px rgba(249, 115, 22, 0);
      border-color: rgba(249, 115, 22, 0.45);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
      border-color: rgba(249, 115, 22, 1);
    }
  }

  .video-attention {
    animation: video-pulse-red 2s ease-in-out infinite !important;
    border: 3px solid rgba(249, 115, 22, 1);
  }

  /* CTA Button */
  .btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--green);
    color: #fff !important;
    font-weight: 700;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    padding: 1rem 2rem;
    border-radius: 2rem;
    transition: background-color 0.3s;
    cursor: pointer;
    border: none;
    text-align: center;
    justify-content: center;
    line-height: 1.2;
  }

  @media (max-width: 640px) {
    .btn-cta {
      width: 100%;
      padding: 1rem;
      border-radius: 1rem;
    }
  }

  .btn-cta:hover {
    background: var(--green-dark);
  }

  .btn-cta .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .btn-cta-lg {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    padding: 1.25rem 2.5rem;
  }

  .btn-cta-lg .icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Scroll indicator */
  .scroll-indicator {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    color: var(--green-400);
  }

  .scroll-indicator .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* ===== METHOD SECTION ===== */
  .method {
    position: relative;
    padding: 5rem 1rem;
  }

  .section-title {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
  }

  .section-subtitle {
    font-size: 1.125rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
  }

  .benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  @media (min-width: 768px) {
    .benefits-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .benefits-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .benefit-card {
    border-radius: 1rem;
    padding: 1.5rem;
  }

  .benefit-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .benefit-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .benefit-icon .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--green-400);
  }

  .benefit-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
  }

  .benefit-card p {
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.6;
  }

  .highlight-box {
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(34, 197, 94, 0.3);
  }

  .highlight-box p {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    color: #fff;
    font-weight: 600;
  }

  /* ===== METHOD LIGHT THEME ===== */
  .method-light {
    background: #ffffff;
    color: #374151;
  }

  .method-light .section-bg {
    display: none;
  }

  .method-light .section-title {
    color: #111827;
  }

  .method-light .gradient-text {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 50%, #166534 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .method-light .section-subtitle {
    color: #4b5563;
  }

  .method-light .section-subtitle span {
    color: var(--green-darker) !important;
  }

  .method-light .benefit-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
  }

  .method-light .benefit-card:hover {
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.1);
    transform: translateY(-3px);
  }

  .method-light .benefit-card h3 {
    color: #111827;
  }

  .method-light .benefit-card p {
    color: #6b7280;
  }

  .method-light .benefit-icon {
    background: rgba(34, 197, 94, 0.12);
  }

  .method-light .benefit-icon .icon {
    color: #16a34a;
  }

  .method-light .benefit-arrow {
    color: #9ca3af;
  }

  .method-light .benefit-dropdown-body p {
    border-top-color: #e5e7eb;
  }

  /* ===== RESULTS ===== */
  .results {
    position: relative;
    padding: 5rem 1rem;
  }

  .products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  @media (min-width: 768px) {
    .products-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .products-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .product-card {
    border-radius: 1rem;
    overflow: hidden;
  }

  .product-image {
    position: relative;
    height: 12rem;
    overflow: hidden;
  }

  .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }

  .product-card:hover .product-image img {
    transform: scale(1.1);
  }

  .product-image .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 18, 28, 0.9), transparent);
  }

  .product-image .product-name {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
  }

  .product-image h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
  }

  .product-image .product-subtitle {
    font-size: 0.875rem;
    color: var(--green-400);
  }

  .product-details {
    padding: 1.25rem;
  }

  .product-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--green-400);
    margin-bottom: 1rem;
  }

  .product-time .icon {
    width: 1rem;
    height: 1rem;
  }

  .platforms-label {
    font-size: 0.875rem;
    color: #9ca3af;
    font-weight: 800;
    margin-bottom: 0.5rem;
  }

  .platform-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }

  .platform-row .name {
    color: #9ca3af;
  }

  .platform-row .value {
    color: #d1d5db;
  }

  .product-total {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .product-total .label {
    font-size: 0.875rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .product-total .label .icon {
    width: 1rem;
    height: 1rem;
    color: var(--green-400);
  }

  .product-total .amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--green-400);
  }

  /* Bar Chart */
  .bar-chart-container {
    height: 60px;
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 0 0 2px 0;
    border-bottom: 1px solid rgba(34, 197, 94, 0.15);
  }

  .bar-item {
    flex: 1;
    border-radius: 3px 3px 0 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1);
    min-height: 4px;
  }

  .chart-animate .bar-item {
    transform: scaleY(1);
  }

  .info-box {
    border-radius: 1rem;
    padding: 2rem;
  }

  .info-box p {
    color: #d1d5db;
  }

  .section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
    margin: 1.5rem 0;
  }

  /* ===== CTA SECTION ===== */
  .cta-section {
    position: relative;
    padding: 5rem 1rem;
  }

  .cta-section .bg-blob-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    filter: blur(48px);
  }

  .cta-card {
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(34, 197, 94, 0.3);
  }

  @media (min-width: 768px) {
    .cta-card {
      padding: 3rem;
    }
  }

  .cta-card h2 {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
  }

  .cta-card>p {
    font-size: 1.125rem;
    color: #d1d5db;
    max-width: 42rem;
    margin: 0 auto 2rem;
  }

  .support-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 1.5rem;
  }

  @media (min-width: 640px) {
    .support-info {
      flex-direction: row;
      justify-content: center;
    }
  }

  .support-info span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .support-info .icon {
    width: 1rem;
    height: 1rem;
    color: var(--green-400);
  }

  .support-info .dot {
    display: none;
    color: #4b5563;
  }

  @media (min-width: 640px) {
    .support-info .dot {
      display: inline;
    }
  }

  .trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
  }

  @media (min-width: 768px) {
    .trust-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .trust-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
  }

  .trust-card .number {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--green-400);
    margin-bottom: 0.5rem;
  }

  .trust-card p {
    font-size: 0.875rem;
    color: #9ca3af;
  }

  /* ===== FAQ ===== */
  .faq-section {
    position: relative;
    padding: 5rem 1rem;
    background: #ffffff;
    color: #111827;
  }

  .faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
  }

  .faq-item {
    border-bottom: 1px solid #e5e7eb;
  }

  .faq-item:last-child {
    border-bottom: none;
  }

  .faq-question {
    width: 100%;
    text-align: left;
    padding: 1.25rem 0;
    background: transparent !important;
    border: none !important;
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.2s;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .faq-question:hover,
  .faq-question:focus,
  .faq-question:active {
    color: #111827 !important;
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .faq-icon {
    flex-shrink: 0;
    color: #374151 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }

  .faq-question:hover .faq-icon,
  .faq-question:focus .faq-icon {
    color: #374151 !important;
  }

  .faq-item.active .faq-icon {
    transform: rotate(90deg);
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }

  .faq-answer p {
    padding: 0 0 1.25rem 2.25rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
  }

  /* ===== AUTHORS ===== */
  .authors {
    position: relative;
    padding: 5rem 1rem;
  }

  .authors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }

  @media (min-width: 1024px) {
    .authors-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .authors-image-wrap {
    position: relative;
  }

  .authors-image-frame {
    border-radius: 1rem;
    overflow: hidden;
    padding: 0.5rem;
  }

  .authors-image-frame img {
    width: 100%;
    border-radius: 0.75rem;
    object-fit: cover;
  }

  .authors-image-frame .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 18, 28, 0.6), transparent);
  }

  .experience-badge {
    position: absolute;
    bottom: -1rem;
    right: 0;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(34, 197, 94, 0.5);
    background: hsl(220, 15%, 10%);
  }

  @media (min-width: 480px) {
    .experience-badge {
      right: -1rem;
    }
  }

  .experience-badge .num {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--green-400);
  }

  .experience-badge .label {
    font-size: 0.75rem;
    color: #9ca3af;
  }

  .authors-info h3 {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
  }

  .authors-info>p {
    color: #d1d5db;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  .highlight-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .highlight-item {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .highlight-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .highlight-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--green-400);
  }

  .highlight-item h4 {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .highlight-item p {
    font-size: 0.875rem;
    color: #9ca3af;
  }

  .quote-box {
    border-radius: 0.75rem;
    padding: 1.5rem;
    border-left: 4px solid var(--green);
  }

  .quote-box p {
    color: #d1d5db;
    font-style: italic;
  }

  /* ===== PRICING ====== */
  .pricing-section {
    position: relative;
    padding: 5rem 1rem;
    background: #0f121c;
    /* Background combinando com a página */
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 3rem auto 0;
  }

  @media (min-width: 768px) {
    .pricing-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .pricing-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
  }

  


  .pricing-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 20px 50px rgba(249, 115, 22, 0.18);
  }
  .pricing-card.features-card:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
  }
  .pricing-card.investment-card {
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 20px 50px rgba(249, 115, 22, 0.18);
  }

  .pricing-card.vip {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.1) 0%, rgba(15, 23, 42, 0.4) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.1);
  }

  .pricing-card.vip:hover {
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.8);
  }

  .pricing-badge {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #f97316;
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
  }

  .pricing-badge.vip-badge {
    background: #eab308;
    color: #000;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4);
  }

  .pricing-header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .pricing-header h3 {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .pricing-header h3 .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .pricing-header p {
    color: #9ca3af;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .pricing-features {
    flex-grow: 1;
    margin-bottom: 2.5rem;
  }

  .pricing-features p {
    color: #fff;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.875rem;
  }

  .pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #d1d5db;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .pricing-features li .icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: #fb923c;
    margin-top: 0.125rem;
  }

  .pricing-features li .icon-plus {
    color: #eab308;
  }

  .pricing-price {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .pricing-price .amount {
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.5rem;
  }

  .pricing-price .subtext {
    color: #9ca3af;
    font-size: 0.875rem;
  }

  .pricing-card .btn-cta {
    width: 100%;
    font-size: 1rem;
    padding: 1rem;
  }

  .pricing-card .btn-cta.pricing-cta {
    background: #f97316;
    border-color: #f97316;
    padding: 1.15rem 1.35rem;
  }

  .pricing-card .btn-cta.pricing-cta:hover {
    background: #ea580c;
  }

  .pricing-card .btn-cta.pricing-cta.pulse-animation {
    animation: pulse-animation-orange 2s ease-in-out infinite;
  }

  @keyframes pulse-animation-orange {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.75);
    }

    50% {
      transform: scale(1.05);
      box-shadow: 0 0 0 15px rgba(249, 115, 22, 0);
    }

    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
    }
  }

  .guarantee-box {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(21, 128, 61, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    max-width: 1000px;
    margin: 4rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
  }

  @media (min-width: 768px) {
    .guarantee-box {
      flex-direction: row;
      text-align: left;
      padding: 3rem;
    }
  }

  .guarantee-icon {
    flex-shrink: 0;
    width: 6rem;
    height: 6rem;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .guarantee-icon .icon {
    width: 3rem;
    height: 3rem;
    color: var(--green-400);
  }

  .guarantee-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
  }

  .guarantee-content p {
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .guarantee-content p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: #fff;
  }

  /* ===== FOOTER ===== */
  .footer-section {
    position: relative;
    padding: 4rem 1rem;
    background: #fff;
  }

  .urgency-banner {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(185, 28, 28, 0.04) 100%);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
  }

  .urgency-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .urgency-icon {
    flex-shrink: 0;
  }

  .urgency-icon .icon {
    width: 2rem;
    height: 2rem;
    color: #ef4444;
  }

  .urgency-banner h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
  }

  .urgency-banner p {
    color: #374151;
  }

  .urgency-highlight {
    color: #dc2626;
    font-weight: 600;
  }

  .final-cta {
    margin-bottom: 3rem;
  }

  .final-cta .time-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
  }

  .final-cta .time-note .icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .footer-divider {
    height: 1px;
    background: #e5e7eb;
    margin-bottom: 2rem;
  }

  .footer-bottom img {
    height: 3rem;
    object-fit: contain;
    margin: 0 auto 1.5rem;
  }

  .footer-bottom .copy {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
  }

  .footer-bottom .disclaimer {
    font-size: 0.75rem;
    color: #9ca3af;
    max-width: 42rem;
    margin: 0 auto;
  }

  /* ===== RESPONSIVE ===== */
  @media (min-width: 768px) {
    .header img {
      height: 5.75rem;
    }
  }

  /* ===== MOBILE PADDING PADRONIZADO ===== */
  @media (max-width: 767px) {

    .dap-wrapper .container,
    .dap-wrapper .container-lg {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    .hero {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    .method,
    .results,
    .cta-section,
    .authors,
    .footer-section,
    .why-results,
    .zero-barriers,
    .faq-section,
    .what-you-need,
    .pricing-section {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    /* FAQ: zerar padding do container interno para não duplicar */
    .faq-section>.container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .footer-section>div {
      padding-left: 0;
      padding-right: 0;
    }

    .cta-section>.section-content {
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* ===== ZERO BARREIRAS ===== */
  .zero-barriers {
    position: relative;
    padding: 5rem 1rem;
  }

  .zero-barriers-content {
    max-width: 100%;
    margin: 0 auto;
  }

  .zb-subtitle {
    font-size: 1.25rem;
    color: var(--green-400);
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
  }

  .zb-text {
    color: #d1d5db;
    line-height: 1.75;
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
  }

  .zb-text.centered {
    text-align: center;
  }

  .zb-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 3rem 0;
  }

  @media (min-width: 768px) {
    .zb-cards-grid {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
  }

  /* ===== WHAT YOU NEED (3 STEPS) ===== */
  .what-you-need {
    position: relative;
    padding: 5rem 1rem;
  }

  .steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
  }

  @media (min-width: 768px) {
    .steps-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ===== POR QUE RESULTADOS ===== */
  .why-results {
    position: relative;
    padding: 5rem 1rem;
    background: #ffffff;
    color: #374151;
    /* Letras cinza escuro */
  }

  /* Zera o bg-grad padrão do wrapper nesta section */
  .why-results .section-bg {
    display: none;
  }

  .why-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }

  @media (min-width: 992px) {
    .why-results-grid {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
  }

  .why-text h2 {
    color: #111827;
    margin-bottom: 2rem;
    line-height: 1.2;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
  }

  .why-text p {
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
  }

  .why-text p strong {
    color: #111827;
  }

  .why-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
  }

  .why-gallery h3 {
    text-align: center;
    color: #111827;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
  }

  .why-gallery img {
    border-radius: 1rem;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .why-gallery img:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  }

  /* ===== IMAGE MODAL (Lightbox) ===== */
  .image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .image-modal.show {
    display: flex;
    animation: fadeInModal 0.3s forwards;
  }

  @keyframes fadeInModal {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .image-modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 0.5rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    object-fit: contain;
    transform: scale(0.9);
    transition: transform 0.3s ease;
  }

  .image-modal.show .image-modal-content {
    transform: scale(1);
  }

  .image-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    color: #f1f1f1;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10000;
  }

  .image-modal-close:hover,
  .image-modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }

  .step-card {
    border-radius: 1rem;
    overflow: visible;
    position: relative;
    margin-top: 1.5rem;
    height: 100%;
  }

  .step-card-inner {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  }

  .step-img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    border-radius: 1rem 1rem 0 0;
  }

  .step-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .step-card:hover .step-img-wrap img {
    transform: scale(1.05);
  }

  /* NUMERAÇÃO (Badges Verdes) */
  .step-number {
    position: absolute;
    top: -1.625rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green);
    color: #fff;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
  }

  .step-info {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .step-info h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green-darker);
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }

  .step-info p {
    color: #374151;
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 800;
  }

  .zb-card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .zb-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 20px 50px rgba(249, 115, 22, 0.18);
  }

  .zb-card img {
    width: 100%;
    display: block;
    object-fit: cover;
  }

  /* zero-barriers mobile padding handled in unified block above */

  /* ===== MARQUEE LOGOS ===== */
  .logo-marquee-wrapper {
    position: relative;
    padding: 3rem 1rem;
    z-index: 5;
  }

  .logo-marquee-section {
    background: #ffffff;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 0;
    overflow: hidden;
    position: relative;
  }

  .logo-marquee-section::before,
  .logo-marquee-section::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }

  .logo-marquee-section::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
  }

  .logo-marquee-section::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
  }

  .marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScrollLeftToRight 20s linear infinite;
    align-items: center;
  }

  .marquee-track img {
    height: 72px;
    object-fit: contain;
    margin: 0 40px;
  }

  @keyframes marqueeScrollLeftToRight {
    0% {
      transform: translateX(-50%);
    }

    100% {
      transform: translateX(0%);
    }
  }

  @media (max-width: 767px) {
    .logo-marquee-wrapper {
      padding: 1.5rem 10px;
    }

    .logo-marquee-section {
      padding: 1.5rem 0;
    }

    .marquee-track img {
      height: 48px;
      margin: 0 20px;
    }

    .logo-marquee-section::before,
    .logo-marquee-section::after {
      width: 40px;
    }
  }

  /* ===== BIO DROPDOWN ===== */
  .bio-dropdown {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .bio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 2px solid rgba(34, 197, 94, 0.5);
    color: var(--green-400);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
  }

  .bio-toggle:hover {
    background: rgba(34, 197, 94, 0.08);
    border-color: var(--green-400);
  }

  .bio-toggle-icon {
    display: flex;
    align-items: center;
    transition: transform 0.35s ease;
  }

  .bio-toggle-icon.open {
    transform: rotate(180deg);
  }

  .bio-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bio-content {
    padding: 1.5rem 0 0.5rem;
  }

  .bio-content p {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 0.85rem;
  }

  .bio-content strong {
    color: #e5e7eb;
    font-weight: 700;
  }

  .bio-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.3), transparent);
    margin: 1rem 0;
  }

  /* ===== RESPONSIVIDADE MOBILE GLOBAL ===== */

  /* Prevent any horizontal overflow across the whole page */
  .dap-wrapper {
    overflow-x: hidden;
  }

  /* Inline-styled sections: white background sections need mobile padding */
  @media (max-width: 767px) {

    /* Seção "Diferença no Orçamento" */
    .orcamento-section {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }

    .orcamento-section>div {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Seção "Suporte WhatsApp" */
    .suporte-section {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }

    .suporte-section>div {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Ajuste da seção orcamento interna */
    .orcamento-grid {
      gap: 2rem !important;
    }

    /* Seção why-results: ensure container has padding */
    .why-results .section-content {
      padding-left: 0;
      padding-right: 0;
    }

    /* Remove overflow from benefit section inline markup */
    .benefits-grid[style] {
      margin: 0 !important;
    }

    /* Fixing step cards on mobile */
    .step-card-inner {
      flex-direction: column;
    }

    /* Section titles should wrap naturally */
    .section-title {
      word-break: break-word;
      overflow-wrap: break-word;
    }

    /* Why-text heading wrap */
    .why-text h2 {
      word-break: break-word;
      overflow-wrap: break-word;
    }

    /* Attention block in FAQ: reduce padding on mobile */
    .attention-block {
      padding: 1.25rem 1rem !important;
      margin-bottom: 1.5rem !important;
    }

    /* FAQ question text smaller on mobile */
    .faq-question {
      font-size: 0.95rem !important;
      padding: 1rem 0 !important;
    }

    /* FAQ answer padding */
    .faq-answer p {
      padding-left: 1.75rem !important;
    }

    /* Pricing section subtitle spacing */
    .pricing-section .section-subtitle {
      padding: 0 0.5rem;
    }

    /* Bio toggle should not overflow */
    .bio-toggle {
      width: 100%;
      justify-content: center;
    }

    /* Quote box text wraps */
    .quote-box p {
      word-break: break-word;
      overflow-wrap: break-word;
    }

    /* Guarantee box internal padding */
    .guarantee-box {
      padding: 2rem 1.25rem !important;
      margin: 2rem 0 0 !important;
    }

    /* Global overflow protection for all text elements on mobile */
    .dap-wrapper p,
    .dap-wrapper h1,
    .dap-wrapper h2,
    .dap-wrapper h3,
    .dap-wrapper h4,
    .dap-wrapper span,
    .dap-wrapper a {
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    /* Ensure all children respect container width */
    .dap-wrapper * {
      max-width: 100%;
    }

    /* Attention block texts mobile */
    .attention-block p {
      font-size: 0.9375rem !important;
    }

    /* FAQ section title mobile */
    .faq-section .section-title {
      font-size: 1.5rem !important;
    }

    /* WhatsApp CTA button in FAQ - ensure it doesn't overflow */
    .faq-section .btn-cta {
      font-size: 0.85rem !important;
      padding: 0.875rem 1rem !important;
    }

    /* FAQ text-center margin */
    .faq-section .text-center {
      margin-bottom: 2rem !important;
    }
  }

  /* ===== STEP CARDS (3 passos) ===== */
  @media (max-width: 767px) {
    .steps-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Logo marquee: ensure no overflow */
  .logo-marquee-section {
    overflow: hidden;
  }
  /* ===== REDESIGN LAYER ===== */
  .dap-wrapper {
    --accent-orange: #fb923c;
    --accent-orange-deep: #f97316;
    --surface-dark: rgba(12, 17, 27, 0.78);
    --surface-dark-strong: rgba(10, 14, 23, 0.92);
    position: relative;
    background:
      radial-gradient(circle at 12% 0%, rgba(34, 197, 94, 0.18), transparent 26%),
      radial-gradient(circle at 88% 10%, rgba(249, 115, 22, 0.16), transparent 22%),
      linear-gradient(180deg, #081019 0%, #0d1320 28%, #0b111a 100%);
  }

  .dap-wrapper::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.38;
    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: 34px 34px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 82%);
  }

  .section-content,
  .header,
  .hero,
  .method,
  .why-for-you,
  .zero-barriers,
  .what-you-need,
  .why-results,
  .results,
  .pricing-section,
  .authors,
  .faq-section,
  .footer-section {
    position: relative;
    z-index: 1;
  }

  .section-title,
  .hero h1,
  .pricing-card h3,
  .cta-card h2 {
    letter-spacing: -0.04em;
    text-wrap: balance;
  }

  .section-subtitle,
  .hero .subtitle,
  .cta-card>p,
  .guarantee-content p,
  .faq-answer p {
    text-wrap: pretty;
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 1rem 1rem 0.85rem;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: none;
  }

  .header .inner a {
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: #ffffff;
    border: none;
    box-shadow: none;
  }

  .hero {
    min-height: auto;
    padding: clamp(3rem, 9vw, 6rem) 1rem 4.5rem;
  }

  .hero .bg-grad {
    background:
      radial-gradient(circle at 50% 10%, rgba(34, 197, 94, 0.2), transparent 28%),
      radial-gradient(circle at 85% 22%, rgba(249, 115, 22, 0.15), transparent 20%),
      linear-gradient(180deg, rgba(7, 12, 19, 0.96), rgba(10, 16, 26, 0.9) 48%, rgba(7, 12, 19, 1));
  }

  .hero .bg-blob {
    animation: hero-float 14s ease-in-out infinite;
  }

  .hero .blob2 {
    animation-delay: -5s;
  }

  @keyframes hero-float {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
      transform: translate3d(0, -18px, 0) scale(1.06);
    }
  }

  .hero-content {
    max-width: 1100px;
  }

  .hero h1 {
    max-width: 980px;
    margin: 0 auto 1.1rem;
    line-height: 0.98;
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.32);
  }

  .hero .subtitle {
    max-width: 880px;
    padding: 1.2rem 1.35rem;
    border-radius: 1.4rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .video-label {
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .video-container {
    border-radius: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transform: translateY(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  .video-container:hover {
    transform: translateY(-4px);
    box-shadow:
      0 36px 90px rgba(0, 0, 0, 0.48),
      0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  }

  .why-results-cta-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

  .pricing-card.investment-card h3 {
    color: #ffffff !important;
  }

  .installment-line {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }

  .installment-times {
    font-size: 1.1rem;
    font-weight: 700;
    color: #cbd5e1;
    line-height: 1.1;
    margin-bottom: 0.45rem;
  }

  .installment-value {
    font-size: clamp(2.85rem, 6vw, 3.7rem) !important;
    font-weight: 600 !important;
    color: #ffffff;
    line-height: 0.95;
    letter-spacing: -0.06em;
    margin-bottom: 0;
  }

  .pricing-price .total-price-note {
    display: block;
    margin-top: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: #e5e7eb;
    letter-spacing: -0.03em;
  }

  .hero-offer-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
  }

  .hero-offer-inline .old-price {
    font-size: 1.05rem;
    color: #cbd5e1;
    text-decoration: line-through;
    opacity: 0.92;
  }

  .hero-offer-inline .new-price {
    font-size: clamp(2.1rem, 7vw, 2.8rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .purchase-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.95rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    color: #22c55e;
    font-size: 1rem;
    font-weight: 600;
  }

  .purchase-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .purchase-trust svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .purchase-trust .divider {
    width: 1px;
    height: 1.35rem;
    background: rgba(255, 255, 255, 0.18);
  }

  #oferta {
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .footer-section {
    background: linear-gradient(180deg, #f5f6f7 0%, #eef1f3 100%);
  }

  .final-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .btn-cta {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    box-shadow: 0 18px 40px rgba(34, 197, 94, 0.22);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
  }

  .btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 52px rgba(34, 197, 94, 0.24);
  }

  .btn-cta::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 50%);
    pointer-events: none;
  }

  .share-page-cta {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 40px rgba(12, 28, 20, 0.18) !important;
  }

  .share-page-cta:hover {
    background: #f8fafc !important;
    color: #111827 !important;
  }

  .share-page-cta .icon,
  .share-page-cta .share-label {
    position: relative;
    z-index: 1;
    color: #1f2937 !important;
  }

  .share-page-cta .icon {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .share-page-cta .icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .method,
  .why-for-you,
  .results,
  .pricing-section,
  .authors,
  .faq-section {
    padding-top: clamp(4rem, 8vw, 6rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
  }

  .benefit-card,
  .product-card,
  .pricing-card,
  .trust-card,
  .quote-box,
  .highlight-item,
  .info-box,
  .guarantee-box,
  .cta-card {
    border-radius: 1.5rem;
  }

  .benefit-card,
  .product-card,
  .pricing-card,
  .trust-card,
  .info-box,
  .highlight-item {
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 60px rgba(3, 7, 18, 0.22);
  }

  .card-hover:hover {
    transform: translateY(-8px);
  }

  .method-light {
    background:
      radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #f5f8f6 100%);
  }

  .method-light .benefit-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.98));
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  }

  .method-light .benefit-card:hover {
    border-color: rgba(34, 197, 94, 0.28);
    box-shadow: 0 26px 44px rgba(34, 197, 94, 0.08);
  }

  .benefit-icon,
  .highlight-icon {
    box-shadow: 0 10px 28px rgba(34, 197, 94, 0.16);
  }

  .product-card {
    background: linear-gradient(180deg, rgba(14, 21, 32, 0.92), rgba(10, 16, 25, 0.98));
  }

  .product-image {
    height: 13rem;
  }

  .product-details {
    padding: 1.4rem 1.3rem 1.5rem;
  }

  .pricing-section {
    background:
      radial-gradient(circle at top center, rgba(249, 115, 22, 0.12), transparent 26%),
      linear-gradient(180deg, rgba(8, 12, 18, 0.98), rgba(11, 16, 25, 1));
  }

  .pricing-grid {
    gap: 1.5rem;
    align-items: stretch;
  }

  .pricing-card {
    background: linear-gradient(180deg, rgba(16, 24, 37, 0.88), rgba(10, 15, 24, 0.96));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .pricing-card.features-card {
    background: linear-gradient(180deg, rgba(16, 24, 37, 0.72), rgba(10, 15, 24, 0.9));
  }

  .pricing-card.investment-card {
    background:
      radial-gradient(circle at top center, rgba(249, 115, 22, 0.11), transparent 38%),
      linear-gradient(180deg, rgba(16, 24, 37, 0.94), rgba(9, 14, 23, 1));
  }

  .pricing-header,
  .pricing-price,
  .pricing-features {
    position: relative;
    z-index: 1;
  }

  .pricing-features ul {
    gap: 0.9rem;
  }

  .pricing-features li {
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
  }

  .pricing-price {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  .pricing-price .amount {
    font-size: clamp(2.75rem, 5vw, 3.4rem);
    letter-spacing: -0.05em;
  }

  .pricing-card .btn-cta.pricing-cta {
    box-shadow: 0 18px 42px rgba(249, 115, 22, 0.28);
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
  }

  .guarantee-box {
    background:
      radial-gradient(circle at top left, rgba(34, 197, 94, 0.14), transparent 35%),
      linear-gradient(135deg, rgba(14, 24, 32, 0.94), rgba(10, 16, 24, 0.96));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.26);
  }

  .authors {
    background:
      radial-gradient(circle at 15% 10%, rgba(34, 197, 94, 0.12), transparent 28%),
      linear-gradient(180deg, rgba(9, 14, 21, 0.98), rgba(8, 12, 18, 1));
  }

  .authors-image-frame {
    border-radius: 1.7rem;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
  }

  .experience-badge {
    border-radius: 1.1rem;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  }

  .highlight-item {
    background: rgba(255, 255, 255, 0.04);
    padding: 1rem;
  }

  .faq-section {
    background:
      radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 20%),
      linear-gradient(180deg, #ffffff 0%, #f4f7f5 100%);
  }

  .faq-accordion {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 1.5rem;
    padding: 0 1.5rem;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.08);
    border: none;
  }

  .faq-question {
    padding: 1.35rem 0;
  }

  .faq-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
  }

  .footer-section {
    background: linear-gradient(180deg, #f5f6f7 0%, #eef1f3 100%);
  }

  .final-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  #planos {
    scroll-margin-top: 20px;
  }

  .faq-section,
  .authors,
  .results,
  .method {
    scroll-margin-top: 96px;
  }

  @media (max-width: 991px) {
    .hero {
      padding-top: 2.6rem;
    }

    .hero .subtitle {
      border-radius: 1.25rem;
    }

    .authors-image-frame {
      max-width: 540px;
      margin: 0 auto;
    }
  }

  @media (max-width: 767px) {
    .header {
      padding: 0.75rem 0.75rem 0.7rem;
    }

    .header .inner a {
      width: 100%;
      justify-content: center;
      display: flex;
    }

    .hero {
      padding: 2rem 0.85rem 3rem;
    }

    .hero h1 {
      line-height: 1.02;
      margin-bottom: 0.9rem;
    }

    .hero .subtitle {
      padding: 1rem 0.95rem;
      border-radius: 1.15rem;
      font-size: 0.98rem;
      line-height: 1.55;
    }

    .video-container {
      border-radius: 1.2rem;
    }

    .btn-cta {
      min-height: 58px;
      width: 100%;
      border-radius: 1.1rem;
    }

    .method,
    .why-for-you,
    .results,
    .pricing-section,
    .authors,
    .faq-section,
    .footer-section {
      padding-top: 3.2rem;
      padding-bottom: 3.2rem;
    }

    .section-title {
      line-height: 1.06;
    }

    .benefit-card,
    .product-card,
    .pricing-card,
    .quote-box,
    .guarantee-box,
    .info-box,
    .highlight-item {
      border-radius: 1.2rem;
    }

    .benefit-card,
    .pricing-card {
      padding: 1.25rem 1rem;
    }

    .pricing-grid {
      gap: 1rem;
      margin-top: 2rem;
    }

    .pricing-card.investment-card {
      order: -1;
    }

    .pricing-features li {
      padding: 0.75rem 0.8rem;
      gap: 0.65rem;
    }

    .pricing-price .amount {
      font-size: 2.85rem;
    }

    .guarantee-box {
      gap: 1.25rem;
    }

    .faq-accordion {
      padding: 0 1rem;
      border-radius: 1.2rem;
    }

    .faq-question {
      gap: 0.65rem;
      font-size: 1rem;
      line-height: 1.35;
    }

    .faq-icon {
      width: 1.8rem;
      height: 1.8rem;
    }

    .final-cta {
      padding: 0;
      border-radius: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero .bg-blob,
    .btn-cta,
    .video-container,
    .card-hover,
    .pulse-animation,
    .pulse-animation-vip {
      animation: none !important;
      transition: none !important;
    }

  }

  @media (max-width: 767px) {
    .fade-in {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .hero .bg-blob,
    .scroll-indicator {
      display: none !important;
    }
  }
</style>
<div class="dap-wrapper">
  <!-- ===== HEADER ===== -->
  <section class="header">
    <div class="inner">
      <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto">
        <img src="https://diretoaoproduto.com/wp-content/uploads/2026/03/LOGO-DIRETO-AO-PRODUTO-1.jpg"
          alt="Direto ao Produto" width="460" height="460" decoding="async" fetchpriority="high" />
      </a>
    </div>
  </section>

  <!-- ===== HERO ===== -->
  <section class="hero">
    <div class="bg-grad"></div>
    <div class="bg-blob blob1"></div>
    <div class="bg-blob blob2"></div>

    <div class="hero-content">
      <!-- Headline -->
      <div class="text-center fade-in" style="animation-delay: 0.2s; margin-bottom: 2rem;">
        <h1>
          DESCUBRA COMO <span class="gradient-text">TRANSFORMAR</span> SEUS ITENS PESSOAIS EM UM <span
            class="text-green">NEGÓCIO LUCRATIVO</span>
        </h1>
        <p class="subtitle" id="hero-highlight-text">
          <span class="highlight-phrase">Sem mostrar o rosto</span>,
          <span class="highlight-phrase">sem site</span>,
          <span class="highlight-phrase">sem seguidores ou inscritos</span>,
          <span class="highlight-phrase">sem grupos</span>,
          <span class="highlight-phrase">sem lives</span>,
          <span class="highlight-phrase">sem investir em anúncios</span>,
          <span class="highlight-phrase">sem vender curso</span>,
          <span class="highlight-phrase">sem investir em estoque de produtos</span>.<br><br>
          Tenha acesso ao ecossistema de bastidores que transforma objetos comuns em
          <span class="text-green-bold">"sementes digitais"</span>
          de lucro recorrente em 4 plataformas.
        </p>
      </div>

      <!-- Video -->
      <div class="fade-in" style="animation-delay: 0.4s; margin-bottom: 2.5rem;">
        <div class="text-center">
          <p class="video-label">
            <span class="icon">
              <svg viewBox="0 0 24 24">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
            </span>
            ASSISTA O VÍDEO
          </p>
        </div>
        <div class="video-container video-attention" id="presentation-video" style="cursor:pointer;"
          onclick="this.innerHTML='<iframe src=\'https://www.youtube.com/embed/EQtL6L7Dxd4?rel=0&modestbranding=1&autoplay=1\' title=\'Vídeo de Apresentação\' frameborder=\'0\' allow=\'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\' allowfullscreen style=\'position:absolute;top:0;left:0;width:100%;height:100%;border:none;\'></iframe>';this.style.cursor='default';this.onclick=null;">
          <img src="https://i.ytimg.com/vi/EQtL6L7Dxd4/maxresdefault.jpg?v=20260510" alt="Vídeo de Apresentação"
            width="1280" height="720" loading="eager" decoding="async" fetchpriority="high"
            style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;" />
          <div
            style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;background:rgba(0,0,0,0.7);border-radius:12px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">
              <path d="M8 5v14l11-7z" />
            </svg>
          </div>
        </div>
      </div>

      <!-- CTA -->
      <div class="text-center fade-in" style="animation-delay: 0.6s;">
        <p style="color: #d1d5db; margin-bottom: 1.5rem; max-width: 42rem; margin-left: auto; margin-right: auto;">
          Clique no botão abaixo e dê o primeiro passo para ter um negócio escalável
          com alta margem de lucro que vai te proporcionar muita liberdade!
        </p>
        <div style="margin-bottom: 1.25rem; text-align: center; line-height: 1.35;">
          <div style="font-size: 1rem; color: #d1d5db; text-decoration: line-through; margin-bottom: 0.25rem;">De: R$ 597,00</div>
          <div style="font-size: clamp(1.7rem, 5.1vw, 2.38rem); color: #ffffff; font-weight: 680; letter-spacing: -0.03em; margin-bottom: 0.2rem;">Por: R$ 97,00</div>
        </div>
        <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto" class="btn-cta pulse-animation">
          SIM, QUERO COMEÇAR AGORA ➔
        </a>
      </div>

      <!-- Scroll -->
      <div class="scroll-indicator fade-in" style="animation-delay: 0.8s;">
        <span class="icon animate-bounce">
          <svg viewBox="0 0 24 24">
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </span>
      </div>
    </div>
  </section>

  <!-- ===== AUTHORS ===== -->
  <section class="authors">
    <div class="section-bg"></div>
    <div class="section-content container">
      <div class="text-center" style="margin-bottom: 3rem;">
        <h2 class="section-title">Quem Somos Nós</h2>

      </div>

      <div class="authors-grid">
        <!-- Image -->
        <div class="authors-image-wrap">
          <p style="
            text-align: center;
            color: var(--green-400);
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.5;
            margin-bottom: 1rem;
            padding: 0 0.5rem;
          ">Nós já estamos vivendo nossos sonhos e também queremos te dar essa oportunidade!</p>
          <div class="authors-image-frame glass relative">
            <img src="https://diretoaoproduto.com/wp-content/uploads/2026/03/Um-pouco-sobre-nos.webp"
              alt="Gustavo e Stephanie Honorato" loading="lazy" />
            <div class="overlay"></div>
          </div>
          <div class="experience-badge glass text-center">
            <div class="num">12</div>
            <div class="label">Anos de<br />Experiência</div>
          </div>
        </div>

        <!-- Info -->
        <div class="authors-info">
          <h3>Gustavo Honorato e Stephanie Honorato</h3>
          <p>
            Vivemos <span style="color: var(--green-400); font-weight: 600;">exclusivamente da internet há 8
              anos</span>.
            Já faturamos alto com e-commerce e produtos digitais, mas descobrimos que o
            Direto ao Produto é a forma mais tranquila e consistente de gerar renda sem
            sacrificar o tempo com nossa família e realizar nossos sonhos.
          </p>

          <div class="highlight-list">
            <div class="highlight-item">
              <div class="highlight-icon">
                <span class="icon"><svg viewBox="0 0 24 24">
                    <circle cx="12" cy="8" r="7"></circle>
                    <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
                  </svg></span>
              </div>
              <div>
                <h4>Experiência Comprovada</h4>
                <p>8 anos vivendo exclusivamente da internet com diferentes modelos de negócio.</p>
              </div>
            </div>
            <div class="highlight-item">
              <div class="highlight-icon">
                <span class="icon"><svg viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10"></circle>
                    <circle cx="12" cy="12" r="6"></circle>
                    <circle cx="12" cy="12" r="2"></circle>
                  </svg></span>
              </div>
              <div>
                <h4>Foco em Resultados</h4>
                <p>Método testado e validado que gera resultados reais e consistentes.</p>
              </div>
            </div>
            <div class="highlight-item">
              <div class="highlight-icon">
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path
                      d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                    </path>
                  </svg></span>
              </div>
              <div>
                <h4>Missão de Ajuda</h4>
                <p>Uma das coisas que nos deixam muito felizes é ver como o que compartilhamos tem o poder de mudar
                  vidas, de ver pessoas e famílias conquistando seus sonhos.</p>
              </div>
            </div>
          </div>

          <!-- Bio Dropdown -->
          <div class="bio-dropdown" id="bio-dropdown">
            <button class="bio-toggle" onclick="toggleBio()" aria-expanded="false">
              <span class="bio-toggle-text">Conhecer mais...</span>
              <span class="bio-toggle-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <path d="M6 9l6 6 6-6" />
                </svg>
              </span>
            </button>
            <div class="bio-body" id="bio-body">
              <div class="bio-content">
                <p>Muito prazer, nós somos <strong>Gustavo e Stephanie Honorato</strong>.</p>
                <p>Somos casados há 15 anos, pais de dois garotinhos incríveis e temos uma rotina bem agitada por aqui,
                  cuidando dos nossos filhos, nossos negócios e construindo nossa casa.</p>
                <p>Hoje nós vivemos exclusivamente dos nossos negócios na internet, mas a nossa realidade nem sempre foi
                  assim.</p>

                <div class="bio-divider"></div>

                <p>Nós conhecemos bem o lado difícil da vida. Já pegamos ônibus lotado todos os dias, por anos perdendo
                  cerca de 4 horas por dia somente para ir e voltar do trabalho, fomos funcionários públicos,
                  trabalhamos anos no sistema CLT e tentamos empreender em diversas áreas no mundo físico.</p>
                <p>Já tivemos lanchonete, uma loja de açaí e até vendemos salada de frutas na rua para pagar as contas.
                </p>
                <p><strong>Porém, foi empreendendo na internet que nossa vida se transformou.</strong></p>

                <div class="bio-divider"></div>

                <p>Hoje, a <strong>Stephanie</strong> é criadora da Fox Edu (o maior movimento de professores livres do
                  Brasil). Como professora há 12 anos, ela alcançou a sonhada placa Hotmart Black, acumulando mais de
                  250 mil seguidores no Instagram, 36 mil no YouTube e transformando a vida de mais de 3.000 professores
                  em mais de 12 países.</p>

                <div class="bio-divider"></div>

                <p>O <strong>Gustavo</strong>, (Eletrotécnico e Analista de Sistemas), mergulhou no mercado digital em
                  2018.
                  Tornou-se especialista em vendas online, alcançando marcos impressionantes como
                  faturamentos de mais de R$100 mil em 24 horas e picos de R$ 15 mil diários com e-commerce. Gerenciou
                  diversos negócios digitais de outras pessoas por vários anos é criador da
                  G Master Treinamentos, com mais de 17 mil engenheiros e eletrotécnicos em 35 países e construiu
                  uma audiência de mais de 57 mil inscritos no YouTube.</p>

                <div class="bio-divider"></div>

                <p>Já testamos e validamos de tudo nesse mercado, mas o que nos deixa verdadeiramente felizes hoje é ver
                  como o nosso conhecimento tem o poder de resgatar o tempo e a liberdade de outras famílias.</p>
              </div>
            </div>
          </div>

          <div class="quote-box glass">
            <p>"Temos certeza que se você aplicar o que vamos te ensinar, você também vai conquistar sua renda digital o
              mais rápido possível!"</p>
          </div>
        </div>
      </div>
    </div>
  </section>



  <!-- ===== METHOD ===== -->
  <section class="method method-light">
    <div class="section-bg"></div>
    <div class="section-content container">
      <div class="text-center" style="margin-bottom: 4rem;">
        <h2 class="section-title">
          O Que é o <span class="gradient-text">Método Direto ao Produto?</span>
        </h2>
        <p class="section-subtitle">
          Não é sobre virar "blogueirinho(a)" ou fazer dancinha, nem sobre construir
          audiências gigantescas para depois ter resultados. É uma
          <span style="color: var(--green-400); font-weight: 600;">estratégia de negócio sólida</span>
          onde você conecta quem já quer comprar aos maiores marketplaces do mundo.
        </p>
      </div>

      <div class="benefits-grid">
        <!-- Benefit 1 -->
        <div class="benefit-card card-hover benefit-dropdown-card">
          <div class="benefit-inner">
            <div class="benefit-dropdown-header">
              <div class="left">
                <div class="benefit-icon">
                  <span class="icon"><svg viewBox="0 0 24 24">
                      <path
                        d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24">
                      </path>
                      <line x1="1" y1="1" x2="23" y2="23"></line>
                    </svg></span>
                </div>
                <h3>Você não precisa aparecer</h3>
              </div>
              <span class="benefit-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2">
                  <path d="M6 9l6 6 6-6" />
                </svg></span>
            </div>
            <div class="benefit-dropdown-body">
              <p>Lucre apenas mostrando o produto e suas mãos. Sem rostos, sem dancinhas, sem precisar aparecer em
                stories todos os dias.</p>
            </div>
          </div>
        </div>
        <!-- Benefit 2 -->
        <div class="benefit-card card-hover benefit-dropdown-card">
          <div class="benefit-inner">
            <div class="benefit-dropdown-header">
              <div class="left">
                <div class="benefit-icon">
                  <span class="icon"><svg viewBox="0 0 24 24">
                      <path
                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
                      </path>
                    </svg></span>
                </div>
                <h3>Sem Estoque ou Logística</h3>
              </div>
              <span class="benefit-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2">
                  <path d="M6 9l6 6 6-6" />
                </svg></span>
            </div>
            <div class="benefit-dropdown-body">
              <p>Esqueça as transportadoras, idas aos Correios ou o pesadelo de comprar produtos e não vender. Você
                trabalha apenas com comissões digitais.</p>
            </div>
          </div>
        </div>
        <!-- Benefit 3 -->
        <div class="benefit-card card-hover benefit-dropdown-card">
          <div class="benefit-inner">
            <div class="benefit-dropdown-header">
              <div class="left">
                <div class="benefit-icon">
                  <span class="icon"><svg viewBox="0 0 24 24">
                      <path
                        d="M18.178 8c5.096 0 5.096 8 0 8-5.095 0-7.133-8-12.739-8-4.585 0-4.585 8 0 8 5.606 0 7.644-8 12.74-8z">
                      </path>
                    </svg></span>
                </div>
                <h3>Conteúdo Perpétuo</h3>
              </div>
              <span class="benefit-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2">
                  <path d="M6 9l6 6 6-6" />
                </svg></span>
            </div>
            <div class="benefit-dropdown-body">
              <p>Diferente do Instagram, TikTok ou Facebook, aqui você posta uma vez ("planta a semente") e o vídeo
                trabalha para você por muitos anos sem precisar criar novos conteúdos todo dia.</p>
            </div>
          </div>
        </div>
        <!-- Benefit 4 -->
        <div class="benefit-card card-hover benefit-dropdown-card">
          <div class="benefit-inner">
            <div class="benefit-dropdown-header">
              <div class="left">
                <div class="benefit-icon">
                  <span class="icon"><svg viewBox="0 0 24 24">
                      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                      <circle cx="9" cy="7" r="4"></circle>
                      <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg></span>
                </div>
                <h3>Qualquer Idade</h3>
              </div>
              <span class="benefit-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2">
                  <path d="M6 9l6 6 6-6" />
                </svg></span>
            </div>
            <div class="benefit-dropdown-body">
              <p>Método simples que até o Sr Paulo, de 72 anos, já está aplicando apenas com o celular. Não
                importa a idade ou experiência com tecnologia.</p>
            </div>
          </div>
        </div>
        <!-- Benefit 5 -->
        <div class="benefit-card card-hover benefit-dropdown-card">
          <div class="benefit-inner">
            <div class="benefit-dropdown-header">
              <div class="left">
                <div class="benefit-icon">
                  <span class="icon"><svg viewBox="0 0 24 24">
                      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                    </svg></span>
                </div>
                <h3>Resultados Rápidos</h3>
              </div>
              <span class="benefit-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2">
                  <path d="M6 9l6 6 6-6" />
                </svg></span>
            </div>
            <div class="benefit-dropdown-body">
              <p>Utilizando as estratégias do método, você vai poder ter resultados poucos dias após começar.</p>
            </div>
          </div>
        </div>
        <!-- Benefit 6 -->
        <div class="benefit-card card-hover benefit-dropdown-card">
          <div class="benefit-inner">
            <div class="benefit-dropdown-header">
              <div class="left">
                <div class="benefit-icon">
                  <span class="icon"><svg viewBox="0 0 24 24">
                      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                      <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
                      <path d="M9 14l2 2 4-4"></path>
                    </svg></span>
                </div>
                <h3>Método simplificado para você copiar e ganhar</h3>
              </div>
              <span class="benefit-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2">
                  <path d="M6 9l6 6 6-6" />
                </svg></span>
            </div>
            <div class="benefit-dropdown-body">
              <p>O Direto ao Produto já é validado. Criamos uma versão simplificada para você copiar tudo que estamos
                fazendo e começar a ter seus resultados nos próximos dias.</p>
            </div>
          </div>
        </div>
      </div>


    </div>
  </section>

  <!-- ===== WHY FOR YOU ===== -->
  <section class="method why-for-you" style="padding-top: 2rem;">
    <div class="section-bg"></div>
    <div class="section-content container">
      <div class="text-center" style="margin-bottom: 4rem;">
        <h2 class="section-title">
          Por que o <span class="gradient-text">Método Direto ao Produto é Para Você?</span>
        </h2>
      </div>

      <div class="benefits-grid">
        <!-- Card 1 -->
        <div class="benefit-card glass card-hover shine">
          <div class="benefit-inner">
            <div class="benefit-icon">
              <span class="icon"><svg viewBox="0 0 24 24">
                  <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
                  <line x1="12" y1="18" x2="12.01" y2="18"></line>
                </svg></span>
            </div>
            <div>
              <h3>Comece com seu celular</h3>
              <p>Para começar a ter resultados você só vai precisar de um celular com internet e aplicar o método direto
                ao produto.</p>
            </div>
          </div>
        </div>
        <!-- Card 2 -->
        <div class="benefit-card glass card-hover shine">
          <div class="benefit-inner">
            <div class="benefit-icon">
              <span class="icon"><svg viewBox="0 0 24 24">
                  <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                  <polyline points="17 6 23 6 23 12"></polyline>
                </svg></span>
            </div>
            <div>
              <h3>Ganhos constantes a curto e longo prazo</h3>
              <p>Você pode começar a ter os resultados nos primeiros dias que começar a aplicar o método, e continuar
                aumentando sua renda a longo prazo. (Temos exemplos de resultados gerados em apenas 2 dias de conteúdo
                no ar).</p>
            </div>
          </div>
        </div>
        <!-- Card 3 -->
        <div class="benefit-card glass card-hover shine">
          <div class="benefit-inner">
            <div class="benefit-icon">
              <span class="icon"><svg viewBox="0 0 24 24">
                  <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
                  <path
                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
                  </path>
                  <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                  <line x1="12" y1="22.08" x2="12" y2="12"></line>
                </svg></span>
            </div>
            <div>
              <h3>Sem investir em estoque de produtos</h3>
              <p>Esqueça transportadoras, idas aos Correios ou o pesadelo de comprar produtos, não vender e perder seu
                dinheiro.</p>
            </div>
          </div>
        </div>
        <!-- Card 4 -->
        <div class="benefit-card glass card-hover shine">
          <div class="benefit-inner">
            <div class="benefit-icon">
              <span class="icon"><svg viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="2" y1="12" x2="22" y2="12"></line>
                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z">
                  </path>
                </svg></span>
            </div>
            <div>
              <h3>Não precisa de site para começar!</h3>
              <p>Você não vai ter que aprender coisas muito difíceis, como criar um site ou algo do tipo, as plataformas
                que vai utilizar são extremamente simples.</p>
            </div>
          </div>
        </div>
        <!-- Card 5 -->
        <div class="benefit-card glass card-hover shine">
          <div class="benefit-inner">
            <div class="benefit-icon">
              <span class="icon"><svg viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 6 12 12 16 14"></polyline>
                </svg></span>
            </div>
            <div>
              <h3>Não vai atrapalhar suas atividades atuais</h3>
              <p>Se você já tem um emprego, se você é uma dona de casa ou outras atividades, esse método não vai
                atrapalhar em nada sua rotina. Você não precisa parar o que está fazendo, e com apenas 2 a 4 horas por
                semana você já conseguirá seus resultados.</p>
            </div>
          </div>
        </div>
        <!-- Card 6 -->
        <div class="benefit-card glass card-hover shine">
          <div class="benefit-inner">
            <div class="benefit-icon">
              <span class="icon"><svg viewBox="0 0 24 24">
                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                  <circle cx="9" cy="7" r="4"></circle>
                  <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                </svg></span>
            </div>
            <div>
              <h3>Adequado para pessoas de todas as idades e habilidades</h3>
              <p>Não importa se você nunca vendeu nada na internet. Nossa metodologia é tão simplificada e direta ao
                ponto que até mesmo Sr. Paulo, no auge dos seus 72 anos, já está aplicando e colhendo resultados
                apenas com o celular.</p>
            </div>
          </div>
        </div>
        <!-- Card 7 -->
        <div class="benefit-card glass card-hover shine">
          <div class="benefit-inner">
            <div class="benefit-icon">
              <span class="icon"><svg viewBox="0 0 24 24">
                  <path
                    d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24">
                  </path>
                  <line x1="1" y1="1" x2="23" y2="23"></line>
                </svg></span>
            </div>
            <div>
              <h3>Não precisa mostrar o rosto para ter resultados</h3>
              <p>Fuja do ciclo de exaustão de gravar Stories o dia todo, fazer dancinhas ou implorar por atenção para
                vender cursos. A regra do método é clara: "Direto ao Produto". O foco é o objeto, não você. Fature alto
                preservando totalmente a sua privacidade e sem dar satisfação da sua vida na internet.</p>
            </div>
          </div>
        </div>
        <!-- Card 8 -->
        <div class="benefit-card glass card-hover shine">
          <div class="benefit-inner">
            <div class="benefit-icon">
              <span class="icon"><svg viewBox="0 0 24 24">
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg></span>
            </div>
            <div>
              <h3>Método simplificado para você copiar e ganhar</h3>
              <p>Isso não é um cursinho teórico, é uma estratégia de negócios validada por mais de 2 anos. Nós
                simplificamos todo o processo. Seu único trabalho será copiar a nossa estrutura e ver os resultados
                acontecerem nos próximos dias.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== TEMPO DE RESULTADOS ===== -->
  <section class="why-results">
    <div class="section-content container">
      <div class="text-center" style="margin-bottom: 3rem;">
        <h2 class="section-title" style="color: #111827; line-height: 1.2;">
          Quanto tempo para <span style="color: var(--green);">começar a ter resultados?</span>
        </h2>
        <p class="section-subtitle" style="color: #4b5563; font-weight: 600; font-size: 1.25rem;">
          Veja 2 exemplos reais
        </p>
      </div>

      <div class="why-results-grid">
        <div class="why-text">
          <p>
            Nossa <strong>TV do escritório</strong>, que utilizamos para os treinamentos, com apenas <strong>2
              dias</strong> de semente plantada, com a estratégia certa, gerou seu primeiro resultado de <strong
              style="color: var(--green-darker);">R$ 125,88</strong> com apenas 200 visualizações, e em 9 dias R$274,06
            em 17 dias R$ 506,01 e até hoje que estamos fazendo essa página já entrou <strong
              style="color: var(--green-darker);">R$ 919,47</strong> e isso em apenas uma plataforma e nas outras 3
            plataformas já entraram desse mesmo conteúdo mais <strong style="color: var(--green-darker);">R$
              787,32</strong>.
          </p>
          <div
            style="margin-top: 2rem; padding: 1.5rem; background: #f3f4f6; border-left: 4px solid var(--green); border-radius: 0.5rem;">
            <p style="margin-bottom: 0;">
              E tem algo mais incrível, com o nosso método o conteúdo nunca perde força, ele continua gerando resultado
              por anos e um dos maiores exemplos que temos é a <strong>Bicicleta Spinning Ergométrica</strong> do nosso
              uso pessoal, 3 anos e 335 dias desde a publicação que nos rendeu um lucro de <strong
                style="color: var(--green-darker);">R$ 11.704,60</strong> <strong>(SEM MOSTRAR O ROSTO)</strong>
            </p>
          </div>
        </div>

        <div class="why-gallery" style="display: flex; flex-direction: column; justify-content: center;">
          <p class="text-center" style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem;">👇 Clique na imagem
            abaixo e veja os resultados mais de perto</p>
          <img class="lightbox-img" src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Plataforma-6.jpg"
            alt="Exemplo Real de Resultados - TV do Escritório" loading="lazy">
        </div>
      </div>

      <div class="why-results-cta-row text-center" style="padding: 2.5rem 0 1rem; position: relative; z-index: 10;">
        <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto" class="btn-cta pulse-animation" style="color: #fff;">
          👉 Sim, eu quero começar agora!
        </a>
      </div>
    </div>
  </section>

  <!-- ===== ZERO BARREIRAS ===== -->
  <section class="zero-barriers">
    <div class="section-bg"></div>
    <div class="section-content container">

      <div class="zero-barriers-content">
        <div class="text-center" style="margin-bottom: 2rem;">
          <h2 class="section-title" style="margin-bottom: 1rem; line-height: 1.2;">
            Zero Barreiras: <span class="gradient-text">Um método para qualquer idade</span> ou nível de
            experiência
          </h2>
          <p class="zb-subtitle">Não importa se você tem 20 ou 70 anos.</p>
        </div>

        <p class="zb-text centered">O Direto ao Produto foi estruturado para ser a oportunidade mais clara e segura
          deste ano. Todo o conteúdo
          vai direto ao ponto, te guiando clique a clique pela tela, sem teorias chatas ou enrolação. Basta ter
          vontade de aplicar.</p>

        <div class="zb-cards-grid">
          <div class="zb-card">
            <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/DIRETO-AO-PRODUTO-BRUNO.jpg"
              alt="Bruno, Barbeiro, aplicando o Método Direto ao Produto" loading="lazy" />
          </div>
          <div class="zb-card">
            <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/DIRETO-AO-PRODUTO-PAULO.jpg"
              alt="Sr. Paulo, 72 anos, aplicando o Método Direto ao Produto" loading="lazy" />
          </div>
        </div>

        <p class="zb-text">Esses nas fotos são o <strong>Bruno (que é barbeiro)</strong> e o <strong>Sr. Paulo, no auge dos seus <span style="color: var(--green-400); font-weight: 600;">72 anos</span>)</strong>.
          Eles decidiram aplicar a nossa estratégia.</p>

        <p class="zb-text">Eles começaram apenas com o celular e o método direto ao produto, com os objetos que já
          tinham (como o rádio de comunicação e até o lustre de teto da sala) e ativaram suas novas fontes de renda.
        </p>

        <p class="zb-text">Se a nossa estratégia fosse complexa, cheia de termos difíceis ou exigisse edição em
          computadores caros, e mostrar o rosto, eles não teriam conseguido.</p>

        <p class="zb-text"
          style="padding: 1.5rem; background: #ffffff; color: #374151; border-radius: 0.5rem; margin-top: 2rem; font-size: 1.25rem;">
          O Método Direto ao Produto foi criado para pessoas de todas as idades e níveis de habilidade. É, sem
          dúvidas, a oportunidade mais acessível do mercado digital hoje. Tudo o que entregamos é um passo a passo
          prático, mastigado, direto ao ponto e 100% sem enrolação. <span
            style="color: var(--green-dark); font-weight: 800;">Se eles conseguiram, o que te impede de dar o primeiro
            passo hoje?</span>
        </p>
      </div>

    </div>
  </section>

  <!-- ===== O QUE VOCÊ VAI PRECISAR ===== -->
  <section class="what-you-need">
    <div class="section-bg"></div>
    <div class="section-content container">

      <div class="text-center" style="margin-bottom: 2rem;">
        <h2 class="section-title" style="margin-bottom: 1rem; line-height: 1.2;">
          O que você vai precisar para construir seu <span class="gradient-text">negócio lucrativo?</span>
        </h2>
        <p class="section-subtitle">
          Você vai precisar de <span style="color: var(--green-400); font-weight: 600;">apenas 3 passos</span> simples:
        </p>
      </div>

      <div class="steps-grid">

        <!-- Step 1 -->
        <div class="step-card card-hover">
          <div class="step-number">1</div>
          <div class="step-card-inner shine">
            <div class="step-img-wrap">
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Celular.jpg" alt="Seu Celular"
                loading="lazy" />
            </div>
            <div class="step-info">
              <h3>Seu Celular</h3>
              <p>Você vai precisar apenas do seu celular para começar.</p>
            </div>
          </div>
        </div>

        <!-- Step 2 -->
        <div class="step-card card-hover">
          <div class="step-number">2</div>
          <div class="step-card-inner shine">
            <div class="step-img-wrap">
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/produtos.jpg"
                alt="Produto do Seu Uso Pessoal" loading="lazy" />
            </div>
            <div class="step-info">
              <h3>Produto do Seu Uso Pessoal</h3>
              <p>Você vai começar com apenas 1 produto do seu uso pessoal sem investir em nada.</p>
            </div>
          </div>
        </div>

        <!-- Step 3 -->
        <div class="step-card card-hover">
          <div class="step-number">3</div>
          <div class="step-card-inner shine">
            <div class="step-img-wrap">
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Metodo-Direto-ao-Produto.jpg"
                alt="Aplicar o Método Direto ao Produto" loading="lazy" />
            </div>
            <div class="step-info">
              <h3>Aplicar o Método Direto ao Produto</h3>
              <p>Você vai simplesmente copiar o que estamos fazendo e ter seus próprios resultados o mais rápido
                possível.
              </p>
            </div>
          </div>
        </div>

      </div>

    </div>
  </section>

  <!-- ===== POR QUE VOCÊ VAI TER RESULTADOS ===== -->
  <section class="why-results">
    <div class="section-content container">
      <div class="why-results-grid">

        <!-- Coluna Esquerda: Texto -->
        <div class="why-text">
          <h2 class="section-title" style="text-align: left;">
            Por que você vai ter <span style="color: var(--green);">resultados com o método</span>
            direto ao produto?
          </h2>
          <p>
            Em vez de correr atrás de clientes no Instagram, e grupos, em stories insistindo com quem não quer comprar,
            nós nos posicionamos exatamente no lugar onde <strong>milhões de pessoas já estão com o cartão de crédito na
              mão</strong>, prontas para comprar.
          </p>
          <p>
            Nós criamos o que chamamos de <strong>"Sementes Digitais"</strong>. Você pega o seu celular, usa um objeto
            que já tem em casa e ativa estratégias simples, porém poderosas.
          </p>
          <p>
            Essa semente é conectada a um ecossistema poderoso de <span
              style="color: var(--green-dark); font-weight: 800;">4 gigantes do mercado.</span> Você faz o trabalho UMA
            vez e ele funciona sem você, dia e noite, gerando receita constante.
          </p>
        </div>

        <!-- Coluna Direita: Imagens -->
        <div class="why-gallery">
          <h3>Veja o poder dessa estratégia<br><span
              style="font-size: 1rem; color: #4b5563; font-weight: 800;">(resultados reais de aplicações únicas)</span>
          </h3>
          <p class="text-center" style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem;">👇 Clique nas
            imagens abaixo e veja os resultados mais de perto</p>
          <img class="lightbox-img" src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Plataforma-1-e-2.jpg"
            alt="Resultados nas Plataformas 1 e 2" loading="lazy">
          <img class="lightbox-img" src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Plataforma-3-e-4.jpg"
            alt="Resultados nas Plataformas 3 e 4" loading="lazy">
          <img class="lightbox-img" src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Plataforma-5.jpg"
            alt="Resultado Plataforma Integrada" loading="lazy">
        </div>

        <div class="why-results-cta-row text-center" style="padding: 2.5rem 0 1rem; position: relative; z-index: 10;">
          <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto" class="btn-cta pulse-animation" style="color: #fff;">
            👉 Sim, eu quero começar agora!
          </a>
        </div>
      </div>
  </section>
  <section class="results">
    <div class="section-bg"></div>
    <div class="section-content container-lg">
      <div class="text-center" style="margin-bottom: 3rem;">
        <h2 class="section-title">
          Veja mais <span class="gradient-text">6 exemplos</span> de resultados reais
        </h2>
        <p class="section-subtitle">Aplicando o método Direto ao Produto</p>
      </div>

      <div class="products-grid" id="products-grid"></div>

      <!-- Info box -->
      <div class="info-box glass">
        <p class="text-center" style="margin-bottom: 1.5rem;">
          Esses são somente alguns exemplos das
          <span style="color: var(--green-400); font-weight: 600;">centenas de produtos</span>
          gerando resultado em vários anos, muitos produtos gerando resultados em
          <span style="color: var(--green-400); font-weight: 600;">menos de 2 dias</span>
          desde a publicação.
        </p>
      </div>

      <div
        style="margin-top: 2rem; padding: 2rem 1.25rem; border-radius: 1.5rem; background: linear-gradient(135deg, #15803d 0%, #16a34a 55%, #22c55e 100%); box-shadow: 0 24px 60px rgba(22, 163, 74, 0.28); text-align: center;">
        <p style="font-size: 1.125rem; line-height: 1.5; color: #ffffff; margin-bottom: 1rem; font-weight: 700;">
          Salve esta página agora ou compartilhe com alguém no WhatsApp para voltar nela com um clique.
        </p>
        <a href="#"
          onclick="var shareUrl = window.location.protocol === 'file:' ? decodeURIComponent(window.location.href) : window.location.href; var shareText = 'Descubra como transformar seus itens pessoais em um negócio lucrativo - Método Direto ao Produto' + '\n\n' + shareUrl; window.open('https://wa.me/?text=' + encodeURIComponent(shareText), '_blank'); return false;"
          class="btn-cta pulse-animation share-page-cta">
          <span class="icon" aria-hidden="true">
            <svg viewBox="0 0 24 24">
              <path d="M4 12v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6"></path>
              <path d="M12 16V4"></path>
              <path d="M8 8l4-4 4 4"></path>
            </svg>
          </span>
          <span class="share-label">SALVE OU COMPARTILHE ESTA PÁGINA!</span>
        </a>
      </div>
    </div>
  </section>

  <!-- ===== MONETIZAÇÃO MULTIPLATAFORMA (NOVA SESSÃO) ===== -->
  <section class="why-results">
    <div class="section-content container">
      <div class="why-results-grid">
        <div class="why-text">
          <h2 class="section-title" style="color: #111827; text-align: left; line-height: 1.2;">
            Como funciona nossa <span style="color: var(--green);">"Monetização
              Multiplataforma"</span>
          </h2>
          <p style="color: #374151;">
            O maior erro de quem tenta ganhar dinheiro hoje é depender de uma única fonte. Se o seu chefe te demite, sua
            renda zera. Se uma plataforma muda as regras, seu negócio acaba.
          </p>
          <p style="color: #374151;">
            Para ter verdadeira liberdade, nós criamos um ecossistema blindado. É exatamente isso que acontece quando
            você aplica o nosso método:
          </p>
        </div>
        <div class="why-gallery" style="display: flex; flex-direction: column; justify-content: center;">
          <p class="text-center" style="font-size: 0.875rem; color: #6b7280; margin-bottom: 0.5rem;">👇 Clique na imagem
            abaixo e veja mais de perto</p>
          <img class="lightbox-img" src="https://diretoaoproduto.com/wp-content/uploads/2026/03/Plataformas-Juntas.jpg"
            alt="Monetização Multiplataforma" loading="lazy">
        </div>
      </div>

      <div style="margin-top: 3rem;">
        <h3 style="color: #111827; font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem;">Olhe bem para o gráfico
          acima. Ele é o coração do Método Direto ao Produto.</h3>
        <p style="font-size: 1.125rem; line-height: 1.7; margin-bottom: 1.5rem; color: #374151;">
          Quando você tenta crescer no Instagram ou no TikTok, o seu vídeo "morre" em 24 horas. Você precisa postar
          todos os dias para continuar existindo.
        </p>
        <p style="font-size: 1.125rem; line-height: 1.7; margin-bottom: 2.5rem; color: #374151;">
          No nosso sistema, o jogo é completamente invertido. Nós chamamos isso de <strong
            style="color: #111827;">Efeito Multiplicador:</strong>
        </p>

        <div class="benefits-grid" style="margin-bottom: 2.5rem;">
          <div
            style="background: #ffffff; border: 1px solid rgba(0,0,0,0.05); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;"
            onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0, 0, 0, 0.1)';"
            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0, 0, 0, 0.05)';">
            <div
              style="background: rgba(34, 197, 94, 0.1); width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
              <span style="font-size: 1.75rem;">🌱</span>
            </div>
            <h4 style="color: #111827; font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.3;">
              1. A Semente Única<br><span
                style="font-size: 1rem; color: var(--green-darker); font-weight: 600;">(Trabalhe 1x)</span></h4>
            <p style="color: #4b5563; font-size: 1rem; line-height: 1.6; margin: 0;">Você pega um objeto, usa o seu
              celular e aplica o nosso passo a passo simples. Você cria aquele conteúdo apenas UMA vez.</p>
          </div>

          <div
            style="background: #ffffff; border: 1px solid rgba(0,0,0,0.05); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;"
            onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0, 0, 0, 0.1)';"
            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0, 0, 0, 0.05)';">
            <div
              style="background: rgba(34, 197, 94, 0.1); width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
              <span style="font-size: 1.75rem;">⚙️</span>
            </div>
            <h4 style="color: #111827; font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.3;">
              2. As 4 Torneiras Abertas<br><span
                style="font-size: 1rem; color: var(--green-darker); font-weight: 600;">(Receba 4x)</span></h4>
            <p style="color: #4b5563; font-size: 1rem; line-height: 1.6; margin: 0;">Em vez de depender de um único
              lugar, o nosso protocolo conecta essa sua "semente" simultaneamente a 4 gigantes do mercado (Plataforma 1,
              2, 3 e 4). Um único conteúdo passa a ter 4 chances diferentes de colocar dinheiro no seu bolso todos os
              dias.</p>
          </div>

          <div
            style="background: #ffffff; border: 1px solid rgba(0,0,0,0.05); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;"
            onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0, 0, 0, 0.1)';"
            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0, 0, 0, 0.05)';">
            <div
              style="background: rgba(34, 197, 94, 0.1); width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
              <span style="font-size: 1.75rem;">🌳</span>
            </div>
            <h4 style="color: #111827; font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.3;">
              3. O Efeito Bola de Neve<br><span
                style="font-size: 1rem; color: var(--green-darker); font-weight: 600;">(A Árvore de Lucro)</span></h4>
            <p style="color: #4b5563; font-size: 1rem; line-height: 1.6; margin: 0;">Lembra que o nosso vídeo da fita
              adesiva gerou lucro por mais de 700 dias? Como mostra o gráfico, quanto mais você aplica o método, mais
              sementes você planta. A curto e longo prazo, esses conteúdos se acumulam. Eles viram um exército de
              "vendedores silenciosos" trabalhando para você no automático, fazendo a sua renda crescer mês após mês.
            </p>
          </div>
        </div>

        <!-- ===== MARQUEE LOGOS ===== -->
        <div style="margin: 2rem 0;">
          <div class="logo-marquee-section">
            <div class="marquee-track">
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Amazon.jpg" alt="Amazon"
                loading="lazy" />
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Magalu-2.jpg" alt="Magalu"
                loading="lazy" />
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Magalu.jpg" alt="Magalu Promo"
                loading="lazy" />
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Mercado-Livre.jpg"
                alt="Mercado Livre" loading="lazy" />
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Shopee.jpg" alt="Shopee"
                loading="lazy" />
              <!-- Segundo grupo (loop infinito) -->
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Amazon.jpg" alt="Amazon"
                loading="lazy" />
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Magalu-2.jpg" alt="Magalu"
                loading="lazy" />
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Magalu.jpg" alt="Magalu Promo"
                loading="lazy" />
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Mercado-Livre.jpg"
                alt="Mercado Livre" loading="lazy" />
              <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Afiliado-Shopee.jpg" alt="Shopee"
                loading="lazy" />
            </div>
          </div>
        </div>

        <div style="padding: 1.5rem; background: #f3f4f6; border-left: 4px solid var(--green); border-radius: 0.5rem;">
          <p style="font-size: 1.125rem; line-height: 1.6; font-weight: 600; color: #111827; margin: 0;">
            Essa é a verdadeira Renda Passiva. Se uma plataforma vender menos hoje, as outras três cobrem o resultado.
            Você constrói um negócio seguro, escalável e que te dá paz mental.
          </p>
        </div>
      </div>

      <div class="why-results-cta-row text-center" style="padding: 2.5rem 0 1rem; position: relative; z-index: 10;">
        <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto" class="btn-cta pulse-animation" style="color: #fff;">
          👉 Sim, eu quero construir meu negócio lucrativo!
        </a>
      </div>
    </div>
  </section>

  <!-- ===== MONETIZAÇÃO POR MÉRITO ===== -->
  <section class="results" style="padding-top: 2rem;">
    <div class="section-bg"></div>
    <div class="section-content container-lg">
      <div class="info-box glass">
        <div class="text-center">
          <h2 class="section-title">
            Como Funciona a <span class="gradient-text">"Monetização por Mérito"</span>
          </h2>
          <p style="color: #d1d5db; max-width: 48rem; margin: 0 auto; line-height: 1.6;">
            Você sabia que, ao indicar um ferro de passar, você pode ganhar comissão se a pessoa comprar uma geladeira
            junto?<br><br>
            Além de descobrir como <span style="color: var(--green-400); font-weight: 600;">ativar 4 fontes de renda
              simultâneas</span> com o mesmo conteúdo, você vai aprender todos os detalhes da monetização por mérito
            para potencializar seus resultados.
          </p>
          <img src="https://diretoaoproduto.com/wp-content/uploads/2026/02/Plataforma-7.jpg"
            alt="Monetização por Mérito"
            style="border-radius: 1rem; width: 100%; max-width: 800px; margin: 2rem auto 0; display: block; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);"
            loading="lazy">
        </div>
      </div>
    </div>
  </section>

  <!-- ===== SUPORTE WHATSAPP ===== -->
  <section class="suporte-section" style="background: #ffffff; padding: 4rem 1rem;">
    <div style="max-width: 720px; margin: 0 auto; text-align: center;">

      <!-- Ícone WhatsApp -->
      <div style="
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 4.5rem;
        height: 4.5rem;
        background: rgba(37, 211, 102, 0.1);
        border-radius: 50%;
        margin-bottom: 1.25rem;
      ">
        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="#25D366">
          <path
            d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.888-.788-1.487-1.761-1.663-2.063-.173-.3-.018-.465.13-.615.136-.137.301-.354.451-.531.151-.177.202-.303.303-.505.101-.202.051-.378-.024-.528-.076-.15-.67-1.618-.918-2.215-.24-.582-.486-.5-.67-.508-.173-.008-.371-.01-.571-.01-.2 0-.524.075-.798.373-.274.298-1.048 1.025-1.048 2.5s1.073 2.898 1.222 3.097c.15.2 2.11 3.226 5.11 4.516.714.308 1.27.492 1.704.63.716.228 1.368.195 1.884.118.577-.085 1.758-.718 2.006-1.412.248-.694.248-1.289.174-1.412-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
        </svg>
      </div>

      <!-- Título -->
      <h2 style="
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 800;
        color: #111827;
        margin-bottom: 1rem;
        letter-spacing: -0.01em;
      ">SUPORTE PELO <span style="color: #25D366;">WHATSAPP</span></h2>

      <!-- Texto -->
      <p style="
        font-size: 1.0625rem;
        color: #4b5563;
        line-height: 1.75;
        margin-bottom: 0.5rem;
      ">Além do acesso ao conteúdo detalhado, você vai ter acesso
        ao nosso contato pessoal para tirar <strong style="color: #111827;">todas as suas dúvidas!</strong></p>

      <p style="
        font-size: 0.9375rem;
        color: #6b7280;
        line-height: 1.7;
        max-width: 540px;
        margin: 0 auto;
        padding: 0.75rem 1rem;
        border-left: 3px solid #25D366;
        background: #f9fafb;
        border-radius: 0 0.5rem 0.5rem 0;
        text-align: left;
      ">Visto que temos uma rotina muito corrida, respondemos às mensagens em <strong style="color: #111827;">até 48
          horas.</strong></p>

    </div>
  </section>

  <!-- ===== PRICING SECTION ===== -->
  <section class="pricing-section" id="planos">
    <div class="section-bg"></div>
    <div class="bg-blob-center animate-pulse"></div>

    <div class="section-content container">
      <div class="text-center" style="margin-bottom: 2rem;">
        <h2 class="section-title" style="color: #fff; max-width: 54rem; margin: 0 auto; line-height: 1.15;">
          Chegou o momento de ativar a suas novas fontes de renda
        </h2>
      </div>

      <div class="pricing-grid">

        <!-- CARD: FEATURES -->
        <div class="pricing-card features-card">
          <div class="pricing-header">
            <h3>
              O QUE VOCÊ VAI RECEBER
            </h3>
          </div>

          <div class="pricing-features">
            <ul>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                O Método Direto ao Produto Completo
              </li>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                Suporte Direto pelo WhatsApp para tirar todas as suas dúvidas
              </li>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                Arquivos de implementação em PDF para facilitar sua rotina
              </li>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                Aulas em alta qualidade (Nós gravamos a tela mostrando clique a clique)
              </li>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                Conteúdo detalhado, do zero absoluto ao avançado
              </li>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                Estrutura de negócio completa (As 4 fontes de renda ativadas)
              </li>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                Lista secreta de produtos que mais dão resultado para você faturar rápido
              </li>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                Atualizações constantes do método
              </li>
              <li>
                <span class="icon"><svg viewBox="0 0 24 24">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg></span>
                Acesso garantido por 3 anos (Tempo de sobra para construir seu império)
              </li>
            </ul>
          </div>
        </div>

        <!-- CARD: COMPRA -->
        <div class="pricing-card investment-card"
          style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;">

          <h3 style="font-size: 1.5rem; color: #ffffff; font-weight: 800; text-transform: uppercase; margin-bottom: 1rem;">
            INVESTIMENTO
          </h3>

          <p
            style="font-size: 1.125rem; color: #fb923c; font-weight: 800; text-transform: uppercase; margin-bottom: 2rem; line-height: 1.3;">
            MATRICULE-SE HOJE E GANHE 3 ANOS DE ACESSO</p>

          <div class="pricing-price" style="margin-bottom: 1.5rem;">
            <div style="text-decoration: line-through; font-size: 1rem; margin-bottom: 0.5rem;">De R$ 997,00</div>
            <div class="amount installment-value" style="margin-bottom: 0;">R$ 97,00</div>
          </div>

          <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto" class="btn-cta pulse-animation pricing-cta"
            style="width: 100%;">
            SIM, QUERO COMEÇAR AGORA ➔
          </a>

          <div id="oferta" style="text-align: center; color: #ffffff; font-weight: 800; margin-top: 1rem; letter-spacing: 0.02em;">
            ⚡OFERTA RELÂMPAGO⚡<br>
            OFERTA VÁLIDA <span id="antesDeOntem"></span>, <span id="ontem"></span> E <span id="hoje"></span>
          </div>
          <div id="ofertaTimer"
            style="display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; color: #fb923c; font-size: 0.98rem; font-weight: 700; margin-top: 0.5rem;">
            <span aria-hidden="true">⌛</span>
            <span id="countdownOferta" style="font-weight: 800; color: #fb923c; letter-spacing: 0.04em;">00:00:00</span>
            <span aria-hidden="true">⌛</span>
          </div>
          <div class="purchase-trust" aria-label="Compra segura e acesso imediato">
            <span class="purchase-trust-item">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <rect x="5" y="11" width="14" height="9" rx="2"></rect>
                <path d="M8 11V8a4 4 0 0 1 8 0v3"></path>
              </svg>
              <span>Compra segura</span>
            </span>
            <span class="divider" aria-hidden="true"></span>
            <span class="purchase-trust-item">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M5 12h14"></path>
                <path d="M13 6l6 6-6 6"></path>
              </svg>
              <span>Acesso imediato</span>
            </span>
          </div>
        </div>

      </div>

      <!-- GUARANTEE BLOCK -->
      <div class="guarantee-box glass">
        <div class="guarantee-icon shine">
          <span class="icon">
            <svg viewBox="0 0 24 24">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
            </svg>
          </span>
        </div>
        <div class="guarantee-content">
          <h3>RISCO ZERO: VOCÊ ESTÁ PROTEGIDO PELA NOSSA GARANTIA BLINDADA</h3>
          <p>Independentemente do acesso que você escolher, nós assumimos 100% do risco. Você tem <strong>7 dias de
              Garantia
              Incondicional.</strong></p>
          <p>Entre, veja as aulas e a estrutura funcionando por dentro. Se por qualquer motivo você achar que não é para
            você, basta nos mandar uma única mensagem e nós devolvemos cada
            centavo do seu dinheiro. Sem letras miúdas.</p>
          <div class="section-divider" style="margin: 1rem 0;"></div>
          <p>A decisão agora é simples: O seu celular continuará sendo apenas um passatempo que suga suas horas, ou se
            tornará a ferramenta que paga as suas contas? A escolha é sua.</p>
        </div>
      </div>

    </div>
  </section>

  <!-- ===== DIFERENÇA NO ORÇAMENTO ===== -->
  <section class="orcamento-section" style="background: #ffffff; padding: 5rem 1rem;">
    <div style="max-width: 1100px; margin: 0 auto;">
      <div style="
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        align-items: center;
      " class="orcamento-grid">

        <!-- Coluna Esquerda: Texto -->
        <div>
          <h2 style="
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            font-weight: 800;
            color: #111827;
            line-height: 1.2;
            margin-bottom: 1.5rem;
          "><span style="color: var(--green);">2x a 6x salários mínimos</span> por mês a mais no seu orçamento faria
            a diferença?</h2>

          <p style="font-size: 1.0625rem; color: #4b5563; line-height: 1.8; margin-bottom: 1rem;">
            Então o momento de agir é <strong style="color: #111827;">agora</strong>, porque essa sem dúvidas é a
            maneira mais assertiva e simples de 2026 para você <strong style="color: #111827;">aumentar sua
              renda!</strong>
          </p>

          <p style="font-size: 1.0625rem; color: #4b5563; line-height: 1.8; margin-bottom: 2rem;">
            O que vamos te ensinar vai te proporcionar <strong style="color: var(--green-darker);">realizar seus
              sonhos.</strong>
          </p>

          <div
            style="height: 3px; background: linear-gradient(90deg, var(--green), transparent); border-radius: 2px; margin-bottom: 2rem; max-width: 300px;">
          </div>

          <div style="
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-left: 4px solid var(--green);
            border-radius: 0 0.75rem 0.75rem 0;
            padding: 1.25rem 1.5rem;
          ">
            <p style="color: #374151; font-size: 0.9375rem; line-height: 1.7; margin: 0;">
              💡 Com o Método Direto ao Produto você constrói uma renda digital real, trabalhando com o que já tem em
              casa, sem precisar aparecer e sem investir em estoque.
            </p>
          </div>
        </div>

        <!-- Coluna Direita: Imagem + Botão -->
        <div style="text-align: center;">
          <img src="https://diretoaoproduto.com/wp-content/uploads/2026/03/Voce-pode-1.webp"
            alt="Você pode conquistar sua liberdade financeira" loading="lazy" style="
              width: 100%;
              max-width: 480px;
              border-radius: 1.25rem;
              box-shadow: 0 20px 50px rgba(0,0,0,0.12);
              margin-bottom: 1.75rem;
              display: block;
              margin-left: auto;
              margin-right: auto;
            " />
          <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto" class="btn-cta pulse-animation" style="color: #fff; font-size: 1.1rem;">
            👉 SIM, EU QUERO CONQUISTAR
          </a>
        </div>

      </div>
    </div>
  </section>

  <style>
    @media (min-width: 900px) {
      .orcamento-grid {
        grid-template-columns: 1fr 1fr !important;
      }
    }</style>

  <!-- ===== FAQ ===== -->
  <section class="faq-section">
    <div class="container" style="max-width: 900px;">
      <div class="text-center" style="margin-bottom: 3rem;">
        <!-- Attention Block (Dark) -->
        <div class="attention-block" style="
          background: hsl(220, 18%, 10%);
          border: 1.5px solid rgba(251, 146, 60, 0.45);
          border-radius: 1.25rem;
          padding: 2rem 2.25rem;
          margin-bottom: 2.5rem;
          box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(251,146,60,0.1);
          position: relative;
          overflow: hidden;
        ">
          <!-- subtle glow top-left -->
          <div
            style="position:absolute;top:-40px;left:-40px;width:160px;height:160px;background:radial-gradient(circle, rgba(251,146,60,0.12) 0%, transparent 70%);pointer-events:none;">
          </div>
          <!-- subtle glow bottom-right -->
          <div
            style="position:absolute;bottom:-40px;right:-40px;width:140px;height:140px;background:radial-gradient(circle, rgba(34,197,94,0.1) 0%, transparent 70%);pointer-events:none;">
          </div>

          <!-- Header row -->
          <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;">
            <div style="
              width:2.5rem;height:2.5rem;flex-shrink:0;
              background:rgba(251,146,60,0.15);
              border:1.5px solid rgba(251,146,60,0.5);
              border-radius:50%;
              display:flex;align-items:center;justify-content:center;
            ">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-400)" stroke-width="2.5"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                <line x1="12" y1="9" x2="12" y2="13" />
                <line x1="12" y1="17" x2="12.01" y2="17" />
              </svg>
            </div>
            <span
              style="font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--green-400);">Atenção
              Importante</span>
          </div>

          <!-- Line 1 -->
          <p style="font-size:1.0625rem;line-height:1.7;color:#f3f4f6;margin-bottom:1rem;font-weight:500;">
            Este método <span style="color:var(--green-400);font-weight:700;">não é um simple curso</span>, mas sim uma
            <span style="color:#4ade80;font-weight:700;">estrutura de negócio completa e validada</span>
            para você aprender, implementar e ter seus resultados!
          </p>

          <!-- Divider -->
          <div
            style="height:1px;background:linear-gradient(90deg,rgba(251,146,60,0.3),rgba(34,197,94,0.2),transparent);margin-bottom:1rem;">
          </div>

          <!-- Line 2 -->
          <p style="font-size:1.0625rem;line-height:1.7;color:#e5e7eb;margin-bottom:0.85rem;">
            Somente entre se tiver no mínimo
            <span style="color:var(--green-400);font-weight:700;">2 a 4 horas livres por semana</span>,
            um <span style="color:#4ade80;font-weight:600;">celular com internet</span>
            e interesse em aplicar o que vai aprender!
          </p>

          <!-- Line 3 -->
          <p style="font-size:1rem;line-height:1.7;color:#9ca3af;margin-bottom:0;">
            Seu sucesso dependerá do seu
            <span style="color:#4ade80;font-weight:600;">comprometimento em aplicar as técnicas</span>
            que compartilhamos, e estamos aqui para guiá-lo através de cada passo desse caminho.
          </p>
        </div>

        <h2 class="section-title" style="color: #111827; margin-bottom: 1rem; margin-top: 3rem;">Ficou alguma dúvida?
        </h2>
        <p style="font-size: 1.125rem; color: #4b5563; margin-bottom: 1.5rem;">
          Veja se alguma das respostas abaixo atende você.<br>
          Caso não, entre em contato diretamente no WhatsApp no botão abaixo, será um prazer ajudar.
        </p>
        <a href="https://wa.me/5547988014642" class="btn-cta pulse-animation"
          style="background: #25D366; color: #fff; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem;">
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor"
            style="flex-shrink:0;">
            <path
              d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.888-.788-1.487-1.761-1.663-2.063-.173-.3-.018-.465.13-.615.136-.137.301-.354.451-.531.151-.177.202-.303.303-.505.101-.202.051-.378-.024-.528-.076-.15-.67-1.618-.918-2.215-.24-.582-.486-.5-.67-.508-.173-.008-.371-.01-.571-.01-.2 0-.524.075-.798.373-.274.298-1.048 1.025-1.048 2.5s1.073 2.898 1.222 3.097c.15.2 2.11 3.226 5.11 4.516.714.308 1.27.492 1.704.63.716.228 1.368.195 1.884.118.577-.085 1.758-.718 2.006-1.412.248-.694.248-1.289.174-1.412-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
          </svg>
          ENTRAR EM CONTATO NO WHATSAPP
        </a>
      </div>

      <div class="faq-accordion">
        <div class="faq-item">
          <button class="faq-question">
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg></span>
            Como posso me inscrever no método?
          </button>
          <div class="faq-answer">
            <p>Para se inscrever, basta clicar em algum botão nesta página e efetuar o pagamento, preferencialmente por
              cartão de crédito ou pix, para ter seu acesso liberado imediatamente.</p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg></span>
            O conteúdo vai chegar em casa?
          </button>
          <div class="faq-answer">
            <p>Não, o conteúdo do método renda digital é totalmente online. Será disponibilizado para acesso em uma área
              de membros imediatamente após o pagamento no cartão e você poderá vê-lo em seu computador, tablet ou
              celular a hora que quiser.</p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg></span>
            Quais são as formas de pagamento?
          </button>
          <div class="faq-answer">
            <p>Você pode pagar com Boleto ou Cartão de Crédito ou Pix em ambiente completamente seguro. O pagamento com
              cartão de crédito garante a liberação imediata do produto.</p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg></span>
            Por quanto tempo poderei acessar o conteúdo?
          </button>
          <div class="faq-answer">
            <p>Após o pagamento, o conteúdo estará disponível por 3 anos.</p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg></span>
            E se eu não gostar do conteúdo?
          </button>
          <div class="faq-answer">
            <p>Apesar de o conteúdo ser altamente valioso, com informações de valor inestimável, você tem o direito de
              não
              gostar. É só nos avisar em até 7 dias, que devolvemos 100% do valor que pagou.</p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg></span>
            Posso compartilhar meu acesso com outras pessoas?
          </button>
          <div class="faq-answer">
            <p>Não, a plataforma reconhece o compartilhamento de ID e efetua o bloqueio automaticamente sem aviso
              prévio, pois ele reconhece isso como pirataria.</p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg></span>
            Existe algum suporte para tirar dúvidas?
          </button>
          <div class="faq-answer">
            <p>O conteúdo é muito rico em detalhes, mas se mesmo assim você tiver dúvidas, poderá entrar em contato
              diretamente pelo WhatsApp. Estamos aqui para ajudar!</p>
          </div>
        </div>

        <div class="faq-item">
          <button class="faq-question">
            <span class="faq-icon"><svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M8 5v14l11-7z" />
              </svg></span>
            Como é o formato do conteúdo?
          </button>
          <div class="faq-answer">
            <p>O conteúdo é 100% em videoaula e você também poderá baixar os arquivos apresentados no decorrer do
              método.</p>
          </div>
        </div>
      </div>

      <div class="text-center" style="margin-top: 3rem;">
        <p style="font-size: 0.875rem; color: #6b7280; margin-bottom: 2rem;">
          Notas:<br>
          *Este produto não garante a obtenção de resultados. Qualquer referência ao desempenho de uma estratégia não
          deve ser interpretada como uma garantia de resultados.
        </p>

      </div>
    </div>
  </section>

  <!-- ===== FOOTER ===== -->
  <section class="footer-section">
    <div style="max-width: 56rem; margin: 0 auto;">
      <!-- Final CTA -->
      <div class="final-cta text-center">
        <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto" class="btn-cta pulse-animation">
          SIM, QUERO COMEÇAR AGORA ➔
        </a>
      </div>

      <!-- Divider -->
      <div class="footer-divider"></div>

      <!-- Footer bottom -->
      <footer class="footer-bottom text-center">
        <a href="https://pay.diretoaoproduto.com/checkout/direto-ao-produto">
          <img src="https://diretoaoproduto.com/wp-content/uploads/2026/03/LOGO-DIRETO-AO-PRODUTO-1.jpg"
            alt="Direto ao Produto" loading="lazy" />
        </a>
        <p class="copy">2016 – 2026 – © Todos os direitos eservados | Direto ao Produto | CNPJ: 27.055.241.0001-94</p>
        <p class="disclaimer">
          Este site não é afiliado ao Facebook, Instagram, TikTok ou qualquer outra plataforma.
          Resultados individuais podem variar e dependem do esforço e dedicação de cada pessoa.
          As informações contidas nesta página são apenas para fins educacionais.
        </p>
      </footer>
    </div>
  </section>

  <!-- Image Lightbox Modal -->
  <div id="imageLightbox" class="image-modal">
    <span class="image-modal-close">&times;</span>
    <img class="image-modal-content" id="lightboxImage">
  </div>

</div>
<script>
  // Performance: set async decoding on lazy images
  document.querySelectorAll('img[loading="lazy"]').forEach(function (img) {
    img.decoding = 'async';
  });

  (function () {
    function initProducts() {
      // ===== Product cards rendering =====
      const products = [
        {
          name: 'Guarda-chuva resistente',
          image: 'https://diretoaoproduto.com/wp-content/uploads/2026/02/Produto-5.jpg',
          time: '1 ano e 16 dias desde a publicação',
          days: 381,
          platforms: [
            { name: 'Plataforma 1', value: 'R$ 180,68' },
            { name: 'Plataforma 2', value: 'R$ 432,54' },
            { name: 'Plataforma 3', value: 'R$ 0,00' },
            { name: 'Plataforma 4', value: 'R$ 83,60' },
          ],
          total: 'R$ 696,82',
        },
        {
          name: 'Lavadora Portátil de Alta Pressão',
          image: 'https://diretoaoproduto.com/wp-content/uploads/2026/02/Produto-1.jpg',
          time: '1 ano e 248 dias desde a publicação',
          days: 613,
          platforms: [
            { name: 'Plataforma 1', value: 'R$ 3.255,44' },
            { name: 'Plataforma 2', value: 'R$ 1.890,54' },
            { name: 'Plataforma 3', value: 'R$ 258,31' },
            { name: 'Plataforma 4', value: 'R$ 731,17' },
          ],
          total: 'R$ 6.135,46',
        },
        {
          name: 'Jogo de Panelas Tramontina Aço Inox',
          image: 'https://diretoaoproduto.com/wp-content/uploads/2026/02/Produto-6.jpg',
          time: '1 ano e 19 dias desde a publicação',
          days: 384,
          platforms: [
            { name: 'Plataforma 1', value: 'R$ 780,68' },
            { name: 'Plataforma 2', value: 'R$ 932,54' },
            { name: 'Plataforma 3', value: 'R$ 32,23' },
            { name: 'Plataforma 4', value: 'R$ 151,67' },
          ],
          total: 'R$ 1.897,12',
        },
        {
          name: 'Smart TV LG 55" 4K UHD',
          image: 'https://diretoaoproduto.com/wp-content/uploads/2026/02/Produto-2.jpg',
          time: '147 dias desde a publicação',
          days: 147,
          platforms: [
            { name: 'Plataforma 1', value: 'R$ 2.780,00' },
            { name: 'Plataforma 2', value: 'R$ 2.390,54' },
            { name: 'Plataforma 3', value: 'R$ 141,28' },
            { name: 'Plataforma 4', value: 'R$ 537,02' },
          ],
          total: 'R$ 5.848,84',
        },
        {
          name: 'Bicicleta Spinning Ergométrica',
          subtitle: '(Sem Mostrar O Rosto)',
          image: 'https://diretoaoproduto.com/wp-content/uploads/2026/02/Produto-3.jpg',
          time: '3 anos e 335 dias desde a publicação',
          days: 1430,
          platforms: [
            { name: 'Plataforma 1', value: 'R$ 3.846,99' },
            { name: 'Plataforma 2', value: 'R$ 6.390,54' },
            { name: 'Plataforma 3', value: 'R$ 678,14' },
            { name: 'Plataforma 4', value: 'R$ 788,93' },
          ],
          total: 'R$ 11.704,60',
        },
        {
          name: 'Smart TV TCL 55 Polegadas',
          image: 'https://diretoaoproduto.com/wp-content/uploads/2026/02/Produto-4.jpg',
          time: 'Apenas 32 dias desde a publicação',
          days: 32,
          platforms: [
            { name: 'Plataforma 1', value: 'R$ 508,08' },
            { name: 'Plataforma 2', value: 'R$ 632,80' },
            { name: 'Plataforma 3', value: 'R$ 0,00' },
            { name: 'Plataforma 4', value: 'R$ 137,42' },
          ],
          total: 'R$ 1.278,30',
        },
      ];

      const grid = document.getElementById('products-grid');

      // Helper for currency parsing
      const parseCurrencyStr = (str) => {
        if (!str.includes('R$')) return 0;
        return parseFloat(str.replace('R$', '').trim().replace(/\./g, '').replace(',', '.'));
      };

      products.forEach(product => {
        const card = document.createElement('div');
        card.className = 'product-card glass card-hover shine';

        let subtitleHTML = '';
        if (product.subtitle) {
          subtitleHTML = `<p class="product-subtitle">${product.subtitle}</p>`;
        }

        let platformsHTML = product.platforms.map(p => {
          const numericVal = parseCurrencyStr(p.value);
          return `<div class="platform-row">
          <span class="name">${p.name}:</span>
          <span class="value animate-currency" data-target="${numericVal}">R$ 0,00</span>
        </div>`;
        }).join('');

        const totalNumeric = parseCurrencyStr(product.total);

        // --- Time-based bar chart ---
        // Each bar = ~2 weeks. min 4, max 16 bars.
        const days = product.days;
        const numBars = Math.min(16, Math.max(4, Math.round(days / 14)));
        const barHeights = [];

        for (let i = 0; i < numBars; i++) {
          const progress = i / (numBars - 1); // 0 → 1

          let trend;
          if (days < 60) {
            // Short: fast ramp, plateaus quickly
            trend = 10 + (Math.pow(progress, 0.5) * 85);
          } else if (days < 200) {
            // Medium: steady linear growth
            trend = 12 + (progress * 80);
          } else {
            // Long: slow start, then high stable earnings
            trend = 8 + (Math.pow(progress, 0.4) * 88);
          }

          const volatility = days < 100 ? 24 : 16;
          const noise = (Math.random() - 0.4) * volatility;
          let h = trend + noise;
          if (h < 5) h = 5;
          if (h > 100) h = 100;
          barHeights.push(h);
        }

        // First bar: minimal (just published), last bar: peak
        barHeights[0] = 4 + Math.random() * 8;
        barHeights[numBars - 1] = 90 + Math.random() * 10;

        const barsHTML = barHeights.map((h, i) => {
          const delay = (i * 0.06).toFixed(2);
          const alpha = 0.3 + (h / 100) * 0.7;
          const bg = `linear-gradient(to top, rgba(34, 197, 94, ${(alpha * 0.55).toFixed(2)}), rgba(74, 222, 128, ${alpha.toFixed(2)}))`;
          return `<div class="bar-item" style="height: ${h}%; background: ${bg}; transition-delay: ${delay}s;"></div>`;
        }).join('');

        // uid kept for potential future SVG needs
        const uid = Date.now() + '-' + Math.floor(Math.random() * 9999);


        card.innerHTML = `
        <div class="product-image">
          <img src="${product.image}" alt="${product.name}" loading="lazy" />
          <div class="overlay"></div>
          <div class="product-name">
            <h3>${product.name}</h3>
            ${subtitleHTML}
          </div>
        </div>
        <div class="product-details">
          <div class="product-time" style="margin-bottom: 0;">
            <span class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span>
            <span>${product.time}</span>
          </div>
          <div class="bar-chart-container">
            ${barsHTML}
          </div>
          <p class="platforms-label">Receitas estimadas:</p>
          ${platformsHTML}
          <div class="product-total">
            <span class="label">
              <span class="icon"><svg viewBox="0 0 24 24"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg></span>
              Ganho estimado total:
            </span>
            <span class="amount animate-currency" data-target="${totalNumeric}">R$ 0,00</span>
          </div>
        </div>
      `;
        grid.appendChild(card);
      });

      // Counter animation logic
      const animateValue = (element, start, end, duration, isCurrency, isPercent) => {
        let startTimestamp = null;
        const step = (timestamp) => {
          if (!startTimestamp) startTimestamp = timestamp;
          const progress = Math.min((timestamp - startTimestamp) / duration, 1);

          // Starts fast and gets progressively slower (Quintic Ease-Out)
          const easeOut = t => 1 - Math.pow(1 - t, 5);
          const currentVal = start + (easeOut(progress) * (end - start));

          if (isCurrency) {
            element.innerHTML = 'R$ ' + currentVal.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
          } else if (isPercent) {
            element.innerHTML = Math.floor(currentVal) + '%';
          } else {
            element.innerHTML = Math.floor(currentVal);
          }

          if (progress < 1) {
            window.requestAnimationFrame(step);
          } else {
            // Ensure final exact value
            if (isCurrency) {
              element.innerHTML = 'R$ ' + end.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            } else if (isPercent) {
              element.innerHTML = end + '%';
            } else {
              element.innerHTML = end;
            }
          }
        };
        window.requestAnimationFrame(step);
      };

      // Intersection Observer to trigger animations
      const observerOptions = {
        threshold: 0.1,
        rootMargin: "0px 0px -50px 0px"
      };

      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const target = entry.target;

            // Trigger for trust cards
            if (target.classList.contains('animate-number') && !target.dataset.animated) {
              target.dataset.animated = "true";
              const endVal = parseFloat(target.dataset.target);
              const isPercent = target.dataset.isPercent === "true";
              // Slower duration for trust cards
              animateValue(target, 0, endVal, 4000, false, isPercent);
            }

            // Trigger for product cards
            if (target.classList.contains('product-card') && !target.dataset.animated) {
              target.dataset.animated = "true";
              const amounts = target.querySelectorAll('.animate-currency');
              amounts.forEach((el, index) => {
                const endVal = parseFloat(el.dataset.target);
                setTimeout(() => {
                  animateValue(el, 0, endVal, 3500, true, false);
                }, index * 150);
              });

              // Animate the bar chart
              target.classList.add('chart-animate');
            }
          }
        });
      }, observerOptions);

      // Apply observer to trust cards
      document.querySelectorAll('.animate-number').forEach(el => observer.observe(el));

      // Apply observer to product cards
      document.querySelectorAll('.product-card').forEach(el => observer.observe(el));

      // Video interaction to stop animation
      const videoContainer = document.getElementById('presentation-video');
      if (videoContainer) {
        const stopVideoAnimation = () => {
          if (videoContainer.classList.contains('video-attention')) {
            videoContainer.classList.remove('video-attention');
          }
        };
        // Stop the attention pulse only when the user actually clicks the video
        videoContainer.addEventListener('click', stopVideoAnimation, { once: true });
      }
    }

    // ===== FAQ Accordion =====
    const faqItems = document.querySelectorAll('.faq-item');
    faqItems.forEach((item, index) => {
      const question = item.querySelector('.faq-question');
      const answer = item.querySelector('.faq-answer');
      if (!question || !answer) return;

      const answerId = `faq-answer-${index + 1}`;
      answer.id = answerId;
      answer.setAttribute('aria-hidden', 'true');
      question.setAttribute('aria-controls', answerId);
      question.setAttribute('aria-expanded', 'false');

      question.addEventListener('click', () => {
        const isActive = item.classList.contains('active');

        // Close all
        faqItems.forEach(faq => {
          faq.classList.remove('active');
          const faqQuestion = faq.querySelector('.faq-question');
          const faqAnswer = faq.querySelector('.faq-answer');
          if (!faqQuestion || !faqAnswer) return;
          faqQuestion.setAttribute('aria-expanded', 'false');
          faqAnswer.setAttribute('aria-hidden', 'true');
          faqAnswer.style.maxHeight = null;
        });

        // Toggle current
        if (!isActive) {
          item.classList.add('active');
          answer.setAttribute('aria-hidden', 'false');
          question.setAttribute('aria-expanded', 'true');
          answer.style.maxHeight = answer.scrollHeight + 'px';
        }
      });
    });

    // ===== Benefit Card Dropdowns =====
    document.querySelectorAll('.benefit-dropdown-card').forEach((card, index) => {
      const header = card.querySelector('.benefit-dropdown-header');
      const body = card.querySelector('.benefit-dropdown-body');
      if (header && body) {
        const bodyId = `benefit-dropdown-body-${index + 1}`;
        body.id = bodyId;
        body.setAttribute('aria-hidden', 'true');
        header.setAttribute('role', 'button');
        header.setAttribute('tabindex', '0');
        header.setAttribute('aria-controls', bodyId);
        header.setAttribute('aria-expanded', 'false');

        const toggleBenefit = () => {
          const isOpen = card.classList.contains('open');
          card.classList.toggle('open', !isOpen);
          header.setAttribute('aria-expanded', String(!isOpen));
          body.setAttribute('aria-hidden', String(isOpen));
          body.style.maxHeight = isOpen ? null : body.scrollHeight + 'px';
        };

        header.addEventListener('click', toggleBenefit);
        header.addEventListener('keydown', (event) => {
          if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            toggleBenefit();
          }
        });
      }
    });

    function runWhenIdle(callback) {
      if ('requestIdleCallback' in window) {
        requestIdleCallback(callback, { timeout: 1200 });
      } else {
        setTimeout(callback, 250);
      }
    }

    function scheduleProductsInit() {
      const grid = document.getElementById('products-grid');
      if (!grid || grid.dataset.initialized === 'true') return;

      const boot = function () {
        if (grid.dataset.initialized === 'true') return;
        grid.dataset.initialized = 'true';
        runWhenIdle(initProducts);
      };

      if (!('IntersectionObserver' in window)) {
        boot();
        return;
      }

      const lazyObserver = new IntersectionObserver(function (entries, obs) {
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;
          boot();
          obs.disconnect();
        });
      }, { rootMargin: '300px 0px' });

      lazyObserver.observe(grid);
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', scheduleProductsInit, { once: true });
    } else {
      scheduleProductsInit();
    }
  })();

  // ===== Hero Highlight Sweep Animation =====
  (function initHighlightSweep() {
    const container = document.getElementById('hero-highlight-text');
    if (!container) return;

    const phrases = container.querySelectorAll('.highlight-phrase');
    if (phrases.length === 0) return;

    let currentIndex = -1;
    let isRunning = false;
    const HIGHLIGHT_DURATION = 1200;  // ms each phrase stays highlighted
    const PAUSE_BETWEEN = 400;        // ms pause between phrases
    const CYCLE_PAUSE = 2000;         // ms pause before restarting cycle

    function highlightNext() {
      // Remove active from previous
      if (currentIndex >= 0 && currentIndex < phrases.length) {
        phrases[currentIndex].classList.remove('active');
      }

      currentIndex++;

      // If we've gone through all phrases, pause and restart
      if (currentIndex >= phrases.length) {
        currentIndex = -1;
        setTimeout(highlightNext, CYCLE_PAUSE);
        return;
      }

      // Add active to current
      phrases[currentIndex].classList.add('active');

      // Schedule removal and next
      setTimeout(() => {
        if (isRunning) {
          highlightNext();
        }
      }, HIGHLIGHT_DURATION + PAUSE_BETWEEN);
    }

    // Start when the hero section becomes visible
    const heroObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !isRunning) {
          isRunning = true;
          // Small initial delay for elegance
          setTimeout(highlightNext, 800);
        } else if (!entry.isIntersecting) {
          isRunning = false;
          currentIndex = -1;
          phrases.forEach(p => p.classList.remove('active'));
        }
      });
    }, { threshold: 0.3 });

    heroObserver.observe(container);
  })();

  // Image Modal / Lightbox JS Logic
  document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById("imageLightbox");
    const modalImg = document.getElementById("lightboxImage");
    const closeBtn = document.querySelector(".image-modal-close");
    const images = document.querySelectorAll('.lightbox-img');
    if (!modal || !modalImg || !closeBtn || images.length === 0) return;

    images.forEach(img => {
      img.addEventListener('click', function () {
        modal.style.display = "flex";
        setTimeout(() => modal.classList.add("show"), 10);
        modalImg.src = this.src;
        // Optionally prevent scrolling on body
        document.body.style.overflow = "hidden";
      });
    });

    const closeModal = () => {
      modal.classList.remove("show");
      setTimeout(() => {
        modal.style.display = "none";
        document.body.style.overflow = "auto";
      }, 300);
    };

    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        closeModal();
      }
    });
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && modal.classList.contains('show')) {
        closeModal();
      }
    });
  });

  // ===== Bio Dropdown Toggle =====
  function toggleBio() {
    const body = document.getElementById('bio-body');
    const btn = document.querySelector('.bio-toggle');
    const icon = document.querySelector('.bio-toggle-icon');
    const text = document.querySelector('.bio-toggle-text');
    const isOpen = body.style.maxHeight && body.style.maxHeight !== '0px';

    if (isOpen) {
      body.style.maxHeight = '0px';
      icon.classList.remove('open');
      text.textContent = 'Conhecer mais...';
      btn.setAttribute('aria-expanded', 'false');
    } else {
      body.style.maxHeight = body.scrollHeight + 'px';
      icon.classList.add('open');
      text.textContent = 'Recolher';
      btn.setAttribute('aria-expanded', 'true');
    }
  }

  var hoje = new Date();

  var diaHoje = hoje.getDate();
  var mesHoje = hoje.toLocaleString('pt-BR', { month: 'long' }).toUpperCase();

  var ontem = new Date(hoje);
  ontem.setDate(hoje.getDate() - 1);
  var diaOntem = ontem.getDate();

  var antesDeOntem = new Date(hoje);
  antesDeOntem.setDate(hoje.getDate() - 2);
  var diaAntesDeOntem = antesDeOntem.getDate();

  if (document.getElementById('antesDeOntem')) {
    document.getElementById('antesDeOntem').innerHTML = diaAntesDeOntem;
  }
  if (document.getElementById('heroAntesDeOntem')) {
    document.getElementById('heroAntesDeOntem').innerHTML = diaAntesDeOntem;
  }
  if (document.getElementById('ontem')) {
    document.getElementById('ontem').innerHTML = diaOntem;
  }
  if (document.getElementById('heroOntem')) {
    document.getElementById('heroOntem').innerHTML = diaOntem;
  }
  if (document.getElementById('hoje')) {
    document.getElementById('hoje').innerHTML = diaHoje + ' DE ' + mesHoje;
  }
  if (document.getElementById('heroHoje')) {
    document.getElementById('heroHoje').innerHTML = diaHoje + ' DE ' + mesHoje;
  }

  function updateOfertaCountdown() {
    var countdownEls = [
      document.getElementById('countdownOferta'),
      document.getElementById('heroCountdownOferta')
    ].filter(Boolean);
    if (!countdownEls.length) return;

    var now = new Date();
    var nextMidnight = new Date(now);
    nextMidnight.setHours(24, 0, 0, 0);

    var diff = nextMidnight - now;
    var hours = Math.floor(diff / 3600000);
    var minutes = Math.floor((diff % 3600000) / 60000);
    var seconds = Math.floor((diff % 60000) / 1000);

    var countdownText =
      String(hours).padStart(2, '0') + ':' +
      String(minutes).padStart(2, '0') + ':' +
      String(seconds).padStart(2, '0');

    countdownEls.forEach(function (el) {
      el.textContent = countdownText;
    });
  }

  updateOfertaCountdown();
  setInterval(updateOfertaCountdown, 1000);

  function prepareStableScrollToPlanos() {
    document.querySelectorAll('.method, .why-for-you, .zero-barriers, .what-you-need, .why-results, .results, .authors, .faq-section, .footer-section').forEach(function (section) {
      section.style.contentVisibility = 'visible';
      section.style.containIntrinsicSize = 'auto';
    });
  }

  // ===== Smooth Scroll para todas as âncoras internas =====
  document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
    anchor.addEventListener('click', function (e) {
      var targetId = this.getAttribute('href').slice(1);
      if (!targetId) return;
      var target = document.getElementById(targetId);
      if (!target) return;
      e.preventDefault();
      if (targetId === 'planos') {
        prepareStableScrollToPlanos();
        requestAnimationFrame(function () {
          requestAnimationFrame(function () {
            target.scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            });

            // Realinha no final da animação para evitar quebras por reflow.
            setTimeout(function () {
              target.scrollIntoView({
                behavior: 'auto',
                block: 'start'
              });
            }, 700);
          });
        });
        return;
      }
      var offset = 20;
      var targetTop = target.getBoundingClientRect().top + window.pageYOffset - offset;
      window.scrollTo({
        top: targetTop,
        behavior: 'smooth'
      });
    });
  });
</script>