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

/* ===== Identidade cromática da marca =====
   Cor principal extraída da logo (lima) + carvão da logo.
   Substitui toda a antiga paleta roxa. */
:root {
    /* ===== FUNDO PADRÃO DO PROJETO =====
       Cor de fundo única de todo o site — exatamente a mesma do Hero da Home.
       TODA página/seção/wrapper clara deve usar var(--page-background) para
       garantir um único plano de fundo em toda a navegação. Cards permanecem
       brancos (#ffffff) por cima deste canvas. */
    --page-background: #f8f8f8;

    --primary-color: #CCFF00;   /* cor principal da logo (lima) */
    --primary-light: #E2FF5C;   /* versão mais clara (hover claro) */
    --primary-dark:  #A6CF00;   /* versão mais escura (hover/foco) */

    /* Tom escuro premium derivado da própria logo (traço carvão) */
    --brand-dark:      #101114; /* fundo escuro (substitui o roxo #3f3567) */
    --brand-dark-soft: #1A1C20; /* superfície escura levemente mais clara */

    /* Textos sobre fundo escuro (contraste AA) */
    --text-on-dark:       #F4F6EE;
    --text-on-dark-muted: rgba(244, 246, 238, 0.72);

    /* Sombras neutras (substituem as arroxeadas) */
    --shadow-dark: rgba(0, 0, 0, 0.34);
    --shadow-card: rgba(0, 0, 0, 0.28);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--page-background);
    color: #1f1f1f;
    min-height: 100vh;
    overflow-x: clip; /* `clip` (não `hidden`): corta o scroll horizontal SEM virar
                         scroll-container, preservando as animações scroll-driven (view()) */
    position: relative;
}

/* Respiro entre a navbar e o início do Hero (apenas na Home — :has(.hero)), reduzido
   de 120 → 20px (−100px de excesso). No padding-top do BODY (não do Hero): a navbar é
   position:absolute relativa ao body (top:0 no padding-box), então o padding-box NÃO se
   move e a navbar fica fixa, enquanto o Hero sobe em bloco — a ALTURA da seção Hero não
   muda. Não altera fontes, largura do título nem a responsividade (valor único). */
body:has(.hero) { padding-top: 20px; }

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 48px;
    position: relative;
    z-index: 10;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: #1f1f1f;
}

.logo-icon {
    width: auto;
    font-size: 1.1rem;      /* mesma escala do .logo-text */
    height: 0.73em;         /* cap height da Inter = altura que o "44" ocupava */
    flex-shrink: 0;
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.logo-text strong {
    font-weight: 600;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 32px;
}

.nav-links a {
    text-decoration: none;
    color: #5f6368;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #1f1f1f;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.nav-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}

.btn-dark {
    background-color: #1f1f1f;
    color: #ffffff;
}

.btn-dark:hover {
    background-color: #333333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
}

.btn-light {
    background-color: #f8f9fa;
    color: #1f1f1f;
    border: 1px solid #e8eaed;
}

.btn-light:hover {
    background-color: #f1f3f4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 90px);
    padding: 0 24px;
    position: relative;
    z-index: 10;
}

.hero-content {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: -80px; /* Slight offset for perfect vertical centering */
}

.hero-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.logo-icon-main {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.logo-text-main {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.logo-text-main strong {
    font-weight: 600;
}

.headline {
    font-size: 4.5rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #1f1f1f;
    margin-bottom: 24px;
}

.cta-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

@media (max-width: 768px) {
    .navbar {
        padding: 14px 16px;
        gap: 10px;
    }

    .logo-text {
        font-size: 1rem;
    }

    .nav-links {
        display: none;
    }

    .nav-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .nav-btn svg {
        width: 14px;
        height: 14px;
    }

    .hero {
        min-height: 0;
        padding: 24px 16px 0;
    }

    .hero-content {
        margin-top: 0;
        gap: 18px;
    }

    .logo-icon-main {
        width: 26px;
        height: 26px;
    }

    .logo-text-main {
        font-size: 1.2rem;
    }
    
    .headline {
        font-size: clamp(2.2rem, 11vw, 3rem);
        margin-bottom: 10px;
    }
    
    .cta-group {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    
    .btn-lg {
        width: 100%;
        padding: 12px 18px;
        font-size: 0.96rem;
    }

    .spend-section {
        padding: 56px 16px 40px;
    }

    .center-text {
        gap: 18px;
        padding-top: 0;
    }

    .spend-title {
        font-size: clamp(2rem, 10vw, 3rem);
        margin-top: 0.8cm;
        margin-bottom: 0.4cm;
        gap: 8px;
    }

    .ghost-wrapper {
        width: 52px;
        height: 52px;
        margin: 0 2px;
    }

    .btn-see-more {
        margin-bottom: 0.8cm;
        padding: 10px 18px;
        font-size: 0.9rem;
    }

    .feature-section {
        padding: 68px 16px;
    }

    .feature-container {
        gap: 30px;
    }

    .feature-text h2 {
        font-size: 2rem;
        margin-bottom: 14px;
    }

    .feature-text p {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .btn-explore {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .ide-mockup {
        height: 320px;
        border-radius: 20px;
    }

    .ide-sidebar {
        width: 50px;
        padding-top: 18px;
        gap: 16px;
    }

    .ide-icon {
        width: 18px;
        height: 18px;
    }

    .ide-tabs {
        padding: 12px 14px 0;
        gap: 14px;
        overflow-x: auto;
    }

    .ide-tab {
        font-size: 0.78rem;
        gap: 6px;
        padding-bottom: 10px;
        white-space: nowrap;
    }

    .ide-breadcrumbs {
        padding: 12px 14px;
        gap: 8px;
        font-size: 0.82rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ide-editor {
        padding: 0 14px;
    }

    .editor-line {
        gap: 12px;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .line-num {
        width: 16px;
    }

    .autocomplete-popup {
        top: 30px;
        left: 8px;
        width: calc(100% - 16px);
    }

    .ac-item {
        padding: 7px 10px;
        gap: 8px;
        font-size: 0.8rem;
    }

    .ac-type {
        font-size: 0.72rem;
    }
}

/* Scroll-driven Animation (reveal do título da .spend-section ao rolar) */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes slide-out-from-video {
      from {
        transform: translateY(-250px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .center-text {
      animation: slide-out-from-video auto linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
      /* SEM will-change/backface permanentes: evita a camada GPU residual que
         prendia a animação em estado intermediário ao subir a página. */
    }
  }
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Spend Section */
.spend-section {
    background-color: var(--page-background);
    min-height: calc(100vh - 180px); /* -180px: reduz ~150px do vazio ABAIXO do conteúdo top-aligned → a próxima seção sobe; botão e posição inalterados */
    padding: 80px 24px 64px;
    display: flex;
    justify-content: center;
    align-items: flex-start;      /* fixa o conteúdo na MESMA posição de hoje; o espaço extra da viewport fica ABAIXO (sem deslocar título/botão) */
    position: relative;
    z-index: 10; /* Sits below the video section */
    background: var(--page-background);   /* fundo branco fixo — sem transição de escurecimento */
}

.center-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-top: 3cm;
}

.spend-title {
    font-size: 5.5rem;
    font-weight: 500;
    color: var(--brand-dark);
    margin: 0;
    margin-top: 3cm;
    margin-bottom: 0.8cm;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    letter-spacing: -0.02em;
}

.ghost-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 4px;
    transform: translateY(2px);
}

.ghost-icon {
    width: 100%;
    height: 100%;
}

.btn-see-more {
    background-color: var(--primary-color);
    color: var(--brand-dark);
    padding: 12px 28px;
    margin-bottom: 2cm;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.4s ease;
}

/* Reduz só o espaço EMBAIXO do botão desta seção (o vazio até a próxima seção).
   Escopo em .spend-section → o botão da .spend-echo mantém o 2cm original.
   Não move o botão (a margem fica abaixo dele) nem altera seu tamanho. */
.spend-section .btn-see-more { margin-bottom: 26px; }

/* Reduz ~100px do excesso de espaço em branco ACIMA do título "Build. Deploy.
   Scale." (margin-top do título: 3cm ≈ 113px → 12px). Escopo em .spend-section
   → a .spend-echo mantém seu espaçamento. Não altera fonte, animações, a posição
   do botão, o tamanho da seção nem qualquer outra seção. Texto segue centralizado. */
.spend-section .spend-title { margin-top: 12px; }

.btn-see-more:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

/* Correção do flash: no boot inicial o tema é aplicado sem transição
   (estado correto já no 1º paint). A animação de scroll fica intacta. */
html.theme-boot * { transition: none !important; }

/* A antiga troca de tema escuro por scroll (body.ide-theme-active) e a
   .feature-section--dark foram REMOVIDAS: a Home agora tem fundo branco
   contínuo. A .spend-section usa seu padrão branco (título escuro + botão
   lima), sem nenhum override escuro. */

@media (prefers-reduced-motion: reduce) {
    body,
    .spend-section,
    .spend-title,
    .feature-section,
    .feature-text h2,
    .feature-text p,
    .btn-see-more,
    .btn-explore {
        transition: none;
    }
}

.btn-explore:hover {
    background-color: #f1f3f4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

@media (max-width: 900px) {
    .feature-container {
        flex-direction: column;
        gap: 48px;
    }

    .feature-container-reversed {
        flex-direction: column;
    }
    
    .feature-text {
        max-width: 100%;
        text-align: center;
    }

    .feature-text-right {
        margin-left: 0;
    }
    
    .ide-mockup {
        height: 400px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .logo-text {
        font-size: 0.95rem;
    }

    .nav-btn {
        padding: 8px 12px;
    }
}

@media (max-width: 520px) {
    .navbar {
        padding: 12px 12px;
    }

    .logo-container {
        gap: 10px;
    }

    .logo-icon {
        width: auto;
        font-size: 0.88rem;     /* acompanha o .logo-text do breakpoint */
        height: 0.73em;
    }

    .logo-text {
        font-size: 0.88rem;
    }

    .nav-btn {
        padding: 7px 10px;
        font-size: 0.75rem;
    }

    .headline {
        font-size: clamp(2rem, 12vw, 2.4rem);
    }

    .btn-lg {
        font-size: 0.9rem;
    }

    .spend-title {
        margin-top: 0.6cm;
        margin-bottom: 0.3cm;
    }

    .btn-see-more {
        margin-bottom: 0.6cm;
    }

    .feature-section {
        padding: 56px 12px;
    }

    .feature-text h2 {
        font-size: 1.75rem;
    }

    .feature-text p {
        font-size: 0.95rem;
    }

    .ide-mockup {
        height: 280px;
        border-radius: 16px;
    }

    .ide-sidebar {
        width: 42px;
    }

    .ide-badge,
    .ide-badge-blue {
        display: none;
    }

    .ide-tab {
        font-size: 0.72rem;
    }

    .ide-breadcrumbs {
        font-size: 0.75rem;
    }

    .editor-line {
        font-size: 0.78rem;
    }
}

/* Footer — Phantom-style (World Fashion) */
/* Usa o mesmo carvão da página (.ide-theme-active = var(--brand-dark)) para continuidade total */
.footer {
    background-color: var(--brand-dark);
    padding: 220px 24px 120px;
    position: relative;
    z-index: 10;
}

/* Card branco flutuante — sobreposto ao roxo, com roxo visível acima, nas laterais e abaixo */
.footer-card {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 32px;
    padding: 72px;
    box-shadow: 0 40px 120px var(--shadow-card);
}

.footer-card-top {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 64px;
    align-items: start;
    padding-bottom: 80px;
    margin-bottom: 72px;
    border-bottom: 1px solid #ededed;
}

.footer-logo-text {
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1a1a1a;
}

/* Bloco newsletter grande */
.footer-newsletter {
    max-width: 560px;
}

.footer-newsletter-title {
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.05;
}

.footer-newsletter-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #6b6b6b;
    margin-bottom: 32px;
}

.footer-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f7f9ec;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 8px 8px 8px 22px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-form:focus-within {
    border-color: #3B82F6;
    box-shadow: 0 4px 24px rgba(59, 130, 246, 0.22);
}

.footer-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #1a1a1a;
    font-family: inherit;
    font-size: 1rem;
    padding: 14px 0;
}

.footer-input::placeholder {
    color: #9a9a9a;
}

.footer-submit {
    background-color: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 14px 32px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.footer-submit:hover {
    background-color: #3a3a3a;
    transform: translateY(-1px);
}

/* Colunas de link */
.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer-col-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a1a1a;
    margin-bottom: 24px;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-col a,
.footer-col span {
    text-decoration: none;
    color: #6b6b6b;
    font-size: 0.98rem;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: #1a1a1a;
}

/* Rodapé inferior — fora do card, direto sobre o roxo */
.footer-bottom {
    max-width: 1200px;
    margin: 48px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 8px;
    flex-wrap: wrap;
}

.footer-copy {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-legal {
    display: flex;
    gap: 32px;
}

.footer-legal a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #ffffff;
}

@media (max-width: 960px) {
    .footer {
        padding: 150px 20px 90px;
    }

    .footer-card {
        padding: 48px 40px;
        border-radius: 28px;
    }

    .footer-card-top {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 56px;
        margin-bottom: 56px;
    }

    .footer-newsletter {
        max-width: 100%;
    }

    .footer-newsletter-title {
        font-size: 2.25rem;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 40px 24px;
    }
}

@media (max-width: 600px) {
    .footer {
        padding: 110px 16px 70px;
    }

    .footer-card {
        padding: 36px 24px;
        border-radius: 24px;
    }

    .footer-newsletter-title {
        font-size: 1.9rem;
    }

    .footer-newsletter-subtitle {
        font-size: 1rem;
    }

    .footer-form {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .footer-input {
        padding: 6px 4px;
    }

    .footer-submit {
        padding: 14px;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-legal {
        gap: 24px;
        flex-wrap: wrap;
    }
}

/* =====================================================================
   RECRIAÇÃO FIEL — Referencia.png (hero claro centralizado)
   Card branco + glow lima + linhas diagonais + arco de logos.
   ===================================================================== */
body { background: var(--page-background); }

.stage { background: transparent; padding: 0; }
.stage-card {
    position: relative;
    max-width: 1536px;
    margin: 0 auto;
    background: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* ------------------------------- NAVBAR ------------------------------- */
/* ============================================================
   NAVBAR — redesign premium (Vercel / Linear / Stripe / Supabase)
   Branca, sem borda, sem sombra, altura ~80px. Menu PERFEITAMENTE
   central via grid 1fr | auto | 1fr (independe das larguras dos
   lados). position:absolute preserva o Hero exatamente como está.
   ============================================================ */
.navbar {
    background: var(--page-background);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 20px;
    min-height: 64px;                /* mais compacta e elegante */
    padding: 0 40px;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 100;            /* sempre acima de qualquer seção → links sempre clicáveis */
    border: none;
    box-shadow: none;
}

/* ESQUERDA — texto "Anthares" + logo oficial à direita, centrados verticalmente */
.logo-container { display: inline-flex; align-items: center; gap: 11px; color: #111111; text-decoration: none; justify-self: start; }
.logo-icon { width: auto; font-size: 1.1rem; height: 0.73em; flex-shrink: 0; }
.logo-text { font-size: 1.1rem; font-weight: 400; letter-spacing: -0.02em; color: #111111; }
.logo-text strong { font-weight: 700; }

/* CENTRO — menu compacto e centralizado, com separador circular entre itens */
.nav-links {
    display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
    gap: 0; justify-self: center;
}
.nav-links li { display: flex; align-items: center; }
.nav-links li + li::before {            /* separador "•" cinza claro entre itens */
    content: "•";
    color: #d2d2d2;
    font-size: 9px;
    margin: 0 13px;
}
.nav-links a {
    text-decoration: none; color: #111111; opacity: .68;
    font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
    transition: opacity .2s ease, color .2s ease;   /* 200ms suave */
}
.nav-links a:hover { color: #000000; opacity: 1; }  /* preto + leve opacidade, sem mover layout */

/* DIREITA — Login | Contact  +  (32px)  +  botão Download App */
.nav-actions { display: inline-flex; align-items: center; gap: 32px; justify-self: end; }
.nav-auth { display: inline-flex; align-items: center; }
.nav-auth .nav-login + .nav-login::before {   /* barra vertical fina entre Login e Contact */
    content: "|";
    color: #dcdcdc;
    font-weight: 300;
    margin: 0 12px;
}
.nav-login {
    text-decoration: none; color: #111111; opacity: .68;
    font-size: 15px; font-weight: 500;
    transition: opacity .2s ease, color .2s ease;
}
.nav-login:hover { color: #000000; opacity: 1; }

.nav-demo {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 9999px;       /* pill, compacto */
    background: #111111; color: #ffffff;
    font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: background .2s ease;                 /* hover: leve clareamento, 200ms */
}
.nav-demo:hover { background: #2a2a2a; }
.nav-demo svg { color: #ffffff; }

/* -------------------------------- HERO -------------------------------- */
.hero {
    position: relative;
    /* 100vw (não 100%) → o Hero centraliza no CENTRO EXATO da viewport (50vw), e não
       na área de conteúdo (que fica menor quando há scrollbar clássica, deslocando o
       título ~7px para a esquerda). Sem margin/translateX; o html já tem overflow-x:
       clip, então não gera scroll horizontal. Alinha o título com o card (95vw). */
    width: 100vw;
    background: var(--page-background);          /* fundo totalmente branco */
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;  /* fluxo compacto: card sobe para perto dos botões */
    text-align: center;
    padding: clamp(140px, 13vw, 190px) 24px 8px;   /* posiciona o badge abaixo da navbar (referencia.png) */
}

/* Glow radial cinza EXTREMAMENTE sutil atrás do título (quase invisível, sem cor).
   Fica atrás do .hero-main (z-index:2). Não altera layout/espaçamento (pseudo absoluto,
   pointer-events:none). Só cinza monocromático → estética Apple/Linear/Vercel. */
.hero::before {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    width: min(1120px, 88vw);
    aspect-ratio: 2.3 / 1;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(24, 24, 24, 0.05) 0%, rgba(24, 24, 24, 0) 74%);
}

.hero-main {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Título OVERSIZED, Inter 700, duas linhas — palavras pretas + cinza claro,
   com o logo lima da Anthares centralizado entre as palavras da 2ª linha. */
.hero-title {
    margin: clamp(50px, 5.5vw, 92px) 0 0;   /* respiro badge → título (referencia.png) */
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 5.7rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: #111111;
}
.hero-line { display: block; white-space: nowrap; }
.hero-line--2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.04em 0.26em;          /* respiro horizontal entre palavras e logo */
}
/* "without limits" em prata metálica escovada (alumínio/titânio polido) — sem cor.
   Mesmo tamanho/peso/posição; muda apenas o preenchimento para o gradiente prata. */
.hero-muted {
    background: linear-gradient(180deg, #7C7C7C 0%, #CFCFCF 50%, #9A9A9A 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

/* imagem central pequena (logo lima) entre as palavras da 2ª linha */
.hero-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
    transform: translateY(0.02em);
    opacity: 0.42;   /* ∿ em cinza prata (= referencia.png), combinando com "without limits" */
}
.hero-mark svg { width: 100%; height: 100%; display: block; }

/* Subtítulo cinza suave, centralizado */
.hero-sub {
    margin: clamp(30px, 3vw, 46px) auto 0;
    max-width: 780px;                      /* 2 linhas como na referência */
    font-size: clamp(1.12rem, 1.45vw, 1.45rem);
    line-height: 1.5;
    color: #6f6f6f;
    font-weight: 400;
}

/* Botões CTA (referencia.png): "Saiba mais" branco c/ borda cinza clara + "Comece agora" preto.
   Cantos arredondados, sombra suave, hover só muda brilho levemente. Monocromático. */
.hero-cta-row {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(12px, 1vw, 18px);
    margin-top: clamp(32px, 3.2vw, 48px);
    flex-wrap: wrap;
}
.hero-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: clamp(13px, 1.15vw, 18px) clamp(26px, 2.3vw, 38px);
    border-radius: clamp(12px, 1vw, 15px);
    font-size: clamp(0.98rem, 1.05vw, 1.12rem); font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: filter .2s ease;
}
.hero-btn--ghost {
    background: #ffffff; color: #1a1a1a;
    border: 1px solid #e2e2e2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.hero-btn--ghost:hover { filter: brightness(0.98); }
.hero-btn--solid {
    background: #000000; color: #ffffff;
    border: 1px solid #000000;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.hero-btn--solid:hover { filter: brightness(1.18); }

/* Badge (referencia.png): pílula cinza clara com tag inset "✦ New Updates" +
   "Discover what is fresh in version 2.1" (último trecho cinza). */
.hero-badge {
    display: inline-flex; align-items: center; gap: clamp(10px, 0.9vw, 15px);
    padding: clamp(4px, 0.35vw, 6px) clamp(16px, 1.3vw, 22px) clamp(4px, 0.35vw, 6px) clamp(4px, 0.35vw, 6px);
    background: #ececec;
    border: 1px solid #e4e4e4;
    border-radius: 999px;
    text-decoration: none;
    font-size: clamp(0.82rem, 0.95vw, 0.98rem);
    color: #1a1a1a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.hero-badge-tag {
    display: inline-flex; align-items: center; gap: clamp(5px, 0.5vw, 8px);
    padding: clamp(6px, 0.55vw, 9px) clamp(12px, 1.05vw, 17px);
    background: #f7f7f7;
    border-radius: 999px;
    font-weight: 600; color: #1a1a1a;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.035), 0 1px 1px rgba(0, 0, 0, 0.03);
}
.hero-badge-spark { width: clamp(13px, 1vw, 16px); height: auto; color: #3a3a3a; flex-shrink: 0; }
.hero-badge-txt { font-weight: 600; color: #1a1a1a; padding-right: clamp(2px, 0.3vw, 5px); }
.hero-badge-muted { color: #a8a8a8; font-weight: 500; }

/* Contorno "envelope" sutil ao redor do conteúdo (referencia.png) — cinza quase invisível */
.hero-frame {
    position: absolute;
    top: clamp(150px, 15vw, 220px);
    left: 50%;
    transform: translateX(-50%);
    width: min(1560px, 94vw);
    height: clamp(360px, 42vw, 600px);
    z-index: 0;
    pointer-events: none;
}
.hero-frame path { stroke: #e6e6e6; stroke-width: 1; }


/* ----------------------------- RESPONSIVO ----------------------------- */
@media (max-width: 900px) {
    .nav-links { display: none; }
    .hero { padding: 112px 22px 16px; }
    /* O título é um item flex que, por padrão, dimensiona pelo max-content
       (a linha inteira) e estoura a tela. Travamos a largura em unidades de
       viewport (100vw − padding lateral) para forçar a quebra, sem depender da
       largura calculada dos ancestrais. */
    .hero .hero-main { width: 100%; max-width: calc(100vw - 44px); }
    .hero .hero-title { white-space: normal; max-width: calc(100vw - 44px); margin-inline: auto; }
    .hero .hero-line { white-space: normal; }       /* deixa as linhas quebrarem no mobile */
    .hero .hero-line--2 { flex-wrap: wrap; }
}
@media (max-width: 620px) {
    .navbar { padding: 0 20px; min-height: 70px; }
    .nav-actions { gap: 16px; }
    .nav-demo { padding: 9px 16px; font-size: 14px; }
    .logo-text { font-size: 1rem; }
    .hero { padding: 84px 20px 14px; }
    .hero .hero-title { font-size: clamp(1.35rem, 6vw, 2.1rem); max-width: calc(100vw - 40px); }
    .hero .hero-main { max-width: calc(100vw - 40px); }
    .hero-cta-row { flex-direction: column; width: 100%; }
    .btn-demo, .btn-plat { width: 100%; }
}

/* =====================================================================
   Seção própria do componente "Spend, Send, & Save", no FLUXO normal,
   entre o card do mockup (Antigravity Studio) e o card do footer.

   • Reaproveita 100% do CSS do componente (.center-text/.spend-title/
     .btn-see-more) → mesma tipografia, ícone, botão, animação e cor.
   • O espaçamento é aplicado SOMENTE neste container (padding) — o CSS
     do footer e da feature NÃO são tocados.
       padding-top: 100px  +  120px (padding-bottom da feature) = ~220px acima do título.
       O respiro abaixo (~220px) já vem do padding-top próprio do footer (220px),
       então o bloco fica perfeitamente centralizado entre os dois cards.
   ===================================================================== */
.spend-echo {
    display: flex;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 0;              /* o footer (card) define a separação de ~80px via seu próprio padding-top */
    /* Fundo branco contínuo com a seção acima (.icx) e o rodapé. O fade do
       conteúdo (.center-text) continua intacto. */
    background-color: var(--page-background);
}

.spend-echo .center-text .spend-title {
    margin-top: 0;
    margin-bottom: 0;
    /* Fundo branco → texto preto. Especificidade (0,3,0) vence a base. */
    color: #111111;
    /* Slogan em DUAS linhas exatas: "Infrastructure That" / "Grows With You. [ícone]".
       A quebra vem de um único <br> após "That" — por isso o título passa de
       flex para bloco (em flex o <br> é ignorado). white-space:nowrap garante
       que a ÚNICA quebra seja a do <br>: a linha 2 (texto + ícone) nunca quebra
       sozinha, então o ícone nunca cai para uma 3ª linha. Tipografia, cor,
       tamanho e animação permanecem os da base. Só afeta a echo. */
    display: block;
    white-space: nowrap;
}

/* Ícone inline ao lado de "You." na 2ª linha: alinhado verticalmente ao texto
   e com o MESMO respiro de antes (12px do antigo flex-gap + 4px da margem-base
   = 16px). Escopado à echo — o ícone da .spend-section não muda. */
.spend-echo .ghost-wrapper {
    vertical-align: middle;
    margin-left: 16px;
}
/* Remove o padding-top de 3cm do .center-text APENAS na cópia. */
.spend-echo .center-text { padding-top: 0; }

/* Em ≤960px o layout empilha — a cópia é ocultada (o componente original
   permanece na página). Nada de overlap/quebra no mobile, e o footer
   mantém seu padding normal. */
@media (max-width: 960px) {
    .spend-echo { display: none; }
}

/* ============================================================
   RESPONSIVIDADE MOBILE — bloco AUTORITATIVO (vem por último,
   então vence os estilos-base; corrige overrides que estavam
   "mortos" por terem sido definidos ANTES da base no arquivo).
   Tudo aqui é mobile/tablet — não afeta o desktop.
   ============================================================ */

/* Trava global anti-scroll-horizontal. Usa `clip` (não `hidden`): clip NÃO
   cria scroll-container, então NÃO quebra as animações scroll-driven (view()). */
/* Canvas raiz travado no MESMO fundo da Home/Hero (--page-background) → nenhum
   flash de cor diferente no overscroll/bounce; superfície contínua ao rolar. */
html { overflow-x: clip; background: var(--page-background); }
/* Reserva o espaço da scrollbar SIMETRICAMENTE nos dois lados → a área visível fica
   simétrica em relação à viewport. Assim `50%`/`50vw` = centro real da tela e o Hero
   fica com margens esquerda/direita IGUAIS (centralização matemática, sem depender da
   scrollbar). Em scrollbars overlay (macOS padrão) não reserva nada — é no-op. */
html { scrollbar-gutter: stable both-edges; }

@media (max-width: 768px) {
    /* Títulos quebram linha automaticamente e não estouram a largura */
    .hero-title, .spend-title, .feature-text h2,
    .footer-newsletter-title, .feature-text p {
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    /* Título "Spend, Send, & Save" proporcional (estava em 5.5rem fixo) */
    .spend-title { font-size: clamp(2rem, 11vw, 3rem); }
    .center-text { padding-top: 0; }   /* remove os 3cm que inflavam a seção */

    /* Mockups e cards nunca passam de 100% do container */
    .ide-mockup, .footer-card { max-width: 100%; }

    /* Mockup do IDE: encolhe e cabe no viewport (min-width:0 destrava o
       flex), recortando o conteúdo interno em vez de gerar scroll. */
    .feature-container, .feature-visual, .feature-text { min-width: 0; }
    .feature-visual { width: 100%; }            /* estica para a largura do pai (não para o conteúdo) */
    .ide-mockup { width: 100%; min-width: 0; max-width: 100%; }
    .ide-main, .ide-editor { min-width: 0; }    /* destrava o min-content do editor */
    .ide-editor { overflow: hidden; }           /* recorta código + popup */
    .autocomplete-popup {
        left: 8px;
        width: calc(100% - 16px);
        max-width: 100%;
        top: 30px;
    }
}

@media (max-width: 480px) {
    .spend-title { font-size: clamp(1.7rem, 12vw, 2.4rem); }
}

/* Navbar em telas muito estreitas: oculta o link "Login" e aperta o botão
   "Download App" + logo para caberem sem recorte abaixo de ~390px. */
@media (max-width: 390px) {
    .navbar { padding: 0 14px; min-height: 64px; }
    .logo-text { font-size: 0.9rem; }
    .nav-login { display: none; }
    .nav-demo { padding: 8px 14px; font-size: 13px; gap: 6px; }
    .nav-demo svg { width: 14px; height: 14px; }
}

/* =========================================================================
   HERO — BADGE de social proof minimalista (linha única + ponto de status).
   Absoluto dentro do .hero-main (position:relative) → NÃO move o título nem
   altera o fluxo/espaçamentos do Hero. Estilo Vercel/Linear/Supabase.
   ========================================================================= */
.hero-badge {
    position: absolute;
    left: 50%;
    bottom: 100%;                 /* base na borda superior do título... */
    transform: translateX(-50%);
    margin-bottom: 36px;          /* ...empurrada ~36px para cima        */
    display: inline-flex;
    align-items: center;
    gap: 9px;                     /* espaço entre o ponto e o texto      */
    white-space: nowrap;          /* uma única linha                     */
    animation: badgeFadeIn .9s ease both;
}
.hero-badge-text {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #7A7A7A;                                  /* "Trusted by" / "Databases" em cinza */
}
.hero-badge-text strong { color: #111111; font-weight: 700; }   /* "200+" em preto */

@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-badge { animation: none; }
}


/* =====================================================================
   HOME — Seção "Integrations catalog" (reprodução da referencia.png).
   Substitui a antiga .feature-section--dark. Fundo preto + título serifado
   + nuvem 3D de ícones (squircles com profundidade, camadas de brilho/blur
   e reflexo no chão). 100% CSS/SVG. Escopo TOTAL em .icx* → não afeta
   navbar, hero, footer nem as demais seções da Home.
   ===================================================================== */
.icx {
    position: relative;
    width: 100%;
    /* Fundo branco contínuo com as seções vizinhas (topo e rodapé) → a página
       inteira desta área forma um único bloco branco, sem transição escura. */
    background: var(--page-background);
    font-family: 'Inter', sans-serif;
    /* padding-top ~74px → respiro elegante (~80px) acima do título "Integrations
       catalog". A seção sobe naturalmente para ocupar o espaço da antiga seção
       "Vídeo + estatísticas" removida (sem margin/transform/z-index residuais). */
    padding: 74px 24px 64px;
    overflow: hidden;
    text-align: center;
}

/* -------------------------- CABEÇALHO ----------------------------- */
.icx-head { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.icx-title {
    margin: 0;
    font-family: 'Times New Roman', Georgia, serif;
    font-weight: 400;
    font-size: clamp(30px, 4.3vw, 46px);
    line-height: 1.06;
    letter-spacing: .2px;
    color: #111111;
}
.icx-sub {
    margin: 14px auto 0;
    max-width: 560px;
    font-size: clamp(13px, 1.35vw, 15px);
    line-height: 1.5;
    color: #6b7280;
    font-weight: 400;
}

/* ---------------------------- PALCO ------------------------------- */
/* Sistema de coordenadas = a referência (992 x 398), recortado na faixa
   dos ícones (y 170..398 → altura 228). Cada ícone é posicionado por %
   com custom props (--cx,--cy,--s em px da referência) → escala isotrópica. */
.icx-stage {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    margin: 34px auto 0;
    aspect-ratio: 992 / 228;
    /* Parallax suave da nuvem inteira ao mover o mouse (--px/--py definidos por JS,
       máx 8px). Só transform → não altera layout nem move ícones permanentemente. */
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    will-change: transform;
}
.icx-ico {
    position: absolute;
    left: calc(var(--cx) / 992 * 100%);
    top: calc((var(--cy) - 170) / 228 * 100%);
    width: calc(var(--s) / 992 * 100%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}
.icx-tile {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24%;
    display: grid;
    place-items: center;
    /* Sombra suave (fundo branco): profundidade sem peso escuro. */
    box-shadow: 0 6px 16px rgba(17, 24, 39, .16), inset 0 1px 1px rgba(255, 255, 255, .35);
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent 60%, rgba(0, 0, 0, .06));
}
.icx-tile svg { width: 66%; height: 66%; display: block; }

/* --- camadas de profundidade: no branco, o afastamento desvanece via OPACIDADE
   (não por brilho — escurecer destacaria os ícones no branco). blur + z-index
   mantêm a sensação 3D. --- */
.icx--front { z-index: 30; }
.icx--mid   { z-index: 20; opacity: .88; }
.icx--mid  .icx-tile { box-shadow: 0 5px 13px rgba(17,24,39,.14); }
.icx--back  { z-index: 10; opacity: .52; }
.icx--back .icx-tile { filter: blur(.6px); box-shadow: 0 4px 11px rgba(17,24,39,.12); }
.icx--deep  { z-index: 5; opacity: .3; }
.icx--deep .icx-tile { filter: blur(1px); box-shadow: 0 3px 9px rgba(17,24,39,.10); -webkit-box-reflect: none; }

/* --------------------- fundos de marca (tiles) -------------------- */
.icx .b-white    { background: linear-gradient(180deg, #ffffff 0%, #ececec 100%); }
.icx .b-twitter  { background: linear-gradient(180deg, #2aa3ef 0%, #1583d6 100%); }
.icx .b-contacts { background: linear-gradient(180deg, #f3f2f0 0%, #e0dedb 100%); }
.icx .b-outlook  { background: linear-gradient(180deg, #f5f5f5 0%, #e6e6e6 100%); }
.icx .b-linkedin { background: linear-gradient(180deg, #1b8fd6 0%, #0a66c2 100%); }
.icx .b-facebook { background: linear-gradient(180deg, #2a86ff 0%, #1877f2 100%); }
.icx .b-green    { background: linear-gradient(180deg, #39d75c 0%, #24ad47 100%); }
.icx .b-chatgpt  { background: linear-gradient(180deg, #12a884 0%, #0b6e57 100%); }
.icx .b-phone    { background: linear-gradient(180deg, #22c9ac 0%, #12a58b 100%); }
.icx .b-insta    { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.icx .b-sync     { background: linear-gradient(155deg, #d3a86e 0%, #7a4f24 100%); }
.icx .b-whatsapp { background: linear-gradient(180deg, #3ee06a 0%, #22c258 100%); }
.icx .b-zapier   { background: linear-gradient(180deg, #ef6a34 0%, #d94e1c 100%); }
.icx .b-greenn   { background: linear-gradient(180deg, #1f9d6b 0%, #147a52 100%); }
.icx .b-csv      { background: linear-gradient(180deg, #3aa757 0%, #2e8746 100%); }
.icx .b-jul      { background: linear-gradient(180deg, #ffffff 0%, #ededed 100%); }
.icx .b-atom     { background: linear-gradient(180deg, #124a4a 0%, #06201f 100%); }
.icx .b-play     { background: linear-gradient(180deg, #1c3d2b 0%, #0b2417 100%); }
.icx .b-bookmark { background: linear-gradient(180deg, #7a2b2b 0%, #481818 100%); }
.icx .b-dark     { background: linear-gradient(180deg, #2a2a2a 0%, #141414 100%); }

/* zapier wordmark */
.icx-word {
    color: #fff;
    font-weight: 800;
    font-size: calc(var(--s) * 0.205px);
    letter-spacing: -.3px;
    font-family: 'Inter', sans-serif;
}

/* Apple Contacts: faixa colorida na borda direita */
.icx .b-contacts { overflow: hidden; }
.icx-contacts-tabs {
    position: absolute;
    top: 14%;
    right: 6%;
    height: 72%;
    width: 9%;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    overflow: hidden;
}
.icx-contacts-tabs i { flex: 1; }

/* Google Calendar "31" */
.icx-gcal .icx-gcal-frame {
    position: relative;
    width: 72%;
    height: 72%;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.icx-gcal-frame i { position: absolute; }
.icx-gcal-frame .gc-top    { top: 0; left: 0; right: 0; height: 20%; background: #4285F4; border-radius: 3px 3px 0 0; }
.icx-gcal-frame .gc-bottom { bottom: 0; left: 0; right: 0; height: 20%; background: #34A853; border-radius: 0 0 3px 3px; }
.icx-gcal-frame .gc-left   { top: 20%; bottom: 20%; left: 0; width: 20%; background: #EA4335; }
.icx-gcal-frame .gc-right  { top: 20%; bottom: 20%; right: 0; width: 20%; background: #FBBC04; }
.icx-gcal-frame b {
    position: absolute;
    inset: 20%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #4285F4;
    font-weight: 700;
    font-size: calc(var(--s) * 0.24px);
    font-family: 'Arial', sans-serif;
}

/* ---------------- entrada premium (fade + pop) ------------------- */
.icx-head, .icx-ico { will-change: transform, opacity; }
.icx-head { opacity: 0; transform: translateY(16px); }
.icx.in .icx-head {
    opacity: 1; transform: none;
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
/* ===== ENTRADA em cascata (fade + translateY, stagger ~40ms via --i definido no JS).
   Fica no .icx-ico compondo com o translate(-50%,-50%) de posição → posição preservada. */
.icx-ico { opacity: 0; }
.icx.in .icx-ico {
    animation: icxEnter .62s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes icxEnter {
    from { opacity: 0; transform: translate(-50%, -50%) translateY(16px); }
    to   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}

/* ===== CAMADA DE INTERAÇÃO (.icx-fx) — inserida via JS entre .icx-ico (posição) e
   .icx-tile (visual). Um único transform aqui → hover/vizinho sem colidir com a
   posição (.icx-ico) nem com a flutuação (.icx-tile). Só transform → 60fps. */
.icx-fx {
    display: block;
    width: 100%; height: 100%;
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);   /* 300ms, curva premium */
    will-change: transform;
}
.icx-ico:hover  { z-index: 40; }                                    /* ícone em foco vem à frente */
.icx-ico:hover  .icx-fx { transform: translateY(-12px) scale(1.08); }   /* sobe 12px + escala 1.08 */
.icx-ico:active .icx-fx { transform: translateY(-9px)  scale(1.06); }   /* tap (mobile) */
.icx-fx.is-near { transform: translateY(-5px)  scale(1.015); }          /* 2 vizinhos: sobem 5px + 1.5% */

/* Sombra mais forte no hover (a sombra vive no .icx-tile) */
.icx-tile { transition: box-shadow .3s ease; }
.icx-ico:hover .icx-tile {
    box-shadow: 0 20px 44px rgba(17, 24, 39, .30), inset 0 1px 1px rgba(255, 255, 255, .4);
}

/* ===== FLUTUAÇÃO contínua e orgânica (subconjunto de ícones; timing por JS via
   --fdur 5–8s / --fdelay / --famp 2–4px). Fica no .icx-tile → camada própria. */
.icx-tile.icx-floating {
    animation: icxFloat var(--fdur, 6s) ease-in-out var(--fdelay, 0s) infinite;
    will-change: transform;
}
@keyframes icxFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(var(--famp, -3px)); }
}

/* ===== RESPONSIVO das interações — tablet: intensidade -40%; mobile: só tap + entrada */
@media (max-width: 900px) {
    .icx-ico:hover .icx-fx { transform: translateY(-7px) scale(1.048); }
    .icx-fx.is-near        { transform: translateY(-3px) scale(1.009); }
}
@media (max-width: 620px) {
    .icx-tile.icx-floating { animation: none; }   /* sem flutuação contínua no mobile */
    .icx-stage             { transform: none; }    /* sem parallax no mobile */
    /* JS também não liga parallax/vizinhos no mobile; permanece só o tap (:active) + entrada */
}

/* ---------------------------- RESPONSIVO -------------------------- */
@media (max-width: 900px) {
    .icx { padding: 60px 20px 52px; }
    .icx-stage { margin-top: 26px; }
}
@media (max-width: 620px) {
    .icx { padding: 48px 16px 40px; }
    .icx-stage { width: 116%; margin-left: -8%; margin-top: 20px; }
    .icx-sub { max-width: 340px; }
}

/* Acessibilidade: sem movimento → tudo visível imediatamente, sem flutuação/parallax
   (o JS também não liga parallax/vizinhos/flutuação neste modo). */
@media (prefers-reduced-motion: reduce) {
    .icx-head, .icx-ico { opacity: 1 !important; transform: translate(-50%, -50%) !important; animation: none !important; transition: none !important; }
    .icx-head { transform: none !important; }
    .icx-tile.icx-floating { animation: none !important; }
    .icx-fx { transition: none !important; }
    .icx-stage { transform: none !important; }
}


/* nova logo usada como glifo decorativo — ocupa exatamente o MESMO espaço do antigo (sem mudar layout) */
.hero-mark img.brand-glyph { width: 100%; height: 100%; object-fit: contain; display: block; }
img.ghost-icon { width: 100%; height: 100%; object-fit: contain; display: block; }
/* spend-echo agora é branca → glifo mantém sua cor escura original (sem inversão) */

/* =====================================================================
   Marca d'água gigante "Anthares 44" — agora uma SEÇÃO decorativa
   independente, imediatamente ABAIXO do rodapé (fora do card branco).
   Mesmo tamanho/tipografia/gradiente/alinhamento da wordmark anterior.
   ===================================================================== */
.a44-outro {
    width: 100%; box-sizing: border-box;
    background: var(--page-background);                  /* fundo contínuo com o rodapé e o restante da página */
    padding: 0 24px 22px;                 /* seção BAIXA: respiro inferior mínimo (o gap ~56px vem do padding-bottom do rodapé) */
    text-align: center; overflow: hidden; /* wordmark não gera scroll horizontal */
    position: relative; z-index: 0;       /* decorativa, atrás do conteúdo */
    line-height: 0;
}
.a44-outro-word {
    display: inline-block; white-space: nowrap; user-select: none;
    font-size: clamp(46px, 12.4vw, 176px); font-weight: 800; line-height: .8; letter-spacing: -.045em;
    /* ~20% menor + box mais justo (line-height .8) → seção bem mais baixa.
       Apenas um DETALHE de fundo: cinza quase imperceptível a ~3% de opacidade. */
    color: #111111; opacity: .03;
}

/* =====================================================================
   HOME — Seção "Anthares 44 em ação" (.ag) — experiência 3D estilo Antigravity
   logo abaixo do Hero. Container preto #050505, ~95vw × 850–1000px, cantos
   arredondados; partículas
   coloridas animadas + interfaces reais flutuando em profundidade (perspective
   + translateZ/rotateX/rotateY), timeline contínua via GSAP + parallax.
   Escopo TOTAL em .ag-* → não afeta navbar, hero, footer nem demais seções.
   ===================================================================== */
.ag {
    position: relative;
    width: 100%;
    background: var(--page-background);   /* fundo branco contínuo da Home */
    padding: 4px 0 76px;                  /* topo reduzido (36→4) para aproximar do Hero | base: separa da .spend-section */
    display: flex;
    justify-content: center;
    z-index: 15;
    overflow: hidden;                     /* contém o parallax/partículas que sangram */
    perspective: 1400px;                  /* dá profundidade ao rotateX do zoom cinematográfico */
}

/* Container preto — ~95vw × 850–1000px, cantos arredondados. É o alvo do zoom
   por scroll (scale/translateY/rotateX/opacity via GSAP ScrollTrigger). */
.ag-stage {
    position: relative;
    width: 95vw;                          /* margens laterais de ~2.5% em cada lado (quase ponta a ponta) */
    /* Showcase estilo Antigravity: o card ocupa quase toda a largura útil (95vw =
       ~95% da viewport, margens ~2.5%) com teto de 2000px. A ALTURA acompanha
       proporcionalmente (mesma proporção ~1.53): fator 62vw e teto 1305 (2000/1.53).
       width:95vw garante que nunca corta e fica centralizado (flex do .ag). Não há
       outro max-width/container/mx-auto limitando (o .ag é width:100% e centraliza).
       Mobile inalterado (min 850). Sem tocar em animações/scroll, background nem margin. */
    max-width: 2000px;
    height: clamp(850px, 62vw, 1305px);
    /* Espaço vazio ENTRE o título do Hero e o card do vídeo (reduzido de 200 → 130px,
       −70px de excesso de respiro). No próprio card (margin, não padding) → não mexe
       no container .ag, no Hero (título/posição/altura) nem na altura do card. */
    margin-top: 130px;
    background: #050505;
    border-radius: 36px;
    overflow: hidden;
    transform-origin: 50% 0%;             /* cresce a partir do topo → encontra o botão fixo */
    /* Sem box-shadow: o container preto termina exatamente no border-radius,
       sem nenhuma sombra/degradê cinza abaixo — logo abaixo vem o próprio
       fundo da Home (--page-background). */
}

/* Camada interna: recebe o BLUR do zoom e é o pai do campo 3D das interfaces */
.ag-inner {
    position: absolute;
    inset: 0;
    perspective: 1600px;                  /* campo 3D para as interfaces */
    perspective-origin: 50% 44%;
    filter: blur(var(--sb, 0px));         /* 8px → 0 durante o zoom */
    will-change: filter;
}

/* Iluminação sutil (blobs) + vinheta */
.ag-light {
    position: absolute; inset: -10%;
    z-index: 1; pointer-events: none;
    background:
        radial-gradient(38% 42% at 30% 32%, rgba(74, 163, 240, .22) 0%, transparent 70%),
        radial-gradient(36% 40% at 72% 40%, rgba(160, 107, 255, .20) 0%, transparent 72%),
        radial-gradient(34% 40% at 50% 78%, rgba(255, 138, 61, .16) 0%, transparent 72%);
    filter: blur(30px);
}
.ag-vignette {
    position: absolute; inset: 0;
    z-index: 45; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0, 0, 0, .55) 100%);
    box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, .55);
    border-radius: 36px;
}

/* Partículas coloridas (geradas via JS, animadas em GSAP) */
.ag-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ag-particle {
    position: absolute;
    border-radius: 50%;
    filter: blur(.3px);
    will-change: transform, opacity;
}

/* Cena 3D — mantém profundidade real das interfaces */
.ag-scene {
    position: absolute; inset: 0;
    z-index: 20;
    transform-style: preserve-3d;
}
.ag-screen {
    position: absolute;
    top: 50%; left: 50%;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    filter: blur(var(--b, 0px));
}

/* ---------- Janela genérica (chrome de app) ---------- */
.ag-win {
    width: min(1180px, 78vw);  /* interface em destaque bem maior (tamanho REAL, nítido) → preenche o card, sem bordas grandes vazias */
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #15171d 0%, #0d0f14 100%);
    color: #e8eaf0;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 44px 90px rgba(0, 0, 0, .6),
                0 0 0 1px rgba(255, 255, 255, .06),
                0 0 70px -12px rgba(90, 130, 255, .35);   /* iluminação sutil ao redor */
    animation: ag-bob 7s ease-in-out infinite;            /* micro-flutuação contínua (vivo sem interação) */
}
.ag-screen:nth-child(2) .ag-win { animation-duration: 6.2s; animation-delay: -1.4s; }
.ag-screen:nth-child(3) .ag-win { animation-duration: 7.6s; animation-delay: -2.6s; }
.ag-screen:nth-child(4) .ag-win { animation-duration: 6.8s; animation-delay: -3.4s; }
.ag-screen:nth-child(5) .ag-win { animation-duration: 7.2s; animation-delay: -0.8s; }

.ag-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ag-bar .d { width: 11px; height: 11px; border-radius: 50%; }
.ag-bar .r { background: #ff5f57; } .ag-bar .y { background: #febc2e; } .ag-bar .g { background: #28c840; }
.ag-bar span { margin-left: 8px; font-size: .76rem; font-weight: 500; color: rgba(232, 234, 240, .55); }

/* ---------- Dashboard ---------- */
.ag-dash { display: flex; }
.ag-dash-side {
    width: 30%; padding: 15px 13px;
    border-right: 1px solid rgba(255, 255, 255, .06);
    display: flex; flex-direction: column; gap: 8px;
}
.ag-nav { font-size: .82rem; color: rgba(232, 234, 240, .55); padding: 8px 11px; border-radius: 9px; }
.ag-nav.on { background: rgba(204, 255, 0, .12); color: #d7ff4a; }
.ag-dash-main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ag-kpis { display: flex; gap: 10px; }
.ag-kpi { flex: 1; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.ag-kpi b { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.ag-kpi span { font-size: .72rem; color: rgba(232, 234, 240, .5); }
.ag-area { flex: 1; min-height: 200px; }   /* dashboard mais alto → janela preenche mais o card */
.ag-area svg { width: 100%; height: 100%; display: block; }

/* ---------- Editor ---------- */
.ag-code { display: flex; padding: 14px 4px 16px 0; font: 500 .84rem/1.85 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; }
.ag-gutter { display: flex; flex-direction: column; padding: 0 12px; text-align: right; color: rgba(232, 234, 240, .28); }
.ag-lines { display: flex; flex-direction: column; padding-left: 6px; white-space: nowrap; }
.ag-lines .kw { color: #c792ea; } .ag-lines .fn { color: #4aa3f0; } .ag-lines .str { color: #ff8a3d; }

/* ---------- Database ---------- */
.ag-table { padding: 6px 0; font-size: .8rem; }
.ag-tr { display: grid; grid-template-columns: .7fr 1.4fr .8fr 1fr; gap: 10px; padding: 11px 18px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.ag-tr.ag-th { color: rgba(232, 234, 240, .42); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ag-tr span:first-child { color: rgba(232, 234, 240, .5); font-family: ui-monospace, monospace; }
.ag-pill { justify-self: start; font-size: .68rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.ag-pill.ok { background: rgba(40, 200, 120, .16); color: #45e6a0; }
.ag-pill.wait { background: rgba(255, 210, 61, .16); color: #ffd23d; }
.ag-pill.off { background: rgba(255, 255, 255, .08); color: rgba(232, 234, 240, .55); }

/* ---------- Analytics ---------- */
.ag-analytics { display: flex; gap: 18px; padding: 18px; align-items: center; }
.ag-bars { flex: 1; display: flex; align-items: flex-end; gap: 9px; height: 230px; }   /* analytics mais alto → preenche mais o card */
.ag-bars i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #4aa3f0 0%, #a06bff 100%); }
.ag-an-side { width: 42%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ag-donut {
    width: 116px; height: 116px; border-radius: 50%;
    background: conic-gradient(#4aa3f0 0 42%, #a06bff 42% 68%, #ff8a3d 68% 86%, #ffd23d 86% 100%);
    -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 59%);
            mask: radial-gradient(closest-side, transparent 58%, #000 59%);
}
.ag-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: .74rem; color: rgba(232, 234, 240, .62); }
.ag-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ag-legend i { width: 9px; height: 9px; border-radius: 3px; }

/* ---------- Auth / usuários ---------- */
.ag-auth { padding: 8px 0; }
.ag-user { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.ag-ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #0b0c0f; font-weight: 700; flex-shrink: 0; }
.ag-user-txt { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ag-user-txt b { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.ag-user-txt i { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); }

/* Micro-flutuação contínua das janelas (independente da timeline 3D) */
@keyframes ag-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Responsivo — mantém o container e reduz as interfaces */
@media (max-width: 760px) {
    .ag-stage { border-radius: 28px; }
    .ag-vignette { border-radius: 28px; }
    .ag-win { width: 86vw; }
}

/* Acessibilidade — sem movimento para quem prefere reduzir animações
   (o JS também detecta e serve um arranjo estático). */
@media (prefers-reduced-motion: reduce) {
    .ag-win, .ag-particle { animation: none !important; }
}

/* =====================================================================
   DASHBOARD ÚNICO que preenche o card (.ag-dashboard) — estilo Antigravity.
   Ocupa 100% do .ag-inner (inset:0 do .ag-stage) → sem bordas escuras vazias.
   Só troquei o CONTEÚDO interno; o card (95vw, cantos, sombra) e o zoom por
   scroll continuam iguais. Tamanhos em clamp(vw) → escala com o card e nítido.
   ===================================================================== */
.ag-dashboard {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    background: linear-gradient(160deg, #0e1119 0%, #080a0e 62%, #060709 100%);
    color: #e9ecf3; font-family: 'Inter', sans-serif; text-align: left; overflow: hidden;
}

/* ---- header do app ---- */
.ag-db-top {
    flex: 0 0 auto; display: flex; align-items: center; gap: clamp(12px, 1.3vw, 24px);
    padding: clamp(11px, 1vw, 20px) clamp(16px, 1.5vw, 30px);
    border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02);
}
.ag-db-dots { display: inline-flex; gap: clamp(6px, .5vw, 9px); }
.ag-db-dots i { width: clamp(9px, .75vw, 13px); aspect-ratio: 1; border-radius: 50%; display: block; }
.ag-db-dots .r { background: #ff5f57; } .ag-db-dots .y { background: #febc2e; } .ag-db-dots .g { background: #28c840; }
.ag-db-brand { display: inline-flex; align-items: center; gap: clamp(6px, .6vw, 10px); font-weight: 700; font-size: clamp(13px, 1.05vw, 18px); }
.ag-db-brand svg { width: clamp(20px, 1.7vw, 30px); height: auto; }
.ag-db-search {
    flex: 1; max-width: clamp(240px, 34vw, 640px);
    padding: clamp(7px, .6vw, 12px) clamp(12px, 1vw, 18px); border-radius: 9px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
    color: rgba(233, 236, 243, .42); font-size: clamp(11px, .9vw, 14px);
}
.ag-db-top-r { margin-left: auto; display: inline-flex; align-items: center; gap: clamp(8px, .8vw, 14px); font-size: clamp(11px, .9vw, 14px); color: rgba(233, 236, 243, .62); }
.ag-db-dot-ok { width: clamp(7px, .6vw, 10px); aspect-ratio: 1; border-radius: 50%; background: #45e6a0; box-shadow: 0 0 8px #45e6a0; }
.ag-db-av { display: grid; place-items: center; width: clamp(28px, 2.3vw, 42px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(140deg, #4aa3f0, #a06bff); color: #0b0c0f; font-weight: 700; font-size: clamp(11px, .85vw, 14px); }

/* ---- corpo: sidebar + main ---- */
.ag-db-body { flex: 1; display: flex; min-height: 0; }
.ag-db-side {
    flex: 0 0 clamp(170px, 15vw, 280px); overflow: hidden;
    padding: clamp(14px, 1.2vw, 24px) clamp(12px, 1vw, 18px);
    border-right: 1px solid rgba(255, 255, 255, .06);
    display: flex; flex-direction: column; gap: clamp(3px, .3vw, 6px);
}
.ag-db-slabel { font-size: clamp(9px, .72vw, 12px); text-transform: uppercase; letter-spacing: .08em; color: rgba(233, 236, 243, .34); margin: clamp(8px, .9vw, 16px) clamp(6px, .5vw, 10px) clamp(3px, .3vw, 6px); }
.ag-db-slabel:first-child { margin-top: 0; }
.ag-db-nav { display: flex; align-items: center; gap: clamp(8px, .7vw, 12px); padding: clamp(7px, .65vw, 12px) clamp(10px, .85vw, 15px); border-radius: 9px; font-size: clamp(12px, .95vw, 15px); color: rgba(233, 236, 243, .6); }
.ag-db-nav i { width: clamp(7px, .6vw, 10px); aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, .16); flex: 0 0 auto; }
.ag-db-nav.on { background: rgba(204, 255, 0, .12); color: #d7ff4a; }
.ag-db-nav.on i { background: #d7ff4a; }

.ag-db-main { flex: 1; min-width: 0; padding: clamp(16px, 1.5vw, 32px); display: flex; flex-direction: column; gap: clamp(14px, 1.3vw, 26px); }
.ag-db-head { display: flex; align-items: center; justify-content: space-between; }
.ag-db-title b { display: block; font-size: clamp(18px, 1.6vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.ag-db-title span { font-size: clamp(11px, .9vw, 14px); color: rgba(233, 236, 243, .45); }
.ag-db-seg { display: inline-flex; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); border-radius: 9px; padding: 3px; }
.ag-db-seg b { padding: clamp(5px, .5vw, 9px) clamp(10px, .9vw, 16px); border-radius: 6px; font-size: clamp(11px, .85vw, 14px); font-weight: 600; color: rgba(233, 236, 243, .55); }
.ag-db-seg b.on { background: rgba(255, 255, 255, .08); color: #fff; }

.ag-db-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1vw, 20px); }
.ag-db-kpi { padding: clamp(12px, 1.1vw, 22px); border-radius: clamp(10px, .9vw, 16px); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: clamp(4px, .4vw, 8px); }
.ag-db-kpi span { font-size: clamp(11px, .85vw, 14px); color: rgba(233, 236, 243, .5); }
.ag-db-kpi b { font-size: clamp(20px, 1.9vw, 36px); font-weight: 700; letter-spacing: -.02em; }
.ag-db-kpi em { font-size: clamp(10px, .8vw, 13px); font-style: normal; }
.ag-db-kpi em.up { color: #45e6a0; }
.ag-db-kpi em.down { color: #ff6b6b; }

.ag-db-chart { flex: 1; min-height: clamp(130px, 15vw, 300px); display: flex; flex-direction: column; padding: clamp(12px, 1.1vw, 22px); border-radius: clamp(10px, .9vw, 16px); background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.ag-db-chart-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(8px, .7vw, 14px); }
.ag-db-chart-h b { font-size: clamp(12px, .95vw, 15px); }
.ag-db-legend { display: inline-flex; align-items: center; gap: clamp(5px, .5vw, 8px); font-size: clamp(10px, .8vw, 13px); color: rgba(233, 236, 243, .55); }
.ag-db-legend i { width: clamp(8px, .65vw, 11px); aspect-ratio: 1; border-radius: 3px; }
.ag-db-svg { flex: 1; width: 100%; display: block; }

.ag-db-panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(12px, 1.1vw, 22px); }
.ag-db-panel { padding: clamp(12px, 1.1vw, 22px); border-radius: clamp(10px, .9vw, 16px); background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.ag-db-panel-h { font-size: clamp(12px, .95vw, 15px); font-weight: 600; margin-bottom: clamp(6px, .6vw, 12px); }
.ag-db-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(8px, .8vw, 14px); padding: clamp(7px, .65vw, 12px) 0; border-top: 1px solid rgba(255, 255, 255, .05); font-size: clamp(11px, .9vw, 14px); }
.ag-db-item:first-of-type { border-top: none; }
.ag-db-item b { font-weight: 600; }
.ag-db-item > span:nth-child(3) { color: rgba(233, 236, 243, .42); font-family: ui-monospace, monospace; font-size: clamp(10px, .78vw, 13px); }
.ag-db-idot { width: clamp(8px, .7vw, 11px); aspect-ratio: 1; border-radius: 50%; }
.ag-db-idot.ok { background: #45e6a0; box-shadow: 0 0 8px rgba(69, 230, 160, .5); }
.ag-db-idot.run { background: #ffd23d; box-shadow: 0 0 8px rgba(255, 210, 61, .5); }
.ag-db-tag { justify-self: end; font-size: clamp(9px, .75vw, 12px); font-weight: 600; padding: clamp(3px, .3vw, 5px) clamp(8px, .7vw, 12px); border-radius: 99px; }
.ag-db-tag.ok { background: rgba(69, 230, 160, .14); color: #45e6a0; }
.ag-db-tag.run { background: rgba(255, 210, 61, .14); color: #ffd23d; }

.ag-db-donut-wrap { display: flex; align-items: center; gap: clamp(14px, 1.3vw, 26px); }
.ag-db-donut { flex: 0 0 auto; width: clamp(90px, 9vw, 160px); aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(#4aa3f0 0 42%, #a06bff 42% 68%, #ff8a3d 68% 86%, #ffd23d 86% 100%);
    -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 59%);
            mask: radial-gradient(closest-side, transparent 58%, #000 59%); }
.ag-db-dlegend { display: flex; flex-direction: column; gap: clamp(6px, .6vw, 11px); font-size: clamp(11px, .9vw, 14px); color: rgba(233, 236, 243, .62); }
.ag-db-dlegend span { display: inline-flex; align-items: center; gap: clamp(6px, .5vw, 9px); }
.ag-db-dlegend i { width: clamp(9px, .7vw, 12px); aspect-ratio: 1; border-radius: 3px; }
.ag-db-dlegend b { color: #fff; margin-left: 2px; }

/* Mobile: simplifica o dashboard (esconde sidebar/busca, KPIs 2x2, painéis empilhados) */
@media (max-width: 760px) {
    .ag-db-side, .ag-db-search { display: none; }
    .ag-db-kpis { grid-template-columns: repeat(2, 1fr); }
    .ag-db-panels { grid-template-columns: 1fr; }
}