@font-face {
  font-family: MCL Regular;
  src: url(/assets/fonts/mcl-regular.woff2) format("woff2");
}

@font-face {
  font-family: MCL bold;
  src: url(/assets/fonts/mcl-bold.woff2) format("woff2");
}

html, body {
  overflow-x: clip;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #ff6b00 transparent;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #ff6b00;
  border-radius: 2px;
}

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background: #121212;
  font-family: 'MCL Regular', sans-serif;
  color: #ffffff;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Produtos - transição */
#prodInfo, #productsSection video {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#prodInfo.switching {
  opacity: 0;
  transform: translateY(16px);
}

/* Círculos - Como Funciona */
.circle-reveal {
  opacity: 0;
  transform: scale(0.7) translateY(50px);
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.circle-reveal.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.circle-reveal:nth-child(2) { transition-delay: 0.18s; }
.circle-reveal:nth-child(3) { transition-delay: 0.36s; }

#mobileMenu {
  transform-origin: top right;
  transform: scale(0.85);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

#mobileMenu.menu-open {
  display: block;
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Logo 3D flutuando */
@keyframes float3d {
  0%   { transform: perspective(600px) rotateY(-20deg) rotateX(8deg) translateY(0px); }
  25%  { transform: perspective(600px) rotateY(10deg)  rotateX(-5deg) translateY(-10px); }
  50%  { transform: perspective(600px) rotateY(22deg)  rotateX(10deg) translateY(-4px); }
  75%  { transform: perspective(600px) rotateY(-8deg)  rotateX(-8deg) translateY(-12px); }
  100% { transform: perspective(600px) rotateY(-20deg) rotateX(8deg)  translateY(0px); }
}

.logo-3d-inner {
  animation: float3d 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* Marquee horizontal infinito — animado via JS */
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

 .client-logo-card { flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:14px 28px; border-radius:18px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); transition:background 0.2s, border-color 0.2s; cursor:default; }
    .client-logo-card:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.18); }
    .client-logo-card img { height:28px; object-fit:contain; filter:brightness(0) invert(1); opacity:0.35; transition:opacity 0.25s; max-width:140px; }
    .client-logo-card:hover img { opacity:0.75; }

/* Tech cards hover */
.tech-card {
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tech-card:hover {
  background: #222222;
  border-color: rgba(255,107,0,0.3);
}

/* Como Funciona - mobile: remove negative margin e centraliza */
@media (max-width: 767px) {
  .circle-overlap {
    margin-right: 0 !important;
    width: 240px !important;
    height: 240px !important;
  }
}

    .cf-field { display:flex; flex-direction:column; gap:6px; }
    .cf-label { color:rgba(255,255,255,0.4); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; font-family:monospace; }
    .cf-input { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:13px 16px; color:white; font-size:14px; outline:none; width:100%; box-sizing:border-box; font-family:inherit; transition:border-color 0.2s; }
    .cf-input:focus { border-color:rgba(255,107,0,0.5); }
    .cf-input::placeholder { color:rgba(255,255,255,0.2); }
    .budget-btn:hover { background:rgba(255,107,0,0.12) !important; border-color:rgba(255,107,0,0.4) !important; color:white !important; }
    .budget-btn.selected { background:rgba(255,107,0,0.18) !important; border-color:#ff6b00 !important; color:white !important; }

    
    .prod-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 80px; }

    .tag { display: inline-block; border: 1px solid #ff6b00; color: #ff6b00; font-size: 11px; font-weight: 500; padding: 5px 16px; border-radius: 999px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 28px; }

    .prod-title { font-size: clamp(3.5rem, 9vw, 8rem); font-weight: 900; line-height: .95; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 32px; }

    .prod-desc { color: rgba(255,255,255,.55); font-size: 1.1rem; line-height: 1.7; max-width: 520px; margin-bottom: 40px; }

    .feature-list { list-style: none; padding: 0; margin: 0 0 48px; display: flex; flex-direction: column; gap: 12px; }
    .feature-list li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.5; }
    .feature-list li::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #ff6b00; margin-top: 7px; flex-shrink: 0; }

    .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #ff6b00; color: #fff; font-weight: 700; font-size: .9rem; padding: 14px 28px; border-radius: 999px; text-decoration: none; transition: background .2s; border: none; cursor: pointer; }
    .btn-primary:hover { background: #ff9f00; }
    .btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .9rem; padding: 14px 28px; border-radius: 999px; text-decoration: none; transition: border-color .2s; }
    .btn-outline:hover { border-color: rgba(255,255,255,.6); }

    .divider { width: 100%; height: 1px; background: rgba(255,255,255,.07); }

    /* Sidebar nav */
    .side-nav { position: fixed; left: 32px; top: 50%; transform: translateY(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; }
    .side-nav a { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.3); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
    .side-nav a:hover, .side-nav a.active { color: #fff; }
    .side-nav a::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transition: width .3s, background .2s; }
    .side-nav a.active::before { width: 20px; border-radius: 2px; background: #ff6b00; }

    @media (max-width: 768px) { .side-nav { display: none; } }

    .visual-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; overflow: hidden; }

    /* produto 1 */
    #simple-card { background: #222222; }
    /* produto 2 */
    #dealers-experience { background: #ff6b00; }
    /* produto 3 */
    #dealers-review { background: #222222; }
    /* produto 4 */
    #tag-dealers { background: #222222; }

    
    /* Video bg fade */
    #bgVideo { transition: opacity .5s ease; }

    /* Carousel item */
    .c-item {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .04em;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform .3s ease, border-color .3s ease, opacity .3s ease;
      user-select: none;
      position: relative;
    }
    .c-item:hover { transform: scale(1.08); }
    .c-item.active { border-color: #ff6b00; }
    .c-item:not(.active) { opacity: .5; }

    /* Popup card */
    #popup {
      position: absolute;
      bottom: calc(100% + 16px);
      background: #fff;
      color: #121212;
      border-radius: 20px;
      padding: 20px 20px 16px;
      width: 200px;
      box-shadow: 0 20px 56px rgba(0,0,0,.45);
      transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1), left .45s cubic-bezier(.77,0,.18,1);
      pointer-events: none;
    }
    #popup.hidden { opacity:0; transform: translateY(10px) scale(.96); }

    /* Feature tags inside popup */
    .pop-tag {
      display: inline-block;
      background: rgba(0,0,0,.07);
      color: #121212;
      font-size: 10px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 999px;
      letter-spacing: .05em;
    }

    /* Arrow button */
    .arr-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.2);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .2s;
    }
    .arr-btn:hover { background: rgba(255,255,255,.28); }

    /* Title transition */
    #heroTitle, #heroSub {
      transition: opacity .4s ease, transform .4s ease;
    }
    #heroTitle.fade { opacity:0; transform: translateY(12px); }
    #heroSub.fade   { opacity:0; transform: translateY(8px); }

    /* Panel info fade */
    #panelInfo {
      transition: opacity .3s ease;
    }
    #panelInfo.fade { opacity:0; }

    @media (max-width:640px) {
      .c-item { width:46px; height:46px; font-size:10px; }
      #popup { width:170px; }
      #heroTitle { font-size: 2.6rem !important; }
      body { height: 500vh; }
    }

/* ── Parceiras: scroll-driven spread ── */
.partner-card-left,
.partner-card-right {
  flex: 1;
  min-width: 0;
  will-change: transform;
}
.partner-center {
  flex-shrink: 0;
}

 /* ── Wrap principal ── */
    .detail-wrap {
      display: flex;
      height: 100vh;
    }

    /* ── Painel esquerdo: vídeo ── */
    .video-panel {
      flex: 1;
      position: relative;
      overflow: hidden;
      background: #121212;
    }
    #bgVideo {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease;
    }
    .video-overlay {
      position: absolute; inset: 0;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.55) 100%),
        linear-gradient(105deg, rgba(0,0,0,.55) 0%, transparent 65%);
    }
    .video-slogan {
      position: absolute;
      bottom: 112px; left: 48px; right: 48px;
      transition: opacity .4s ease;
    }
    .video-slogan h2 {
      font-size: clamp(1.5rem, 2.8vw, 2.6rem);
      font-weight: 400;
      line-height: 1.35;
      color: #fff;
      margin: 0 0 10px;
      letter-spacing: -.01em;
    }
    .video-slogan span {
      font-size: 12px;
      color: rgba(255,255,255,.5);
      letter-spacing: .12em;
      font-family: monospace;
      text-transform: uppercase;
    }

    /* ── Painel direito: informações (branco) ── */
    .info-panel {
      width: clamp(280px, 27vw, 370px);
      background: #fff;
      color: #121212;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      flex-shrink: 0;
      scrollbar-width: thin;
      scrollbar-color: #ff6b00 transparent;
    }
    #infoInner {
      padding: 32px 26px 110px;
      transition: opacity .35s ease;
    }

    /* Title */
    .prod-title {
      font-size: clamp(1.7rem, 2.4vw, 2.1rem);
      font-weight: 900;
      line-height: 1.1;
      color: #121212;
      margin: 0 0 22px;
      text-transform: uppercase;
      letter-spacing: -.025em;
    }

    /* Top actions */
    .top-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 26px;
    }
    .type-badge {
      display: inline-flex;
      align-items: center;
      background: #ff6b00;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 7px 18px;
      border-radius: 999px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .share-btn {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,.14);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .2s;
    }
    .share-btn:hover { background: rgba(0,0,0,.04); }

    /* Meta rows */
    .meta-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 13px 0;
      border-bottom: 1px solid rgba(0,0,0,.07);
      gap: 12px;
    }
    .meta-label {
      color: rgba(0,0,0,.42);
      font-size: 12px;
      letter-spacing: .04em;
      flex-shrink: 0;
    }
    .meta-value {
      color: #121212;
      font-size: 13px;
      font-weight: 500;
      text-align: right;
    }
    .meta-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    /* Feature cards */
    .section-label {
      margin: 26px 0 14px;
      font-size: 11px;
      color: rgba(0,0,0,.38);
      letter-spacing: .1em;
      text-transform: uppercase;
      font-family: monospace;
    }
    .feature-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* ── Nav inferior ── */
    .bottom-nav {
      position: fixed;
      bottom: 24px;
      left: 0;
      right: clamp(280px, 27vw, 370px);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      z-index: 100;
    }
    .nav-pill {
      display: flex;
      align-items: center;
      gap: 2px;
      background: rgba(255,255,255,.13);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      padding: 6px 6px;
    }
    .nav-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      color: rgba(255,255,255,.65);
      border: none;
      background: none;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: color .2s, background .2s;
      font-family: inherit;
    }
    .nav-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
    .nav-center {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: #121212;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .counter-badge {
      background: rgba(255,255,255,.13);
      backdrop-filter: blur(100px);
      -webkit-backdrop-filter: blur(100px);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      padding: 10px 22px;
      font-size: 11px;
      font-weight: 700;
      color: rgba(255,255,255,.7);
      letter-spacing: .15em;
      font-family: monospace;
    }

    /* ── Mobile ── */
    @media (max-width: 767px) {
      .detail-wrap { flex-direction: column; }
      .video-panel { height: 46vh; flex: none; }
      .info-panel { width: 100%; flex: 1; }
      .video-slogan { left: 22px; right: 22px; bottom: 68px; }
      .bottom-nav {
        right: 0;
        bottom: 14px;
      }
      #infoInner { padding: 22px 18px 100px; }

      /* Nav sobre fundo branco no mobile: texto e borda escuros */
      .nav-pill {
        background: rgba(0,0,0,.06);
        border-color: rgba(0,0,0,.13);
      }
      .nav-btn { color: rgba(0,0,0,.55); }
      .nav-btn:hover { color: #121212; background: rgba(0,0,0,.06); }
      .nav-btn svg { stroke: rgba(0,0,0,.55); }
      .nav-center { background: #121212; }
      .counter-badge {
        background: rgba(0,0,0,.06);
        -webkit-backdrop-filter: none;
        border-color: rgba(0,0,0,.13);
        color: rgba(0,0,0,.55);
      }
    }

/* ── Contact drawer ── */
#contactDrawer {
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Parceiras: scroll-driven spread ── */
.partner-card-left,
.partner-card-right {
  flex: 1;
  min-width: 0;
  will-change: transform;
}
.partner-center {
  flex-shrink: 0;
}