/* ============================================================
   Nivela — design tokens compartilhados
   Paleta inspirada no Revit: navy profundo + azul técnico +
   laranja de pré-seleção como acento de ação.
   ============================================================ */

:root{
  --bg:#0B1826;
  --bg-deep:#081420;
  --panel:#122A42;
  --panel-soft:#0F2337;
  --line:#264a68;
  --line-soft:#1c3a54;
  --blue:#0696D7;
  --blue-bright:#4FC3F7;
  --orange:#FF8A3D;
  --ink:#E8EDF2;
  --ink-dim:#93AAC0;
  --ink-faint:#5C7690;
  --ok:#5FD3A0;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    linear-gradient(var(--bg-deep), var(--bg-deep)) fixed,
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line-soft) 39px, var(--line-soft) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line-soft) 39px, var(--line-soft) 40px);
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;}

.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------------- Header / Nav ---------------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:rgba(8,20,32,.7);
  backdrop-filter:blur(6px);
  position:sticky;
  top:0;
  z-index:50;
}
.site-header .inner{
  max-width:1080px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.brand-mark{
  width:30px;height:30px;
  border:1.5px solid var(--blue-bright);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  color:var(--blue-bright);
  flex-shrink:0;
}
.brand-word{
  font-family:var(--font-display);
  font-weight:600;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.brand-word span{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:10px;
  color:var(--ink-faint);
  letter-spacing:.16em;
  display:block;
  margin-top:1px;
}

nav.main-nav{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
nav.main-nav a{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--ink-dim);
  text-transform:uppercase;
  padding:6px 0;
  border-bottom:1.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
nav.main-nav a:hover{color:var(--ink);}
nav.main-nav a.active{color:var(--blue-bright); border-color:var(--blue-bright);}
nav.main-nav a.cta{
  color:var(--bg-deep);
  background:var(--blue-bright);
  padding:8px 16px;
  border-radius:3px;
  border-bottom:none;
}
nav.main-nav a.cta:hover{background:var(--orange); color:#1a1005;}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--ink);
  width:38px;height:34px;
  cursor:pointer;
  font-size:16px;
  align-items:center;
  justify-content:center;
}

@media (max-width:760px){
  .nav-toggle{display:flex;}
  nav.main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    background:var(--bg-deep);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    padding:16px 24px 22px;
    gap:14px;
  }
  nav.main-nav.open{display:flex;}
  .site-header{position:sticky;}
  nav.main-nav a.cta{margin-top:4px;}
}

/* ---------------- Eyebrow / headings ---------------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--blue-bright);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:18px;height:18px;
  border:1.5px solid var(--blue-bright);
  border-radius:50%;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 12px;
}
h1{font-size:clamp(30px,5vw,44px); line-height:1.15;}
h2{font-size:clamp(22px,3.4vw,28px); line-height:1.2;}
h1 span, h2 span{color:var(--blue-bright);}

.lede{
  color:var(--ink-dim);
  font-size:15.5px;
  line-height:1.65;
  max-width:58ch;
  margin:0;
}

/* ---------------- Badges ---------------- */
.badge{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:3px;
  display:inline-block;
  line-height:1.5;
}
.badge-live{
  color:var(--ok);
  background:rgba(95,211,160,.12);
  border:1px solid rgba(95,211,160,.35);
}
.badge-soon{
  color:var(--ink-faint);
  background:rgba(92,118,144,.12);
  border:1px solid var(--line);
}
.badge-premium{
  color:var(--orange);
  background:rgba(255,138,61,.12);
  border:1px solid rgba(255,138,61,.35);
}

/* ---------------- Buttons ---------------- */
.btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  border:none;
  border-radius:3px;
  padding:13px 26px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  letter-spacing:.02em;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.btn-primary{background:var(--blue-bright); color:var(--bg-deep);}
.btn-primary:hover{background:var(--orange); color:#1a1005;}
.btn-ghost{background:transparent; color:var(--ink-dim); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--blue-bright); color:var(--ink);}
.btn:disabled, .btn[aria-disabled="true"]{
  background:var(--panel-soft);
  color:var(--ink-faint);
  cursor:not-allowed;
  pointer-events:none;
}

/* ---------------- Cards grid (ferramentas / plugins / planos) ---------------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:18px;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:5px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  transition:border-color .15s ease, transform .12s ease;
  text-decoration:none;
  color:var(--ink);
}
.card.is-live:hover{border-color:var(--blue-bright); transform:translateY(-2px);}
.card-icon{
  width:38px;height:38px;
  border:1.5px solid var(--blue-bright);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-bright);
  font-family:var(--font-mono);
  font-size:15px;
  margin-bottom:4px;
}
.card h3{font-size:16.5px; margin:0;}
.card p{
  color:var(--ink-dim);
  font-size:13px;
  line-height:1.55;
  margin:0;
  flex:1;
}
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-faint);
}

/* ---------------- Section ---------------- */
section{padding:56px 0;}
section.tight{padding:40px 0;}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:26px;
  flex-wrap:wrap;
}
.section-head .lede{margin:0;}

hr.rule{
  border:none;
  border-top:1px solid var(--line-soft);
  margin:0;
}

/* ---------------- Footer ---------------- */
.site-footer{
  border-top:1px solid var(--line-soft);
  margin-top:40px;
}
.site-footer .inner{
  max-width:1080px;
  margin:0 auto;
  padding:28px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-faint);
}
.site-footer a{color:var(--ink-faint); text-decoration:none;}
.site-footer a:hover{color:var(--blue-bright);}
.footer-links{display:flex; gap:18px;}

@media (max-width:520px){
  section{padding:40px 0;}
}

/* ============================================================
   Componentes compartilhados das ferramentas de PDF
   (dropzone, grade de páginas, campos, níveis, comparação)
   ============================================================ */

.dropzone{
  border:1.5px dashed var(--line);
  border-radius:4px;
  padding:44px 24px;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
  position:relative;
  background:rgba(18,42,66,.35);
}
.dropzone.drag{border-color:var(--orange); background:rgba(255,138,61,.08);}
.dropzone .plus{
  width:46px;height:46px;
  margin:0 auto 16px;
  border:1.5px solid var(--blue-bright);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-bright);
  font-size:22px;
  font-family:var(--font-display);
  transition:transform .18s ease;
}
.dropzone:hover .plus{transform:rotate(90deg);}
.dropzone .dz-title{font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:6px;}
.dropzone .dz-sub{color:var(--ink-faint); font-size:13px; font-family:var(--font-mono);}
.dropzone .corner{position:absolute; width:14px;height:14px; border-color:var(--ink-faint);}
.dropzone .c1{top:8px;left:8px;border-top:1.5px solid var(--ink-faint);border-left:1.5px solid var(--ink-faint);}
.dropzone .c2{top:8px;right:8px;border-top:1.5px solid var(--ink-faint);border-right:1.5px solid var(--ink-faint);}
.dropzone .c3{bottom:8px;left:8px;border-bottom:1.5px solid var(--ink-faint);border-left:1.5px solid var(--ink-faint);}
.dropzone .c4{bottom:8px;right:8px;border-bottom:1.5px solid var(--ink-faint);border-right:1.5px solid var(--ink-faint);}

.list-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:14px;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-faint);
  letter-spacing:.06em; text-transform:uppercase; flex-wrap:wrap; gap:10px;
}
.list-head b{color:var(--ink-dim); font-weight:500;}
.link-btn{
  font-family:var(--font-mono); font-size:12px; color:var(--blue-bright);
  background:none; border:none; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; padding:0;
}

/* Grade de miniaturas de página (dividir / extrair) */
.page-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:14px;
}
.page-card{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transition:border-color .15s ease, transform .12s ease;
}
.page-card:hover{border-color:var(--blue-bright);}
.page-card.selected{border-color:var(--orange); box-shadow:0 0 0 1.5px var(--orange) inset;}
.page-card.readonly{cursor:default;}
.page-thumb{
  width:100%;
  aspect-ratio:3/4;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 9px, var(--line-soft) 9px, var(--line-soft) 10px),
    var(--panel-soft);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.page-thumb .thumb-spinner{
  width:16px;height:16px;
  border:1.5px solid var(--line);
  border-top-color:var(--blue-bright);
  border-radius:50%;
  animation:pg-spin .8s linear infinite;
}
@keyframes pg-spin{ to{transform:rotate(360deg);} }
.page-num{
  position:absolute; top:6px; left:6px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  color:var(--blue-bright);
  background:rgba(8,20,32,.82);
  border:1px solid rgba(79,195,247,.4);
  border-radius:3px; padding:3px 6px; line-height:1;
}
.page-check{
  position:absolute; top:6px; right:6px;
  width:19px;height:19px; border-radius:50%;
  border:1.5px solid var(--line);
  background:rgba(8,20,32,.82);
  display:flex;align-items:center;justify-content:center;
  font-size:11px; color:transparent;
  transition:all .15s ease;
}
.page-card.selected .page-check{
  background:var(--orange); border-color:var(--orange); color:#1a1005;
}

/* Campos de formulário */
.field{display:flex; flex-direction:column; gap:6px; margin:22px 0;}
.field label{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase;}
.field input[type="text"]{
  background:var(--bg-deep); border:1px solid var(--line); border-radius:3px;
  padding:11px 14px; color:var(--ink); font-family:var(--font-mono); font-size:13.5px;
}
.field input[type="text"]:focus{outline:1.5px solid var(--blue-bright); border-color:var(--blue-bright);}
.field .hint{font-family:var(--font-mono); font-size:11px; color:var(--ink-faint);}

/* Cartões de nível (ex.: compressão) */
.level-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin:22px 0;
}
.level-card{
  border:1.5px solid var(--line); border-radius:5px; padding:16px; cursor:pointer;
  background:var(--panel); transition:border-color .15s ease;
}
.level-card:hover{border-color:var(--blue-bright);}
.level-card.selected{border-color:var(--orange); box-shadow:0 0 0 1.5px var(--orange) inset;}
.level-card .level-title{margin:0 0 4px; font-family:var(--font-display); font-size:14.5px; font-weight:600;}
.level-card p{margin:0; color:var(--ink-dim); font-size:12px; line-height:1.5;}
.level-card .tag{font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); display:block; margin-top:6px;}

/* Barra de ação / status / resultado */
.action-bar{margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.run-btn{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--bg-deep); background:var(--blue-bright); border:none; border-radius:3px;
  padding:14px 34px; cursor:pointer; letter-spacing:.02em;
  transition:background .15s ease, transform .1s ease; width:100%; max-width:340px;
}
.run-btn:hover:not(:disabled){background:var(--orange); color:#1a1005;}
.run-btn:active:not(:disabled){transform:scale(.98);}
.run-btn:disabled{background:var(--panel-soft); color:var(--ink-faint); cursor:not-allowed;}
.run-btn.secondary{background:transparent; border:1px solid var(--line); color:var(--ink-dim); max-width:none; padding:11px 22px; font-size:13.5px;}
.run-btn.secondary:hover:not(:disabled){border-color:var(--blue-bright); color:var(--ink); background:transparent;}
.run-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}

.status-msg{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-dim); min-height:18px; text-align:center;}
.status-msg.ok{color:var(--ok);}
.status-msg.err{color:var(--orange);}

.result-link{
  display:none; font-family:var(--font-mono); font-size:13px; color:var(--ok);
  text-decoration:none; border:1px solid var(--ok); border-radius:3px; padding:10px 22px;
}
.result-link:hover{background:rgba(95,211,160,.1);}

.size-compare{display:flex; gap:28px; justify-content:center; margin:6px 0 2px; flex-wrap:wrap;}
.size-box{text-align:center;}
.size-box .num{font-family:var(--font-display); font-weight:600; font-size:20px;}
.size-box .lbl{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em;}
.size-box.after .num{color:var(--ok);}
.size-arrow{align-self:center; color:var(--ink-faint); font-family:var(--font-mono);}

/* Reordenação por arrastar (imagens → pdf) */
.page-card.draggable{cursor:grab;}
.page-card.draggable:active{cursor:grabbing;}
.page-card.dragging{opacity:.35;}
.insertion-indicator{
  align-self:stretch; display:flex; align-items:center; justify-content:center; min-height:100%;
}
.insertion-indicator::before{
  content:""; width:2px; align-self:center; height:60%;
  background:var(--orange); border-radius:2px; opacity:.75;
  box-shadow:0 0 4px rgba(255,138,61,.35);
  animation:pulse-line 1.4s ease-in-out infinite;
}
@keyframes pulse-line{0%,100%{opacity:.75;} 50%{opacity:.3;}}
.page-remove{
  position:absolute; top:6px; right:6px; width:20px;height:20px;
  background:rgba(8,20,32,.82); border:1px solid var(--line); border-radius:50%;
  color:var(--ink-dim); font-size:14px; cursor:pointer; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease;
}
.page-remove:hover{color:var(--orange); border-color:var(--orange);}

/* Tabs de formato (pdf → imagens) */
.format-tabs{display:flex; gap:8px; margin-bottom:8px;}
.format-tab{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em;
  padding:9px 18px; border:1px solid var(--line); border-radius:3px;
  background:transparent; color:var(--ink-dim); cursor:pointer;
}
.format-tab.active{border-color:var(--blue-bright); color:var(--blue-bright); background:rgba(79,195,247,.08);}

/* ============================================================
   Acessibilidade, avisos e ajustes de layout
   ============================================================ */

/* Foco visível e consistente em tudo que é operável pelo teclado. */
:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:2px;
  border-radius:3px;
}
.dropzone:focus-visible{outline-offset:-4px;}

/* Atalho para quem navega por teclado/leitor de tela pular direto ao conteúdo. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--blue-bright);
  color:var(--bg-deep);
  font-family:var(--font-mono);
  font-size:12px;
  padding:10px 16px;
  border-radius:0 0 3px 0;
  text-decoration:none;
}
.skip-link:focus{left:0;}

/* Faixa de destaques da home — empilha no celular em vez de espremer 3 colunas. */
.stripe{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  margin-top:44px;
}
.stripe div{
  padding:16px 18px;
  border-right:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-faint);
  line-height:1.5;
}
.stripe div:last-child{border-right:none;}
.stripe b{color:var(--ink-dim); font-weight:500; display:block; margin-bottom:2px;}
@media (max-width:720px){
  .stripe{grid-template-columns:1fr;}
  .stripe div{border-right:none; border-bottom:1px solid var(--line);}
  .stripe div:last-child{border-bottom:none;}
}

/* Aviso inline (arquivo ignorado, resolução reduzida, etc.) */
.notice{
  display:none;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-left:2px solid var(--orange);
  border-radius:3px;
  background:rgba(255,138,61,.06);
  padding:11px 14px;
  margin-top:14px;
}
.notice.show{display:block;}

.status-msg.warn{color:var(--orange);}

/* Miniatura que não pôde ser gerada */
.thumb-fallback{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--ink-faint);
  letter-spacing:.04em;
  text-align:center;
  padding:0 6px;
}

/* Cartões de página e de nível operáveis pelo teclado */
.page-card:focus-visible, .level-card:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:2px;
}
.level-card[aria-pressed="true"]{border-color:var(--orange); box-shadow:0 0 0 1.5px var(--orange) inset;}

/* Rodapé com contato */
.site-footer .footer-links{flex-wrap:wrap;}
.site-footer .inner > span{max-width:60ch;}

/* Conteúdo editorial das ferramentas: passo a passo, FAQ e links internos */
.seo-content{
  margin-top:64px;
  padding-top:34px;
  border-top:1px solid var(--line-soft);
}
.seo-content h2{font-size:19px; margin:0 0 16px;}
.seo-content h2 + *{margin-top:0;}
.seo-content > h2 ~ h2{margin-top:44px;}

.steps{
  list-style:none;
  counter-reset:passo;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.steps li{
  counter-increment:passo;
  position:relative;
  padding-left:44px;
  color:var(--ink-dim);
  font-size:14px;
  line-height:1.65;
}
.steps li::before{
  content:counter(passo);
  position:absolute;
  left:0; top:-1px;
  width:28px; height:28px;
  border:1.5px solid var(--blue-bright);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--blue-bright);
}
.steps li b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px;}

.faq-list .faq-item{padding:16px 0; border-top:1px solid var(--line-soft);}
.faq-list .faq-item:last-child{border-bottom:1px solid var(--line-soft);}
.faq-list h3{margin:0 0 6px; font-size:14.5px;}
.faq-list p{margin:0; color:var(--ink-dim); font-size:13.5px; line-height:1.65;}

.related{display:flex; gap:10px; flex-wrap:wrap;}
.related a{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-dim);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:3px;
  padding:9px 14px;
  transition:border-color .15s ease, color .15s ease;
}
.related a:hover{border-color:var(--blue-bright); color:var(--ink);}

/* Ponte das ferramentas gratuitas para os plugins pagos */
.bridge{
  margin-top:64px;
  border:1px solid var(--line);
  border-top:2px solid rgba(255,138,61,.4);
  border-radius:6px;
  background:var(--panel);
  padding:26px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.bridge h2{font-size:17px; margin:10px 0 6px;}
.bridge p{color:var(--ink-dim); font-size:13.5px; line-height:1.6; margin:0; max-width:52ch;}
.bridge .btn{flex-shrink:0;}

/* ---------------- Modal ---------------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(4,10,17,.72);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-y:auto;
}
.modal-backdrop[hidden]{display:none;}
.modal{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  width:100%;
  max-width:460px;
  padding:30px 28px 26px;
  position:relative;
  animation:modal-in .18s ease-out;
  margin:auto;
}
@keyframes modal-in{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:none;}
}
.modal h2{font-size:19px; margin:0 0 8px; padding-right:28px;}
.modal .modal-sub{color:var(--ink-dim); font-size:13.5px; line-height:1.6; margin:0 0 20px;}
.modal-close{
  position:absolute;
  top:12px; right:12px;
  width:36px; height:36px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink-dim);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease;
}
.modal-close:hover{color:var(--orange); border-color:var(--orange);}
.modal-target{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--blue-bright);
  border:1px solid rgba(79,195,247,.35);
  background:rgba(79,195,247,.08);
  border-radius:3px;
  padding:5px 10px;
  display:inline-block;
  margin-bottom:14px;
}
.modal form{display:flex; flex-direction:column; gap:12px;}
.modal input[type="email"]{
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:3px;
  padding:12px 14px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  width:100%;
}
.modal input[type="email"]:focus{outline:1.5px solid var(--blue-bright); border-color:var(--blue-bright);}
.modal .btn{justify-content:center;}
.modal-status{
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  color:var(--ink-dim);
  display:none;
}
.modal-status.show{display:block;}
.modal-status.ok{color:var(--ok);}
.modal-status.err{color:var(--orange);}
.modal-status a{color:var(--blue-bright);}
.modal-fine{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--ink-faint);
  line-height:1.6;
  margin:2px 0 0;
}
.modal-fine a{color:var(--ink-dim);}
body.modal-open{overflow:hidden;}

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .card.is-live:hover{transform:none;}
}

/* ============================================================
   Layout de produto: herói com mídia, faixas de compatibilidade
   e seções de funcionalidade alternadas (imagem + texto)
   ============================================================ */

/* Herói dividido: texto de um lado, vídeo/imagem do outro */
.hero-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:44px;
  align-items:center;
}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr; gap:32px;}
}

/* Espaço reservado para o vídeo de demonstração.
   Trocar o conteúdo interno por <video> ou <img> quando gravar. */
.media-slot{
  position:relative;
  aspect-ratio:16/10;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, var(--line-soft) 23px, var(--line-soft) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, var(--line-soft) 23px, var(--line-soft) 24px),
    var(--panel-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:24px;
}
.media-slot img, .media-slot video{
  width:100%; height:100%; object-fit:contain; display:block;
}
.media-slot.tem-midia{background:var(--panel-soft); padding:0;}
.media-slot .slot-icone{
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid var(--blue-bright); color:var(--blue-bright);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.media-slot .slot-titulo{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink-dim);}
.media-slot .slot-nota{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); max-width:34ch; line-height:1.6;}

/* Faixa de compatibilidade */
.compat{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:14px;
}
.compat div{
  border:1px solid var(--line);
  border-radius:5px;
  padding:16px 18px;
  background:var(--panel);
}
.compat b{
  display:block;
  font-family:var(--font-display);
  font-size:14.5px;
  margin-bottom:4px;
}
.compat span{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); line-height:1.6;}

/* Seções de funcionalidade alternadas */
.feature-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:48px;
  align-items:center;
  padding:52px 0;
  border-top:1px solid var(--line-soft);
}
.feature-row:first-of-type{border-top:none;}
.feature-row.invertida{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.feature-row.invertida .feature-texto{order:2;}
.feature-row.invertida .feature-midia{order:1;}
.feature-row .eyebrow{margin-bottom:10px;}
.feature-row h3{font-size:21px; margin:0 0 12px;}
.feature-row p{color:var(--ink-dim); font-size:14.5px; line-height:1.7; margin:0; max-width:46ch;}
.feature-lista{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
.feature-lista li{color:var(--ink-dim); font-size:13.5px; display:flex; gap:10px; line-height:1.55;}
.feature-lista li::before{content:"\2713"; color:var(--ok); flex-shrink:0;}
.feature-midia{
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
  padding:22px;
}
.feature-midia img{width:100%; height:auto; display:block;}
@media (max-width:820px){
  /* .invertida tem duas classes, entao precisa ser anulada explicitamente aqui */
  .feature-row, .feature-row.invertida{grid-template-columns:1fr; gap:26px; padding:38px 0;}
  .feature-row.invertida .feature-texto{order:1;}
  .feature-row.invertida .feature-midia{order:2;}
  .feature-row p{max-width:none;}
}