/* ===========================
   Rotator (H1/H2 rotating words)
   =========================== */
      .rotator,
      .hero-rotator {
        display: inline-grid;
        position: relative;
        align-items: center;
      }

      .rotator .rotator-item,
      .rotator .rotator-ghost,
      .hero-rotator .rotator-item,
      .hero-rotator .rotator-ghost {
        grid-area: 1/1;
      }

      .rotator .rotator-item,
      .hero-rotator .rotator-item {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .35s ease, transform .35s ease;
        will-change: opacity, transform;
      }

      .rotator .rotator-item[data-active="true"],
      .hero-rotator .rotator-item[data-active="true"] {
        opacity: 1;
        transform: translateY(0);
      }

      .rotator .rotator-ghost,
      .hero-rotator .rotator-ghost {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
      }

      /* Acessibilidade */
      @media (prefers-reduced-motion: reduce) {

        .rotator .rotator-item,
        .hero-rotator .rotator-item {
          transition: none;
        }

        .rotator[data-force-anim="true"] .rotator-item,
        .hero-rotator[data-force-anim="true"] .rotator-item {
          transition: opacity .35s ease, transform .35s ease !important;
        }
      }

      /* ===========================
   Mobile Drawer (overlay)
   =========================== */
      .mobile-drawer[hidden] {
        display: none !important;
      }

      .mobile-drawer {
        position: fixed;
        inset: 0;
        z-index: 9999;
      }

      .mobile-drawer-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        backdrop-filter: saturate(120%) blur(2px);
      }

      .mobile-drawer-panel {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(92vw, 420px);
        background: var(--color-surface, #0b0b0b);
        color: inherit;
        border-left: 1px solid rgba(255, 255, 255, .08);
        transform: translateX(100%);
        transition: transform .28s ease-out;
        display: flex;
        flex-direction: column;
        padding: 16px;
      }

      .mobile-drawer[data-open="true"] .mobile-drawer-panel {
        transform: translateX(0);
      }

      .mobile-drawer-close {
        background: transparent;
        border: 0;
        color: inherit;
        font-size: 22px;
        line-height: 1;
        align-self: flex-end;
        padding: 8px;
        cursor: pointer;
      }

      .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 0;
      }

      .mobile-nav-link,
      .mobile-cta {
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        border-radius: 10px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        color: inherit;
        cursor: pointer;
        text-decoration: none;
      }

      .mobile-nav-link:hover,
      .mobile-cta:hover {
        background: rgba(255, 255, 255, .08);
      }

      /* Accordion dentro do drawer */
      .mobile-accordion {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .08);
      }

      .mobile-accordion-toggle {
        width: 100%;
        text-align: left;
        padding: 14px;
        background: rgba(255, 255, 255, .06);
        border: 0;
        color: inherit;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
      }

      .mobile-accordion-toggle .caret {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transition: transform .2s ease;
      }

      .mobile-accordion-toggle[aria-expanded="true"] .caret {
        transform: rotate(45deg);
      }

      .mobile-accordion-panel {
        display: grid;
        gap: 6px;
        padding: 8px;
        background: rgba(255, 255, 255, .03);
      }

      .mobile-accordion-panel a small {
        display: block;
        opacity: .75;
      }

      /* Bloqueio de scroll quando drawer aberto */
      body.menu-open {
        overflow: hidden;
      }

      /* ===========================
   Header Mobile x Navbar Desktop
   =========================== */
      /* Desktop por padrão */
      nav.navbar,
      nav#navbar {
        display: block !important;
      }

      header.mobile-navbar {
        display: none !important;
      }

      /* Mobile: até 768px */
      @media (max-width: 767.98px) {

        /* esconde a navbar desktop no mobile */
        nav.navbar,
        nav#navbar {
          display: none !important;
        }

        /* mostra o header mobile */
        header.mobile-navbar {
          display: flex !important;
          align-items: center;
          width: 100%;
          padding: 12px 16px;
        }

        header.mobile-navbar strong {
          flex: 0 0 auto;
          line-height: 1;
        }

        header.mobile-navbar .navbar-content {
          flex: 1 1 auto;
          display: flex;
          justify-content: flex-end;
          /* hambúrguer à direita */
          align-items: center;
          margin-left: 12px;
        }

        header.mobile-navbar .mobile-menu-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: transparent;
          border: 1px solid rgba(255, 255, 255, .12);
        }

        /* o drawer só é relevante no mobile */
        #mobile-drawer {
          display: block;
        }

        /* continua oculto por [hidden] até abrir */
      }

      /* Garante que o drawer não aparece no desktop por engano */
      @media (min-width: 768px) {
        #mobile-drawer {
          display: none !important;
        }
      }

      /* sticky no desktop e mobile */
      nav.navbar,
      header.mobile-navbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        backdrop-filter: saturate(120%) blur(6px);
        -webkit-backdrop-filter: saturate(120%) blur(6px);
        transition: box-shadow .2s ease, background-color .2s ease;
      }

      nav.navbar.is-scrolled,
      header.mobile-navbar.is-scrolled {
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
        background-color: rgba(11, 11, 11, .6);
        /* ajusta ao seu tema */
      }

      /* FAQ accordion — CSS-only */
      .faq-accordion .faq-item {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
      }

      .faq-accordion .faq-item:last-child {
        border-bottom: 0;
      }

      /* input invisível que controla a abertura */
      .faq-accordion .faq-toggle {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      /* cabeçalho clicável (mantemos .faq-question) */
      .faq-accordion .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 12px;
        cursor: pointer;
        user-select: none;
        background: transparent;
        border: 0;
        text-align: left;
      }

      /* ícone seta (SVG inline) */
      .faq-accordion .faq-icon {
        width: 16px;
        height: 16px;
        transition: transform .25s ease;
      }

      .faq-accordion .faq-toggle:checked+.faq-question .faq-icon {
        transform: rotate(180deg);
      }

      /* animação suave da resposta */
      .faq-accordion .faq-answer {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .25s ease, opacity .25s ease;
        opacity: 0;
      }

      .faq-accordion .faq-answer>div {
        overflow: hidden;
        padding: 0 12px 12px;
      }

      /* quando aberto */
      .faq-accordion .faq-toggle:checked~.faq-answer {
        grid-template-rows: 1fr;
        opacity: 1;
      }

      /* acessibilidade: foco visível no label */
      .faq-accordion .faq-question:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .35);
        outline-offset: 2px;
      }

      /* —— Rotator: ícone + texto lado a lado —— */
      .rotator .rotator-link,
      .hero-rotator .rotator-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        /* espaço entre ícone e texto */
        white-space: nowrap;
        /* não quebrar entre ícone e label */
        text-decoration: none;
        color: inherit;
      }

      .rotator .rotator-link svg,
      .hero-rotator .rotator-link svg {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        vertical-align: middle;
        transform: translateY(1px);
        /* micro ajuste ótico */
      }

      @media (min-width: 768px) {

        .rotator .rotator-link svg,
        .hero-rotator .rotator-link svg {
          width: 22px;
          height: 22px;
        }
      }

      /* garante que o item visível fique inline (caso algum CSS antigo force block) */
      .hero-rotator .rotator-item>*,
      .rotator .rotator-item>* {
        display: inline-flex !important;
        align-items: center;
      }

      /* (as transições de .rotator/.hero-rotator você já tem: data-active -> opacity/translate) */
      /* Badge amarelo (BETA) */
      .badge-beta {
        display: inline-flex;
        align-items: center;
        padding: 2px 6px;
        margin-left: 6px;
        border-radius: 999px;
        background: #ffe01b;
        /* amarelo pedido */
        color: #111;
        /* alto contraste */
        font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        font-weight: 700;
        font-size: 10.5px;
        /* pequeno, mas legível */
        line-height: 1.1;
        letter-spacing: .02em;
        text-transform: uppercase;
        border: 1px solid rgba(0, 0, 0, .18);
        vertical-align: middle;
      }

      /* rótulo do nome da plataforma dentro do rotator → um pouco menor que o H1 */
      .hero-title .hero-rotator .rotator-link>span,
      .section-title .rotator .rotator-link>span {
        font-size: clamp(.72em, 2.4vw, .88em);
        line-height: .95;
        letter-spacing: .005em;
      }

      /* para nomes muito longos (ex.: Google AI Overviews) */
      .hero-rotator [data-long="true"] .rotator-link>span,
      .rotator [data-long="true"] .rotator-link>span {
        font-size: clamp(.64em, 2.1vw, .8em);
      }


/* ===== PRICING (scoped) ===== */
.pricing{
  margin: 56px auto 100px;
  max-width: 1100px;
  padding: 0 16px;
}
.pricing-intro{
  display:grid; gap:14px; margin-bottom:24px;
}
.pricing-sub{ opacity:.8; max-width:70ch }
.pricing-cta{ display:flex; gap:10px; flex-wrap:wrap }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; text-decoration:none;
  border:1px solid rgba(255,255,255,.12); color:#fff; background:#111;
}
.btn:hover{ background:#161616 }
.btn-primary{ background:#fff; color:#000; border-color:#fff }
.btn-primary:hover{ background:#eaeaea }
.btn-ghost{ background:transparent }
.btn-block{ width:100%; margin-top:10px }

/* cards */
.pricing-cards{
  display:grid; grid-template-columns: 1fr; gap:16px;
}
.plan{
  border:1px solid rgba(255,255,255,.12);
  background: #0b0b0b;
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
}
.plan-pro{ background:#0d0d0d }

.plan-header{ padding:18px; border-bottom:1px dashed rgba(255,255,255,.12); }
.plan-name{ font-size:18px; margin:0 0 6px }
.plan-price{ font-size:28px; font-weight:700; margin:0 0 6px }
.plan-price span{ font-weight:700 }
.plan-price .per{ font-weight:500; opacity:.75; margin-left:4px; font-size:.7em }
.plan-price.custom{ font-size:22px }
.plan-note{ opacity:.8; margin:6px 0 0 }

/* features table */
.plan-features{ display:flex; flex-direction:column }
.feature-row{
  display:grid; grid-template-columns: 220px 1fr;
  gap:18px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08);
}
.feature-row:last-child{ border-bottom:0 }
.feature-intro{ grid-template-columns: 1fr; gap:8px; background:rgba(255,255,255,.02) }
.feature-intro h4{ margin:0 }
.feature-intro p{ margin:0; opacity:.85 }

.feature-label{ opacity:.75 }
.feature-col{ display:flex; align-items:center }
.feature-list{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 18px; margin:0; padding:0; list-style:none }

/* ticks / status */
.feature-list li{ position:relative; padding-left:22px }
.feature-list li.ok::before{
  content:"✓"; position:absolute; left:0; top:0; line-height:1;
  width:16px; height:16px; display:inline-grid; place-items:center;
  border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:12px;
}
.feature-list li.soon{ opacity:.7 }
.feature-list li.soon::before{ content:"•"; font-size:14px }

/* responsive */
@media (min-width: 900px){
  .pricing-cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .feature-row{ grid-template-columns: 1fr; }
  .feature-list{ grid-template-columns: 1fr; }
}

/* adições p/ pills Yes/No e linhas pontilhadas como na ref */
.val{
  display:inline-grid; place-items:center;
  padding:3px 8px; border-radius:999px; font-size:.85em; font-weight:700;
}
.val.ok{ background:rgba(76,175,80,.15); border:1px solid rgba(76,175,80,.35); }
.val.no{ background:rgba(244,67,54,.15); border:1px solid rgba(244,67,54,.35); }

.feature-row.dashed{ border-top:1px dashed rgba(255,255,255,.12); }
.feature-row + .feature-row.dashed{ margin-top:-1px; } /* junta bem as linhas */
.feature-intro + .feature-row{ border-top:1px dashed rgba(255,255,255,.12); }

/* ===== COMPARATIVO: desktop sem rótulos no Enterprise ===== */
@media (min-width: 980px){
  /* some as intros duplicadas no Enterprise */
  .plan.plan-pro .feature-intro{ display:none; }

  /* esconde a coluna "Feature" no Enterprise
     e puxa os valores pra esquerda */
  .plan.plan-pro .feature-row{ 
    grid-template-columns: 1fr; /* em vez de 220px 1fr */
  }
  .plan.plan-pro .feature-row .feature-label{
    display:none;
  }

  /* equaliza o visual das listas no comparativo */
  .plan .feature-list{ align-items:start; }
  .plan.plan-pro .feature-list{ margin-left:0; }
}

/* pílulas Yes/No (mantém o que já enviei) */
.val{ display:inline-grid; place-items:center; padding:3px 8px; border-radius:999px; font-size:.85em; font-weight:700; }
.val.ok{ background:rgba(76,175,80,.15); border:1px solid rgba(76,175,80,.35); }
.val.no{ background:rgba(244,67,54,.15); border:1px solid rgba(244,67,54,.35); }

/* linhas tracejadas entre blocos longos (opcional) */
.feature-row.dashed{ border-top:1px dashed rgba(255,255,255,.12); }
.feature-intro + .feature-row{ border-top:1px dashed rgba(255,255,255,.12); }

/* destaca a coluna de rótulos do card esquerdo */
@media (min-width: 980px){
  .pricing-cards .plan:first-child .feature-label{ color:#cfcfcf; opacity:.9; }
  .pricing-cards .plan:first-child .feature-row{ background:transparent; }
  .pricing-cards .plan.plan-pro .feature-row{ background:rgba(255,255,255,.01); }
  .pricing-cards .plan .feature-row:hover{ background:rgba(255,255,255,.015); }
}

/* ===== COMPARISON TABLE ===== */
.compare{
  margin-top: 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  background:#0b0b0b;
}

/* cabeçalhos de seção (texto à esquerda) */
.c-section{ border-top:1px solid rgba(255,255,255,.10); }
.c-section:first-child{ border-top:0; }
.c-lead{
  padding:16px 18px;
  background:rgba(255,255,255,.02);
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.c-lead h4{ margin:0 0 6px; }
.c-lead p{ margin:0; opacity:.85; }

/* linhas: 3 colunas (label | lite | ent) */
.c-row{
  display:grid;
  grid-template-columns: 260px 1fr 1fr;
  gap:0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.c-row:last-child{ border-bottom:0; }
.c-row.dashed{ border-top:1px dashed rgba(255,255,255,.12); }

.c-label, .c-lite, .c-ent{ padding:16px 18px; }
.c-label{ opacity:.85; }

/* listas de itens com tique */
.c-list{ margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns: 1fr 1fr; gap:8px 18px;
}
.c-list li{ position:relative; padding-left:22px; }
.c-list li.ok::before{
  content:"✓"; position:absolute; left:0; top:0; line-height:1;
  width:16px; height:16px; display:inline-grid; place-items:center;
  border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:12px;
}
.c-list li.soon{ opacity:.7; }
.c-list li.soon::before{ content:"•"; font-size:14px; }

/* pills Yes/No */
.val{
  display:inline-grid; place-items:center;
  padding:3px 8px; border-radius:999px; font-size:.85em; font-weight:700;
}
.val.ok{ background:rgba(76,175,80,.15); border:1px solid rgba(76,175,80,.35); }
.val.no{ background:rgba(244,67,54,.15); border:1px solid rgba(244,67,54,.35); }

/* hover sutil por linha */
.c-row:hover{ background:rgba(255,255,255,.015); }

/* ===== RESPONSIVO ===== */
@media (max-width: 980px){
  .c-row{ grid-template-columns: 1fr; }
  .c-label{ border-bottom:1px dashed rgba(255,255,255,.12); background:rgba(255,255,255,.01); }
  .c-list{ grid-template-columns: 1fr; }
}

/* Cabeçalho fixo da tabela comparativa */
.compare-head{
  display:grid;
  grid-template-columns: 260px 1fr 1fr;
  background:#0b0b0b;
  border-bottom:1px solid rgba(255,255,255,.12);
  position:sticky;
  top:0;
  z-index:5;
}

.compare-head .c-label,
.compare-head .c-lite,
.compare-head .c-ent{
  padding:16px 18px;
  font-weight:700;
  background:#0b0b0b;
}

.compare-head .c-lite,
.compare-head .c-ent{
  text-align:left;
}

/* Força o Lite a ter apenas 1 coluna na lista */
.c-lite .c-list {
  grid-template-columns: 1fr !important;
}


/* ===== Tabs da tabela (mobile only) ===== */
.compare-tabs{ display:none; margin:12px 0 8px; gap:8px; }
.compare-tabs [role="tab"]{
  flex:1 1 0; padding:10px 12px; border-radius:12px;
  cursor: pointer;  
  border:1px solid rgba(255,255,255,.12);
  background:#0f0f0f; color:#fff; font-weight:700; letter-spacing:.02em;
}
.compare-tabs [role="tab"][aria-selected="true"]{
  background:#fff; color:#000; border-color:#fff;
}

/* ===== Comportamento mobile da comparação ===== */
@media (max-width: 980px){
  .compare-tabs{ display:flex; }

  /* esconde o header fixo no mobile */
  .compare-head{ display:none !important; }

  /* cada linha: [label | plano ativo] */
  .c-row{ grid-template-columns: 1fr 1fr; }

  /* esconde a coluna do plano inativo */
  .compare[data-active="lite"] .c-ent{ display:none !important; }
  .compare[data-active="ent"]  .c-lite{ display:none !important; }

  /* listas em 1 coluna no mobile */
  .c-list{ grid-template-columns: 1fr !important; }
}

/* Lite em 1 coluna também no desktop (você pediu) */
.c-lite .c-list{ grid-template-columns: 1fr; }

/* Aba ativa padrão (Lite) */
.compare-tabs [role="tab"][aria-selected="true"] {
  background:#fff;
  color:#000;
  border-color:#fff;
}

/* Aba Enterprise ativa */
.compare-tabs [data-plan="ent"][aria-selected="true"] {
  background:#ffe233;
  color:#000;
  border-color:#ffe233;
}

/* Linha externa da compare amarela quando Enterprise está ativa */
.compare[data-active="ent"] {
  border: 2px solid #ffe233;
  border-radius: 12px; /* opcional para manter estilo */
}

.compare {
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.c-ent .c-list {
  grid-template-columns: 1fr !important;
}

/* Backdrop + contenção */
.modal{
  position: fixed; inset: 0;
  display: none;           /* controlado via [aria-hidden] */
  background: rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1001; /* sempre na frente */
}
.modal[aria-hidden="false"]{ display:block; }

/* Caixa do modal: centrado, sem tremer (anima leve) */
.modal-dialog{
  position: relative;
  margin: clamp(16px, 6vh, 64px) auto;
  width: min(1000px, calc(100% - 32px));
  background:#0e0e0e;
  border:1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
  transform: translateY(4px);
  opacity: .96;
  will-change: transform, opacity;
  transition: transform .16s ease-out, opacity .16s ease-out;
}

@media (min-width: 769px) {
  .modal-dialog {
  }
}

.modal[aria-hidden="false"] .modal-dialog{
  transform: none; opacity: 1;

}
@media (prefers-reduced-motion: reduce){
  .modal-dialog{ transition: none; }
}

/* Header/close minimalista */
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px; border-bottom:1px solid rgba(255,255,255,.10);
}
.modal-title{ margin:0; font-size: clamp(22px, 2.4vw, 32px); }
.modal-close{
  appearance:none; border:1px solid rgba(255,255,255,.18);
  background:#151515; color:#fff; border-radius:10px;
  padding:8px 12px; cursor:pointer; line-height:1;
}

/* Corpo com tipografia simples e legível */
.modal-body{
  padding: 22px;
  max-height: calc(100vh - 180px); /* cabe em qualquer viewport */
  overflow: auto;                   /* scroll interno suave */
}

.modal-body > .hero{
  text-align:center; margin: 6px 0 18px;
}
.modal-body .hero h2{
  margin:0 0 10px;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.2;
}
.modal-body .hero p{
  margin:0 auto; opacity:.9;
  max-width: 55ch; font-size: clamp(15px, 1.3vw, 18px);
}

/* Texto corrido: largura ótima e espaçamentos */
.modal-body .content{
  max-width: 78ch; margin: 0 auto; color:#e6e6e6;
}
.modal-body .content p{ margin: 0 0 14px; opacity:.95; }
.modal-body .content h3{
  margin: 20px 0 8px; font-size: clamp(18px, 1.8vw, 22px);
}

/* Chips (opcional) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; justify-content:center; }
.chips span{
  border:1px solid rgba(255,255,255,.16);
  padding:6px 10px; border-radius:999px; font-size:13px; opacity:.95;
}

/* Transição da borda quando enterprise ativo (se você acionou) */
.compare{ transition: border-color .25s ease; }

/* ====== LAYOUT BASE ====== */
.page{ max-width:1200px; margin:40px auto; padding:0 20px; }

/* Container da seção */
.showcase{
  max-width: 1100px;
  margin: 56px auto 28px;   /* centraliza */
  padding: 0 16px;
  text-align: center;
}
.showcase .section-title2{
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.1;
  margin: 4px 0 10px;  
  text-align: center;
  width: 100% !important;
  display: block;
}
.showcase .section-sub{
  max-width: 70ch;
  margin: 0 auto 24px;
  opacity: .8;
}

/* GRID DE CARDS — 3/2/1 colunas por breakpoint */
.cards{
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3 fixas no desktop */
  align-items: stretch;
}
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr; }
}

/* Card */
.card{
  background:#121212;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:28px 22px 22px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}
.card .logo{ height:28px; width:auto; display:block; margin-bottom:18px; opacity:.95; }
.card h3{ margin:6px 0 8px; font-size:22px }
.card p{ margin:0 0 16px; opacity:.9 }
.card .more{ margin-top:auto; font-weight:600; letter-spacing:.02em; color:#82aaff; }
.card .more2{ margin-top:auto; font-weight:600; letter-spacing:.02em; color:#82aaff; }


/* ===== BLOG / NEWS ===== */
.news {
  max-width: 1100px;
  margin: 72px auto;
  padding: 0 16px;
}

.news-header {
  margin-bottom: 28px;
}
.news-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.news-sub {
  opacity: .75;
  margin: 0;
  max-width: 70ch;
}

/* grid 2 colunas com divisórias tracejadas */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;                      /* sem gap – usamos linhas tracejadas */
  border-top: 1px dashed rgba(255,255,255,.10);
}

.post {
  padding: 28px 28px 32px;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.post:nth-child(odd) {
  border-right: 1px dashed rgba(255,255,255,.10);
}

/* meta (autor + data + categoria) */
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  opacity: .85;
  margin-bottom: 16px;
}
.meta-left {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
}
.meta-right {
  margin-left: auto; white-space: nowrap; opacity: .75;
}
.avatars {
  display: flex; align-items: center; gap: 6px;
}
.avatars img {
  width: 18px; height: 18px; border-radius: 50%;
  display: block; object-fit: cover;
}

/* título + snippet */
.post-title {
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.25;
  margin: 8px 0 8px;
}
.post-excerpt {
  opacity: .8;
  margin: 0;
  max-width: 56ch;
}

/* links do card (título vira link) */
.post a {
  color: #fff; text-decoration: none;
}
.post a:hover { text-decoration: underline; }

/* responsivo */
@media (max-width: 900px){
  .news-grid {
    grid-template-columns: 1fr;
    border-top: 1px dashed rgba(255,255,255,.10);
  }
  .post:nth-child(odd){ border-right: 0; }
  .meta-right{ display:none; } /* simplifica no mobile */
}

/* ====== PODCAST STRIP (scoped) ====== */
.podcast-strip{ margin:36px auto 0; max-width:1200px; padding:0 16px; }
.podcast-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}

.ep-card{
  position:relative; display:grid; grid-template-columns: 1fr 210px;
  align-items:stretch; background:#141414; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ep-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.ep-content{ padding:22px; display:flex; flex-direction:column; gap:12px }
.ep-badge{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  opacity:.75; display:inline-block;
}
.ep-title{
  margin:0; font-size:22px; line-height:1.25; font-weight:600;
}
.ep-link{
  margin-top:auto; font-weight:600; text-decoration:none;
  color:#8fb4ff; outline:0;
}
.ep-link:focus-visible{ box-shadow:0 0 0 2px #8fb4ff66; border-radius:8px; padding:2px 4px; }

.ep-media{ margin:0; }
.ep-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Sizes to match the ref vibe */
@media (min-width: 1100px){
  .ep-card{ grid-template-columns: 1fr 240px; }
}

/* Tablet */
@media (max-width: 980px){
  .podcast-grid{ grid-template-columns: 1fr; }
  .ep-card{ grid-template-columns: 1fr 220px; }
}

/* Mobile: stack image under, keep same look */
@media (max-width: 560px){
  .ep-card{ grid-template-columns: 1fr; }
  .ep-media{ aspect-ratio: 16/9; } /* mantém proporção quando a imagem for pequena */
}

.about-section {
  margin: 4rem auto;
  max-width: 900px;
  padding: 0 1rem;
}

.about-section .section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.about-section .section-sub {
  font-size: 1.125rem;
  color: #888;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.about-section .content p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.about-section .quote {
  border-left: 4px solid var(--primary-color, #4cafef);
  padding-left: 1rem;
  margin: 2rem 0;
  font-style: italic;
  background: rgba(255,255,255,0.02);
}

.about-section .quote blockquote {
  margin: 0;
}

.about-section .quote figcaption {
  font-size: 0.9rem;
  color: #aaa;
  margin-top: 0.5rem;
}

.about-section .milestones {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  border-left: 2px solid rgba(255,255,255,0.08);
}

.about-section .milestones li {
  padding-left: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.about-section .milestones li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0.6rem;
  width: 10px;
  height: 10px;
  background: var(--primary-color, #4cafef);
  border-radius: 50%;
}

.about-section .milestones h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.about-section .milestones p {
  font-size: 0.95rem;
  color: #ccc;
  margin: 0;
}

.about-section .cta-line {
  margin-top: 2rem;
}

.about-section .btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  margin-right: 0.5rem;
}

.about-section .btn-primary {
  background: var(--primary-color, #4cafef);
  color: #fff;
}

.about-section .btn-ghost {
  border: 1px solid var(--primary-color, #4cafef);
  color: var(--primary-color, #4cafef);
}

/* ===== Answer Engine Insights ===== */
.aei {
  --aei-accent: #21f7a4;         /* neon green accent */
  --aei-fg: var(--color-text, #eaeaea);
  --aei-muted: rgba(255,255,255,.7);
  --aei-surface: rgba(255,255,255,.04);
  --aei-stroke: rgba(255,255,255,.07);

  padding: clamp(28px, 4vw, 56px) 0;
}

.aei-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.aei-kicker{
  display:flex; align-items:center; gap:10px;
  color: var(--aei-accent);
  font-weight:700; letter-spacing:.02em;
  margin-bottom: 14px;
}
.aei-kicker-icon{
  width:18px; height:18px; fill: currentColor; opacity:.9;
}

.aei-title{
  margin: 0 0 12px 0;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.aei-sub{
  color: var(--aei-muted);
  max-width: 720px;
  margin: 0 0 20px 0;
  font-size: clamp(15px, 2.2vw, 18px);
}

.aei-actions{ display:flex; gap:10px; margin-bottom: 28px; }
.aei-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 12px;
  border:1px solid var(--aei-stroke);
  background: transparent; color: var(--aei-fg);
  text-decoration:none; font-weight:700;
}
.aei-btn:hover{ background: var(--aei-surface); }
.aei-btn-primary{
  background: var(--aei-accent); color:#08110b; border-color: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset, 0 8px 24px rgba(33,247,164,.15);
}
.aei-btn-primary:hover{ filter: brightness(1.05); }

/* Cards grid */
.aei-cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.aei-card{
  position:relative;
  border:1px solid var(--aei-stroke);
  border-radius: 16px;
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.aei-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* thin neon line at top */
.aei-card-topline{
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--aei-accent), transparent);
  border-top-left-radius:16px; border-top-right-radius:16px;
}

.aei-card-icon{
  width:24px; height:24px; margin-bottom:12px; color: var(--aei-accent);
}
.aei-card-icon svg{ width:100%; height:100%; fill: currentColor; opacity:.9; }

.aei-card h3{
  margin:0 0 6px 0; font-size: 18px; line-height:1.2;
}
.aei-card p{
  margin:0; color: var(--aei-muted); font-size: 14.5px; line-height:1.5;
}

/* Responsive */
@media (max-width: 1024px){
  .aei-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .aei-cards{ grid-template-columns: 1fr; }
  .aei-actions{ flex-wrap: wrap; }
}

.answer-item1-bg {
    background: url(/assets/dash-trydak-monitor-fd090dda-ff10-455c-ac63-347749645931.png) 50% / 90% no-repeat;
}

.answer-item2-bg {
    background: url(/assets/dask-visibility-scores-trydak.png) 50% / 90% no-repeat;
}

.answer-item3-bg {
    background: url(/assets/dash-trydak-demo-hempvegan.png) 50% / 90% no-repeat;
}

.answer-item4-bg {
    background: url(/assets/dash-try-dack-benchmark.png) 50% / 90% no-repeat;
}

.answer-item5-bg {
    background: url(/assets/dash-trydak-trends.png) 50% / 90% no-repeat;
}



  .image-transition {
    width: 800px; /* ajuste para as dimensões da sua referência */
    height: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }

  .image-transition img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    opacity: 0;
    animation: fadeSwap 6s infinite;
  }

  .image-transition img:nth-child(1) {
    animation-delay: 0s;
  }
  .image-transition img:nth-child(2) {
    animation-delay: 3s;
  }

  @keyframes fadeSwap {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  #aei-tech .aei-inner.aei-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-top: 1px solid var(--aei-line);
  border-bottom: 1px solid var(--aei-line);
}

#aei-tech .aei-left {
  padding: 32px 28px;
  border-right: 1px solid var(--aei-line);
}

#aei-tech .section-title {
  font-size: clamp(22px, 2vw + 10px, 28px);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 14px;
}

#aei-tech .aei-sub {
  color: var(--aei-fg-dim);
  font-size: 15px;
  line-height: 1.7;
}

#aei-tech .aei-right {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

#aei-tech .aei-tile {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 24px;
  border-bottom: 1px solid var(--aei-line);
}

#aei-tech .aei-tile:last-child {
  border-bottom: none;
}

#aei-tech .aei-tile-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: var(--aei-fg);
  fill: none;
  stroke-width: 2;
}

#aei-tech .aei-tile h3 {
  font-size: 16px;
  margin: 0 0 6px;
  font-weight: 600;
}

#aei-tech .aei-tile p {
  margin: 0;
  font-size: 14px;
  color: var(--aei-fg-dim);
  line-height: 1.65;
}

/* Responsivo */
@media (max-width: 960px) {
  #aei-tech .aei-inner.aei-grid {
    grid-template-columns: 1fr;
  }
  #aei-tech .aei-left {
    border-right: none;
    border-bottom: 1px solid var(--aei-line);
  }
}

.link {
    margin-top: auto;
    font-weight: 600;
    letter-spacing: .02em;
    color: #82aaff;
  }

/* Estilo geral para todos os ícones AI tiles */
.aei-tile-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  stroke: none;            /* caso o ícone seja preenchido */
  fill: currentColor;      /* herda a cor do texto */
  color: var(--aei-fg);     /* cor padrão no seu tema */
}

/* Efeito no hover do tile */
.aei-tile:hover .aei-tile-icon svg {
  color: var(--aei-accent); /* muda para cor de destaque */
  transition: color 0.25s ease;
}

/* Ícones específicos (caso queira cores próprias de cada logo) */
.aei-tile-icon .chatgpt-logo      { color: #00a67e; }   /* verde ChatGPT */
.aei-tile-icon .deepseek-logo     { color: #2d7ff9; }   /* azul DeepSeek */
.aei-tile-icon .grok-logo         { color: #ff4b4b; }   /* vermelho Grok */
.aei-tile-icon .perplexity-logo   { color: #1e88e5; }   /* azul Perplexity */
.aei-tile-icon .claude-logo       { color: #f5c15c; }   /* dourado Claude */
.aei-tile-icon .meta-ai-logo      { color: #1877f2; }   /* azul Meta */
.aei-tile-icon .microsoft-copilot-logo { color: #00a4ef; } /* azul MS */
.aei-tile-icon .google-ai-overviews-logo { color: #4285f4; } /* azul Google */

/* Exemplo de forçar o tamanho em um bloco específico */
.aei-tile-icon svg[aria-hidden="true"] {
  max-width: 26px;
  max-height: 26px;
}

/* Offset do sticky (ajuste se tiver header fixo) */
#aei-tech { --sticky-top: 84px; }

/* Grid principal: duas colunas, alinhando no topo */
#aei-tech .aei-inner.aei-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
}

/* Coluna esquerda fixa durante o scroll */
#aei-tech .aei-left {
  position: sticky;
  top: var(--sticky-top);
  align-self: start;       /* garante que não estique na coluna */
  height: fit-content;     /* permite grudar mesmo com conteúdo curto */
  z-index: 1;              /* fica acima das bordas da direita se houver */
}

/* Coluna direita longa com espaçamento entre tiles */
#aei-tech .aei-right {
  display: grid;
  grid-auto-rows: min-content;
  row-gap: 18px;           /* espaço entre os cards */
}

/* Cada tile com borda sutil opcional (se quiser separar) */
#aei-tech .aei-tile {
  padding: 20px 0;
  border-bottom: 1px solid var(--aei-line);
}
#aei-tech .aei-tile:last-child { border-bottom: none; }

/* Responsivo: desliga o sticky no mobile */
@media (max-width: 960px){
  #aei-tech .aei-inner.aei-grid { grid-template-columns: 1fr; }
  #aei-tech .aei-left { position: static; }
}

/* Grid do FAQ */
#aei-tech .aei-faq-grid { 
  display:grid; 
  grid-template-columns: 1fr 2fr; 
  gap:24px; 
  border-top:1px solid var(--aei-line); 
  border-bottom:1px solid var(--aei-line);
}
#aei-tech .aei-faq-left { padding:24px 0; border-right:1px solid var(--aei-line); }
#aei-tech .aei-faq-right { padding:0; }

#aei-tech .aei-faq-list { list-style:none; margin:0; padding:0; }
#aei-tech .aei-faq-item { border-bottom:1px solid var(--aei-line); }
#aei-tech .aei-faq-item:last-child { border-bottom:none; }

/* Botão do item */
#aei-tech .aei-faq-toggle{
  width:100%;
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:16px;
  padding:18px 0;
  background:none; 
  border:0; 
  text-align:left; 
  cursor:pointer;
}
#aei-tech .aei-faq-q{ 
  font-size:16px; 
  font-weight:600; 
  margin:0; 
}

/* Ícone seta */
#aei-tech .aei-faq-caret{
  width:16px; height:16px; 
  stroke:currentColor; 
  fill:none; 
  stroke-width:2;
  transition:transform .25s ease;
}
#aei-tech .aei-faq-toggle[aria-expanded="true"] .aei-faq-caret{ transform:rotate(180deg); }

/* Resposta */
#aei-tech .aei-faq-a{
  color:var(--aei-fg-dim);
  font-size:14px; 
  line-height:1.7; 
  padding:0 0 18px; 
}

/* Responsivo */
@media (max-width: 960px){
  #aei-tech .aei-faq-grid{ grid-template-columns:1fr; }
  #aei-tech .aei-faq-left{ border-right:none; padding-bottom:0; }
}

/* Divider base (hairline sutil) */
.aei-divider {
  --line: var(--aei-line, rgba(255,255,255,.08));
  --shine: rgba(255,255,255,.06);
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  border: 0;
  margin: 24px 0;
}

/* Variante um pouco mais presente (ainda sutil) */
.aei-divider.is-strong {
  --line: rgba(255,255,255,.12);
  --shine: rgba(255,255,255,.08);
}

/* Variante pontilhada */
.aei-divider.is-dotted {
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,.10) 0 6px,
    transparent 6px 12px
  );
}

/* Divider com label central */
.aei-divider--labeled {
  --line: var(--aei-line, rgba(255,255,255,.08));
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
}
.aei-divider--labeled::before,
.aei-divider--labeled::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
.aei-divider-label {
  color: var(--aei-fg-dim, #a9aeb6);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--aei-line, rgba(255,255,255,.08));
  background: rgba(255,255,255,.03);
}

/* Inset (quando quiser recuar as linhas) */
.aei-divider--inset {
  padding-inline: 8px;
}