:root {
  --cases-bg: #11110f;
  --cases-panel: #1a1a17;
  --cases-panel-strong: #20201c;
  --cases-text: #f0f0e8;
  --cases-muted: #8e8e83;
  --cases-dim: #5d5d54;
  --cases-line: rgba(240, 240, 232, .14);
  --cases-accent: #b7ed18;
  --cases-accent-soft: rgba(183, 237, 24, .16);
  --cases-display: 'Space Grotesk', sans-serif;
  --cases-body: 'Inter', sans-serif;
  --cases-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cases-bg);
  color: var(--cases-text);
  font-family: var(--cases-body);
  -webkit-font-smoothing: antialiased;
}

body, button, a { font-family: var(--cases-body); }

a { color: inherit; text-decoration: none; }

button { border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--cases-accent); outline-offset: 4px; }

.cases-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  line-height: 1.5;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

.cases-header.scrolled {
  background: linear-gradient(180deg, rgba(20,20,18,.72), rgba(20,20,18,.54));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border-bottom-color: rgba(244,243,236,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 18px 48px rgba(0,0,0,.18);
}

.cases-header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  max-width: 1180px;
  margin: 0 auto;
}

.logo-image { display: flex; align-items: center; gap: 10px; }
.logo-image img { display: block; width: auto; height: 42px; }

.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links a { position: relative; color: #f4f3ec; font-size: 14px; transition: color .2s ease; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: #f4f3ec; }
.nav-links a.nav-cta { color: #141412; }
.nav-links a.nav-cta:hover { color: #141412; }
.nav-cta { padding: 9px 18px; background: #a6e100; color: #141412; font-weight: 600; font-size: 14px; border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(166,225,0,.25); }
.nav-toggle { display: none; }

main { overflow: hidden; }

.cases-hero, .cases-showcase { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 32px; }

.cases-hero {
  min-height: 310px;
  padding: 40px 32px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: end;
  gap: 60px;
}

.cases-title-line { display: flex; align-items: flex-end; }
.cases-title-line h1 { margin: 0; font-family: var(--cases-display); font-size: clamp(78px, 12.2vw, 156px); font-weight: 500; letter-spacing: -.085em; line-height: .8; }
.cases-intro { max-width: 400px; margin: 0 0 4px auto; color: #9c9a8e; font-family: var(--cases-body); font-size: 16.5px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }

.cases-showcase { padding: 24px 32px 110px; }
.cases-showcase-head { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.cases-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.cases-filters button { padding: 9px 14px; border: 1px solid var(--cases-line); border-radius: 999px; background: transparent; color: var(--cases-muted); font-size: 12px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.cases-filters button:hover, .cases-filters button[aria-pressed='true'] { border-color: var(--cases-accent); background: var(--cases-accent-soft); color: var(--cases-accent); }
.cases-rule { height: 1px; margin: 18px 0 20px; background: var(--cases-line); }

.cases-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 44px; }
.case-card { min-width: 0; border: 0; border-radius: 10px; background: transparent; transition: transform .25s ease; }
.case-card:hover { transform: translateY(-4px); }
.case-visual { position: relative; min-height: 360px; margin: 0 0 16px; overflow: hidden; border-radius: 10px; background: #151512; }
.case-visual::after { position: absolute; inset: 0; background: linear-gradient(130deg, transparent 55%, rgba(183, 237, 24, .06)); content: ''; pointer-events: none; }
.case-visual.case-image { min-height: 360px; height: 360px; padding: 0; }
.case-visual.case-image::after { display: none; }
.case-visual.case-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.case-card-caption { position: relative; min-height: 42px; padding: 0 2px; }
.case-card-caption h2 { width: 100%; max-width: none; margin: 0; padding-right: 132px; font-family: var(--cases-display); font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; line-height: 1.1; letter-spacing: -.045em; }
.case-card-action { position: absolute; top: 0; right: 2px; display: block; width: 42px; height: 42px; overflow: hidden; border: 1px solid rgba(244,243,236,.18); border-radius: 999px; background: rgba(20,20,18,.42); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); color: #f4f3ec; line-height: 1; white-space: nowrap; transition: width .28s cubic-bezier(.22, 1, .36, 1), transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.case-card-action-label { position: absolute; top: 0; left: 14px; right: 42px; display: block; max-width: 0; overflow: hidden; opacity: 0; font-size: 13px; line-height: 42px; font-weight: 600; color: currentColor; transform: translateX(4px); transition: max-width .28s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, transform .18s ease; }
.case-card-action-icon { position: absolute; top: 0; right: 0; display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: currentColor; }
.case-card-action-icon svg { display: block; width: 18px; height: 18px; }
.case-card-action:focus-visible { width: 118px; transform: translateY(-1px); color: var(--cases-accent); border-color: rgba(166,225,0,.38); background: rgba(20,20,18,.62); outline: 2px solid rgba(166,225,0,.55); outline-offset: 3px; }
.case-card-action:focus-visible .case-card-action-label { max-width: 64px; opacity: 1; transform: translateX(0); }

@media (hover: hover) and (pointer: fine) {
  .case-card:hover .case-card-action, .case-card-action:hover {
    width: 118px;
    transform: translateY(-1px);
    color: var(--cases-accent);
    border-color: rgba(166,225,0,.38);
    background: rgba(20,20,18,.62);
  }
  .case-card:hover .case-card-action-label, .case-card-action:hover .case-card-action-label { max-width: 64px; opacity: 1; transform: translateX(0); }
}
.cases-empty { padding: 44px 0; color: var(--cases-muted); text-align: center; }

/* Visual 01 — pedido */
.visual-orders { padding: 23px; background: radial-gradient(circle at 80% 18%, rgba(183, 237, 24, .14), transparent 28%), #171714; }
.orders-toolbar { display: flex; align-items: center; gap: 9px; padding-bottom: 18px; border-bottom: 1px solid var(--cases-line); color: var(--cases-text); font-size: 12px; }
.visual-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cases-accent); box-shadow: 0 0 15px var(--cases-accent); }
.orders-toolbar em { margin-left: auto; padding: 3px 7px; border: 1px solid var(--cases-accent); border-radius: 4px; color: var(--cases-accent); font-family: var(--cases-mono); font-size: 9px; font-style: normal; }
.orders-main { padding: 27px 0 22px; }
.orders-column-labels, .orders-row { display: grid; grid-template-columns: 1.2fr 1fr .6fr; gap: 12px; align-items: center; }
.orders-column-labels { margin-bottom: 13px; color: var(--cases-dim); font-family: var(--cases-mono); font-size: 8px; text-transform: uppercase; }
.orders-row { padding: 13px 0; border-top: 1px solid rgba(240,240,232,.09); }
.orders-row i { display: block; height: 6px; border-radius: 4px; background: #45453d; }
.orders-row i:nth-child(2) { width: 68%; background: #67675b; }
.orders-row i:last-child { width: 9px; height: 9px; border-radius: 50%; background: #66665d; }
.orders-row i.is-lime:last-child { background: var(--cases-accent); box-shadow: 0 0 12px rgba(183,237,24,.65); }
.orders-signal { padding: 13px 15px; border: 1px solid rgba(183,237,24,.35); background: rgba(183,237,24,.05); color: var(--cases-muted); font-family: var(--cases-mono); font-size: 8px; }
.orders-signal strong { float: right; color: var(--cases-accent); font-size: 15px; font-weight: 400; }.orders-signal div { display: flex; gap: 4px; margin-top: 11px; }.orders-signal i { width: 100%; height: 3px; background: var(--cases-accent); }.orders-signal i:nth-child(n+5) { opacity: .22; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
footer { border-top: none; padding: 64px 0 36px; background: transparent; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 56px; flex-wrap: wrap; gap: 40px; }
.footer-brand p { color: #6c6a60; font-size: 14px; max-width: 280px; margin-top: 14px; line-height: 1.6; }
.footer-cols { display: flex; gap: 70px; flex-wrap: wrap; }
.footer-col h4 { font-family: var(--cases-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6c6a60; margin-bottom: 18px; }
.footer-col a { display: block; font-size: 14.5px; color: #9c9a8e; margin-bottom: 12px; transition: color .2s ease; }
.footer-col a:hover { color: #a6e100; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 28px; border-top: 1px solid #242420; font-size: 13px; color: #6c6a60; flex-wrap: wrap; gap: 12px; }

[hidden] { display: none !important; }

@media (max-width: 980px) {
  .cases-hero { min-height: 330px; padding: 42px 32px 56px; grid-template-columns: 1fr .75fr; gap: 30px; }
  .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .footer-top { flex-direction: column; }
  .footer-cols { gap: 40px; }
}

@media (max-width: 720px) {
  .container { max-width: 100%; padding: 0 22px; }
  .cases-header nav { width: auto; max-width: 100%; }
  .cases-header nav { padding: 18px 22px; }
  .nav-toggle { display: flex; position: relative; z-index: 1000; width: 42px; height: 42px; padding: 0; border: 1px solid var(--cases-line); border-radius: 4px; background: transparent; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
  .nav-toggle span { width: 18px; height: 1px; margin: 0; background: #f4f3ec; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-links { position: fixed; inset: 0; z-index: 900; min-height: 100dvh; width: 100vw; padding: 132px 34px 40px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 34px; background: radial-gradient(circle at 20% 0%, rgba(166,225,0,.10), transparent 34%), linear-gradient(180deg, rgba(20,20,18,.98), rgba(20,20,18,.96)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: opacity .22s ease, visibility .22s ease, transform .28s ease; overflow-y: auto; }
  .nav-links.open, .nav-links.active, body.mobile-menu-open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
  .nav-links a { width: 100%; padding: 0; color: #f4f3ec; font-family: var(--cases-display); font-size: clamp(34px, 10vw, 48px); line-height: 1; letter-spacing: -.04em; }
  .nav-links .nav-cta { width: auto; margin-top: 18px; padding: 14px 20px; font-family: var(--cases-body); font-size: 15px; }
  .cases-hero { min-height: 0; padding: 80px 22px 48px; display: block; }
  .cases-title-line h1 { font-size: clamp(68px, 20vw, 112px); }
  .cases-intro { max-width: 370px; margin: 32px 0 0; font-size: 16.5px; line-height: 1.6; }
  .cases-showcase { padding: 20px 22px 76px; }.cases-showcase-head { display: block; }.cases-filters { justify-content: flex-start; margin-top: 18px; }.cases-rule { margin-top: 18px; }.cases-grid { grid-template-columns: 1fr; row-gap: 42px; }.case-visual { min-height: 315px; }.case-visual.case-image { min-height: 315px; height: 315px; }.case-card-caption { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; min-height: 42px; }.case-card-caption h2 { flex: 1 1 200px; width: auto; padding-right: 0; font-size: 22px; }.case-card-action { position: relative; top: auto; right: auto; flex: 0 0 42px; }.footer-cols { gap: 40px; }
}

@media (max-width: 420px) {
  .cases-filters button { padding-inline: 11px; }.case-visual { min-height: 285px; margin-top: 12px; }.case-visual.case-image { min-height: 285px; height: 285px; }
}