:root{
  --bg: #0a0a0a;
  --bg-elev: #111;
  --text: #fff;
  --muted: #bdbdbd;
  --line: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.6);
  --radius: 14px;
  --container: 1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans", -apple-system, system-ui, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 70% 10%, #121212 0%, #0a0a0a 60%) fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.container{width:min(100% - 32px, var(--container)); margin-inline:auto}

/* Announcement */
.announce{ position: sticky; top:0; z-index: 50; background: linear-gradient(90deg, #000, #1a1a1a); border-bottom: 1px solid var(--line); }
.announce__inner{display:flex; align-items:center; gap:12px; padding:10px 0}
.announce__text{margin:0; font-weight:600}
.announce__close{ margin-left:auto; appearance:none; border:none; background:transparent; color:#fff; font-size:20px; line-height:1; cursor:pointer; opacity:.7 }
.announce__close:hover{opacity:1}

/* Header */
.site-header{ position: sticky; top:0; z-index:40; backdrop-filter: blur(10px); background: rgba(10,10,10,.6); border-bottom:1px solid var(--line); }
.header__row{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px}
.nav{position:relative}
.nav__toggle{
  display:inline-flex; flex-direction:column; gap:4px; width:42px; height:42px; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent; color:#fff; border-radius:10px; cursor:pointer;
}
.nav__bar{display:block; width:18px; height:2px; background:#fff}
.nav__menu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:18px; }
.nav__menu a{color:#fff; text-decoration:none; opacity:.8}
.nav__menu a:hover{opacity:1}
@media (max-width: 900px){
  .hide-on-mobile{display:none}
  .nav__menu{
    position:fixed; inset:70px 16px auto 16px; top:76px;
    background: rgba(17,17,17,.9); border:1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding:16px; flex-direction:column; gap:10px; transform:translateY(-20px); opacity:0; pointer-events:none; transition:.25s ease;
  }
  .nav__menu.open{transform:translateY(0); opacity:1; pointer-events:auto}
}

/* Buttons */
.btn{
  --pad-y:12px; --pad-x:20px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: var(--pad-y) var(--pad-x); border-radius: 12px; text-decoration:none; font-weight:700;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border:1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  white-space: nowrap; word-break: keep-all; overflow-wrap: normal; /* não quebra linha */
}
.btn--sm{--pad-y:8px; --pad-x:14px; font-size:.9rem}
.btn--lg{--pad-y:14px; --pad-x:26px; font-size:1.05rem}
.btn--solid{background:#fff; color:#000; border-color:#fff}
.btn--solid:hover{transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,255,255,.15)}
.btn--ghost{background:transparent; color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn:active{transform:translateY(0) scale(.98)}

/* CTA play + texto */
.play-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px;
  background:#191a1e; border:1px solid var(--line);
  color:#fff; text-decoration:none; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.play-cta:hover{ background:#1f2024; border-color:rgba(255,255,255,.18); transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.45); }
.play-cta:active{ transform:translateY(0) scale(.98); }
.play-cta:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.play-icon{ width:20px; height:20px; display:block; color:rgba(255,255,255,.92) }

/* Hero */
.hero{ position:relative; padding: clamp(64px, 10vw, 120px) 0 64px; }
.hero__inner{ text-align:center; max-width: 900px; margin-inline:auto }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); color:#f5f5f5; font-weight:600; letter-spacing:.2px; }
.hero__title{ margin:18px 0 10px; line-height: 1.18; letter-spacing:-.02em; font-size: clamp(40px, 7vw, 68px); padding-bottom: .10em; }
.hero__subtitle{ margin: 10px auto 24px; color: var(--muted); font-size: clamp(16px, 2.6vw, 20px); max-width: 680px; }
.hero__ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* Social proof */
.social-proof{margin-top:26px; display:flex; align-items:center; gap:16px; justify-content:center}
.avatars{display:flex}
.avatar{
  width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background: #1c1c1c; color:#eaeaea; font-weight:800; border:1px solid var(--line); margin-left:-8px; box-shadow:var(--shadow)
}
.avatar:first-child{margin-left:0}
.proof-text{margin:0; color:var(--muted); text-align:left !important; font-size:clamp(12px,1.6vw,14px); line-height:1.45}

/* Decor */
.hero__glow{ position:absolute; inset:auto 0 -120px 0; height:240px; filter: blur(60px); background: radial-gradient(45% 70% at 50% 0%, rgba(255,255,255,.18), transparent 60%); pointer-events:none; }

/* Reveal on scroll */
[data-reveal]{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease}
[data-reveal].is-visible{opacity:1; transform:none}

/* ===== Título com gradiente animado ===== */
.elementor-heading-title,
.title-animated{
  transition: background 2s ease 0s, all 1s;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: move 3s ease 1s infinite alternate;
  background-image: linear-gradient(45deg, #ff9372, #ff7d55, #ff5623, #fe3c01);
  background-size: 500% 200%;
}
@keyframes move{ 0%{ background-position: 0 0; } 100%{ background-position: 100% 0; } }

/* variação laranja */
.title-animated--orange{
  background-image: linear-gradient(45deg, #ff9372, #ff7d55, #ff5623, #fe3c01);
  background-size: 500% 200%;
}

/* ===== Vídeo (6:13) ===== */
.demo-card{ margin:28px auto 0; max-width:min(92vw, 700px); }
.demo-media{
  position:relative; border-radius:24px; overflow:hidden;
  background:#141416; border:1px solid var(--line); box-shadow:var(--shadow);
  aspect-ratio: 6 / 13;
}
.demo-video{ width:100%; height:100%; display:block; aspect-ratio: 6 / 13; object-fit: cover; object-position:center; }
@media (min-width: 900px){ .demo-card{ max-width: 560px; } }
.demo-play{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; display:grid; place-items:center;
  background: rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:12px; backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0,0,0,.45); cursor:pointer; transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.demo-play:hover{ transform:translateY(-1px); background:rgba(0,0,0,.65); border-color:rgba(255,255,255,.38); }
.demo-play:active{ transform:translateY(0) scale(.98); }
.demo-play[hidden]{ display:none !important; }
.demo-play svg{ width:24px; height:24px; display:block; }

/* ==== Box arredondada ==== */
.feature-cta{
  --r: 28px;
  position: relative;
  border-radius: var(--r);
  overflow: clip;                     /* clipping */
  clip-path: inset(0 round var(--r)); /* fallback */
  -webkit-mask-image: -webkit-radial-gradient(white, black);

  margin: 28px auto 0;
  width: min(100% - 32px, 860px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 28px 22px 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01) 60%);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.feature-cta + .feature-cta{ margin-top: 24px; }
@media (min-width:1100px){ .feature-cta{ width:min(100% - 80px, 960px); } }

.pill--soft{ background: rgba(255,255,255,.05); }
.feature-title{ font-size: clamp(28px, 5vw, 44px); line-height:1.08; letter-spacing:-.02em; margin: 4px 0 2px; }
.feature-text{ color: var(--muted); max-width: 720px; margin: 0 auto 6px; }
.btn--accent{
  background: linear-gradient(45deg, #ff9372, #ff7d55, #ff5623, #fe3c01);
  color:#000; border-color: rgba(255,255,255,.2);
}
.btn--accent:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,138,0,.25); }

/* Comparador Before/After otimizado */
.img-compare-container{ width:100%; max-width: 860px; margin: 12px auto 0; }
.img-compare-wrapper{
  position:relative; width:100%; cursor: ew-resize;
  border-radius: 20px; overflow:hidden; border:1px solid var(--line);
  box-shadow: var(--shadow); touch-action: none; user-select:none; -webkit-user-select:none;
  contain: layout paint;                /* sem 'size' para não colapsar */
  content-visibility: auto;             /* performance off-screen */
  contain-intrinsic-size: 720px 405px;  /* reserva */
  --pct: 50%;
}
.img-compare{ width:100%; height:auto; display:block; }
.img-before{ position:relative; display:block; }
.img-after{
  position:absolute; inset:0;
  clip-path: inset(0 calc(100% - var(--pct)) 0 0);
  transition: none;                     /* sem delay */
  will-change: clip-path;
}
.slider{ position:absolute; top:0; height:100%; width:2px; background:#fff; z-index:10; pointer-events:none; left: var(--pct); }
.slider-handle{
  position:absolute; top:50%; left:var(--pct); transform: translate(-50%, -50%);
  width:36px; height:36px; border-radius:12px;
  background: rgba(0,0,0,.58); border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.45); cursor: grab;
}
.slider-handle:active{ cursor: grabbing; }
.slider-handle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ===== FAQ leve (CSS-driven) ===== */
.faq-block{ margin: 28px auto 0; width: min(100% - 32px, 960px); padding: 10px 0 0; }
.faq-title{ text-align:center; font-size: clamp(28px, 5vw, 42px); margin: 0 0 6px; }
.faq-sub{ text-align:center; color: var(--muted); margin: 0 auto 18px; max-width: 720px; }
.faq-accordion{ width: min(100%, 860px); margin: 0 auto; }
.faq-item + .faq-item{ margin-top: 14px; }
.faq-trigger{
  width: 100%; text-align: left; padding: 18px 18px; border-radius: 14px;
  background: #1b1c20; border: 1px solid var(--line); color: #fff; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.faq-trigger:hover{ background: #202126; border-color: rgba(255,255,255,.14); }
.faq-trigger:active{ transform: translateY(1px); }
.faq-trigger:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.faq-trigger .chev{ width: 20px; height: 20px; flex: 0 0 auto; opacity: .8; transition: transform .25s ease, opacity .2s ease; }
.faq-item.open .chev{ transform: rotate(180deg); opacity: 1; }
.faq-panel{
  display: grid;
  grid-template-rows: 0fr;             /* fechado */
  transition: grid-template-rows .26s ease;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0 0 14px 14px; background: #141519;
}
.faq-panel-inner{ overflow: hidden; }
.faq-item.open .faq-panel{ grid-template-rows: 1fr; }
.faq-panel p{ margin: 0; padding: 14px 18px 18px; color: var(--muted); }

/* ===== Footer ===== */
.footer-new{ background:#0b0b0f; border-top:1px solid var(--line); margin-top: 32px; }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr; gap:32px; padding:32px 0 20px; align-items:center; }
.brand--footer{ display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px; }
.footer-top .muted{ margin:10px 0 0; }
.f-col.cta{ text-align:right; }
.f-col.cta h4{ margin:0 0 10px; font-size:1.05rem; opacity:.9; }
.footnote{ margin:8px 0 0; color:var(--muted); font-size:.9rem; }
.footer-divider{ height:1px; background:var(--line); width:100%; }
.footer-bottom{ display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 0 24px; flex-direction:column; text-align:center; }
.footer-bottom a{ color:#fff; text-decoration:none; opacity:.85; }
.footer-bottom a:hover{ opacity:1; }
.legal{ display:flex; gap:18px; justify-content:center; }
.copy{ color:var(--muted); }
.secure{ display:inline-flex; align-items:center; gap:8px; color:#fff; opacity:.9; }
.btn--cta{ background: linear-gradient(180deg, #8d6aff, #6a47ff); color:#fff; border-color: rgba(255,255,255,.18); box-shadow: 0 10px 26px rgba(106,71,255,.28); }
.btn--cta:hover{ transform:translateY(-1px); box-shadow: 0 16px 34px rgba(106,71,255,.36); }
@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr; text-align:center; }
  .f-col.cta{ text-align:center; }
  .btn--cta{ width: 100%; justify-content: center; }
}
/* ===== NAV DESKTOP: reseta o “menu móvel” quando a tela é grande ===== */
@media (min-width: 901px){
  .nav__toggle{ display:none !important; }
  .nav__menu{
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    gap: 20px;
    align-items: center;
  }
  .header__row{ flex-wrap: nowrap; gap: 16px; }
}

/* ===== BOXES NO DESKTOP: largura confortável e centralizada ===== */
@media (min-width: 1100px){
  .feature-cta{ width: min(100% - 80px, 960px) !important; }
}

/* ===== COMPARADOR: responsivo e instantâneo ===== */
.img-compare-container{ width:100%; max-width: 960px; margin: 12px auto 0; }
.img-compare-wrapper{
  position:relative; width:100%;
  /* NÃO use contain: … size; isso colapsa a altura */
  contain: layout paint;                /* isola sem colapsar */
  content-visibility: auto;
  contain-intrinsic-size: 720px 405px;  /* reserva espaço off-screen */
  touch-action: none; user-select:none; -webkit-user-select:none;
  border-radius: 20px; overflow:hidden; border:1px solid var(--line);
}
.img-compare{ width:100%; height:auto; display:block; }
.img-before{ position:relative; display:block; }
.img-after{
  position:absolute; inset:0;
  clip-path: inset(0 calc(100% - var(--pct, 50%)) 0 0);
  transition: none;                     /* sem delay */
  will-change: clip-path;
}
.slider{ position:absolute; top:0; bottom:0; width:2px; left:var(--pct, 50%); background:#fff; pointer-events:none; }
.slider-handle{
  position:absolute; top:50%; left:var(--pct, 50%); transform: translate(-50%, -50%);
  width:36px; height:36px; border-radius:12px;
  background: rgba(0,0,0,.58); border:1px solid rgba(255,255,255,.28); cursor:grab;
}

/* ===== FAQ leve (CSS-driven) – abre/fecha sem travar ===== */
.faq-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s ease;
  overflow: hidden;
}
.faq-item.open .faq-panel{ grid-template-rows: 1fr; }
.faq-panel-inner{ overflow: hidden; }
/* some o botão branco do header no desktop */
@media (min-width: 901px){
  .site-header .nav__menu .btn--solid{ display:none !important; }
}
/* Menos animação em dispositivos com redução de movimento ou economia de dados */
.reduce-motion *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
.is-save-data .shadow-heavy{ box-shadow:none !important; }
.demo-play[hidden],
.demo-play[aria-hidden="true"]{ display: none !important; }
/* Esconde o overlay quando o vídeo está tocando (via atributo) */
.demo-media[data-playing="1"] .demo-play{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* (opcional) alguns iOS exibem um overlay nativo — esconda-o */
.demo-video::-webkit-media-controls-start-playback-button{
  display: none !important;
}
/* ===== Mobile perf patch ===== */
@media (max-width: 768px){
  /* 1) Fundo fixo/gradiente causa repaint no scroll */
  body{
    background: #0a0a0a !important;       /* cor sólida */
    background-attachment: scroll !important;
  }

  /* 2) Blur e sombras pesadas */
  .site-header{ backdrop-filter:none !important; background: rgba(10,10,10,.92) !important; }
  .demo-play{ backdrop-filter:none !important; box-shadow: 0 4px 10px rgba(0,0,0,.30) !important; }
  .feature-cta, .demo-media, .img-compare-wrapper, .play-cta{ box-shadow:none !important; }

  /* 3) Glow/blur grande = caro em GPU */
  .hero__glow{ display:none !important; }

  /* 4) Título com gradiente animado — pausar a animação no mobile */
  .title-animated, .elementor-heading-title{
    animation-play-state: paused !important;   /* mantém o gradiente, só pausa o movimento */
  }
}

/* 5) Comparador: permita rolar a página enquanto arrasta horizontalmente */
.img-compare-wrapper{ touch-action: pan-y; }   /* (antes estava none) */

/* 6) Aceleração da camada do vídeo e overlay (GPU) */
.demo-video, .demo-play{ transform: translateZ(0); will-change: transform; }