/* ==========================================================================
   StreamLines — design system (Fase 2)
   HTML + CSS puro. Nenhum build, nenhum JS.
   Referências: Sui / Holographik (paleta, tipo, grão) + "Aura" (vidro,
   headline em gradiente, régua vertical). Contraste checado em contrast.py.
   ========================================================================== */

/* Fontes: Geist + Geist Mono, licença OFL 1.1 — transferível ao cliente,
   o que sustenta o "you own your website" do briefing §2.
   Fase 3: auto-hospedar os .woff2 em /fonts/ e trocar o src abaixo. */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;

  /* ---- Cor: base ------------------------------------------------------- */
  --bg:            #000000;   /* preto puro, como o Sui */
  --surface-1:     #0a0b0d;   /* card */
  --surface-2:     #121418;   /* card elevado, input */

  /* ---- Cor: texto sobre preto (todos >= 4.5:1) -------------------------- */
  --fg:            #ffffff;   /* 21:1   títulos */
  --fg-2:          #b4bcc6;   /* 10.9:1 corpo */
  --fg-3:          #8b95a1;   /* 6.9:1  legenda, micro-label mono */
  --fg-faint:      #5a626c;   /* 3.4:1  SÓ decorativo: numeração, ©. Nunca texto que informa */

  /* ---- Cor: marca ------------------------------------------------------ */
  --blue:          #298dff;   /* 6.35:1 no preto. Acento, link, foco, estado ativo */
  --blue-hot:      #deeeff;   /* núcleo do brilho */
  --blue-deep:     #0b2551;   /* borda do brilho, fundo de gradiente */
  --blue-ink:      #1668e0;   /* 5.1:1 no branco. Link em painel claro */

  /* ---- Cor: painel invertido (branco) ---------------------------------- */
  --paper:         #ffffff;
  --paper-2:       #f2f4f7;
  --ink:           #000000;
  --ink-2:         #4d5763;   /* 7.3:1 */

  /* ---- Linhas ---------------------------------------------------------- */
  --line:          rgb(255 255 255 / .12);  /* decorativo: régua, divisória */
  --line-2:        rgb(255 255 255 / .22);  /* decorativo: borda de card */
  --line-ui:       rgb(255 255 255 / .38);  /* 3.4:1 — borda de botão e input (WCAG 1.4.11) */
  --line-ui-ink:   rgb(0 0 0 / .45);        /* o mesmo, no painel claro */

  /* ---- Tipografia ------------------------------------------------------ */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* escala fluida: clamp(mobile, fluido, desktop). Tracking aperta com o tamanho */
  --t-display: clamp(3rem, 1.6rem + 6.4vw, 5.75rem);   /* 48 → 92 */
  --t-h1:      clamp(2.5rem, 1.6rem + 4vw, 4.25rem);    /* 40 → 68 */
  --t-h2:      clamp(1.875rem, 1.4rem + 2.2vw, 3rem);   /* 30 → 48 */
  --t-h3:      clamp(1.375rem, 1.2rem + .8vw, 1.75rem); /* 22 → 28 */
  --t-lg:      1.125rem;  /* 18 */
  --t-base:    1rem;      /* 16 — nunca menor no corpo: público 40–60 anos */
  --t-sm:      .875rem;   /* 14 */
  --t-label:   .75rem;    /* 12 — micro-label mono, maiúsculas */

  --lh-tight: .95;  --lh-snug: 1.1;  --lh-body: 1.6;
  --tr-display: -.045em; --tr-head: -.03em; --tr-body: -.006em; --tr-label: .12em;

  /* ---- Espaço (base 4) ------------------------------------------------- */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;   --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;   --s-9: 6rem;   --s-10: 8rem;
  --section: clamp(4rem, 2rem + 8vw, 8rem);  /* respiro vertical entre seções */

  /* ---- Grid ------------------------------------------------------------ */
  --container: 72rem;                        /* 1152px — mesmo max-w-6xl do Aura */
  --gutter: clamp(1rem, .5rem + 2vw, 2.5rem);
  --cols: 12;
  --col-gap: 1.5rem;

  /* ---- Forma ----------------------------------------------------------- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-pill: 999px;
  --tap: 44px;                               /* alvo mínimo (WCAG pede 24, usamos 44) */

  /* ---- Movimento ------------------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);      /* curva do Aura */
  --dur-1: 150ms; --dur-2: 300ms; --dur-3: 600ms;

  /* ---- Textura --------------------------------------------------------- */
  /* grão: feTurbulence em data URI, sem requisição extra */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* brilho do Sui: arco radial azul saindo da borda */
  --glow-top:    radial-gradient(120% 70% at 50% -20%, var(--blue-hot) 0%, #6fb4ff 18%, var(--blue) 34%, var(--blue-deep) 52%, transparent 68%);
  --glow-bottom: radial-gradient(120% 70% at 50% 120%, var(--blue-hot) 0%, #6fb4ff 18%, var(--blue) 34%, var(--blue-deep) 52%, transparent 68%);
  /* gradiente do headline (Aura, re-colorido para a paleta) */
  --shine: linear-gradient(90deg, var(--fg) 0%, var(--fg) 30%, var(--blue-hot) 42%, var(--blue) 50%, var(--blue-hot) 58%, var(--fg) 70%, var(--fg) 100%);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg-2);
  font: 400 var(--t-base)/var(--lh-body) var(--font-sans); letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgb(41 141 255 / .35); color: var(--fg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-sm); }

h1, h2, h3 { color: var(--fg); font-weight: 500; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
h2 { font-size: var(--t-h2); line-height: 1; letter-spacing: var(--tr-head); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: -.02em; }
p  { margin: 0; max-width: 62ch; text-wrap: pretty; }

/* ==========================================================================
   Layout
   ========================================================================== */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section   { padding-block: var(--section); }
.grid      { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--col-gap); }
.grid > *  { grid-column: 1 / -1; }  /* mobile: tudo empilha */
@media (min-width: 48rem) {
  .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
}

/* régua: as duas linhas verticais nas bordas do container (Aura + Sui) */
.rules::before, .rules::after {
  content: ""; position: fixed; inset-block: 0; width: 1px; background: var(--line);
  pointer-events: none; z-index: 5; display: none;
}
.rules::before { left: calc(50% - var(--container) / 2); }
.rules::after  { left: calc(50% + var(--container) / 2); }
@media (min-width: 76rem) { .rules::before, .rules::after { display: block; } }

/* ==========================================================================
   Tipo utilitário
   ========================================================================== */
.display { font-size: var(--t-display); line-height: .92; letter-spacing: var(--tr-display); color: var(--fg); font-weight: 500; }
.lead    { font-size: var(--t-lg); line-height: 1.55; color: var(--fg-2); }
.label   { font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-3); }

/* eyebrow: ponto + label mono (Aura SectionEyebrow + Sui "OVERVIEW:") */
.eyebrow { display: flex; width: fit-content; align-items: center; gap: var(--s-2); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* palavra do headline com brilho varrendo */
.shine {
  background: var(--shine); background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shine 3.2s var(--ease) .6s 1 both;  /* 1 passada e para: <5s dispensa controle de pausa (WCAG 2.2.2) e limita pintura (INP) */
}
@keyframes shine { from { background-position: 125% center; } to { background-position: -125% center; } }
/* cores forçadas: o gradiente some, então o texto precisa voltar a ter cor */
@media (forced-colors: active) { .shine { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }

/* ==========================================================================
   Componentes
   ========================================================================== */
/* linha de botões/chips: usada em toda seção com CTA (hero, CTA final, pranchas) */
.row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-pill);
  font: 500 var(--t-sm)/1 var(--font-sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--fg); color: var(--ink); }
.btn-primary:hover { background: var(--blue-hot); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-ui); }
.btn-ghost:hover { background: rgb(255 255 255 / .06); }
.btn .arrow { transition: transform var(--dur-1) var(--ease); }
.btn:hover .arrow { transform: translateX(2px); }

/* pílula / chip mono */
.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: .06em; color: var(--fg-2);
}

/* vidro líquido (Aura). Fundo sólido de fallback: se não houver backdrop-filter, continua legível */
.glass {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: rgb(18 20 24 / .72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1);
}
/* blur só no desktop: em celular barato ele é o efeito mais caro da página */
@media (min-width: 64rem) {
  @supports (backdrop-filter: blur(1px)) {
    .glass { background: rgb(255 255 255 / .03); backdrop-filter: blur(12px); }
  }
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .4), rgb(255 255 255 / .1) 25%, transparent 45%, transparent 60%, rgb(255 255 255 / .1) 80%, rgb(255 255 255 / .35));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* card simples: a peça de conteúdo padrão */
.card { background: var(--surface-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--s-6); }

/* painel invertido: seção branca, como as pranchas brancas do Sui */
.panel-light { background: var(--paper); color: var(--ink-2); color-scheme: light; }
.panel-light h1, .panel-light h2, .panel-light h3 { color: var(--ink); }
.panel-light a { color: var(--blue-ink); }
.panel-light .label { color: var(--ink-2); }
.panel-light :focus-visible { outline-color: var(--blue-ink); }
/* componentes no painel claro: sem isto, botão e chip ficam branco sobre branco */
.panel-light .btn-primary { background: var(--ink); color: var(--paper); }
.panel-light .btn-primary:hover { background: var(--blue-ink); }
.panel-light .btn-ghost { color: var(--ink); border-color: var(--line-ui-ink); }
.panel-light .btn-ghost:hover { background: rgb(0 0 0 / .05); }
.panel-light .chip { color: var(--ink-2); border-color: var(--line-ui-ink); }  /* --blue no branco fica em 3.0:1, no limite */

/* ==========================================================================
   Textura e imagem
   ========================================================================== */
/* brilho do Sui + grão. Uso: <section class="glow glow-top"> */
.glow { position: relative; isolation: isolate; background: var(--bg); } /* fundo opaco: sem ele o soft-light do grão vira estática cinza */
.glow::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.glow-top::before    { background: var(--glow-top); }
.glow-bottom::before { background: var(--glow-bottom); }
.glow::after, .grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain); mix-blend-mode: soft-light; opacity: .7;
}
.grain { position: relative; isolation: isolate; background: var(--bg); }

/* tratamento de screenshot/foto: duotone azul + grão (Sui "BLUE OVERLAY, blend colour") */
.media {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-1);
}
.media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.media--tint img { filter: grayscale(1) contrast(1.05); }
.media--tint::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--blue); mix-blend-mode: color; opacity: .55; pointer-events: none; }
.media--tint::after  { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--grain); mix-blend-mode: soft-light; opacity: .5; pointer-events: none; }
/* hover devolve a cor real: o trabalho é mostrado como é */
.media--tint:hover img, .media--tint:focus-within img { filter: none; }
.media--tint:hover::before, .media--tint:focus-within::before { opacity: 0; }
.media--tint img, .media--tint::before { transition: filter var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease); }

/* ==========================================================================
   Marca
   ========================================================================== */
.logo { display: inline-flex; align-items: center; gap: .55em; color: var(--fg); text-decoration: none; font: 500 1.25rem/1 var(--font-sans); letter-spacing: -.035em; }
.logo svg { width: 1.3em; height: 1.3em; flex: none; }
.logo:hover svg .mid { stroke: var(--blue); }

/* ==========================================================================
   Movimento reduzido: tudo para
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .shine { background: none; color: var(--fg); -webkit-text-fill-color: var(--fg); }
}