/* ==========================================================================
   PDFaz • Design System "Aurora Ink" v1.0
   Camada visual única, carregada DEPOIS de style.css / landing.css / agent.css
   em todas as páginas (app, landings promocionais e Agente de IA).

   Identidade:
   - "Papel & Tinta": superfícies de papel frio no claro, tinta profunda no escuro
   - Gradiente-assinatura "Sinal" (cobalto → ciano → menta), fugindo do roxo/preto
     genérico dos agentes de IA
   - Orelha de papel (dog-ear) como motivo recorrente nos cartões de documento
   - Tipografia de exibição Space Grotesk + corpo Inter
   - Movimento sutil: aurora, brilho nos botões, spotlight, reveal on scroll
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"],
:root[data-theme="light"] {
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bg-app: #F3F6FC;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F6F8FE;
  --bg-muted: #EAEFFA;
  --bg-header: rgba(247, 249, 255, 0.78);
  --bg-sidebar: #FBFCFF;
  --border-sidebar: #E1E8F6;
  --sidebar-hover: #EEF3FD;
  --sidebar-active-bg: #E4ECFF;
  --sidebar-active-color: #2447E0;

  --primary: #2F5BFF;
  --primary-hover: #2447E0;
  --primary-light: #E8EEFF;
  --primary-border: #BCCBFF;
  --border-focus: #2F5BFF;

  --text-main: #0B1220;
  --text-muted: #4A5670;
  --text-subtle: #7C88A3;

  --border-color: #E1E8F6;
  --border-hover: #C5D1EC;

  --aqua: #00B8E6;
  --mint: #12D6A5;
  --signal: linear-gradient(120deg, #2F5BFF 0%, #00B8E6 58%, #12D6A5 100%);
  --signal-soft: linear-gradient(120deg, rgba(47, 91, 255, .10), rgba(0, 184, 230, .10) 58%, rgba(18, 214, 165, .12));

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .05), 0 1px 1px rgba(11, 18, 32, .03);
  --shadow-md: 0 8px 22px -8px rgba(30, 50, 110, .16), 0 2px 6px rgba(11, 18, 32, .04);
  --shadow-lg: 0 24px 50px -16px rgba(30, 50, 130, .22), 0 6px 14px -6px rgba(11, 18, 32, .06);
  --shadow-glow: 0 0 0 1px rgba(47, 91, 255, .12), 0 12px 40px -8px rgba(47, 91, 255, .35);

  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --transition-fast: .18s var(--ease-out);
  --transition-normal: .3s var(--ease-out);
}

[data-theme="dark"],
:root[data-theme="dark"] {
  --bg-app: #070B14;
  --bg-card: #0E1524;
  --bg-card-hover: #131C30;
  --bg-input: #0A1120;
  --bg-muted: #131C30;
  --bg-header: rgba(7, 11, 20, 0.72);
  --bg-sidebar: #090F1C;
  --border-sidebar: #17223A;
  --sidebar-hover: #101A2E;
  --sidebar-active-bg: rgba(79, 124, 255, .18);
  --sidebar-active-color: #8FB0FF;

  --primary: #5B8CFF;
  --primary-hover: #86A8FF;
  --primary-light: rgba(91, 140, 255, .16);
  --primary-border: rgba(91, 140, 255, .42);
  --border-focus: #5B8CFF;

  --text-main: #F4F7FF;
  --text-muted: #C3CDE3;
  --text-subtle: #8D9AB8;

  --border-color: #1B2742;
  --border-hover: #2D3E66;

  --aqua: #2CD3FF;
  --mint: #3DEBBE;
  --signal: linear-gradient(120deg, #5B8CFF 0%, #2CD3FF 55%, #3DEBBE 100%);
  --signal-soft: linear-gradient(120deg, rgba(91, 140, 255, .16), rgba(44, 211, 255, .12) 55%, rgba(61, 235, 190, .14));

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 10px 26px -10px rgba(0, 0, 0, .7);
  --shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(91, 140, 255, .06);
  --shadow-glow: 0 0 0 1px rgba(91, 140, 255, .25), 0 14px 44px -8px rgba(44, 130, 255, .45);
}

/* --------------------------------------------------------------------------
   2. Atmosfera de fundo (aurora + grade pontilhada de papel)
   -------------------------------------------------------------------------- */
html { background: var(--bg-app); }
body { background: transparent !important; position: relative; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(47, 91, 255, .16), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, rgba(18, 214, 165, .13), transparent 60%),
    radial-gradient(700px 520px at 50% 108%, rgba(0, 184, 230, .10), transparent 60%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(47, 70, 140, .20) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  opacity: .55;
}

[data-theme="dark"] body::before {
  background:
    radial-gradient(900px 560px at 10% -10%, rgba(47, 91, 255, .30), transparent 62%),
    radial-gradient(780px 520px at 95% 0%, rgba(18, 214, 165, .16), transparent 60%),
    radial-gradient(760px 560px at 50% 110%, rgba(0, 184, 230, .16), transparent 60%);
}

[data-theme="dark"] body::after {
  background-image: radial-gradient(rgba(140, 170, 255, .22) 1px, transparent 1.2px);
  opacity: .5;
}

::selection { background: rgba(47, 91, 255, .28); }

/* --------------------------------------------------------------------------
   3. Tipografia de exibição
   -------------------------------------------------------------------------- */
h1, h2, h3,
.brand-title, .section-title, .hero-title, .benefit-title, .step-title,
.agent-hero-title, .agent-title-group h1, .card-title, .ai-card-title,
.cta-banner h2, .preview-doc-title {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   4. Cabeçalho (todas as páginas)
   -------------------------------------------------------------------------- */
.site-header, .app-header, .agent-header {
  background: var(--bg-header) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  position: sticky;
}

.site-header::after, .app-header::after, .agent-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-border) 20%, rgba(0, 184, 230, .5) 50%, rgba(18, 214, 165, .4) 80%, transparent);
  opacity: .9;
  pointer-events: none;
}

.brand-icon, .agent-logo-badge {
  background: var(--signal) !important;
  border-radius: 13px !important;
  box-shadow: 0 8px 20px -6px rgba(0, 150, 230, .55), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  transition: transform .4s var(--ease-out);
}
.brand:hover .brand-icon, .agent-brand:hover .agent-logo-badge { transform: rotate(-6deg) scale(1.06); }

.brand-title span, .agent-title-group h1 span {
  background: var(--signal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-header-cta, .btn-hero-primary, .btn-ai-cta, .btn-primary, .btn-card-primary, .btn-prompt-send {
  background: var(--signal) !important;
  background-size: 160% 100% !important;
  background-position: 0% 0;
  color: #fff !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(0, 40, 90, .25);
  box-shadow: 0 10px 24px -8px rgba(0, 140, 230, .6), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-position .6s var(--ease-out) !important;
}
.btn-header-cta:hover, .btn-hero-primary:hover, .btn-ai-cta:hover, .btn-primary:hover, .btn-card-primary:hover, .btn-prompt-send:hover {
  background-position: 100% 0 !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(0, 150, 230, .7), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.btn-header-cta::after, .btn-hero-primary::after, .btn-ai-cta::after, .btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease-out);
  pointer-events: none;
}
.btn-header-cta:hover::after, .btn-hero-primary:hover::after, .btn-ai-cta:hover::after, .btn-primary:hover::after { left: 120%; }

.btn-prompt-send:disabled { background: var(--bg-muted) !important; box-shadow: none !important; text-shadow: none; }

.btn-hero-secondary, .btn-outline, .btn-theme-toggle, .btn-agent-icon {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all var(--transition-fast);
}
.btn-hero-secondary:hover, .btn-outline:hover, .btn-theme-toggle:hover, .btn-agent-icon:hover {
  border-color: var(--primary-border);
  background: var(--primary-light);
  color: var(--primary) !important;
  transform: translateY(-1px);
}

.btn-header-ai, .btn-manual-hub {
  background: var(--signal-soft) !important;
  border: 1px solid var(--primary-border) !important;
  border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   5. LANDING PAGES PROMOCIONAIS
   -------------------------------------------------------------------------- */
.landing-hero {
  position: relative;
  max-width: 980px;
  padding: 84px 20px 60px;
}

.hero-badge {
  position: relative;
  padding: 7px 16px 7px 30px;
  background: var(--signal-soft);
  border: 1px solid var(--primary-border);
  color: var(--primary);
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
}
.hero-badge::before {
  content: "";
  position: absolute;
  left: 13px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(18, 214, 165, .6);
  animation: pdfazPing 2s infinite;
}
@keyframes pdfazPing {
  0% { box-shadow: 0 0 0 0 rgba(18, 214, 165, .55); }
  70% { box-shadow: 0 0 0 10px rgba(18, 214, 165, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 214, 165, 0); }
}

.landing-hero .hero-title {
  font-size: clamp(2.2rem, 5.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin-bottom: 22px;
}
.landing-hero .hero-title span, .hero-title span {
  background: var(--signal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: pdfazShimmer 8s ease-in-out infinite alternate;
}
@keyframes pdfazShimmer { to { background-position: 100% 0; } }

.landing-hero .hero-description {
  font-size: 1.16rem;
  max-width: 700px;
  color: var(--text-muted);
}

.btn-hero-primary { padding: 16px 32px; border-radius: 14px; font-size: 1.05rem; }
.btn-hero-secondary { padding: 15px 26px; border-radius: 14px; }

.hero-guarantees { gap: 12px 14px; }
.hero-guarantee-item {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}
.hero-guarantee-item svg { color: var(--mint); }

/* Cartão do Agente: borda de gradiente animada */
@property --pdfaz-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.hero-ai-card {
  position: relative;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  padding: 22px 26px !important;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    conic-gradient(from var(--pdfaz-angle), #2F5BFF, #00B8E6, #12D6A5, #2F5BFF) border-box !important;
  animation: pdfazSpin 7s linear infinite;
  box-shadow: var(--shadow-glow) !important;
}
@keyframes pdfazSpin { to { --pdfaz-angle: 360deg; } }
.hero-ai-card:hover { transform: translateY(-3px); }
[data-theme="dark"] .hero-ai-card {
  background:
    linear-gradient(#0E1524, #0E1524) padding-box,
    conic-gradient(from var(--pdfaz-angle), #5B8CFF, #2CD3FF, #3DEBBE, #5B8CFF) border-box !important;
}
.ai-card-badge {
  background: var(--signal) !important;
  box-shadow: 0 6px 16px -4px rgba(0, 150, 230, .55) !important;
}
.ai-card-title { font-size: 1.2rem; }

/* Mockup de demonstração: janela de documento com orelha */
.preview-card {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  background: var(--bg-card);
}
.preview-card::after, .dogear::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 38px; height: 38px;
  background: linear-gradient(225deg, var(--bg-app) 50%, rgba(0, 184, 230, .35) 50%);
  border-bottom-left-radius: 12px;
  box-shadow: -3px 3px 8px -2px rgba(11, 18, 32, .15);
  pointer-events: none;
}
.preview-header { background: var(--signal-soft); }
.preview-dot:nth-child(1) { background: #FF6B6B !important; }
.preview-dot:nth-child(2) { background: #FFC24B !important; }
.preview-dot:nth-child(3) { background: #3DDC97 !important; }
.preview-doc-box {
  background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px dashed var(--primary-border);
}
.preview-feature-item { border-radius: 12px; }
.preview-feature-item:hover { border-color: var(--primary-border); box-shadow: var(--shadow-md); }

.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.1; }
.section-subtitle { font-size: 1.04rem; }
.section-header::before {
  content: "";
  display: block;
  width: 44px; height: 4px;
  margin: 0 auto 16px;
  border-radius: 4px;
  background: var(--signal);
}

/* Benefícios: spotlight que segue o cursor */
.benefit-card, .step-card, .faq-item, .agent-result-card, .card {
  position: relative;
  isolation: isolate;
}
.benefit-card {
  border-radius: 20px;
  padding: 30px;
  background: var(--bg-card);
  overflow: hidden;
}
.benefit-card::before, .step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(47, 91, 255, .13), transparent 60%);
  transition: opacity .35s var(--ease-out);
}
.benefit-card:hover::before, .step-card:hover::before { opacity: 1; }
.benefit-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.benefit-card:hover::after { transform: scaleX(1); }
.benefit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-border); }

.benefit-icon {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--signal-soft);
  border: 1px solid var(--primary-border);
  transition: transform .4s var(--ease-out);
}
.benefit-card:hover .benefit-icon { transform: rotate(-6deg) scale(1.08); }

/* Passo a passo: contador editorial */
.steps-section {
  background: transparent;
  border: 0;
  position: relative;
}
.steps-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--bg-muted) 18%, var(--bg-muted) 82%, transparent);
  opacity: .7;
}
.steps-grid { counter-reset: pdfaz-step; }
.step-card {
  border-radius: 20px;
  background: var(--bg-card);
  padding: 30px 26px 26px;
  overflow: hidden;
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-number {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--signal);
  font-family: var(--font-display);
  font-size: 1.15rem;
  box-shadow: 0 10px 22px -8px rgba(0, 150, 230, .6);
  transform: rotate(-4deg);
}

/* FAQ */
.faq-item { border-radius: 16px; }
.faq-item.is-open {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
}
.faq-item.is-open::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--signal);
}
.faq-question { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.02em; }
.faq-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  font-size: .9rem;
}

.related-tag-link { border-radius: 999px; padding: 10px 20px; }
.related-tag-link:hover { background: var(--signal-soft); box-shadow: var(--shadow-md); }

/* Banner final: bloco de tinta com aurora */
.cta-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  padding: 72px 28px;
  background: #070B14;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(91, 140, 255, .18);
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(40% 40% at 25% 30%, rgba(47, 91, 255, .65), transparent 70%),
    radial-gradient(35% 35% at 78% 25%, rgba(18, 214, 165, .45), transparent 70%),
    radial-gradient(40% 40% at 60% 85%, rgba(0, 184, 230, .5), transparent 70%);
  animation: pdfazAurora 16s ease-in-out infinite alternate;
  filter: blur(20px);
}
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
@keyframes pdfazAurora {
  from { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  to { transform: translate3d(4%, 3%, 0) rotate(12deg); }
}
.cta-banner h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.04em; }
.btn-cta-banner {
  border-radius: 14px;
  background: #fff;
  color: #0B1220 !important;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6);
}
.btn-cta-banner:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 4px rgba(255, 255, 255, .15), 0 18px 40px -10px rgba(0, 0, 0, .7); }

.site-footer {
  background: var(--bg-card);
  border-top: 0;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-border), rgba(18, 214, 165, .5), transparent);
}

/* --------------------------------------------------------------------------
   6. AGENTE DE IA (agente/index.html)
   -------------------------------------------------------------------------- */
.agent-hero { margin-top: 44px; margin-bottom: 36px; }

.agent-avatar-wrap { width: 104px; height: 104px; margin-bottom: 22px; }
.agent-hero.compact .agent-avatar-wrap { width: 56px; height: 56px; }

.agent-avatar-circle {
  background: radial-gradient(circle at 30% 25%, #6FA8FF 0%, #2F5BFF 45%, #0A1A6B 100%) !important;
  box-shadow: 0 18px 44px -10px rgba(47, 91, 255, .65), inset 0 2px 6px rgba(255, 255, 255, .45), inset 0 -8px 16px rgba(0, 20, 90, .5) !important;
}
.agent-avatar-circle::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(61, 235, 190, .55) 80%, transparent);
  animation: pdfazOrb 5s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes pdfazOrb { to { transform: rotate(360deg); } }
.agent-avatar-circle svg { position: relative; z-index: 2; }

.agent-avatar-pulse {
  inset: -14px !important;
  background: conic-gradient(from var(--pdfaz-angle), rgba(47, 91, 255, .5), rgba(0, 184, 230, .0) 30%, rgba(18, 214, 165, .5) 60%, rgba(0, 184, 230, 0) 85%, rgba(47, 91, 255, .5)) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: pdfazSpin 6s linear infinite, pdfazBreathe 3s ease-in-out infinite !important;
}
@keyframes pdfazBreathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.agent-avatar-wrap.speaking .agent-avatar-circle {
  background: radial-gradient(circle at 30% 25%, #7DF5CF 0%, #12D6A5 45%, #05503F 100%) !important;
}
.agent-avatar-wrap.listening .agent-avatar-circle {
  background: radial-gradient(circle at 30% 25%, #7DDCFF 0%, #00B8E6 45%, #06456B 100%) !important;
}

.agent-hero-title {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
  background: linear-gradient(120deg, var(--text-main) 30%, var(--primary) 70%, var(--aqua));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.agent-hero-title { white-space: nowrap; }
.agent-hero-subtitle { font-size: 1.04rem; max-width: 600px; }

/* Laptops e telas de pouca altura: compacta o hero para não sobrepor o prompt fixo */
@media (max-height: 820px) {
  .agent-main-container { padding-bottom: 220px; }
  .agent-hero { margin-top: 14px; margin-bottom: 16px; }
  .agent-avatar-wrap { width: 62px; height: 62px; margin-bottom: 10px; }
  .agent-avatar-circle svg { width: 26px; height: 26px; }
  .agent-hero-title { font-size: clamp(1.5rem, 3.2vw, 2rem); margin-bottom: 4px; }
  .agent-hero-subtitle { font-size: .90rem; line-height: 1.4; }
  .agent-manual-showcase { margin-top: 4px; margin-bottom: 16px; }
  .showcase-header { padding: 12px 16px; }
  .showcase-title { font-size: 1.12rem; }
  .showcase-desc { font-size: 0.80rem; }
  .showcase-card { padding: 12px 14px; gap: 6px; }
  .showcase-card-title { font-size: 0.90rem; }
  .showcase-card-text { font-size: 0.78rem; }
}
@media (max-height: 680px) {
  .agent-main-container { padding-bottom: 210px; }
  .agent-hero { margin-top: 6px; margin-bottom: 10px; }
  .agent-avatar-wrap { width: 48px; height: 48px; margin-bottom: 8px; }
  .agent-avatar-circle svg { width: 20px; height: 20px; }
  .agent-hero-title { font-size: clamp(1.3rem, 2.8vw, 1.7rem); }
  .agent-hero-subtitle { font-size: .84rem; }
  .agent-manual-showcase { margin-top: 2px; margin-bottom: 10px; }
  .showcase-header { padding: 8px 12px; }
  .showcase-card { padding: 10px 12px; gap: 4px; }
}
@media (max-width: 520px) {
  .agent-hero-title { white-space: normal; font-size: 1.55rem; }
}

.agent-mode-banner {
  background: var(--signal-soft);
  border: 1px solid var(--primary-border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.agent-mode-icon {
  color: var(--primary);
  flex-shrink: 0;
}

/* Vitrine de Ferramentas Manuais - Detalhes Aurora Ink */
.showcase-card {
  border-radius: 18px;
  backdrop-filter: blur(8px);
}
.showcase-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 22px; height: 22px;
  background: linear-gradient(225deg, var(--bg-app) 50%, rgba(47, 91, 255, .20) 50%);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}
[data-theme="dark"] .showcase-card::after {
  background: linear-gradient(225deg, var(--bg-app) 50%, rgba(91, 140, 255, .25) 50%);
}

.agent-msg-content {
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
.agent-message.assistant .agent-msg-content { border-top-left-radius: 6px; border-left: 3px solid var(--aqua); }
.agent-message.user .agent-msg-content {
  background: linear-gradient(135deg, #2F5BFF 0%, #1D8FEA 100%);
  border-color: transparent;
  border-bottom-right-radius: 6px;
  box-shadow: 0 12px 26px -10px rgba(47, 91, 255, .6);
}
.agent-message.assistant .agent-msg-avatar { background: var(--signal); box-shadow: 0 6px 14px -4px rgba(0, 150, 230, .5); }

.agent-result-card {
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--primary-border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.agent-result-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 30px; height: 30px;
  background: linear-gradient(225deg, var(--bg-app) 50%, rgba(0, 184, 230, .35) 50%);
  border-bottom-left-radius: 10px;
}
.btn-card-action { border-radius: 10px; }

.agent-status-badge { background: var(--signal-soft); border-color: var(--primary-border); color: var(--primary); }

/* Barra de prompt: vidro flutuante com halo de gradiente no foco */
.agent-prompt-wrapper {
  background: linear-gradient(180deg, transparent 0%, var(--bg-app) 42%) !important;
}
.agent-input-box {
  position: relative;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--bg-card) 86%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
}
.agent-input-box::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--signal);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}
.agent-input-box:focus-within::before { opacity: 1; }
.agent-input-box:focus-within { box-shadow: 0 0 0 6px rgba(47, 91, 255, .10), var(--shadow-lg) !important; }
.btn-prompt-send { border-radius: 14px !important; }
.btn-prompt-tool { border-radius: 14px; }

.btn-agent-chip {
  border-radius: 999px;
  padding: 8px 15px;
  background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  backdrop-filter: blur(8px);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-agent-chip:hover {
  background: var(--signal-soft);
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.agent-modal-backdrop { background: rgba(5, 9, 20, .62); backdrop-filter: blur(10px); }
.agent-modal-card {
  border-radius: 24px;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-border);
}

/* --------------------------------------------------------------------------
   7. APLICATIVO PRINCIPAL (index/inicio e ferramentas internas)
   -------------------------------------------------------------------------- */
.card {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--primary-border) !important; box-shadow: var(--shadow-md); }
.card-title { font-family: var(--font-display); }

.app-sidebar {
  background: var(--bg-sidebar);
  box-shadow: 10px 0 40px -24px rgba(30, 50, 130, .25) !important;
}
.sidebar-item { border-radius: 12px; transition: all var(--transition-fast); }
.sidebar-item.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-color) !important;
  box-shadow: inset 3px 0 0 var(--primary);
}

.doc-type-card-btn { border-radius: 16px; }
.doc-type-card-btn.active { border-color: var(--primary) !important; box-shadow: var(--shadow-glow); }

.hero-banner .hero-title, .hero-title { font-family: var(--font-display); }
.hero-pill {
  background: var(--signal-soft);
  color: var(--primary) !important;
  border-color: var(--primary-border);
}

input:focus, select:focus, textarea:focus,
.form-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(47, 91, 255, .14) !important;
  outline: none;
}

.btn-generate-primary {
  background: var(--signal) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -10px rgba(0, 150, 230, .65) !important;
}

/* --------------------------------------------------------------------------
   8. Scrollbar, foco acessível e reveal on scroll
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 8px;
}

.fx-ready .fx-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-ready .fx-reveal.fx-in { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .landing-hero { padding: 52px 16px 36px; }
  .landing-hero .hero-description { font-size: 1.02rem; }
  .cta-banner { padding: 48px 20px; border-radius: 22px; }
  .agent-avatar-wrap { width: 84px; height: 84px; }
  body::after { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .fx-ready .fx-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   9. Cross-linking (cartões-link entre ferramentas)
   -------------------------------------------------------------------------- */
a.xlink-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.xlink-card .xlink-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--primary);
}
a.xlink-card .xlink-more span { transition: transform var(--transition-fast); }
a.xlink-card:hover .xlink-more span { transform: translateX(5px); }
.crosslink-section { margin-top: 24px; }
/* --------------------------------------------------------------------------
   10. Convite de apoio "Pague um cafezinho" (não modal, discreto)
   -------------------------------------------------------------------------- */
.support-nudge {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 900;
  width: min(380px, calc(100vw - 32px));
  padding: 20px 20px 14px;
  border-radius: 22px;
  color: var(--text-main);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--primary-border);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(47, 91, 255, .06);
  opacity: 0;
  transform: translateY(24px) scale(.97);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  overflow: hidden;
}
.support-nudge::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--signal);
}
.support-nudge.is-visible { opacity: 1; transform: none; }

.support-nudge-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.support-nudge-close:hover { background: var(--bg-muted); color: var(--text-main); }

.support-nudge-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-right: 26px; }
.support-nudge-cup {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border-radius: 15px;
  background: var(--signal-soft);
  border: 1px solid var(--primary-border);
  animation: pdfazCupFloat 3.6s ease-in-out infinite;
}
@keyframes pdfazCupFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
.support-nudge-eyebrow { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.support-nudge-title { margin: 2px 0 0; font-size: 1.08rem; line-height: 1.2; }
.support-nudge-text { margin: 0 0 14px; font-size: .88rem; line-height: 1.55; color: var(--text-muted); }
.support-nudge-text strong { color: var(--text-main); }
.support-nudge-soft { display: block; margin-top: 6px; font-size: .8rem; color: var(--text-subtle); }

.support-nudge-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.support-nudge-btn {
  flex: 1 1 auto;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 13px;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.support-nudge-btn-primary {
  border: 0;
  color: #fff;
  background: var(--signal);
  box-shadow: 0 10px 22px -8px rgba(0, 140, 230, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
  text-shadow: 0 1px 1px rgba(0, 40, 90, .25);
}
.support-nudge-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(0, 150, 230, .7); }
.support-nudge-btn-ghost { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); }
.support-nudge-btn-ghost:hover { border-color: var(--primary-border); background: var(--primary-light); color: var(--primary); }

.support-nudge-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 8px;
  margin-top: 10px;
  font-size: .76rem;
  color: var(--text-subtle);
}
.support-nudge-link {
  padding: 4px 2px;
  border: 0; background: none;
  font: inherit; font-size: .76rem;
  color: var(--text-subtle);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.support-nudge-link:hover { color: var(--primary); }

@media (max-width: 640px) {
  .support-nudge { left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: auto; }
}