/* ==========================================================================
   EverFeed — pages.css
   Hero, secoes, cartoes, mockups do painel, precos, FAQ.
   Nenhuma imagem: todo "print" do painel e HTML+CSS, e por isso ele muda
   de tema junto com o site — que e, por acaso, exatamente o argumento do
   produto (a peca e renderizada com os tokens da marca).
   ========================================================================== */

/* Listas verticais em grid precisam da coluna declarada: sem ela a trilha
   implicita e dimensionada por max-content e fica mais larga que o proprio
   container em telas estreitas, empurrando o texto para fora. */
.facts, .plan .feats, .path ul, .vs-facts, .rack, .pipe,
.mock-rows, .mock-fields, .mock-main{
  grid-template-columns: minmax(0, 1fr);
}

/* Item de lista com icone: o icone acompanha a PRIMEIRA linha, nao o centro
   do bloco — senao ele desce quando o texto quebra em duas linhas. */
.plan .feats li{ align-items: flex-start; }

/* Itens de lista carregam tokens tecnicos ({{redes}}, negative_prompt) que
   nao tem onde quebrar. `anywhere` tambem encolhe o min-content, que e o que
   impede o item de empurrar a linha para fora em telas estreitas. */
.facts li, .vs-facts li, .path li, .plan .feats li{ overflow-wrap: anywhere; }
.prose, .card p, .lede{ overflow-wrap: break-word; }

/* Coluna estreita que continua alinhada a esquerda com o resto da pagina.
   Um .wrap com max-width menor recentraria o bloco e quebraria o eixo
   vertical em relacao ao titulo. */
.narrow{ max-width: 78ch; }
.narrow-wide{ max-width: 900px; }

/* --------------------------------------------------------------- hero -- */

.hero{
  position: relative;
  padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 104px);
  overflow: hidden;
  isolation: isolate;
}
.hero::before{
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 780px;
  z-index: -2;
  background:
    linear-gradient(180deg, var(--grid-line) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 34px 100%;
  mask-image: radial-gradient(120% 65% at 50% 32%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 65% at 50% 32%, #000 25%, transparent 78%);
}
.hero::after{
  content: "";
  position: absolute;
  top: -220px;
  left: 50%;
  width: min(1100px, 120vw);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  z-index: -1;
  background: radial-gradient(closest-side, var(--primary-soft), transparent 72%);
  opacity: .85;
  pointer-events: none;
}

.hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

.hero h1{ margin-bottom: .38em; }
.hero h1 .accent{ color: var(--primary); }
.hero .lede{ font-size: clamp(1.06rem, 1.6vw, 1.26rem); max-width: 54ch; }

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.9rem;
}
.hero-note{
  margin-top: 1.15rem;
  font-size: .9rem;
  color: var(--text-3);
  max-width: 46ch;
}
.hero-note b{ color: var(--text-2); font-weight: 560; }

.pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: .35rem .8rem .35rem .55rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.pill .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 22%, transparent);
}

/* animacao de entrada, escalonada */
html.js .hero-anim > *{
  opacity: 0;
  transform: translateY(14px);
  animation: rise .8s cubic-bezier(.2,.75,.25,1) forwards;
}
html.js .hero-anim > *:nth-child(1){ animation-delay: .05s; }
html.js .hero-anim > *:nth-child(2){ animation-delay: .13s; }
html.js .hero-anim > *:nth-child(3){ animation-delay: .21s; }
html.js .hero-anim > *:nth-child(4){ animation-delay: .29s; }
html.js .hero-anim > *:nth-child(5){ animation-delay: .37s; }
html.js .hero-visual{ opacity: 0; animation: rise 1s cubic-bezier(.2,.75,.25,1) .3s forwards; }
@keyframes rise{ to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  html.js .hero-anim > *, html.js .hero-visual{ opacity: 1; transform: none; animation: none; }
}

/* ------------------------------------------------- moldura + mockups -- */

.frame{
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.frame-bar{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.frame-dots{ display: flex; gap: 5px; }
.frame-dots i{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border-2);
  display: block;
}
.frame-url{
  flex: 1;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .22rem .7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frame-url b{ color: var(--primary); font-weight: 500; }

/* painel: barra lateral + conteudo */
.mock{
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  min-height: 340px;
  font-size: 12px;
  line-height: 1.4;
}
.mock-side{
  border-right: 1px solid var(--border);
  background: var(--bg-2);
  padding: .8rem .6rem;
  display: grid;
  align-content: start;
  gap: 2px;
}
.mock-unit{
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .5rem;
  margin-bottom: .6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 560;
  color: var(--text);
}
.mock-unit .sq{
  width: 18px; height: 18px;
  border-radius: 6px;
  background: var(--primary);
  color: var(--primary-ink);
  display: grid; place-items: center;
  font-size: 9px;
  font-weight: 700;
  flex: none;
}
.mock-unit .cx{ margin-left: auto; color: var(--text-3); font-size: 10px; }
.mock-side a, .mock-side span{
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem .5rem;
  border-radius: 8px;
  color: var(--text-2);
  text-decoration: none;
}
.mock-side .on{ background: var(--primary-soft); color: var(--primary); font-weight: 560; }
.mock-side .ico{
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1.4px solid currentColor;
  opacity: .65;
  flex: none;
}
.mock-sep{
  height: 1px;
  background: var(--border);
  margin: .55rem .5rem;
}
.mock-main{ padding: .9rem 1rem 1.1rem; display: grid; align-content: start; gap: .75rem; }
.mock-head{ display: flex; align-items: center; gap: .5rem; }
.mock-head h4{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 620;
  margin: 0;
  letter-spacing: 0;
}
.mock-head .btnlet{
  margin-left: auto;
  background: var(--primary);
  color: var(--primary-ink);
  border-radius: 7px;
  padding: .25rem .55rem;
  font-size: 10px;
  font-weight: 560;
}
.chips{ display: flex; flex-wrap: wrap; gap: .3rem; }
.chip{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .03em;
  padding: .18rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  color: var(--text-3);
  white-space: nowrap;
}
.chip.on{ border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.chip.wait{ border-color: color-mix(in oklab, var(--accent) 55%, transparent); color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 20%, transparent); }
[data-theme="dark"] .chip.wait{ color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.chip.ok{ border-color: color-mix(in oklab, var(--ok) 55%, transparent); color: var(--ok); }

.mock-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.mcard{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}
.mcard .thumb{
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--primary-soft), var(--surface-2));
  border-bottom: 1px solid var(--border);
  position: relative;
  display: grid;
  place-items: center;
}
.mcard .thumb::after{
  content: "";
  width: 40%; height: 6px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--primary) 30%, transparent);
}
.mcard .body{ padding: .4rem .5rem .5rem; display: grid; gap: .3rem; }
.mcard .ttl{ font-weight: 560; color: var(--text); font-size: 11px; }
.bar{
  height: 5px;
  border-radius: 3px;
  background: var(--border);
}
.bar.w70{ width: 70%; }
.bar.w45{ width: 45%; }
.bar.w85{ width: 85%; }

.mock-rows{ display: grid; gap: .4rem; }
.mrow{
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  padding: .45rem .6rem;
}
.mrow .sq{
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--primary-soft);
  flex: none;
}
.mrow .grow{ flex: 1; display: grid; gap: .25rem; }

@media (max-width: 560px){
  .mock{ grid-template-columns: minmax(0, 1fr); }
  .mock-side{
    border-right: 0;
    border-bottom: 1px solid var(--border);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    align-content: center;
  }
  .mock-side .mock-unit, .mock-side .mock-sep{ display: none; }
  .mock-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------- a dor (3) -- */

.pain{
  border-block: 1px solid var(--border);
  background: var(--bg-2);
}
.pain-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.pain-item{
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.1rem, 2.2vw, 2rem);
  border-right: 1px solid var(--border);
}
.pain-item:last-child{ border-right: 0; }
.pain-item .n{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-3);
  letter-spacing: .1em;
  display: block;
  margin-bottom: .7rem;
}
.pain-item p{
  margin: 0;
  font-size: 1.03rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
}
.pain-item p span{ color: var(--text-3); font-weight: 400; }
@media (max-width: 820px){
  .pain-grid{ grid-template-columns: minmax(0, 1fr); }
  .pain-item{ border-right: 0; border-bottom: 1px solid var(--border); }
  .pain-item:last-child{ border-bottom: 0; }
}

/* ------------------------------------------------------------- grades -- */

.grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.grid-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}
@media (max-width: 980px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: minmax(0, 1fr); }
}

.card{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover{ border-color: var(--border-2); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.card h3{ margin-bottom: .55rem; }
.card p{ color: var(--text-2); font-size: .96rem; margin: 0; }
.card p + p{ margin-top: .7rem; }
.card-ico{
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 1.1rem;
}
.card-num{
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: .1em;
  display: block;
  margin-bottom: .9rem;
}

/* passos numerados com fio ligando */
.steps{ position: relative; }
.steps .card{ background: var(--surface); }
.steps::before{
  content: "";
  position: absolute;
  top: 46px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-2) 0 6px, transparent 6px 12px);
  z-index: -1;
}
@media (max-width: 980px){ .steps::before{ display: none; } }

/* --------------------------------------------------------- faixa BYOK -- */

.band{
  background: var(--primary-soft);
  border-block: 1px solid color-mix(in oklab, var(--primary) 18%, transparent);
  position: relative;
  overflow: hidden;
}
.band::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--grid-line) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 40px 100%;
  opacity: .8;
  pointer-events: none;
}
.band > *{ position: relative; }

.paths{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
  margin-top: 2.5rem;
}
.path{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.path h3{ display: flex; align-items: center; gap: .55rem; }
.path .tag{
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 500;
}
.path ul{ list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.path li{
  display: flex;
  gap: .6rem;
  font-size: .95rem;
  color: var(--text-2);
  line-height: 1.5;
}
.path li::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
  margin-top: .55em;
}
.paths-or{
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  position: relative;
}
.paths-or span{
  background: var(--primary-soft);
  padding: .5rem 0;
  z-index: 1;
}
.paths-or::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: color-mix(in oklab, var(--primary) 22%, transparent);
}
@media (max-width: 880px){
  .paths{ grid-template-columns: minmax(0, 1fr); }
  .paths-or::before{ top: 50%; bottom: 50%; left: 0; right: 0; width: auto; height: 1px; }
}

/* ------------------------------------------- template vs. modelo IA -- */

.versus{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 2.5rem;
}
@media (max-width: 760px){ .versus{ grid-template-columns: minmax(0, 1fr); } }

.vs-col{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vs-col > header{
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface-2);
}
.vs-col > header h3{ margin: 0; font-size: 1rem; }
.vs-col > header .mono{
  margin-left: auto;
  font-size: .68rem;
  color: var(--text-3);
  letter-spacing: .05em;
}
.vs-body{ padding: 1.1rem; display: grid; gap: .9rem; }
.vs-body > p{ margin: 0; font-size: .93rem; color: var(--text-2); }

/* A arte de template recolore sozinha, ciclando tres marcas ficticias — e a
   demonstracao do argumento: o mesmo arquivo, a marca de cada cliente. */
.art{
  aspect-ratio: 4 / 5;
  /* proporcao de post, mas com largura de previa: sem o teto a peca domina
     a secao inteira numa tela grande */
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 1rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: .7rem;
  --b-primary: #4F46E5;
  --b-bg: #EEF0FF;
  --b-text: #1E1B4B;
  background: var(--b-bg);
  color: var(--b-text);
  overflow: hidden;
}
.art-tpl{ animation: brandcycle 15s infinite; }
@keyframes brandcycle{
  0%, 30%   { --b-primary: #4F46E5; --b-bg: #EEF0FF; --b-text: #1E1B4B; }
  33%, 63%  { --b-primary: #0F766E; --b-bg: #ECFDF5; --b-text: #052E2B; }
  66%, 96%  { --b-primary: #B91C1C; --b-bg: #FEF6F2; --b-text: #450A0A; }
  100%      { --b-primary: #4F46E5; --b-bg: #EEF0FF; --b-text: #1E1B4B; }
}
@media (prefers-reduced-motion: reduce){ .art-tpl{ animation: none; } }

.art-top{ display: flex; align-items: center; gap: .45rem; }
.art-logo{
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--b-primary);
  flex: none;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
}
.art-brand{
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a "foto" do produto: luz de estudio + a peca desenhada na cor da marca */
.art-photo{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff 0%, transparent 62%),
    color-mix(in oklab, var(--b-primary) 12%, #fff);
}
.art-photo::after{
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 8%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--b-primary) 26%, transparent), transparent);
}
.art-photo svg{
  position: relative;
  width: 58%;
  max-height: 78%;
  color: var(--b-primary);
  filter: drop-shadow(0 8px 14px color-mix(in oklab, var(--b-primary) 30%, transparent));
}

.art-title{
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0;
}
.art-title b{ color: var(--b-primary); font-weight: 600; }

.art-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.art-price{
  font-family: var(--font-mono);
  font-size: .68rem;
  opacity: .85;
  white-space: nowrap;
}
.art-cta{
  background: var(--b-primary);
  color: #fff;
  border-radius: 999px;
  padding: .34rem .8rem;
  font-size: .72rem;
  font-weight: 560;
  white-space: nowrap;
}

/* a arte "modelo de imagem": bonita de cena, errada de texto */
.art-gen{
  border-color: transparent;
  --b-primary: rgba(255,255,255,.24);
  --b-text: #fff;
  background: linear-gradient(155deg, #2f2b45 0%, #6c5f8c 42%, #c08a6c 100%);
  color: #fff;
}
.art-gen .art-logo{ background: rgba(255,255,255,.25); }
.art-gen .art-brand{ opacity: .55; }
.art-gen .art-photo{
  background:
    radial-gradient(70% 55% at 38% 32%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(60% 60% at 72% 74%, rgba(0,0,0,.34), transparent 62%),
    linear-gradient(150deg, #4a4363, #9b7f8e 55%, #d0a184);
}
.art-gen .art-photo::after{ display: none; }
.art-gen .art-photo svg{
  color: rgba(255,255,255,.5);
  filter: blur(1.1px) drop-shadow(0 10px 16px rgba(0,0,0,.35));
}
.art-gen .art-title{ text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.art-gen .glitch{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-block;
  transform: skewX(-2.5deg);
  filter: blur(.3px);
}
.art-gen .art-cta{
  background: rgba(255,255,255,.22);
  color: #fff;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.vs-facts{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vs-facts li{
  display: flex;
  gap: .55rem;
  font-size: .88rem;
  color: var(--text-2);
  line-height: 1.45;
}
.vs-facts .y{ color: var(--ok); font-weight: 700; flex: none; }
.vs-facts .n{ color: var(--text-3); font-weight: 700; flex: none; }

/* ------------------------------------------------- video: rosto e voz -- */

.video-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 2.5rem;
}
@media (max-width: 880px){
  .video-grid{ grid-template-columns: minmax(0, 1fr); }
  .video-visual{ order: -1; }
}
.video-cards{ display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.video-card{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.05rem 1.2rem;
  transition: border-color .2s, transform .2s;
}
.video-card:hover{ border-color: color-mix(in oklab, var(--primary) 40%, transparent); transform: translateX(3px); }
.video-card .ico{
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
}
.video-card h3{ margin: 0 0 .3rem; font-size: 1.05rem; }
.video-card p{ margin: 0; font-size: .93rem; color: var(--text-2); line-height: 1.5; }

.video-visual{ display: grid; place-items: center; }

/* o telefone com o reel */
.phone{
  width: min(268px, 100%);
  aspect-ratio: 9 / 19;
  border-radius: 30px;
  border: 8px solid var(--surface-2);
  outline: 1px solid var(--border-2);
  background: #14121c;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}
.phone::before{
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 62px; height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  z-index: 3;
}
.phone-video{
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(75% 45% at 50% 22%, rgba(255,255,255,.20), transparent 62%),
    linear-gradient(165deg, #3b3454 0%, #6d5f86 46%, #c79a76 100%);
}
.phone-video svg{ width: 52%; color: rgba(255,255,255,.62); }
.phone-play{
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: grid; place-items: center;
  color: #14121c;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.phone-play svg{ width: 16px; color: currentColor; margin-left: 2px; }
.phone-cap{
  position: relative;
  padding: .75rem .8rem .9rem;
  background: linear-gradient(0deg, rgba(0,0,0,.82), transparent);
  color: #fff;
  display: grid;
  gap: .45rem;
}
.phone-cap .who{
  display: flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 560;
}
.phone-cap .who i{
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(140deg, #f0c9a8, #c98d6b);
  display: block; flex: none;
}
.phone-cap .txt{ font-size: .7rem; opacity: .88; line-height: 1.35; }

/* a barra de audio com a onda */
.wave{
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  opacity: .95;
}
.wave-bars{ display: flex; align-items: center; gap: 2px; height: 14px; }
.wave-bars i{
  width: 2px;
  border-radius: 2px;
  background: currentColor;
  animation: wavepulse 1.1s ease-in-out infinite;
}
@keyframes wavepulse{ 0%,100%{ height: 4px; } 50%{ height: 13px; } }
@media (prefers-reduced-motion: reduce){ .wave-bars i{ animation: none; height: 8px; } }

.vs-facts{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vs-facts li{
  display: flex;
  gap: .55rem;
  font-size: .88rem;
  color: var(--text-2);
  line-height: 1.45;
}
.vs-facts .y{ color: var(--ok); font-weight: 700; flex: none; }
.vs-facts .n{ color: var(--text-3); font-weight: 700; flex: none; }

/* ------------------------------------------------------------- precos -- */

.plans{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  margin-top: 2.75rem;
}
@media (max-width: 820px){ .plans{ grid-template-columns: minmax(0, 1fr); } }

.plan{
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
}
.plan h3{ margin: 0; font-size: 1.5rem; }
.plan .who{ color: var(--text-3); font-size: .92rem; margin: 0; }
.plan .price{
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin: .35rem 0 0;
  font-family: var(--font-display);
  color: var(--text);
}
.plan .price .cur{ font-size: 1.1rem; font-weight: 500; color: var(--text-2); }
.plan .price .amt{ font-size: clamp(2.8rem, 6vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.plan .price .per{ font-size: 1rem; color: var(--text-3); font-family: var(--font-body); }
.plan .feats{
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  gap: .62rem;
  /* o cartao mais curto cresce para igualar o mais alto; sem align-content
     o grid distribui essa sobra ENTRE as linhas e a lista fica esparramada */
  align-content: start;
  flex: 1;
}
.plan .feats li{
  display: flex;
  gap: .6rem;
  font-size: .94rem;
  color: var(--text-2);
  line-height: 1.45;
}
.plan .feats li svg{ flex: none; margin-top: .28em; color: var(--primary); }
.plan .feats li.off{ color: var(--text-3); }
.plan .feats li.off svg{ color: var(--text-3); }
.plan .btn{ justify-content: center; margin-top: .5rem; }

.plan-featured{
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, var(--primary-soft), transparent 180px),
    var(--surface);
}
.plan .badge{
  position: absolute;
  top: -12px;
  right: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 620;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
}

/* A nota do custo da IA fica sempre visivel, logo abaixo do preco. Nao pode
   viver num acordeao: e a informacao que evita o visitante concluir que os
   US$ 18 cobrem a geracao. */
.plan-note{
  margin: .2rem 0 0;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: .87rem;
  line-height: 1.5;
}
.plan-note strong{ color: var(--text); }
.plan-note-warn{
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--accent) 13%, var(--surface));
}
[data-theme="dark"] .plan-note-warn{
  background: color-mix(in oklab, var(--accent) 11%, var(--surface));
}

.split-title{
  margin: .5rem 0 0;
  font-weight: 560;
  font-size: .95rem;
}

.plan{ container-type: inline-size; }
.ai-split{
  display: grid;
  /* uma coluna por padrao: no cartao da home as duas ficavam estreitas demais
     e o texto quebrava em cascata. Duas colunas so quando o cartao comporta. */
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  border-top: 1px dashed var(--border-2);
  padding-top: 1.1rem;
  margin-top: .4rem;
}
@container (min-width: 460px){ .ai-split{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ai-split > div{
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .8rem .9rem;
}
.ai-split strong{
  display: block;
  font-size: .9rem;
  margin-bottom: .3rem;
}
.ai-split p{ margin: 0; font-size: .82rem; color: var(--text-3); line-height: 1.45; }

.price-note{
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 1.1rem 1.3rem;
  color: var(--text-3);
  font-size: .89rem;
}
.price-note p{ margin: 0; }
.price-note p + p{ margin-top: .5rem; }

/* --------------------------------------------------------------- FAQ -- */

.faq{ max-width: 820px; margin-inline: auto; }
.faq details{
  border-bottom: 1px solid var(--border);
}
.faq details:first-of-type{ border-top: 1px solid var(--border); }
.faq summary{
  list-style: none;
  cursor: pointer;
  padding: 1.15rem .2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 560;
  font-size: 1.03rem;
  color: var(--text);
  transition: color .16s;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--primary); }
.faq summary::after{
  content: "";
  margin-left: auto;
  width: 10px; height: 10px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
  flex: none;
  opacity: .55;
}
.faq details[open] summary::after{ transform: rotate(-135deg) translate(-3px, -3px); }
.faq .answer{
  padding: 0 3rem 1.35rem .2rem;
  color: var(--text-2);
  font-size: .97rem;
  max-width: 68ch;
}
.faq .answer p{ margin: 0; }
.faq .answer p + p{ margin-top: .7rem; }

/* ----------------------------------------------------------- CTA fim -- */

.cta-final{
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 12% 0%, var(--primary-soft), transparent 60%),
    var(--surface);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.cta-final h2{ margin-bottom: .4em; }
.cta-final .lede{ margin-inline: auto; }
.cta-final .hero-actions{ justify-content: center; }

/* ------------------------------------------------- product: vitrines -- */

.showcase{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--border);
}
.showcase:last-of-type{ border-bottom: 0; }
.showcase.flip .showcase-text{ order: 2; }
@media (max-width: 900px){
  .showcase{ grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .showcase.flip .showcase-text{ order: 0; }
}
.showcase-text h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
.showcase-text p{ color: var(--text-2); }
.facts{
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.facts li{
  display: flex;
  gap: .6rem;
  font-size: .93rem;
  color: var(--text-2);
  line-height: 1.5;
}
.facts li::before{
  content: "";
  width: 5px; height: 5px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}
.facts li b{ color: var(--text); font-weight: 560; }

/* ---------------------------------------------------- ai: rack + json -- */

.rack{
  display: grid;
  gap: .75rem;
  margin-top: 2.25rem;
}
.socket{
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: .9rem 1.1rem;
  transition: border-color .2s, background .2s;
}
.socket:hover{ border-color: color-mix(in oklab, var(--primary) 45%, transparent); }
.socket-cap{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
}
.socket-cap .plug{
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--primary-soft);
  display: grid; place-items: center;
  color: var(--primary);
  flex: none;
}
.socket-list{ display: flex; flex-wrap: wrap; gap: .4rem; }
.socket-list span{
  font-family: var(--font-mono);
  font-size: .74rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--bg-2);
  color: var(--text-2);
  white-space: nowrap;
}
.socket-list span.you{
  border-style: dashed;
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
}
@media (max-width: 620px){
  .socket{ grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}

.table-wrap{
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table.matrix{
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 640px;
}
table.matrix th, table.matrix td{
  text-align: left;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.matrix thead th{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  background: var(--bg-2);
  white-space: nowrap;
}
table.matrix tbody tr:last-child td{ border-bottom: 0; }
table.matrix tbody tr:hover{ background: var(--surface-2); }
table.matrix td code{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--primary);
  background: var(--primary-soft);
  padding: .12rem .4rem;
  border-radius: 5px;
  white-space: nowrap;
}
table.matrix td.dim{ color: var(--text-3); }

.codeblock{
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
  margin: 1.5rem 0;
}
.codeblock header{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
}
.codeblock pre{
  margin: 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.65;
  color: var(--text-2);
  -webkit-overflow-scrolling: touch;
}
.codeblock .k{ color: var(--primary); }
.codeblock .s{ color: var(--ok); }
.codeblock .c{ color: var(--text-3); font-style: italic; }

.callout{
  border-left: 3px solid var(--primary);
  background: var(--primary-soft);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.15rem 1.35rem;
  margin: 1.75rem 0;
}
.callout p{ margin: 0; color: var(--text); }
.callout p + p{ margin-top: .6rem; }
.callout .mono{
  display: block;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .5rem;
}

/* --------------------------------------------------------- prosa/sobre */

.prose{
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.06rem;
  line-height: 1.72;
}
.prose h2{
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  margin-top: 2.6em;
  margin-bottom: .55em;
}
.prose h2:first-child{ margin-top: 0; }
.prose h3{
  font-size: 1.2rem;
  margin-top: 2em;
  margin-bottom: .5em;
}
.prose p{ color: var(--text-2); }
.prose p strong, .prose li strong{ color: var(--text); }
.prose ul, .prose ol{ color: var(--text-2); padding-left: 1.2em; }
.prose li{ margin-bottom: .5em; }
.prose blockquote{
  margin: 1.8em 0;
  padding: .2em 0 .2em 1.4em;
  border-left: 3px solid var(--primary);
  color: var(--text);
  font-size: 1.1rem;
  font-family: var(--font-display);
  letter-spacing: -.015em;
  line-height: 1.4;
}
.prose blockquote p{ color: inherit; }
.prose code{
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .1em .35em;
  color: var(--text);
}
.prose hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3em 0;
}
.prose .lede{ font-size: 1.2rem; color: var(--text-2); }
.prose > .table-wrap{ margin: 1.8em 0; }

/* ==========================================================================
   Pecas internas dos mockups do painel
   ========================================================================== */

/* formulario do kit de marca */
.mock-fields{ display: grid; gap: .45rem; }
.mfield{
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: .38rem .55rem;
}
.mfield .lbl{
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: .18rem;
}
.mfield .val{ font-size: 11px; color: var(--text); }
.mfield .val.dim{ color: var(--text-3); }
.mtabs{ display: flex; gap: .28rem; border-bottom: 1px solid var(--border); padding-bottom: .45rem; }
.mtabs span{
  font-size: 10px;
  padding: .16rem .42rem;
  border-radius: 6px;
  color: var(--text-3);
}
.mtabs span.on{ background: var(--primary-soft); color: var(--primary); font-weight: 560; }
.swatches{ display: flex; gap: .3rem; align-items: center; }
.swatches i{
  width: 20px; height: 20px;
  border-radius: 6px;
  display: block;
  border: 1px solid var(--border-2);
}
.autosave{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ok);
  letter-spacing: .04em;
}

/* pipeline: copy -> visual -> video -> caption */
.pipe{ display: grid; gap: .35rem; }
.pstep{
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: 8px;
  background: var(--bg);
  padding: .4rem .55rem;
}
.pstep.done{ border-left-color: var(--ok); }
.pstep.run{ border-left-color: var(--primary); background: var(--primary-soft); }
.pstep.lock{ border-left-color: var(--accent); }
.pstep .nm{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--text);
  min-width: 54px;
}
.pstep .mdl{
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pstep .st{ margin-left: auto; display: flex; align-items: center; gap: .3rem; flex: none; }
.pstep .st svg{ width: 11px; height: 11px; }
.pstep.run .st{ color: var(--primary); }
.pstep.done .st{ color: var(--ok); }
.pstep.lock .st{ color: var(--accent-ink); }
[data-theme="dark"] .pstep.lock .st{ color: var(--accent); }
.pstep .spin{
  width: 10px; height: 10px;
  border: 1.6px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* calendario */
.mock-cal{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--border);
}
.mock-cal .dow{
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  padding: .25rem 0;
}
.mock-cal .day{
  background: var(--bg);
  min-height: 40px;
  padding: .2rem .22rem;
  display: grid;
  align-content: start;
  gap: 2px;
}
.mock-cal .day > b{ font-size: 8.5px; color: var(--text-3); font-weight: 500; }
.mock-cal .ev{
  font-size: 8px;
  border-radius: 4px;
  padding: .1rem .25rem;
  color: var(--primary-ink);
  background: var(--primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-cal .ev.b{ background: var(--sky); color: #06232f; }
.mock-cal .ev.c{ background: var(--accent); color: var(--accent-ink); }
.mock-cal .day.drag{ outline: 1.5px dashed var(--primary); outline-offset: -2px; }

/* barra de progresso do upload */
.prog{
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.prog i{
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}

/* bloco de prompt dentro do mockup */
.mprompt{
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: .5rem .6rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.mprompt .v{ color: var(--primary); }

/* linha de metricas */
.mmetrics{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
}
.mmetric{
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: .35rem .45rem;
}
.mmetric b{ display: block; font-size: 13px; color: var(--text); letter-spacing: -.02em; }
.mmetric span{
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}