/* ---------- Tokens ---------- */
:root {
  --paper: #f5f1e8;
  --paper-deep: #e6ded0;
  --paper-warm: #fbf8f1;
  --mist: #dce9e7;
  --ink: #111519;
  --ink-soft: #303941;
  --steel: #6d7880;
  --line: #c9c0b1;
  --line-strong: #a79d8e;
  --oxide: #c2472d;
  --oxide-deep: #923521;
  --signal: #0f6b72;
  --signal-soft: #8dbfc0;
  --brass: #9f793d;
  --charcoal: #182126;

  --font-display: "Aptos Display", "Segoe UI", "Arial Narrow", sans-serif;
  --font-body: "Aptos", "Segoe UI", Arial, sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background:
    radial-gradient(
      900px 420px at 12% 0%,
      rgba(194, 71, 45, 0.09),
      transparent 58%
    ),
    radial-gradient(
      780px 360px at 92% 12%,
      rgba(15, 107, 114, 0.1),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28),
      rgba(230, 222, 208, 0.18)
    ),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
button {
  font-family: inherit;
  cursor: pointer;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--ink);
}
p {
  margin: 0 0 1em;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: 1rem;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--oxide);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding: clamp(3rem, 7vw, 6.5rem) 0;
}
.section-tight {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.section-border-top {
  border-top: 1px solid var(--line);
}
.section-alt {
  background:
    linear-gradient(135deg, rgba(15, 107, 114, 0.08), transparent 36%),
    var(--paper-deep);
}
.section-dark {
  background: var(--ink);
  color: var(--paper);
}
.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: var(--paper);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.4em;
  height: 1px;
  background: var(--signal);
  display: inline-block;
}
.section-dark .eyebrow {
  color: var(--signal-soft);
}
.section-dark .eyebrow::before {
  background: var(--signal-soft);
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 46em;
}
.section-dark .lede {
  color: var(--signal-soft);
}

.grid {
  display: grid;
  gap: var(--gutter);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-12 {
  grid-template-columns: repeat(12, 1fr);
}

.marker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  text-transform: uppercase;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0;
  max-width: 26em;
}

/* ---------- Media ---------- */
.media-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(15, 107, 114, 0.18), transparent 42%),
    linear-gradient(
      180deg,
      rgba(251, 248, 241, 0.72),
      rgba(230, 222, 208, 0.84)
    ),
    var(--mist);
  box-shadow: 8px 8px 0 rgba(15, 107, 114, 0.1);
}
.media-panel::after {
  content: attr(data-label);
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-warm);
  background: var(--ink);
  padding: 0.45rem 0.65rem;
}
.media-panel img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  max-height: 260px;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.media-panel.is-wide {
  max-width: 980px;
  margin: 0 auto;
}
.media-panel.is-wide img {
  min-height: clamp(170px, 20vw, 260px);
  max-height: 300px;
}
.media-grid {
  display: grid;
  gap: var(--gutter);
  align-items: center;
}
@media (min-width: 860px) {
  .media-grid {
    grid-template-columns: 1fr 0.9fr;
  }
}
.section-media {
  padding: clamp(1.6rem, 3.5vw, 3rem) 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.95em 1.5em;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-warm);
  box-shadow: inset 4px 0 0 var(--oxide);
}
.btn-primary:hover {
  background: var(--signal);
  border-color: var(--signal);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}
.section-dark .btn-outline {
  border-color: var(--paper);
  color: var(--paper);
}
.section-dark .btn-outline:hover {
  background: var(--paper);
  color: var(--ink);
}
.cta-band .btn-outline {
  border-color: rgba(245, 241, 232, 0.76);
  color: var(--paper-warm);
  background: transparent;
}
.cta-band .btn-outline:hover,
.cta-band .btn-outline:focus-visible {
  background: var(--paper-warm);
  border-color: var(--paper-warm);
  color: var(--charcoal);
}
.btn-ghost {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost::after {
  content: "→";
  transition: transform 0.18s var(--ease);
}
.btn-ghost:hover::after {
  transform: translateX(4px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 232, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(17, 21, 25, 0.12);
  box-shadow: 0 18px 45px -38px rgba(17, 21, 25, 0.8);
}
.header-inner {
  max-width: calc(var(--container) + 1.5rem);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  padding: 0.45rem 0.65rem 0.45rem 0.45rem;
  border: 1px solid var(--ink);
  background: var(--paper-warm);
}
.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding: 5px;
  background: var(--ink);
}
.brand-node {
  width: auto;
  height: auto;
  min-width: 7px;
  min-height: 7px;
  background: var(--oxide);
  border-radius: 0;
}
.brand-node:nth-child(2) {
  background: var(--signal-soft);
}
.brand-node:nth-child(3) {
  background: var(--paper-warm);
  grid-column: 1 / -1;
}
.brand-accent {
  color: var(--oxide);
}

.main-nav {
  display: none;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  background: rgba(251, 248, 241, 0.7);
}
.nav-list > li > a,
.nav-dropdown-toggle {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink-soft);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6rem 0.8rem;
  position: relative;
}
.nav-list > li > a::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.38rem;
  height: 2px;
  background: var(--oxide);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease);
}
.nav-list > li > a:hover,
.nav-dropdown-toggle:hover {
  background: var(--mist);
  color: var(--ink);
}
.nav-list > li > a:hover::after {
  transform: scaleX(1);
}
.chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.18s var(--ease);
}
.has-dropdown {
  position: relative;
}
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  min-width: 280px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition:
    opacity 0.16s var(--ease),
    translate 0.16s var(--ease),
    visibility 0.16s;
  box-shadow: 12px 12px 0 rgba(17, 21, 25, 0.12);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.has-dropdown:hover .chevron {
  transform: rotate(225deg);
  margin-top: 2px;
}
.dropdown li a {
  display: block;
  padding: 0.65rem 0.75rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-radius: var(--radius);
}
.dropdown li a:hover {
  background: var(--mist);
  color: var(--ink);
}
.dropdown-all {
  border-top: 1px solid var(--line);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}
.dropdown-all a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--oxide) !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-cta {
  display: none;
}
.menu-toggle {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius);
}
.menu-toggle-bar {
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition:
    transform 0.2s var(--ease),
    opacity 0.2s var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  max-height: 0;
  overflow: hidden;
  border-top: 0 solid var(--line);
  transition: max-height 0.3s var(--ease);
  background: var(--paper-warm);
}
.mobile-nav.is-open {
  max-height: 90vh;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.mobile-nav-list {
  padding: 0.5rem var(--gutter) 2rem;
}
.mobile-nav-list > li {
  border-bottom: 1px solid var(--line);
}
.mobile-nav-list > li > a {
  display: block;
  padding: 1rem 0;
  font-size: 1.05rem;
}
.mobile-sub-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 1rem 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.mobile-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s var(--ease);
}
.mobile-sub.is-open {
  max-height: 500px;
}
.mobile-sub li a {
  display: block;
  padding: 0.65rem 0 0.65rem 1rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
}
.mobile-cta {
  margin: 1rem 0;
  text-align: center;
  justify-content: center;
}

@media (min-width: 980px) {
  .main-nav {
    display: block;
  }
  .header-cta {
    display: inline-flex;
  }
  .menu-toggle {
    display: none;
  }
  .mobile-nav {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(
      900px 380px at 80% 18%,
      rgba(141, 191, 192, 0.3),
      transparent 58%
    ),
    linear-gradient(125deg, rgba(194, 71, 45, 0.1), transparent 38%),
    linear-gradient(180deg, var(--paper-warm), var(--paper)), var(--paper);
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background:
    linear-gradient(90deg, rgba(17, 21, 25, 0.12), transparent 62%),
    linear-gradient(180deg, transparent, rgba(17, 21, 25, 0.05));
  opacity: 0.18;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero-title {
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  letter-spacing: -0.01em;
  max-width: 15em;
}
.hero-title .accent {
  color: var(--signal);
}
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 2rem;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--steel);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-meta span {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.hero-meta span::before {
  content: "";
  width: 16px;
  height: 6px;
  background: var(--oxide);
  border-radius: 0;
}

/* Diagram infrastruktury */
.infra-diagram {
  position: relative;
  z-index: 2;
  aspect-ratio: 4/3.1;
  border: 1px solid var(--ink);
  background:
    radial-gradient(
      circle at 22% 20%,
      rgba(194, 71, 45, 0.18),
      transparent 24%
    ),
    radial-gradient(
      circle at 78% 72%,
      rgba(15, 107, 114, 0.2),
      transparent 30%
    ),
    linear-gradient(135deg, var(--paper-warm), var(--mist));
  overflow: hidden;
  box-shadow: 12px 12px 0 rgba(15, 107, 114, 0.12);
}
.hero-map {
  border: 0;
  overflow: visible;
  background:
    linear-gradient(
      145deg,
      rgba(251, 248, 241, 0.88),
      rgba(220, 233, 231, 0.72)
    ),
    var(--paper);
  box-shadow: none;
  min-height: 420px;
}
.hero-map::before {
  content: "";
  position: absolute;
  inset: 8% 4% 12% 8%;
  border-left: 1px solid rgba(17, 21, 25, 0.18);
  border-bottom: 1px solid rgba(17, 21, 25, 0.14);
  transform: skew(-7deg);
}
.hero-map::after {
  content: "SYSTEM MAP / Guilherme Rocha";
  position: absolute;
  right: 2%;
  top: 4%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  text-transform: uppercase;
}
.infra-diagram svg {
  width: 100%;
  height: 100%;
  display: block;
}
.infra-line {
  stroke: var(--steel);
  stroke-width: 1;
  fill: none;
  opacity: 0.55;
}
.line-strong {
  stroke: var(--ink);
  stroke-width: 1.7;
  opacity: 0.72;
}
.line-thin {
  stroke: var(--steel);
  stroke-width: 0.65;
  opacity: 0.5;
}
.line-dashed {
  stroke: var(--signal);
  stroke-width: 1.1;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}
.line-dotted {
  stroke: var(--oxide);
  stroke-width: 0.9;
  stroke-dasharray: 1 4;
  opacity: 0.62;
}
.infra-line.is-drawn {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw 1.6s var(--ease) forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.hero-map .line-dashed.is-drawn {
  stroke-dasharray: 5 4;
  stroke-dashoffset: 0;
  animation: none;
}
.hero-map .line-dotted.is-drawn {
  stroke-dasharray: 1 4;
  stroke-dashoffset: 0;
  animation: none;
}
.hero-map .line-thin.is-drawn,
.hero-map .line-strong.is-drawn {
  animation: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.infra-node {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.5em 0.85em;
  white-space: nowrap;
}
.infra-node.is-accent {
  border-color: var(--oxide);
  color: #fff;
  background: var(--oxide);
}
.infra-node.is-ice {
  border-color: var(--signal);
  background: var(--mist);
}
.infra-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oxide);
}
.hero-map .infra-node {
  box-shadow: 6px 6px 0 rgba(17, 21, 25, 0.08);
}
.hero-map .node-data {
  left: -2% !important;
}
.hero-map .node-ecom {
  right: -4%;
}
.system-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  border-top: 1px solid var(--line-strong);
  padding-top: 0.3rem;
  white-space: nowrap;
}
.data-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oxide);
  box-shadow: 0 0 0 6px rgba(194, 71, 45, 0.13);
  animation: dataPulse 2.8s var(--ease) infinite;
}
.data-node.is-slow {
  background: var(--signal);
  animation-duration: 3.6s;
  box-shadow: 0 0 0 6px rgba(15, 107, 114, 0.14);
}
.data-node.is-fast {
  animation-duration: 2.2s;
}
@keyframes dataPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 1;
  }
}

.hero-photo-band {
  position: relative;
  z-index: 3;
  margin-top: clamp(-3rem, -4vw, -1.5rem);
  padding: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.hero-photo {
  max-width: min(1120px, 92vw);
  margin-left: auto;
  margin-right: calc(var(--gutter) * -0.35);
  box-shadow: -18px 18px 0 rgba(194, 71, 45, 0.16);
}
.hero-photo img {
  min-height: clamp(210px, 28vw, 360px);
  max-height: 420px;
}
.hero-photo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18%;
  background: rgba(194, 71, 45, 0.78);
  mix-blend-mode: multiply;
  z-index: 1;
}
.photo-tag {
  position: absolute;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: 0.35rem 0.55rem;
  color: var(--ink);
}
.tag-pos {
  left: 9%;
  top: 18%;
}
.tag-store {
  right: 12%;
  top: 14%;
}
.tag-data {
  right: 24%;
  bottom: 18%;
  background: var(--charcoal);
  color: var(--paper-warm);
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

@media (max-width: 779px) {
  .page-home {
    overflow-x: clip;
  }
  .page-home .container,
  .page-home .grid,
  .page-home .hero-grid,
  .page-home .section-head,
  .page-home .retail-feature-grid,
  .page-home .article-grid {
    min-width: 0;
  }
  .page-home .hero-ctas .btn,
  .page-home .cta-band-actions .btn,
  .page-home .retail-feature .btn {
    white-space: normal;
    justify-content: center;
    text-align: center;
    max-width: 100%;
  }
  .page-home .hero {
    overflow: hidden;
  }
  .page-home .hero-map {
    overflow: hidden;
    min-height: 330px;
    max-width: 100%;
  }
  .page-home .hero-map .infra-node {
    font-size: 0.62rem;
    padding: 0.42em 0.62em;
    white-space: normal;
    max-width: 8.5rem;
    text-align: center;
  }
  .page-home .hero-map .node-data {
    left: 9% !important;
  }
  .page-home .hero-map .node-ecom {
    left: 78% !important;
    right: auto;
  }
  .page-home .system-marker {
    font-size: 0.56rem;
    max-width: 7.5rem;
    white-space: normal;
  }
  .hero-photo {
    max-width: 100%;
    margin-right: 0;
    transform: none;
    box-shadow: -8px 8px 0 rgba(194, 71, 45, 0.14);
  }
  .hero-photo img {
    min-height: 190px;
    max-height: 260px;
  }
  .photo-tag {
    font-size: 0.58rem;
    max-width: 7.5rem;
  }
  .tag-store {
    right: 0.75rem;
  }
  .tag-data {
    right: 1rem;
  }
  .page-home .retail-flow,
  .page-home .flow-node:nth-child(n) {
    transform: none;
  }
  .page-home .retail-feature {
    overflow: hidden;
  }
  .page-home .retail-feature-grid > * {
    min-width: 0;
  }
  .page-home .retail-flow {
    padding-left: 1rem;
    padding-right: 0;
    overflow: hidden;
  }
  .page-home .retail-flow::before {
    left: 0.35rem;
  }
  .page-home .flow-node {
    min-width: 0;
    width: 100%;
    box-shadow: none;
    padding: 0.75rem 0.7rem;
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
  }
  .page-home .flow-node::before {
    left: -0.65rem;
    width: 0.65rem;
  }
  .page-home .flow-node em {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
  }
}

/* ---------- Competence / Pillars ---------- */
.pillars {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pillar {
  background: var(--paper-warm);
  padding: 2.25rem clamp(1.25rem, 2vw, 2rem);
  position: relative;
}
.pillar:nth-child(2) {
  background: var(--mist);
}
.pillar:nth-child(3) {
  background: var(--paper);
}
.pillar-index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--oxide);
  margin-bottom: 1.25rem;
  display: block;
}
.pillar h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.pillar p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin: 0;
}
@media (min-width: 780px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Asymmetric service grid ---------- */
.svc-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -48px rgba(17, 21, 25, 0.65);
}
.svc-card {
  background: var(--paper-warm);
  padding: 2rem clamp(1.25rem, 2vw, 2.25rem);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.22s var(--ease),
    background 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition:
    transform 0.24s var(--ease),
    background 0.24s var(--ease);
}
.svc-card::after {
  content: "";
  position: absolute;
  right: -4rem;
  top: -4rem;
  width: 10rem;
  height: 10rem;
  background: radial-gradient(
    circle,
    rgba(15, 107, 114, 0.16),
    transparent 64%
  );
  opacity: 0;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease);
  pointer-events: none;
}
.svc-card:nth-child(3),
.svc-card:nth-child(6) {
  background: var(--mist);
}
.svc-card:hover,
.svc-card:focus-within {
  z-index: 2;
  transform: translateY(-4px);
  box-shadow: 12px 14px 0 rgba(15, 107, 114, 0.13);
}
.svc-card:hover::before,
.svc-card:focus-within::before {
  transform: scaleY(1);
}
.svc-card:hover::after,
.svc-card:focus-within::after {
  opacity: 1;
  transform: translate(-1rem, 1rem);
}
.svc-card .marker {
  margin-bottom: 1.25rem;
  width: max-content;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(109, 120, 128, 0.35);
  background: rgba(251, 248, 241, 0.5);
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.svc-card:hover .marker,
.svc-card:focus-within .marker {
  color: var(--signal);
  border-color: var(--signal-soft);
  background: rgba(220, 233, 231, 0.7);
  transform: translateX(5px);
}
.svc-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.65rem;
  transition: color 0.2s var(--ease);
}
.svc-card:hover h3,
.svc-card:focus-within h3 {
  color: var(--signal);
}
.svc-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  flex-grow: 1;
}
.svc-card .btn-ghost {
  margin-top: 1.25rem;
  align-self: flex-start;
  border: 1px solid var(--ink);
  padding: 0.65rem 0.9rem;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.svc-card .btn-ghost:hover,
.svc-card .btn-ghost:focus-visible {
  background: var(--oxide);
  border-color: var(--oxide);
  color: var(--paper-warm);
  transform: translateY(-1px);
}
.svc-card.is-large {
  background: var(--charcoal);
  color: var(--paper);
  box-shadow: inset 0 6px 0 var(--oxide);
}
.svc-card.is-large::before {
  background: var(--oxide);
}
.svc-card.is-large::after {
  background: radial-gradient(
    circle,
    rgba(141, 191, 192, 0.22),
    transparent 64%
  );
}
.svc-card.is-large h3,
.svc-card.is-large p {
  color: var(--paper);
}
.svc-card.is-large .marker {
  color: var(--signal-soft);
}
.svc-card.is-large:hover h3,
.svc-card.is-large:focus-within h3 {
  color: var(--signal-soft);
}
.svc-card.is-large .btn-ghost {
  color: var(--paper-warm);
  border-color: rgba(245, 241, 232, 0.58);
}
.svc-card.is-large .btn-ghost:hover,
.svc-card.is-large .btn-ghost:focus-visible {
  background: var(--paper-warm);
  border-color: var(--paper-warm);
  color: var(--charcoal);
}

@media (min-width: 780px) {
  .svc-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .svc-grid > .svc-card:nth-child(1) {
    grid-column: span 4;
  }
  .svc-grid > .svc-card:nth-child(2) {
    grid-column: span 2;
  }
  .svc-grid > .svc-card:nth-child(3) {
    grid-column: span 2;
  }
  .svc-grid > .svc-card:nth-child(4) {
    grid-column: span 4;
  }
  .svc-grid > .svc-card:nth-child(5) {
    grid-column: span 3;
  }
  .svc-grid > .svc-card:nth-child(6) {
    grid-column: span 3;
  }
}

/* ---------- Problems list ---------- */
.problem-list {
  border-top: 1px solid var(--line);
}
.problem-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}
.problem-item h3 {
  font-size: 1.1rem;
  margin: 0;
}
.problem-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
@media (min-width: 780px) {
  .problem-item {
    grid-template-columns: 1.1fr 1.9fr;
    align-items: baseline;
  }
}
.problem-composed {
  border-top: 0;
}
.problem-composed .problem-item {
  position: relative;
  width: 100%;
  padding-left: clamp(2.5rem, 6vw, 5.5rem);
  border-bottom-color: rgba(17, 21, 25, 0.16);
}
.problem-composed .problem-item::before {
  content: attr(data-marker);
  position: absolute;
  left: 0;
  top: 1.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--oxide);
  text-transform: uppercase;
}
@media (min-width: 780px) {
  .problem-composed .problem-item {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------- Process steps ---------- */
.process-list {
  counter-reset: step;
  display: grid;
  gap: var(--gutter);
}
.process-step {
  position: relative;
  padding-left: 3.2rem;
}
.process-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--paper-warm);
  border: 1px solid var(--signal);
  background: var(--signal);
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-step h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.process-step p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin: 0;
}
@media (min-width: 780px) {
  .process-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.process-line {
  position: relative;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.process-line::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  top: 1.15rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--signal),
    var(--oxide),
    var(--line-strong)
  );
}
.process-line .process-step {
  background: var(--paper);
  padding: 3.3rem 1rem 0 0;
}
.process-line .process-step::after {
  content: "→";
  position: absolute;
  right: 1rem;
  top: 0.2rem;
  font-family: var(--font-mono);
  color: var(--steel);
}
.process-line .process-step:last-child::after {
  content: "";
}
@media (min-width: 780px) {
  .process-line {
    grid-template-columns: repeat(4, 1fr);
  }
  .process-line .process-step:nth-child(2) {
    margin-top: 2rem;
  }
  .process-line .process-step:nth-child(3) {
    margin-top: 4rem;
  }
  .process-line .process-step:nth-child(4) {
    margin-top: 6rem;
  }
}

/* ---------- Retail feature ---------- */
.retail-feature {
  background:
    linear-gradient(
      110deg,
      transparent 0 55%,
      rgba(220, 233, 231, 0.72) 55% 100%
    ),
    var(--paper);
}
.retail-feature-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.retail-flow {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.25rem 0 1.25rem 2.25rem;
}
.retail-flow::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 2rem;
  bottom: 2rem;
  width: 2px;
  background: linear-gradient(var(--oxide), var(--signal));
}
.flow-node {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.4rem;
  padding: 0.8rem 1rem;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  box-shadow: 7px 7px 0 rgba(17, 21, 25, 0.08);
}
.flow-node::before {
  content: "";
  position: absolute;
  left: -1.78rem;
  top: 50%;
  width: 1.78rem;
  height: 1px;
  background: var(--ink);
}
.flow-node em {
  font-style: normal;
  color: var(--oxide);
  border-left: 1px solid var(--line);
  padding-left: 0.75rem;
  margin-left: 1rem;
}
.flow-node.is-store {
  background: var(--charcoal);
  color: var(--paper-warm);
}
.flow-node.is-order {
  background: var(--mist);
  border-color: var(--signal);
}
@media (min-width: 860px) {
  .retail-feature-grid {
    grid-template-columns: 1fr 0.72fr;
  }
  .retail-flow {
    transform: translateX(1rem);
  }
  .flow-node:nth-child(2),
  .flow-node:nth-child(4) {
    transform: translateX(1.5rem);
  }
}

/* ---------- Services page route ---------- */
.services-hero {
  background:
    linear-gradient(135deg, rgba(15, 107, 114, 0.1), transparent 42%),
    var(--paper);
}
.situation-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.situation-item {
  background: var(--paper-warm);
  padding: 1.5rem;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.situation-item:nth-child(2n) {
  background: var(--mist);
}
.situation-item span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--oxide);
  text-transform: uppercase;
}
.situation-item h3 {
  font-size: 1.15rem;
  margin: 0.9rem 0 0.4rem;
}
.situation-item p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin: 0;
}
@media (min-width: 720px) {
  .situation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .situation-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-route .container {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}
.service-row {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border-top: 1px solid var(--line-strong);
}
.service-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.service-number {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1;
  color: rgba(17, 21, 25, 0.16);
}
.service-copy .marker {
  margin-bottom: 1rem;
  color: var(--signal);
}
.service-copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.45rem);
}
.service-copy > p {
  max-width: 48em;
  color: var(--ink-soft);
}
.service-details {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  border-left: 3px solid var(--oxide);
  padding-left: 1.25rem;
}
.service-details h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.service-details p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.service-details ul {
  list-style: disc;
  padding-left: 1.1rem;
  color: var(--ink-soft);
}
.service-details li {
  margin-bottom: 0.35rem;
}
.service-media img {
  min-height: 220px;
  max-height: 320px;
}
.mini-system-map {
  position: relative;
  min-height: 260px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-content: center;
}
.mini-system-map::before {
  content: "";
  position: absolute;
  inset: 18% 12%;
  border: 1px solid var(--line-strong);
  transform: rotate(-8deg);
}
.mini-system-map span {
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: 0.7rem 0.9rem;
  box-shadow: 6px 6px 0 rgba(15, 107, 114, 0.12);
}
.service-process {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  min-height: 240px;
  counter-reset: serviceProcess;
}
.service-process span {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
  padding: 0.8rem 1rem 0.8rem 3rem;
}
.service-process span::before {
  counter-increment: serviceProcess;
  content: counter(serviceProcess, decimal-leading-zero);
  position: absolute;
  left: 0.8rem;
  color: var(--oxide);
}
.support-style {
  background: linear-gradient(90deg, rgba(24, 33, 38, 0.08), transparent);
  padding-left: clamp(1rem, 3vw, 2rem);
}
.project-chain {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.project-chain span {
  position: relative;
  background: var(--paper-warm);
  padding: 1.25rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.project-chain span::after {
  content: "→";
  position: absolute;
  right: 1rem;
  color: var(--oxide);
}
.project-chain span:last-child::after {
  content: "";
}
.retail-example .service-media {
  max-width: 540px;
}
@media (min-width: 900px) {
  .service-row {
    grid-template-columns: 0.22fr 1fr 0.72fr;
    align-items: center;
  }
  .service-row.compact-list,
  .service-row.support-style {
    grid-template-columns: 0.22fr 1fr;
    max-width: 980px;
  }
  .service-row.reverse .service-copy {
    order: 3;
  }
  .service-row.reverse .service-media {
    order: 2;
  }
  .service-row.reverse .service-number {
    order: 1;
  }
  .service-details {
    grid-template-columns: 0.95fr 1fr;
  }
  .project-chain {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- Individual service pages ---------- */
.service-detail-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.3rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(135deg, var(--paper-warm), var(--paper));
}
.service-detail-hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.service-hero-copy {
  position: relative;
  z-index: 2;
}
.service-big-number {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(5rem, 15vw, 12rem);
  line-height: 0.78;
  color: rgba(17, 21, 25, 0.12);
  margin: 0.1em 0 -0.12em;
}
.service-hero-copy h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: 12em;
}
.service-hero-visual {
  position: relative;
  min-height: 280px;
}
.service-hero-image {
  width: min(520px, 100%);
  margin-left: auto;
  transform: translateX(1rem);
}
.service-hero-image img {
  min-height: 260px;
  max-height: 360px;
}
.technical-block {
  position: absolute;
  left: 210px;
  bottom: -100px;
  width: min(360px, 80%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  padding: 1rem;
  background: rgba(251, 248, 241, 0.88);
  border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(194, 71, 45, 0.14);
}
.technical-block span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--line-strong);
  padding: 0.65rem;
  background: var(--paper-warm);
}
.technical-block span:first-child {
  grid-column: 1 / -1;
  background: var(--charcoal);
  color: var(--paper-warm);
}
.service-detail-hero.service-variant-integrations,
.service-detail-hero.service-variant-automation,
.service-detail-hero.service-variant-data {
  background: linear-gradient(135deg, var(--mist), var(--paper));
}
.service-detail-hero.service-variant-support {
  background: linear-gradient(135deg, rgba(24, 33, 38, 0.14), var(--paper));
}
.split-section {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.scope-map {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.scope-module {
  background: var(--paper-warm);
  padding: 1.4rem;
  min-height: 11rem;
}
.scope-module:nth-child(3n) {
  background: var(--mist);
}
.scope-module span,
.outcome-item span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--oxide);
  text-transform: uppercase;
}
.scope-module h3 {
  font-size: 1.15rem;
  margin: 0.8rem 0 0.45rem;
}
.scope-module p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  margin: 0;
}
.scope-module.is-primary {
  background: var(--charcoal);
  color: var(--paper-warm);
}
.scope-module.is-primary h3,
.scope-module.is-primary p {
  color: var(--paper-warm);
}
.numbered-situations {
  display: grid;
  gap: 1.25rem;
}
.numbered-situation {
  max-width: 860px;
  border-top: 1px solid rgba(245, 241, 232, 0.22);
  padding-top: 1.1rem;
}

.numbered-situation span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--signal-soft);
  text-transform: uppercase;
}
.numbered-situation h3 {
  color: var(--paper-warm);
  font-size: 1.25rem;
  margin: 0.55rem 0 0.35rem;
}
.numbered-situation p {
  color: rgba(245, 241, 232, 0.76);
  margin: 0;
}
.detail-timeline {
  position: relative;
  display: grid;
  gap: 1.5rem;
}
.detail-timeline::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: linear-gradient(var(--signal), var(--oxide));
}
.timeline-step {
  position: relative;
  padding-left: 3.4rem;
}
.timeline-step span {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: var(--signal);
  color: var(--paper-warm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.timeline-step h3 {
  font-size: 1.15rem;
}
.timeline-step p {
  color: var(--ink-soft);
  margin: 0;
}
.outcome-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.outcome-item {
  background: var(--paper-warm);
  padding: 1.5rem;
  min-height: 12rem;
}
.outcome-item:nth-child(2) {
  background: var(--mist);
}
.outcome-item h3 {
  font-size: 1.25rem;
  margin: 0.8rem 0 0.45rem;
}
.outcome-item p {
  color: var(--ink-soft);
  margin: 0;
}
.retail-bridge .retail-flow.compact {
  transform: none;
  padding-top: 0;
  padding-bottom: 0;
}
.retail-flow.compact .flow-node {
  min-height: 2.8rem;
}

/* ---------- Retail page ---------- */
.page-retail .hero {
  padding-bottom: clamp(1.8rem, 4vw, 3rem) !important;
}
.retail-hero-flow {
  position: relative;
  min-height: 420px;
  padding: 2.4rem 1.5rem;
  background: linear-gradient(135deg, var(--paper-warm), var(--mist));
  overflow: visible;
}
.flow-label {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--steel);
}
.flow-track {
  position: relative;
  display: grid;
  gap: 0.85rem;
  max-width: 360px;
}
.flow-track::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2px;
  background: linear-gradient(var(--oxide), var(--signal));
}
.flow-track span {
  position: relative;
  margin-left: 2.4rem;
  padding: 0.72rem 0.9rem;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  box-shadow: 6px 6px 0 rgba(17, 21, 25, 0.08);
}
.flow-track span:nth-child(2),
.flow-track span:nth-child(5) {
  transform: translateX(2rem);
  background: var(--charcoal);
  color: var(--paper-warm);
}
.flow-track span:nth-child(3),
.flow-track span:nth-child(6) {
  transform: translateX(4rem);
}
.flow-side {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--signal);
  border-top: 1px solid var(--line-strong);
  padding-top: 0.35rem;
}
.side-price {
  right: 15%;
  top: 27%;
}
.side-stock {
  right: 6%;
  top: 52%;
}
.side-order {
  right: 18%;
  bottom: 18%;
}
.retail-photo-section {
  padding-top: 0;
}
.retail-photo {
  transform: translateX(4vw);
  box-shadow: -14px 14px 0 rgba(194, 71, 45, 0.16);
}
.retail-photo img {
  min-height: clamp(190px, 24vw, 320px);
  max-height: 360px;
}
.retail-viewpoint {
  padding-top: clamp(2.4rem, 5vw, 4rem);
}
.retail-thesis {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.retail-thesis div {
  background: var(--paper-warm);
  padding: 1.25rem;
}
.retail-thesis div:nth-child(2) {
  background: var(--mist);
  transform: translateX(1rem);
}
.retail-thesis span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--oxide);
}
.retail-thesis p {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
}
.page-retail .svc-grid > .svc-card:nth-child(1) {
  grid-column: span 3;
}
.page-retail .svc-grid > .svc-card:nth-child(2) {
  grid-column: span 3;
}
.page-retail .svc-grid > .svc-card:nth-child(3) {
  grid-column: span 2;
}
.page-retail .svc-grid > .svc-card:nth-child(4) {
  grid-column: span 4;
}
.page-retail .svc-grid > .svc-card:nth-child(5) {
  grid-column: span 4;
}
.page-retail .svc-grid > .svc-card:nth-child(6) {
  grid-column: span 2;
}
.role-statement {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.role-statement h2 {
  font-size: clamp(2rem, 5vw, 4.3rem);
  max-width: 12em;
  margin-bottom: 1.5rem;
}
.retail-ops-list .problem-item::before {
  color: var(--signal);
}
.retail-case-grid {
  align-items: stretch;
}
.retail-case-featured {
  background: var(--paper-warm);
}
.retail-case-featured .article-card-image {
  margin: -0.25rem -0.25rem 1.25rem;
}
@media (min-width: 900px) {
  .retail-case-grid {
    grid-template-columns: 1.35fr 0.85fr;
  }
  .retail-case-featured {
    grid-row: span 2;
  }
  .retail-case-grid .case-card:nth-child(3) {
    transform: translateX(1.5rem);
  }
}
@media (max-width: 779px) {
  .page-retail {
    overflow-x: clip;
  }
  .page-retail .container,
  .page-retail .hero-grid,
  .page-retail .retail-feature-grid,
  .page-retail .section-head,
  .page-retail .case-grid,
  .page-retail .svc-grid {
    min-width: 0;
  }
  .page-retail .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .retail-hero-flow {
    overflow: hidden;
    min-height: 360px;
    padding: 2.2rem 0.75rem 1rem;
  }
  .flow-label {
    left: 0.75rem;
    right: auto;
    max-width: calc(100% - 1.5rem);
  }
  .flow-track {
    max-width: 100%;
    padding-top: 1.75rem;
  }
  .flow-track span {
    margin-left: 1.5rem;
    width: calc(100% - 1.5rem);
    box-shadow: none;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
  }
  .flow-track span:nth-child(n) {
    transform: none;
  }
  .flow-track::before {
    left: 0.45rem;
  }
  .flow-side {
    display: none;
  }
  .retail-photo {
    max-width: 100%;
    transform: none;
    box-shadow: -8px 8px 0 rgba(194, 71, 45, 0.14);
  }
  .retail-photo img {
    min-height: 190px;
    max-height: 260px;
  }
  .page-retail .svc-grid > .svc-card {
    grid-column: auto;
  }
  .retail-thesis div:nth-child(2),
  .retail-photo,
  .flow-track span:nth-child(n) {
    transform: none;
  }
  .retail-case-grid .case-card:nth-child(n) {
    transform: none;
  }
  .role-statement h2 {
    overflow-wrap: anywhere;
  }
}
@media (min-width: 860px) {
  .service-detail-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .split-section {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .scope-map {
    grid-template-columns: repeat(4, 1fr);
  }
  .scope-module.is-primary {
    grid-column: span 2;
    grid-row: span 2;
  }
  .detail-timeline {
    grid-template-columns: repeat(4, 1fr);
  }
  .detail-timeline::before {
    left: 1rem;
    right: 1rem;
    top: 1.1rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .timeline-step {
    padding: 3.2rem 1rem 0 0;
  }
  .outcome-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Case study / realizacje cards ---------- */
.case-grid {
  display: grid;
  gap: var(--gutter);
}
.case-card {
  border: 1px solid var(--line);
  background: var(--paper-warm);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.case-card:nth-child(2n) {
  background: var(--mist);
}
.case-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 8px 8px 0 rgba(194, 71, 45, 0.12);
}
.case-card .marker {
  margin-bottom: 1rem;
}
.case-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.case-card p {
  color: var(--ink-soft);
  font-size: 0.93rem;
  flex-grow: 1;
}
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
}
.tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0.3em 0.6em;
  color: var(--steel);
}
@media (min-width: 640px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .case-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.case-detail-meta {
  display: grid;
  gap: 1.25rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0;
  margin: 2rem 0;
}
@media (min-width: 780px) {
  .case-detail-meta {
    grid-template-columns: repeat(4, 1fr);
  }
}
.case-detail-meta dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 0.4em;
}
.case-detail-meta dd {
  margin: 0;
  font-weight: 500;
}

.case-hero {
  background: linear-gradient(135deg, var(--paper-warm), var(--paper));
}
.case-hero-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}
.case-scenario-flow {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  background: var(--mist);
}
.case-scenario-flow::before {
  content: "";
  position: absolute;
  left: 2rem;
  top: 2rem;
  bottom: 2rem;
  width: 1px;
  background: linear-gradient(var(--oxide), var(--signal));
}
.case-scenario-flow span {
  position: relative;
  margin-left: 2rem;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: 0.55rem 0.75rem;
}
.case-scenario-flow span:last-child {
  background: var(--charcoal);
  color: var(--paper-warm);
}
.case-detail-meta {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.case-detail-meta > div {
  background: var(--paper-warm);
  padding: 1.25rem;
}
.case-detail-meta > div:first-child {
  background: var(--charcoal);
}
.case-detail-meta > div:first-child dt,
.case-detail-meta > div:first-child dd {
  color: var(--paper-warm);
}
.case-detail-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.case-result-panel {
  border: 1px solid var(--ink);
  background: var(--charcoal);
  color: var(--paper-warm);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 12px 12px 0 rgba(194, 71, 45, 0.16);
}
.case-result-panel h2 {
  color: var(--paper-warm);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
}
.case-result-panel p {
  color: rgba(245, 241, 232, 0.78);
  margin-bottom: 1.5rem;
}
.case-impact-map {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.5rem;
}
.case-impact-map span {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(245, 241, 232, 0.28);
  padding: 0.55rem 0.7rem;
}
.case-impact-map span::after {
  content: "→";
  position: absolute;
  right: 0.7rem;
  color: var(--signal-soft);
}
.case-impact-map span:last-child {
  background: var(--paper-warm);
  color: var(--charcoal);
}
.case-impact-map span:last-child::after {
  content: "";
}
@media (min-width: 860px) {
  .case-hero-grid {
    grid-template-columns: 1fr 0.42fr;
  }
  .case-hero-grid .case-detail-meta {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
  }
  .case-detail-layout {
    grid-template-columns: minmax(0, 1fr) 0.72fr;
  }
  .case-result-panel {
    position: sticky;
    top: 100px;
  }
}

/* ---------- Articles ---------- */
.article-grid {
  display: grid;
  gap: var(--gutter);
}
.article-card {
  border-top: 3px solid var(--line);
  padding: 1.5rem 1rem 0 0;
  min-width: 0;
  height: auto;
  align-self: start;
}
.article-card-image {
  display: block;
  aspect-ratio: 16/10;
  border: 1px solid var(--line);
  background: var(--mist);
  margin-bottom: 1rem;
  overflow: hidden;
}
.article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-article-grid {
  align-items: start;
}
.home-article-grid .article-card {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  padding: 1rem;
}
.home-article-grid .article-featured {
  box-shadow: 12px 12px 0 rgba(15, 107, 114, 0.12);
}
.home-article-grid .article-featured .article-card-image {
  aspect-ratio: 16/9;
}
@media (min-width: 900px) {
  .home-article-grid {
    grid-template-columns: 1.3fr 0.85fr 0.85fr;
    gap: clamp(1rem, 3vw, 2rem);
  }
  .home-article-grid .article-featured {
    grid-row: span 2;
    padding: 1.25rem;
  }
  .home-article-grid .article-featured h3 {
    font-size: 1.55rem;
  }
  .home-article-grid .article-card:not(.article-featured) {
    margin-top: 2.5rem;
  }
  .home-article-grid .article-card:nth-child(3) {
    margin-top: 5rem;
  }
}
.article-card:nth-child(3n + 1) {
  border-color: var(--oxide);
}
.article-card:nth-child(3n + 2) {
  border-color: var(--signal);
}
.article-card:nth-child(3n) {
  border-color: var(--brass);
}
.article-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.article-card p {
  color: var(--ink-soft);
  font-size: 0.93rem;
}
@media (min-width: 640px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.article-body {
  max-width: 42em;
  font-size: 1.05rem;
}
.article-body h2 {
  font-size: 1.5rem;
  margin-top: 2em;
}
.article-body h3 {
  font-size: 1.2rem;
  margin-top: 1.6em;
}
.article-body p {
  color: var(--ink-soft);
}
.article-body ul {
  list-style: disc;
  padding-left: 1.3em;
  margin: 0 0 1.2em;
  color: var(--ink-soft);
}
.article-body li {
  margin-bottom: 0.5em;
}
.article-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--steel);
  margin-bottom: 2rem;
}
.article-hero-image {
  margin: 2rem 0;
}

/* ---------- CTA band ---------- */
.cta-band {
  background:
    linear-gradient(90deg, rgba(194, 71, 45, 0.18), transparent 42%),
    var(--charcoal);
  color: var(--paper);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-band h2 {
  color: var(--paper);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  max-width: 20em;
}
.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.cta-band .lede {
  color: var(--signal-soft);
}
.cta-band-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 700px) {
  .form-grid.two-col {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.field .optional {
  color: var(--steel);
  text-transform: none;
  letter-spacing: 0;
}
.field input,
.field select,
.field textarea {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  color: var(--ink);
  transition: border-color 0.18s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--oxide);
}
.field textarea {
  resize: vertical;
  min-height: 140px;
}
.field-error {
  font-size: 0.82rem;
  color: var(--oxide-deep);
  min-height: 1.1em;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--oxide-deep);
}

.form-note {
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: var(--mist);
  border: 1px solid var(--signal-soft);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.form-status {
  display: none;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
}
.form-status.is-visible {
  display: block;
}
.form-status.is-success {
  border-color: var(--oxide);
}
.form-status h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.form-status p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.submission-panel {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: clamp(1.6rem, 4vw, 3rem);
  max-width: 920px;
}
.submission-panel.is-error {
  border-color: var(--oxide);
  background: rgba(194, 71, 45, 0.08);
}
.submission-panel h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  max-width: 11em;
  margin: 0.4rem 0 1rem;
}
.submission-panel p {
  color: var(--ink-soft);
  max-width: 60em;
}
.submission-summary {
  display: grid;
  grid-template-columns: minmax(130px, 0.32fr) 1fr;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}
.submission-summary dt,
.submission-summary dd {
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.submission-summary dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--steel);
  text-transform: uppercase;
}
.submission-summary dd {
  color: var(--ink);
}
.submission-errors {
  margin: 1.5rem 0 2rem;
  padding-left: 1.1rem;
}
.submission-errors li {
  margin: 0.45rem 0;
}
@media (max-width: 640px) {
  .submission-summary {
    grid-template-columns: 1fr;
  }
  .submission-summary dt {
    padding-bottom: 0.25rem;
    border-bottom: 0;
  }
  .submission-summary dd {
    padding-top: 0;
    overflow-wrap: anywhere;
  }
}

/* ---------- Contact ---------- */
.contact-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem);
  background:
    linear-gradient(135deg, rgba(194, 71, 45, 0.1), transparent 36%),
    linear-gradient(180deg, var(--paper-warm), var(--paper));
}
.contact-hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.contact-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: 11em;
}
.contact-visual {
  margin-left: auto;
  width: min(560px, 100%);
  box-shadow: -14px 14px 0 rgba(15, 107, 114, 0.14);
}
.contact-visual img {
  min-height: clamp(260px, 35vw, 430px);
  max-height: 480px;
}
.contact-section {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
.contact-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-side {
  position: relative;
  background: var(--charcoal);
  color: var(--paper-warm);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 12px 12px 0 rgba(194, 71, 45, 0.14);
}
.contact-side h2 {
  color: var(--paper-warm);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}
.contact-route {
  display: grid;
  gap: 0.55rem;
  margin: 1.5rem 0 2rem;
}
.contact-route span {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(245, 241, 232, 0.26);
  padding: 0.55rem 0.7rem;
}
.contact-route span::after {
  content: "→";
  position: absolute;
  right: 0.7rem;
  color: var(--signal-soft);
}
.contact-route span:last-child {
  background: var(--paper-warm);
  color: var(--charcoal);
}
.contact-route span:last-child::after {
  content: "";
}
.contact-details {
  display: grid;
  gap: 1px;
  background: rgba(245, 241, 232, 0.16);
  border: 1px solid rgba(245, 241, 232, 0.16);
}
.contact-details div {
  background: rgba(245, 241, 232, 0.06);
  padding: 1rem;
}
.contact-details span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--signal-soft);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.contact-details a,
.contact-details p {
  color: rgba(245, 241, 232, 0.82);
  margin: 0;
}
.contact-form-panel {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.contact-form-panel .form-note {
  margin-bottom: 2rem;
}
.contact-submit {
  margin-top: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
@media (min-width: 920px) {
  .contact-hero-grid {
    grid-template-columns: 1fr 0.9fr;
  }
  .contact-layout {
    grid-template-columns: 0.74fr 1.26fr;
  }
  .contact-side {
    position: sticky;
    top: 100px;
  }
}

/* ---------- Company / about ---------- */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2.2rem, 5vw, 4rem);
  background:
    linear-gradient(135deg, rgba(15, 107, 114, 0.12), transparent 42%),
    linear-gradient(180deg, var(--paper-warm), var(--paper));
}
.about-hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: 12em;
}
.about-visual {
  position: relative;
  min-height: 330px;
}
.about-visual .service-hero-image {
  width: min(560px, 100%);
  margin-left: auto;
  transform: translateX(1rem);
}
.about-tech {
  left: 0;
  bottom: 1rem;
}
.about-thesis {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.about-thesis div {
  background: var(--paper-warm);
  padding: 1.5rem;
}
.about-thesis div:nth-child(2) {
  background: var(--mist);
}
.about-thesis span,
.registry-name span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--oxide);
  text-transform: uppercase;
}
.about-thesis h3 {
  font-size: 1.2rem;
  margin: 0.85rem 0 0.45rem;
}
.about-thesis p {
  color: var(--ink-soft);
  margin: 0;
}
.about-process .process-step {
  background: transparent;
}
.registry-panel {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.registry-name {
  background: var(--charcoal);
  color: var(--paper-warm);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.registry-name h3 {
  color: var(--paper-warm);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}
.registry-name p {
  color: rgba(245, 241, 232, 0.72);
  margin: 0;
}
.registry-grid {
  margin: 0;
  border: 0;
}
.registry-grid .fact {
  min-height: 8rem;
}
@media (min-width: 860px) {
  .about-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .about-thesis {
    grid-template-columns: repeat(3, 1fr);
  }
  .registry-panel {
    grid-template-columns: 0.9fr 1.6fr;
  }
}
.fact-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 2rem 0;
}
.fact {
  background: var(--paper-warm);
  padding: 1.5rem;
}
.fact dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 0.4em;
}
.fact dd {
  margin: 0;
  font-weight: 600;
  font-size: 1.05rem;
}
@media (min-width: 640px) {
  .fact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .fact-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Legal ---------- */
.legal-body {
  max-width: 48em;
}
.legal-body h2 {
  font-size: 1.3rem;
  margin-top: 2em;
}
.legal-body p,
.legal-body li {
  color: var(--ink-soft);
}
.legal-body ul {
  list-style: disc;
  padding-left: 1.3em;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--ink);
  background:
    linear-gradient(90deg, rgba(194, 71, 45, 0.22), transparent 30%),
    linear-gradient(135deg, var(--charcoal), #101417);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "Guilherme Rocha / RETAIL SYSTEMS / DATA FLOWS";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 1rem;
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 7vw, 5.5rem);
  line-height: 1;
  color: rgba(245, 241, 232, 0.045);
  white-space: nowrap;
  pointer-events: none;
}
.footer-top {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(3.2rem, 6vw, 5rem) var(--gutter) 2.5rem;
  display: grid;
  gap: 2.5rem;
}
.site-footer .brand {
  background: transparent;
  border-color: rgba(245, 241, 232, 0.45);
  color: var(--paper);
  width: max-content;
}
.site-footer .btn-outline {
  border-color: rgba(245, 241, 232, 0.78);
  color: var(--paper-warm);
  background: transparent;
}
.site-footer .btn-outline:hover,
.site-footer .btn-outline:focus-visible {
  background: var(--paper-warm);
  border-color: var(--paper-warm);
  color: var(--charcoal);
}
.site-footer .brand-node:nth-child(3) {
  background: var(--paper);
}
.footer-tagline {
  color: rgba(245, 241, 232, 0.76);
  max-width: 24em;
  margin: 1rem 0 1.25rem;
  font-size: 0.95rem;
}
.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--signal-soft);
  margin-bottom: 1rem;
}
.footer-col ul li {
  margin-bottom: 0.6rem;
}
.footer-col ul a {
  color: rgba(245, 241, 232, 0.76);
  font-size: 0.92rem;
}
.footer-col ul a:hover {
  color: var(--signal-soft);
}
.footer-company address {
  font-style: normal;
  color: rgba(245, 241, 232, 0.76);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.footer-contact a {
  color: rgba(245, 241, 232, 0.82);
  font-size: 0.92rem;
}
.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(245, 241, 232, 0.16);
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.footer-copy {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(245, 241, 232, 0.58);
}
.footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 0.82rem;
  color: rgba(245, 241, 232, 0.58);
}
.footer-legal a:hover {
  color: var(--signal-soft);
}

.cookie-banner {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1rem;
  z-index: 300;
  display: grid;
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 rgba(17, 21, 25, 0.16);
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-title {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxide);
  margin-bottom: 0.35rem;
}
.cookie-banner p:not(.cookie-title) {
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.cookie-banner a {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--signal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.cookie-actions .btn {
  padding: 0.72em 1rem;
}
@media (min-width: 760px) {
  .cookie-banner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (min-width: 780px) {
  .footer-top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.6s var(--ease),
    translate 0.6s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Misc ---------- */
.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}
.text-steel {
  color: var(--steel);
}
.max-prose {
  max-width: 42em;
}
.mt-lg {
  margin-top: 3rem;
}