/* Design system compartilhado das páginas de case — mesmos tokens do index.html */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --gd: #2b4a70; --ga: #4676dc; --ok: #2f9e8f; --cta: #d98e2b;
  --black: #14181d;
  --white: #fff; --off: #f7f5f1; --border: #e8e2d8;
  --text: #1c2127; --muted: #736f68;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html { scroll-behavior: smooth; }
body { font-family:'Poppins',sans-serif; color:var(--text); background:var(--white); overflow-x:hidden; line-height:1.6; }

/* NAV (idêntico ao index.html) */
nav {
  position:fixed; inset:0 0 auto 0; z-index:300; height:62px;
  padding:0 2.5rem; display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.logo { font-size:.97rem; font-weight:800; color:var(--text); text-decoration:none; letter-spacing:-.3px; }
.logo em { color:var(--ga); font-style:normal; }
.nav-r { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-r a { font-size:.81rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s; }
.nav-r a:hover { color:var(--ga); }
.nav-cta { background:var(--cta)!important; color:var(--black)!important; font-weight:700!important; padding:.42rem 1rem!important; border-radius:6px!important; }

/* LAYOUT BASE */
.container { max-width:820px; margin:0 auto; padding:0 2.5rem; }
section { padding:3.2rem 0; }
.slabel { display:block; font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ga); margin-bottom:.55rem; }
.stitle { font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:800; letter-spacing:-.5px; line-height:1.15; color:var(--text); margin-bottom:.85rem; }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

/* BUTTONS */
.btn-pri {
  background:var(--cta); color:var(--black); font-family:'Poppins',sans-serif;
  font-weight:700; font-size:.87rem; padding:.78rem 1.55rem;
  border-radius:8px; border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.3rem; transition:all .2s;
}
.btn-pri:hover { background:#e6a13e; transform:translateY(-2px); box-shadow:0 8px 28px rgba(217,142,43,.28); }
.btn-sec {
  background:transparent; color:var(--muted); font-family:'Poppins',sans-serif;
  font-weight:500; font-size:.87rem; padding:.7rem 1.4rem; border-radius:8px;
  border:1px solid var(--border); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.3rem; transition:all .2s;
}
.btn-sec:hover { border-color:var(--ga); color:var(--ga); }

/* BREADCRUMB */
.crumb { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--muted); margin:5.5rem 0 1.8rem; flex-wrap:wrap; }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--ga); }
.crumb span { color:var(--border); }
.crumb .current { color:var(--text); font-weight:600; }

/* CASE HERO */
.case-hero { background:var(--off); padding-bottom:2.5rem; }
.case-eyebrow { display:flex; align-items:center; gap:.55rem; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ga); margin-bottom:1rem; }
.case-eyebrow .dot { width:6px; height:6px; background:var(--ga); border-radius:50%; }
.case-title { font-size:clamp(2rem,4.2vw,2.9rem); font-weight:900; letter-spacing:-1px; line-height:1.08; color:var(--text); margin-bottom:1.1rem; }
.case-dek { font-size:1rem; color:var(--muted); line-height:1.75; max-width:640px; margin-bottom:1.6rem; }
.case-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.case-meta span { font-size:.72rem; font-weight:600; background:rgba(70,118,220,.08); border:1px solid rgba(70,118,220,.2); color:var(--gd); padding:.32rem .75rem; border-radius:100px; }

/* ILLUSTRATION */
.case-illust { background:linear-gradient(135deg,var(--gd),var(--ga)); border-radius:18px; padding:1.5rem; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.case-illust svg { width:100%; height:auto; max-height:260px; display:block; }

/* CONFIDENTIALITY CALLOUT */
.callout { background:rgba(217,142,43,.07); border:1px solid rgba(217,142,43,.24); border-left:3px solid var(--cta); border-radius:0 10px 10px 0; padding:1rem 1.25rem; font-size:.85rem; color:var(--gd); line-height:1.7; margin:0 0 2.5rem; }
.callout b { color:var(--text); }

/* ARTICLE BODY */
.case-body h2 { font-size:1.4rem; font-weight:800; letter-spacing:-.3px; color:var(--text); margin:2.6rem 0 1rem; padding-top:.2rem; }
.case-body > h2:first-child { margin-top:0; }
.case-body h3 { font-size:1.02rem; font-weight:700; color:var(--text); margin:1.6rem 0 .6rem; padding-left:.75rem; border-left:3px solid var(--ga); }
.case-body p { font-size:.92rem; color:var(--muted); line-height:1.8; margin-bottom:1.1rem; }
.case-body p b, .case-body p strong { color:var(--text); }
.case-body ul, .case-body ol { margin:0 0 1.1rem 1.3rem; color:var(--muted); font-size:.92rem; line-height:1.8; }
.case-body li { margin-bottom:.3rem; }
.case-body a { color:var(--ga); }

/* TABLES */
.table-wrap { overflow-x:auto; margin-bottom:1.6rem; border:1px solid var(--border); border-radius:10px; }
.case-body table { width:100%; border-collapse:collapse; font-size:.82rem; min-width:480px; }
.case-body th { background:var(--off); text-align:left; font-weight:700; color:var(--text); padding:.65rem .9rem; border-bottom:1px solid var(--border); white-space:nowrap; }
.case-body td { padding:.65rem .9rem; border-bottom:1px solid var(--border); color:var(--muted); }
.case-body tr:last-child td { border-bottom:none; }

/* CODE / REPO TREE */
.case-body pre { background:var(--black); border-radius:10px; padding:1.1rem 1.3rem; overflow-x:auto; margin-bottom:1.6rem; }
.case-body pre code { font-family:var(--mono); font-size:.76rem; line-height:1.65; color:#d8e0ec; white-space:pre; }
.case-body code { font-family:var(--mono); }
.case-body p code, .case-body li code { background:rgba(70,118,220,.1); color:var(--gd); padding:.1rem .35rem; border-radius:4px; font-size:.82em; }

/* STATS GRID */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin:1.5rem 0 2rem; }
.stat-card { background:var(--off); border:1px solid var(--border); border-radius:12px; padding:1.2rem 1.3rem; }
.stat-n { font-size:1.7rem; font-weight:800; color:var(--gd); letter-spacing:-.5px; line-height:1; margin-bottom:.4rem; }
.stat-l { font-size:.76rem; color:var(--muted); line-height:1.5; }

/* TAGS (stack de ferramentas) */
.tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.6rem; }
.tag { font-size:.72rem; font-weight:600; background:rgba(43,74,112,.07); color:var(--gd); padding:.28rem .7rem; border-radius:100px; border:1px solid rgba(43,74,112,.14); }

/* FINAL CTA (mesmo bloco do index.html) */
.case-cta { background:var(--gd); text-align:center; border-radius:20px; padding:3rem 2rem; margin:3rem 0 2rem; }
.case-cta h2 { color:var(--white); font-size:1.5rem; font-weight:800; margin-bottom:.7rem; }
.case-cta p { color:rgba(255,255,255,.6); font-size:.88rem; max-width:420px; margin:0 auto 1.6rem; line-height:1.7; }

/* RELATED CASES */
.related { background:var(--off); }
.related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.related-card { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:1.3rem 1.4rem; text-decoration:none; display:block; transition:all .2s; }
.related-card:hover { border-color:rgba(70,118,220,.3); transform:translateY(-3px); box-shadow:0 12px 28px rgba(70,118,220,.08); }
.related-eyebrow { font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ga); margin-bottom:.4rem; }
.related-t { font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:.4rem; line-height:1.35; }
.related-d { font-size:.78rem; color:var(--muted); line-height:1.6; }

/* FOOTER (idêntico ao index.html) */
footer { background:var(--off); border-top:1px solid var(--border); padding:1.65rem 2.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
.foot-logo { font-size:.88rem; font-weight:800; color:var(--muted); letter-spacing:-.3px; }
.foot-logo em { color:var(--ga); font-style:normal; }
footer p { font-size:.7rem; color:var(--muted); }
footer a { color:var(--ga); text-decoration:none; }

/* RESPONSIVE */
@media(max-width:640px) {
  nav .nav-r { display:none; }
  nav { padding:0 1.5rem; }
  .container { padding:0 1.5rem; }
  .crumb { margin-top:4.5rem; }
  .case-cta { padding:2.2rem 1.4rem; }
  footer { justify-content:center; text-align:center; }
}