:root{
  --primary:#111111;
  --secondary:#666666;
  --tertiary:#999999;
  --border:#E5E5E5;
  --background:#FFFFFF;
  --surface:#FAFAFA;
  --accent:#15803D;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family:'Space Grotesk', sans-serif;
  color:var(--primary);
  background:var(--background);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

.display{font-size:32px; font-weight:500; line-height:1.15; letter-spacing:-0.02em;}
.title{font-size:20px; font-weight:500; line-height:1.3;}
.body-text{font-size:15px; font-weight:400; line-height:1.5;}
.label{font-size:12px; font-weight:400; text-transform:lowercase;}
.caption{font-size:11px; font-weight:400; letter-spacing:0.1em;}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.hidden{display:none !important;}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  height:64px; background:var(--background);
  border-bottom:1px solid var(--border);
}
.navbar-inner{
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}
.nav-links{
  display:flex; align-items:center; gap:24px;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-video-wrap{display:flex; align-items:center; gap:6px;}
.nav-video-wrap .caption{color:var(--tertiary);}

/* Botão: base sem tipografia própria, .label decide o texto quando presente */
.btn{
  border-radius:8px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px;
  transition:border-color .15s ease, opacity .15s ease, color .15s ease;
}
.btn.label{
  font-size:12px; font-weight:400; text-transform:lowercase;
}
.btn-primary{background:var(--primary); color:var(--background); border-color:var(--primary);}
.btn-primary:hover{opacity:.85;}
.btn-ghost{background:var(--background); color:var(--primary); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--primary);}

/* Hero */
.hero{padding:32px 0 48px 0;}
.hero-label{color:var(--secondary); margin-bottom:12px;}
.hero h1{margin-bottom:16px; max-width:640px;}
.hero-body{color:var(--secondary); max-width:520px;}

/* Ferramenta */
.ferramenta{padding-bottom:48px;}
.tool-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:24px;}
.chips{display:flex; gap:8px; margin-bottom:20px;}
.chip{
  border-radius:6px; padding:6px 14px; font-size:12px; line-height:1;
  border:1px solid var(--border);
}
.chip-active{background:var(--primary); color:var(--background); border-color:var(--primary);}
.chip-inactive{background:transparent; color:var(--tertiary); border-color:var(--border);}

.drop-zone{
  min-height:320px; border:1px dashed var(--border); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:var(--background); text-align:center; padding:24px;
  cursor:pointer; transition:border-color .15s ease;
}
.drop-zone:hover, .drop-zone.dragging{border-color:var(--primary);}
.drop-zone .icon-wrap{
  width:40px; height:40px; border-radius:8px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--secondary);
}
.drop-zone .caption{color:var(--tertiary);}
.status-processing{color:var(--primary); text-transform:uppercase;}
.status-error{color:var(--secondary);}

.checker{
  width:100%; min-height:320px; border-radius:10px; border:1px solid var(--border);
  background-image:
    linear-gradient(45deg, var(--surface) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface) 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0px;
  background-color:var(--background);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.checker img{max-width:100%; max-height:320px; display:block;}

/* Animações discretas */
@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.drop-zone.processing .icon-wrap svg{
  animation:spin 1.2s linear infinite;
}

@keyframes fade-in{
  from{opacity:0; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}
.result-preview{
  animation:fade-in .3s ease;
}

.result-actions{display:flex; gap:12px; margin-top:16px;}
.tool-caption{margin-top:16px; color:var(--tertiary); text-transform:lowercase; letter-spacing:0.1em;}

/* Editor de ajuste manual */
.editor{margin-top:16px;}
.editor-layout{
  display:grid;
  grid-template-columns:1fr 200px;
  gap:16px;
}
.editor-canvas-wrap{
  min-height:320px;
  border-radius:10px;
  border:1px solid var(--border);
  background-image:
    linear-gradient(45deg, var(--surface) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface) 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0px;
  background-color:var(--background);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:8px;
}
.editor-canvas-wrap canvas{
  max-width:100%;
  max-height:400px;
  cursor:crosshair;
  border-radius:6px;
}

.editor-panel{display:flex; flex-direction:column; gap:16px;}
.editor-group{display:flex; flex-direction:column; gap:8px;}
.editor-group-label{color:var(--tertiary); display:block;}
.editor-toggle{display:flex; gap:8px;}
.editor-toggle-btn{
  flex:1; border-radius:6px; padding:8px 0; text-align:center;
  border:1px solid var(--border); font-size:12px;
  background:var(--background); color:var(--tertiary);
  transition:border-color .15s ease;
}
.editor-toggle-btn:hover{border-color:var(--primary);}
.editor-toggle-btn.active{
  background:var(--primary); color:var(--background); border-color:var(--primary);
}

.editor-slider{width:100%; accent-color:var(--primary);}

.editor-history{display:flex; gap:8px;}
.editor-history-btn{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--secondary);
  background:var(--background);
  transition:border-color .15s ease;
}
.editor-history-btn:hover:not(:disabled){border-color:var(--primary);}
.editor-history-btn:disabled{opacity:0.4; cursor:default;}

.editor-actions{display:flex; gap:8px; margin-top:4px;}

/* Banner de anúncio, discreto */
.ad-slot{padding:24px 0;}
.ad-banner{
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  min-height:90px; display:flex; align-items:center; justify-content:center;
  position:relative; padding:16px;
}
.ad-banner .ad-tag{position:absolute; top:8px; left:12px; color:var(--tertiary); text-transform:lowercase; letter-spacing:0.1em;}
.ad-banner .ad-placeholder{color:var(--tertiary);}

/* Como funciona */
.funciona{padding:48px 0;}
.funciona-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.funciona-card{background:var(--background); border:1px solid var(--border); border-radius:10px; padding:24px;}
.funciona-card .caption{color:var(--tertiary); margin-bottom:12px; display:block;}
.funciona-card .title{margin-bottom:8px;}
.funciona-card .body-text{color:var(--secondary);}

/* Video block */
.video-block{padding:48px 0; background:var(--surface);}
.video-inner{max-width:640px;}
.video-block .title{margin-bottom:12px;}
.video-block .body-text{color:var(--secondary);}

/* FAQ */
.faq{padding:48px 0;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-question{
  width:100%; background:none; border:none; padding:20px 0;
  display:flex; align-items:center; justify-content:space-between; text-align:left;
}
.faq-question .title{font-size:15px; font-weight:500;}
.faq-question .chevron{color:var(--tertiary); flex-shrink:0; transition:transform .15s ease;}
.faq-item.open .chevron{transform:rotate(180deg);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .2s ease;}
.faq-item.open .faq-answer{max-height:200px;}
.faq-answer-inner{padding-bottom:20px; color:var(--secondary); max-width:640px;}

/* Footer */
.footer{padding:24px 0; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;}
.footer .caption{color:var(--tertiary);}

@media (max-width:820px){
  .nav-links{display:none;}
  .display{font-size:26px;}
  .funciona-grid{grid-template-columns:1fr;}
  .drop-zone{min-height:260px;}
  .checker{min-height:260px;}
  .editor-layout{grid-template-columns:1fr;}
}