/*
  Fato IA — monocromático por escolha: preto, branco e cinza, sem cor de acento.
  A hierarquia vem de peso, escala e superfície, não de matiz. Tema único.
*/
:root {
    --bg: #ffffff;
    --surface: #f6f6f7;
    --ink: #0a0a0b;
    --ink-2: #4d4d56;
    --ink-3: #70707a;
    --line: #e5e5e8;
    --line-2: #d5d5da;

    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* As âncoras param abaixo do cabeçalho fixo. */
    scroll-padding-top: 5.5rem;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button:not(:disabled) { cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.container {
    margin-inline: auto;
    width: 100%;
    max-width: 72rem;
    padding-inline: 1.25rem;
}

@media (min-width: 640px) {
    .container { padding-inline: 2rem; }
}

.section { padding-block: 4rem; }
.band { border-block: 1px solid var(--line); background: var(--surface); }

@media (min-width: 640px) {
    .section { padding-block: 6rem; }
}

/* -- Tipografia ---------------------------------------------------------- */

.display {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: -0.012em;
    text-wrap: balance;
    line-height: 1.14;
}

.eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.lead { color: var(--ink-2); line-height: 1.7; max-width: 65ch; }
.muted { color: var(--ink-2); }
.fine { color: var(--ink-3); font-size: 0.9375rem; line-height: 1.65; }
.mono { font-family: var(--font-mono); }

/* -- Peças reaproveitadas ------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.875rem;
    padding-inline: 1.375rem;
    border: 0;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: #26262b; }
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--surface); }
.btn-quiet { background: none; color: var(--ink-2); }
.btn-quiet:hover { color: var(--ink); }
.btn-sm { height: 2.25rem; padding-inline: 1rem; font-size: 0.9375rem; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    color: var(--ink-2);
    background: var(--bg);
}

.card {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--bg);
    padding: 1.5rem;
}

.card h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }

.grid { display: grid; gap: 1rem; }

@media (min-width: 640px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -- Cabeçalho e rodapé -------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
}

.site-header .container {
    display: flex;
    height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.wordmark { display: block; flex: none; }
.wordmark img, img.wordmark { display: block; width: auto; height: 1.5rem; }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.site-footer { margin-top: auto; border-top: 1px solid var(--line); }
.site-footer .container { padding-block: 3rem; }

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.footer-links a:hover { color: var(--ink); }

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.9375rem;
    color: var(--ink-3);
}

.footer-bottom p { max-width: 42rem; line-height: 1.7; }

@media (min-width: 640px) {
    .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; }
    .footer-bottom { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* -- Topo ---------------------------------------------------------------- */

.hero { text-align: center; padding-block: 4rem; }

.hero h1 {
    margin: 1.75rem auto 0;
    max-width: 56rem;
    font-size: clamp(2.375rem, 5.4vw, 4.25rem);
    line-height: 1.08;
}

.hero .lead {
    margin: 1.5rem auto 0;
    max-width: 38rem;
    font-size: 1.1875rem;
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.25rem;
}

@media (min-width: 640px) {
    .hero { padding-block: 6rem; }
}

/* -- Conversa de exemplo ------------------------------------------------- */

.demo {
    margin: 3.5rem auto 0;
    max-width: 48rem;
    overflow: hidden;
    padding: 0;
    text-align: left;
    box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04), 0 24px 48px -24px rgba(10, 10, 11, 0.18);
    animation: rise 0.5s cubic-bezier(0.22, 0.68, 0.3, 1) both;
}

.demo-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-2);
}

.demo-dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--ink); }

.demo-body { padding: 1.25rem; display: grid; gap: 1rem; font-size: 1rem; }

.demo-ask {
    justify-self: end;
    max-width: 85%;
    padding: 0.625rem 1rem;
    border-radius: 1rem 1rem 0.375rem 1rem;
    background: var(--ink);
    color: var(--bg);
}

.demo-answer {
    max-width: 92%;
    padding: 0.875rem 1rem;
    border-radius: 1rem 1rem 1rem 0.375rem;
    background: var(--surface);
    line-height: 1.7;
}

.demo-answer ul { margin-top: 0.5rem; display: grid; gap: 0.375rem; }

.demo-answer li {
    display: flex;
    gap: 0.625rem;
    color: var(--ink-2);
}

.demo-answer li::before {
    content: "";
    flex: none;
    margin-top: 0.8rem;
    width: 0.625rem;
    height: 1px;
    background: var(--line-2);
}

.demo-sources { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.demo-sources a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-2);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.demo-sources a:hover { border-color: var(--ink); color: var(--ink); }

@media (min-width: 640px) {
    .demo-body { padding: 1.75rem; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* -- Títulos de seção ---------------------------------------------------- */

.heading { max-width: 42rem; }
.heading h2 { margin-top: 0.75rem; font-size: clamp(1.8125rem, 3.4vw, 2.5rem); }
.heading .lead { margin-top: 1rem; font-size: 1.125rem; }

.section-grid { margin-top: 3rem; }

/* -- Ícones -------------------------------------------------------------- */

.icon { width: 1.5rem; height: 1.5rem; color: var(--ink); }
.card .icon + h3 { margin-top: 1rem; }
.card h3 + p { margin-top: 0.5rem; color: var(--ink-2); line-height: 1.7; }

/* -- Botão copiar ------------------------------------------------------- */

/* Só aparece quando o JavaScript assume — sem ele, o texto continua selecionável. */
.copy { display: none; }

.js .copy {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--bg);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.js .copy:hover { border-color: var(--ink); color: var(--ink); }

/* -- Assistentes compatíveis -------------------------------------------- */

.compat { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 2.5rem; }
.compat .badge { font-size: 0.9375rem; padding: 0.5rem 1rem; }

/* -- Chamada final ------------------------------------------------------- */

.cta { text-align: center; }
.cta h2 { margin-top: 0.75rem; margin-inline: auto; max-width: 20ch; font-size: clamp(1.8125rem, 3.4vw, 2.5rem); }
.cta .lead { margin: 1rem auto 0; max-width: 34rem; font-size: 1.125rem; }
.cta .hero-actions { margin-top: 2rem; }

/* -- Entrar e criar conta ------------------------------------------------ */

.auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 3.5rem 5rem;
}

.auth-head { max-width: 28rem; text-align: center; }
.auth-head h1 { font-size: clamp(1.75rem, 4vw, 2.375rem); }
.auth-head p { margin-top: 0.75rem; color: var(--ink-2); }

.auth-card { width: min(24rem, 100%); margin-top: 2.25rem; padding: 1.75rem; }
.auth-form { display: grid; gap: 1.125rem; }
.auth-form label { display: block; margin-bottom: 0.375rem; font-size: 0.9375rem; font-weight: 500; }
.auth-form .btn { width: 100%; margin-top: 0.25rem; }

.input {
    width: 100%;
    height: 2.875rem;
    padding-inline: 0.875rem;
    border: 1px solid var(--line-2);
    border-radius: 0.625rem;
    background: var(--bg);
    font: inherit;
    color: var(--ink);
    transition: border-color 0.15s ease;
}

.input:hover { border-color: var(--ink-3); }
.input:focus-visible { border-color: var(--ink); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--ink); }

.hint { margin-top: 0.375rem; font-size: 0.875rem; color: var(--ink-3); }

/* Monocromático: o erro se destaca pela barra e pelo peso, não por cor. */
.alert {
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.875rem;
    border-left: 2px solid var(--ink);
    background: var(--surface);
    font-size: 0.9375rem;
    font-weight: 500;
}

.auth-alt { margin-top: 1.75rem; font-size: 0.9375rem; color: var(--ink-2); }
.auth-alt a { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* -- Painel: casca ------------------------------------------------------- */

/* Abaixo de 900px a barra vira faixa no topo — sem gaveta, porque nada aqui
   pode depender de JavaScript. */
.panel { min-height: 100dvh; }

.panel-rail {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
}

.panel-rail .wordmark { flex: none; }

.panel-nav { flex: 1; min-width: 0; }
.panel-nav ul { display: flex; gap: 0.375rem; overflow-x: auto; }

.panel-nav a {
    display: block;
    padding: 0.4375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: var(--ink-2);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.panel-nav a:hover { background: var(--surface); color: var(--ink); }
.panel-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 500; }

.panel-account {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem;
    border-radius: 0.625rem;
    transition: background-color 0.15s ease;
}

.panel-account:hover,
.panel-account[aria-current="page"] { background: var(--surface); }

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Nome e e-mail só cabem quando a barra é coluna; na faixa fica só o avatar. */
.panel-account-text { display: none; }

.panel-main { padding: 2.25rem 1.25rem 4rem; }
.panel-main > * { max-width: 44rem; }

@media (min-width: 900px) {
    .panel { display: grid; grid-template-columns: 15rem minmax(0, 1fr); }

    .panel-rail {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        height: 100dvh;
        padding: 1.75rem 1rem;
        border-bottom: 0;
        border-right: 1px solid var(--line);
        background: var(--bg);
        backdrop-filter: none;
    }

    .panel-rail .wordmark { padding-inline: 0.5rem; }

    .panel-nav ul { display: grid; gap: 0.125rem; overflow: visible; }

    /* Cola a conta no rodapé da barra, seja qual for o tamanho da navegação. */
    .panel-account { margin-top: auto; padding: 0.5rem; }

    .panel-account-text {
        display: grid;
        min-width: 0;
        font-size: 0.875rem;
        line-height: 1.35;
    }

    .panel-account-text strong { font-weight: 500; }
    .panel-account-text span { color: var(--ink-3); }

    .panel-account-text strong,
    .panel-account-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .panel-main { padding: 3.5rem 3rem 5rem; }
}

/* -- Painel: conteúdo ---------------------------------------------------- */

/* Os formulários reaproveitam .auth-form, onde o botão ocupa a largura toda
   do cartão estreito do login. No painel o cartão é largo e isso vira faixa. */
.panel-main .auth-form .btn { width: auto; justify-self: start; padding-inline: 1.75rem; }

.panel-head h1 { margin-top: 0.75rem; font-size: clamp(1.875rem, 4vw, 2.5rem); }
.panel-head .lead { margin-top: 0.875rem; }

.panel-section { margin-top: 3rem; }
.panel-section h2 { font-size: 1.375rem; }
.panel-section h2 + * { margin-top: 1rem; }

.next-steps { display: grid; gap: 1rem; }
.next-steps h2 { font-size: 1.125rem; font-weight: 600; }
.next-steps p { margin-top: 0.5rem; }
.next-steps .btn { margin-top: 1.25rem; }

@media (min-width: 700px) {
    .next-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.code-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
}

.code-block pre {
    margin: 0;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
}

.code-block .copy { flex: none; }
.code-block + .hint { margin-top: 1.25rem; }
.hint + .code-block { margin-top: 0.5rem; }

.clients { padding-block: 0.25rem; }

.clients li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    border-top: 1px solid var(--line);
}

.clients li:first-child { border-top: 0; }
.clients .hint { display: block; margin-top: 0.125rem; }

/* -- Ferramentas e perguntas -------------------------------------------- */

.tool { display: flex; flex-direction: column; }
.tool p { flex: 1; }
.tool .mono { margin-top: 1.25rem; font-size: 0.75rem; color: var(--ink-3); }

.questions { margin-top: 3rem; }

.question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    padding: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.45;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.js .question:hover { border-color: var(--line-2); background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .demo { animation: none; }
}