/* ==========================================================================
   8BAC — Colors & Type
   --------------------------------------------------------------------------
   Brand: 8BAC — Estrutura Digital Estratégica
   Vibe: Confident, no-bullshit, structural. Bold typography. Blue-on-white
   contrast. Direct portuguese-BR copy.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Archivo:wght@700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ===== BRAND COLORS ===== */
  --bac-blue:        #0066FE;
  --bac-navy:        #00339B;
  --bac-blue-700:    #0052CC;
  --bac-blue-100:    #E6F0FF;
  --bac-blue-50:     #F2F7FF;

  /* ===== NEUTRALS ===== */
  --bg:              #FFFFFF;
  --bg-alt:          #FEFEFE;
  --bg-soft:         #F5F6F8;
  --bg-ink:          #0A0A0B;

  --ink-1:           #0A0A0B;
  --ink-2:           #2A2D33;
  --ink-3:           #5A5F6A;
  --ink-4:           #9097A1;
  --line:            #E5E7EB;
  --line-strong:     #C9CDD4;

  /* ===== SEMANTIC ===== */
  --success:         #1FAE5A;
  --warning:         #F2A93B;
  --danger:          #E5384D;
  --info:            var(--bac-blue);

  /* ===== ON-DARK ===== */
  --on-dark-1:       #FFFFFF;
  --on-dark-2:       #C9CDD4;
  --on-dark-3:       #7A808B;
  --on-dark-line:    #1F2126;

  /* ===== ALIASES ===== */
  --fg1: var(--ink-1);
  --fg2: var(--ink-2);
  --fg3: var(--ink-3);
  --fg4: var(--ink-4);
  --bg1: var(--bg);
  --bg2: var(--bg-alt);
  --bg3: var(--bg-soft);

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  --t-display-xl: clamp(56px, 8vw, 128px);
  --t-display-l:  clamp(44px, 6vw, 88px);
  --t-display-m:  clamp(36px, 5vw, 64px);
  --t-h1:         clamp(32px, 4vw, 48px);
  --t-h2:         28px;
  --t-h3:         22px;
  --t-h4:         18px;
  --t-body:       16px;
  --t-small:      14px;
  --t-micro:      12px;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --ls-display: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-mono:    0.04em;
  --ls-cap:     0.08em;

  /* ===== SPACING ===== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ===== RADII ===== */
  --r-0:  0;
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-pill: 999px;

  /* ===== SHADOWS ===== */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(10,10,11,.06);
  --sh-2: 0 4px 12px rgba(10,10,11,.06), 0 1px 2px rgba(10,10,11,.04);
  --sh-3: 0 12px 32px rgba(10,10,11,.10), 0 2px 6px rgba(10,10,11,.05);
  --sh-blue: 0 10px 30px rgba(0,102,254,.25);

  --focus-ring: 0 0 0 3px rgba(0,102,254,.35);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:   140ms;
  --dur-normal: 220ms;
  --dur-slow:   420ms;
}

html, body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg1);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h2, .h2 { font-family: var(--font-sans);    font-weight: var(--w-bold);  font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
h3, .h3 { font-family: var(--font-sans);    font-weight: var(--w-bold);  font-size: var(--t-h3); line-height: 1.25; }
h4, .h4 { font-family: var(--font-sans);    font-weight: var(--w-semi);  font-size: var(--t-h4); line-height: 1.3; }

p, .body  { font-size: var(--t-body); line-height: var(--lh-normal); color: var(--fg2); text-wrap: pretty; }
.small    { font-size: var(--t-small); line-height: 1.45; color: var(--fg3); }
.micro    { font-size: var(--t-micro); line-height: 1.4;  color: var(--fg4); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
  color: var(--bac-blue);
  font-weight: var(--w-semi);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ls-mono);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  letter-spacing: -0.04em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.wordmark .num  { color: var(--bac-blue); }
.wordmark .name { color: var(--bac-navy); }

::selection { background: var(--bac-blue); color: #fff; }

/* ==========================================================================
   SHARED SECTION COMPONENTS — mobile-first
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }

.section-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bac-blue); margin-bottom: 14px;
}
.section-h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 7vw, 56px); line-height: 1.05;
  letter-spacing: -0.025em; color: var(--ink-1);
  margin: 0 0 18px 0;
}
.section-sub {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.55;
  color: var(--ink-3); margin: 0 0 40px 0;
}

/* Cards shared */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.card__icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.card__icon i { width: 20px; height: 20px; }
.card__icon--light { background: var(--bac-blue-50); color: var(--bac-blue); }
.card__icon--solid { background: var(--bac-blue); color: #fff; }
.card__num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--bac-blue); letter-spacing: 0.08em;
}
.card__title {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-1); margin: 0;
}
.card__desc {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
  color: var(--ink-3); margin: 0;
}

@media (min-width: 860px) {
  .section-eyebrow { font-size: 12px; margin-bottom: 16px; }
  .section-sub { font-size: 18px; margin-bottom: 56px; max-width: 720px; }
  .card { padding: 32px; gap: 14px; }
  .card__title { font-size: 24px; }
}