/* ============================================================
   WSASolutions — Sistema de Identidade Visual
   ============================================================ */

:root{
  /* Teal / Aqua — cor de assinatura (extraída do símbolo) */
  --teal-50:#E7F7F4;
  --teal-100:#C5ECE6;
  --teal-200:#97DDD3;
  --teal-300:#5FCabb;
  --teal-400:#27BFAF;   /* teal mais saturado do logo */
  --teal-500:#12B0A1;   /* PRIMÁRIA */
  --teal-600:#0E9C8F;
  --teal-700:#0C7A72;   /* teal profundo do logo */
  --teal-800:#0A5A55;
  --teal-900:#08403D;

  /* Steel / Prata — secundária (extraída do degradê do logo) */
  --steel-50:#F4F5F6;
  --steel-100:#E7E9EB;
  --steel-200:#D2D5D8;
  --steel-300:#B1B2B4;  /* prata do logo */
  --steel-400:#8B9094;
  --steel-500:#646A6F;

  /* Graphite / Ink — texto e UI escura */
  --ink-900:#0E1B20;
  --ink-800:#142A2E;
  --ink-700:#22363C;
  --slate:#3D4E55;      /* texto corrido */
  --muted:#6B7B82;      /* texto secundário */

  /* Neutros */
  --white:#FFFFFF;
  --paper:#F8FAFA;
  --mist:#F1F5F4;
  --line:#E4EAE9;
  --line-strong:#D2DAD9;

  /* Semânticos */
  --success:#12B0A1;
  --warning:#E0A106;
  --danger:#E2604C;
  --info:#2D7FF0;

  /* Tipografia */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Degradê de marca */
  --grad-brand:linear-gradient(135deg,#C9CDCF 0%,#7FCFC6 42%,#12B0A1 72%,#0C7A72 100%);
  --grad-teal:linear-gradient(135deg,#27BFAF 0%,#0C7A72 100%);

  --shadow-sm:0 1px 2px rgba(14,27,32,.06),0 1px 3px rgba(14,27,32,.05);
  --shadow-md:0 4px 12px rgba(14,27,32,.07),0 2px 6px rgba(14,27,32,.05);
  --shadow-lg:0 18px 40px rgba(14,27,32,.10),0 6px 16px rgba(14,27,32,.06);
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink-800);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- Layout ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.section{padding:120px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}

.kicker{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-600);
  display:flex;align-items:center;gap:12px;margin-bottom:22px;font-weight:500;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--teal-500)}
.kicker .num{color:var(--steel-400)}

h2.sec-title{
  font-family:var(--font-display);
  font-size:clamp(30px,4.2vw,50px);
  font-weight:600;letter-spacing:-.02em;line-height:1.05;
  color:var(--ink-900);max-width:18ch;
}
.sec-intro{
  margin-top:20px;max-width:60ch;font-size:17.5px;color:var(--slate);
}

.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:14px;
}

/* ---------- Wordmark ---------- */
.wordmark{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap;
}
.wordmark .w-strong{color:var(--ink-900);font-weight:700}
.wordmark .w-soft{color:var(--teal-600);font-weight:500}
.on-dark .wordmark .w-strong{color:#fff}
.on-dark .wordmark .w-soft{color:var(--teal-300)}

.lockup{display:inline-flex;align-items:center;gap:16px}
.lockup .mark{display:block}
.lockup-v{flex-direction:column;gap:14px;text-align:center}

/* ---------- Cards / grid helpers ---------- */
.grid{display:grid;gap:24px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
}

/* ---------- Buttons (component kit) ---------- */
.btn{
  font-family:var(--font-body);font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:12px 22px;border-radius:10px;border:1px solid transparent;
  transition:.18s ease;line-height:1;
}
.btn-primary{background:var(--teal-500);color:#fff}
.btn-primary:hover{background:var(--teal-600);box-shadow:0 8px 20px rgba(12,122,114,.28);transform:translateY(-1px)}
.btn-ink{background:var(--ink-900);color:#fff}
.btn-ink:hover{background:var(--ink-800);transform:translateY(-1px)}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--ink-800)}
.btn-outline:hover{border-color:var(--teal-500);color:var(--teal-600)}
.btn-ghost{background:var(--teal-50);color:var(--teal-700)}
.btn-ghost:hover{background:var(--teal-100)}
.btn-sm{padding:8px 15px;font-size:13.5px}
.btn-lg{padding:15px 28px;font-size:16px}

/* ---------- Badges / tags ---------- */
.badge{
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:7px;
}
.badge-teal{background:var(--teal-50);color:var(--teal-700)}
.badge-ink{background:var(--ink-900);color:#fff}
.badge-steel{background:var(--steel-100);color:var(--steel-500)}
.badge-outline{background:transparent;border:1px solid var(--line-strong);color:var(--slate)}
.badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- Inputs ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--ink-700)}
.input{
  font-family:var(--font-body);font-size:15px;color:var(--ink-800);
  padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;
  background:#fff;transition:.16s;width:100%;
}
.input::placeholder{color:#9aa6ab}
.input:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 3px var(--teal-50)}

/* ---------- Swatch ---------- */
.swatch{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.swatch .chip{height:104px}
.swatch .meta{padding:13px 14px}
.swatch .name{font-weight:700;font-size:14px;color:var(--ink-900)}
.swatch .hex{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:3px;text-transform:uppercase}

.scale-row{display:flex;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.scale-row .step{flex:1;height:84px;display:flex;align-items:flex-end;padding:9px}
.scale-row .step span{font-family:var(--font-mono);font-size:10.5px;font-weight:500}

/* ---------- Misc ---------- */
.mono{font-family:var(--font-mono)}
.hex-mask{
  -webkit-mask:var(--hex-svg) center/contain no-repeat;
  mask:var(--hex-svg) center/contain no-repeat;
}
.divider{height:1px;background:var(--line);border:none}