*, *::before, *::after { box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; color: #111111; background: #FFFFFF; overflow-x: hidden; }
    h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; }

    /* Scrollbar personalizada */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #F4F7F5; }
    ::-webkit-scrollbar-thumb { background: #0B3D2E; border-radius: 3px; }

    /* Animações de entrada */
    .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* Respeitar preferência de movimento reduzido */
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .hero-moto-svg, .float-card, .blob { animation: none !important; }
    }

    /* Hero motorcycle pulse sutil */
    @keyframes motoPulse {
      0%, 100% { filter: drop-shadow(0 0 20px rgba(34,197,94,0.2)); }
      50% { filter: drop-shadow(0 0 40px rgba(34,197,94,0.4)); }
    }
    .hero-moto-svg { animation: motoPulse 4s ease-in-out infinite; }

    /* Cartão flutuante */
    @keyframes floatY {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    .float-card { animation: floatY 5s ease-in-out infinite; }

    /* Blob orgânico */
    @keyframes blobMove {
      0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg) scale(1); }
      25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(90deg) scale(1.05); }
      50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; transform: rotate(180deg) scale(1); }
      75% { border-radius: 60% 30% 60% 40% / 70% 40% 50% 60%; transform: rotate(270deg) scale(1.05); }
    }
    .blob { animation: blobMove 20s ease-in-out infinite; }

    /* FAQ accordion */
    .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), padding 0.3s ease; }
    .faq-content.open { max-height: 500px; }
    .faq-chevron { transition: transform 0.3s ease; }
    .faq-chevron.rotated { transform: rotate(180deg); }

    /* Range slider custom */
    input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #E5E7EB; outline: none; }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #22C55E; cursor: pointer; border: 3px solid #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.15s ease; }
    input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
    input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #22C55E; cursor: pointer; border: 3px solid #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
    input[type="range"]:focus-visible { outline: 2px solid #22C55E; outline-offset: 4px; border-radius: 3px; }

    /* Toast */
    @keyframes toastIn { from { transform: translateY(100%) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
    @keyframes toastOut { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(100%) scale(0.9); opacity: 0; } }
    .toast-enter { animation: toastIn 0.4s cubic-bezier(0.22,1,0.36,1) forwards; }
    .toast-exit { animation: toastOut 0.3s ease forwards; }

    /* Mobile menu */
    .mobile-menu-overlay { transition: opacity 0.3s ease; }
    .mobile-menu-panel { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }

    /* Questionário steps */
    .finder-step { display: none; }
    .finder-step.active { display: block; animation: fadeSlideIn 0.4s ease forwards; }
    @keyframes fadeSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

    /* Cor selecionada */
    .color-swatch { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .color-swatch.selected { transform: scale(1.25); box-shadow: 0 0 0 3px #0B3D2E, 0 0 0 5px #FFFFFF; }

    /* Card hover */
    .moto-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .moto-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(11,61,46,0.15); }

    /* Botão primário */
    .btn-primary { transition: all 0.2s ease; }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -4px rgba(34,197,94,0.4); }
    .btn-primary:active { transform: translateY(0); }

    /* Progresso do questionário */
    .progress-fill { transition: width 0.5s cubic-bezier(0.22,1,0.36,1); }

    /* Modelo page galeria */
    .model-color-bg { transition: background-color 0.5s ease; }

    /* Filtros bottom sheet mobile */
    .filter-sheet { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }

    /* Focus visible global */
    :focus-visible { outline: 2px solid #22C55E; outline-offset: 2px; border-radius: 4px; }
    button:focus-visible, a:focus-visible { outline: 2px solid #22C55E; outline-offset: 2px; }

    /* Número animado */
    .sim-number { transition: all 0.3s ease; }

    /* Product cards v4.4 */
    .moto-card {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      border-color: rgba(11, 61, 46, 0.10);
      box-shadow: 0 10px 30px -24px rgba(11, 61, 46, 0.45);
    }
    .moto-card:hover {
      transform: translateY(-5px);
      border-color: rgba(34, 197, 94, 0.28);
      box-shadow: 0 24px 55px -28px rgba(11, 61, 46, 0.45);
    }
    .moto-card-media {
      position: relative;
      height: 230px;
      overflow: hidden;
      background:
        radial-gradient(circle at 72% 18%, rgba(34,197,94,.12), transparent 31%),
        linear-gradient(145deg, #F8FBF9 0%, #FFFFFF 54%, #EFF7F2 100%);
      border-bottom: 1px solid rgba(11, 61, 46, .06);
    }
    .moto-card-media::after {
      content: '';
      position: absolute;
      width: 145px;
      height: 145px;
      right: -48px;
      bottom: -72px;
      border-radius: 999px;
      background: rgba(34, 197, 94, .08);
      pointer-events: none;
    }
    .moto-card-image {
      position: absolute;
      inset: 12px 14px 7px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .moto-card-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 16px 16px rgba(17, 24, 20, .14));
      transition: transform .45s cubic-bezier(.22,1,.36,1);
    }
    .moto-card:hover .moto-card-image img { transform: scale(1.045); }
    .moto-card-badge,
    .moto-card-stock {
      position: absolute;
      top: 13px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 10px;
      line-height: 1;
      font-weight: 700;
      box-shadow: 0 6px 16px rgba(11,61,46,.10);
      backdrop-filter: blur(8px);
    }
    .moto-card-badge {
      left: 13px;
      max-width: calc(100% - 115px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: rgba(255,255,255,.94);
      color: #0B3D2E;
      border: 1px solid rgba(11,61,46,.08);
    }
    .moto-card-stock {
      right: 13px;
      background: #0B3D2E;
      color: #FFFFFF;
      border: 1px solid rgba(255,255,255,.20);
    }
    .moto-card-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 18px;
    }
    .moto-card-title { min-height: 44px; }
    .moto-card-actions { margin-top: auto; }
    @media (max-width: 639px) {
      .moto-card-media { height: 250px; }
      .moto-card-title { min-height: auto; }
    }

    /* UX master v3 */
    .icon-action { transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; }
    .icon-action:hover { transform: translateY(-1px); }
    .icon-action.is-active { background:#0B3D2E; color:#fff; border-color:#0B3D2E; }
    .draft-visual::after {
      content:"Imagem oficial pendente";
      position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
      padding:5px 9px; border-radius:999px; font-size:10px; font-weight:700;
      letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.88);
      background:rgba(0,0,0,.28); backdrop-filter:blur(6px); white-space:nowrap;
    }
    .compare-bar { transform:translate(-50%, 140%); opacity:0; visibility:hidden; pointer-events:none; transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease, visibility .25s ease; }
    .compare-bar.visible { transform:translate(-50%, 0); opacity:1; visibility:visible; pointer-events:auto; }
    .master-modal { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s ease; }
    .master-modal.open { opacity:1; visibility:visible; pointer-events:auto; }
    .master-modal-panel { transform:translateY(18px) scale(.98); opacity:0; transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
    .master-modal.open .master-modal-panel { transform:none; opacity:1; }
    .compare-table { min-width:760px; }
    .search-clear { opacity:0; pointer-events:none; transition:opacity .2s ease; }
    .search-clear.visible { opacity:1; pointer-events:auto; }



    /* Hero carousel — 4 modelos, rotação a cada 8 segundos */
    .hero-carousel-stage {
      position: relative;
      width: 100%;
      min-height: 430px;
    }
    .hero-carousel-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(22px) scale(.965);
      transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1),
        visibility .7s;
      z-index: 1;
    }
    .hero-carousel-slide.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(0) scale(1);
      z-index: 3;
    }
    .hero-carousel-slide .hero-moto-svg,
    .hero-carousel-slide .float-card { animation: none; }
    .hero-carousel-slide.is-active .hero-moto-svg { animation: motoPulse 4s ease-in-out infinite; }
    .hero-carousel-slide.is-active .float-card { animation: floatY 5s ease-in-out infinite; }
    .hero-carousel-image {
      width: 390px;
      height: 390px;
      object-fit: contain;
      filter: drop-shadow(0 26px 28px rgba(0,0,0,.24));
    }
    .hero-carousel-dots {
      position: absolute;
      left: 50%;
      bottom: 3px;
      transform: translateX(-50%);
      z-index: 8;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
    }
    .hero-carousel-dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.38);
      transition: width .3s ease, background-color .3s ease, transform .3s ease;
    }
    .hero-carousel-dot:hover { transform: scale(1.15); background: rgba(255,255,255,.72); }
    .hero-carousel-dot.is-active { width: 25px; background: #22C55E; }
    .hero-carousel-arrow {
      position: absolute;
      top: 48%;
      transform: translateY(-50%);
      z-index: 8;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px);
      opacity: .72;
      transition: opacity .2s ease, background-color .2s ease, transform .2s ease;
    }
    .hero-carousel-arrow:hover {
      opacity: 1;
      background: rgba(34,197,94,.9);
      transform: translateY(-50%) scale(1.05);
    }
    .hero-carousel-arrow.prev { left: 1px; }
    .hero-carousel-arrow.next { right: 1px; }
    .hero-carousel-card-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 7px;
      font-size: 11px;
      font-weight: 700;
      color: #0B3D2E;
    }
    @media (min-width: 640px) {
      .hero-carousel-stage { min-height: 480px; }
      .hero-carousel-image { width: 430px; height: 430px; }
      .hero-carousel-arrow.prev { left: -4px; }
      .hero-carousel-arrow.next { right: -4px; }
    }
    @media (min-width: 1024px) {
      .hero-carousel-stage { min-height: 560px; }
      .hero-carousel-image { width: 500px; height: 500px; }
      .hero-carousel-arrow.prev { left: -18px; }
      .hero-carousel-arrow.next { right: -18px; }
    }
    @media (max-width: 639px) {
      .hero-carousel-arrow { width: 36px; height: 36px; top: 43%; }
      .hero-carousel-dots { bottom: -2px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-carousel-slide { transition: none !important; }
      .hero-carousel-slide .hero-moto-svg,
      .hero-carousel-slide .float-card { animation: none !important; }
    }