/* Site do Inove Barber: preto, prata e azul da logo; leitura confortável */
:root {
  --bg: #050506;
  --panel: #111214;
  --line: #2a2c31;
  --text: #f2f3f5;
  --muted: #a9acb3;
  --dim: #6e717a;
  --blue: #3d8bff;
  --blue-strong: #0a5fd1;
  --red: #d7111b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.65 'Segoe UI', Roboto, Arial, sans-serif; }
a { color: var(--blue); }
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.top img { height: 44px; width: auto; }
.top nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--text); }
.stripes { display: flex; flex-direction: column; gap: 3px; width: 46px; margin: 8px 0 16px; }
.stripes i { display: block; height: 3px; border-radius: 2px; background: var(--red); }
.stripes i + i { background: var(--blue-strong); }
h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.01em; }
h2 { font-size: 20px; margin: 36px 0 8px; }
h3 { font-size: 16px; margin: 20px 0 6px; }
p, li { color: #d5d7dc; }
.lead { color: var(--muted); font-size: 18px; }
.updated { color: var(--dim); font-size: 14px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 20px 0; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.btn { display: inline-block; padding: 12px 20px; border-radius: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; text-decoration: none; }
.btn.primary { background: var(--blue-strong); color: #fff; box-shadow: 0 4px 18px rgba(10, 95, 209, 0.45); }
.btn.outline { border: 1px solid var(--blue); color: var(--blue); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 24px 0; }
.grid .box { margin: 0; }
.grid h3 { margin-top: 0; }
.grid p { margin: 0; color: var(--muted); font-size: 15px; }
footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--muted); }