/* Strategic experience refinement.
   Motion encodes the intelligence model: external signals circulate, Brazilian
   context acts as a middle interpretive layer, and organizational context pulls
   evidence toward the intelligence core. Controls stay quiet; the field is the
   single expressive moment. */

/* Long offer names need breathing room in the disclosure menu. */
.nav-sub-offer,
#nav-sub-offer { min-width: min(31rem, 82vw); }
#nav-sub-offer a { white-space: normal; line-height: 1.25; }

/* --------------------------------------------------------------------------
   Signature intelligence field
   -------------------------------------------------------------------------- */
.si-hero-visual {
  position: relative;
  min-height: min(46rem, 72vw);
  display: grid;
  place-items: center;
}
.si-hero-visual::before {
  content: "";
  position: absolute;
  width: min(84%, 31rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--meridian) 10%, transparent), transparent 62%);
  filter: blur(34px);
  opacity: .55;
  pointer-events: none;
}
.si-field {
  --mx: 0;
  --my: 0;
  --field-scale: 1;
  width: min(100%, 38rem);
  perspective: 1100px;
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(calc(var(--my) * -3.2deg))
    rotateY(calc(var(--mx) * 4.2deg))
    scale(var(--field-scale));
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.si-field::before {
  inset: 6%;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--electric) 8%, transparent) 0 18%, transparent 19%),
    radial-gradient(circle at center, transparent 0 34%, color-mix(in srgb, var(--royal) 7%, transparent) 35% 36%, transparent 37% 100%);
  filter: blur(.2px);
  opacity: .85;
}
.si-field::after {
  inset: 49.5% 1%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--line-strong) 82%, transparent), transparent);
  opacity: .38;
}

.si-orbit {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--paper) 4%, transparent) inset,
    0 18px 52px color-mix(in srgb, var(--ink) 5%, transparent);
  transform-style: preserve-3d;
  will-change: rotate, filter;
}
.si-orbit::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 72%, color-mix(in srgb, var(--electric) 82%, transparent) 82%, transparent 91% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .58;
  pointer-events: none;
}
.si-orbit span {
  z-index: 4;
  padding: .55rem .75rem;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border-color: color-mix(in srgb, var(--line-strong) 70%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 7%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
}
.orbit-a { width: 94%; height: 94%; }
.orbit-a span { left: 2%; top: 63%; }
.orbit-b { width: 70%; height: 70%; border-color: color-mix(in srgb, var(--royal) 42%, var(--line-strong)); }
.orbit-b span { right: -8%; top: 12%; }
.orbit-c { width: 45%; height: 45%; border-color: color-mix(in srgb, var(--electric) 46%, var(--line-strong)); }
.orbit-c span { left: -24%; bottom: -12%; }

.si-core {
  width: 6.35rem;
  height: 6.35rem;
  background: color-mix(in srgb, var(--paper) 88%, var(--ink) 12%);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  box-shadow:
    0 0 0 .9rem color-mix(in srgb, var(--meridian) 7%, transparent),
    0 0 0 2.2rem color-mix(in srgb, var(--electric) 3%, transparent),
    0 22px 70px color-mix(in srgb, var(--ink) 13%, transparent);
}
.si-core b { font-size: 2rem; }
.si-core small { color: var(--ink-2); opacity: .86; }

.si-node {
  width: .44rem;
  height: .44rem;
  z-index: 5;
  will-change: transform, opacity;
}
.si-node::after {
  content: "";
  position: absolute;
  inset: -.5rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .18;
}

/* Ambient movement: the three layers move at different speeds and directions.
   Counter-rotation keeps labels legible while the system moves beneath them. */
@media (prefers-reduced-motion: no-preference) {
  .si-field.is-live .orbit-a { animation: ab-orbit-a 34s linear infinite; }
  .si-field.is-live .orbit-a span { animation: ab-counter-a 34s linear infinite; }
  .si-field.is-live .orbit-b { animation: ab-orbit-b 27s linear infinite; }
  .si-field.is-live .orbit-b span { animation: ab-counter-b 27s linear infinite; }
  .si-field.is-live .orbit-c { animation: ab-orbit-c 21s linear infinite; }
  .si-field.is-live .orbit-c span { animation: ab-counter-c 21s linear infinite; }
  .si-field.is-live .si-orbit::after { animation: ab-sweep 8s linear infinite; }
  .si-field.is-live .si-core { animation: ab-core 5.8s ease-in-out infinite; }
  .si-field.is-live .si-node { animation: ab-node 4.8s ease-in-out infinite; }
  .si-field.is-live .si-node.n2 { animation-delay: -.9s; }
  .si-field.is-live .si-node.n3 { animation-delay: -1.8s; }
  .si-field.is-live .si-node.n4 { animation-delay: -2.7s; }
  .si-field.is-live .si-node.n5 { animation-delay: -3.6s; }

  @keyframes ab-orbit-a { from { rotate: -12deg; } to { rotate: 348deg; } }
  @keyframes ab-counter-a { from { rotate: 12deg; } to { rotate: -348deg; } }
  @keyframes ab-orbit-b { from { rotate: 19deg; } to { rotate: -341deg; } }
  @keyframes ab-counter-b { from { rotate: -19deg; } to { rotate: 341deg; } }
  @keyframes ab-orbit-c { from { rotate: -30deg; } to { rotate: 330deg; } }
  @keyframes ab-counter-c { from { rotate: 30deg; } to { rotate: -330deg; } }
  @keyframes ab-sweep { to { transform: rotate(360deg); } }
  @keyframes ab-core {
    0%,100% { transform: scale(1); box-shadow: 0 0 0 .9rem color-mix(in srgb, var(--meridian) 7%, transparent), 0 0 0 2.2rem color-mix(in srgb, var(--electric) 3%, transparent), 0 22px 70px color-mix(in srgb, var(--ink) 13%, transparent); }
    50% { transform: scale(1.025); box-shadow: 0 0 0 1.15rem color-mix(in srgb, var(--meridian) 10%, transparent), 0 0 0 2.7rem color-mix(in srgb, var(--electric) 5%, transparent), 0 26px 78px color-mix(in srgb, var(--ink) 16%, transparent); }
  }
  @keyframes ab-node {
    0%,100% { transform: scale(.72); opacity: .42; }
    46% { transform: scale(1.25); opacity: 1; }
    62% { transform: scale(.9); opacity: .68; }
  }
}

/* --------------------------------------------------------------------------
   Three-pillar services architecture
   -------------------------------------------------------------------------- */
.services-v3 { overflow: clip; }
.offer-v3-head { padding-bottom: clamp(3rem, 7vw, 6rem); }
.offer-v3-head h1 { max-width: 13ch; font-size: clamp(3rem, 7vw, 6.7rem); letter-spacing: -.055em; line-height: .95; }
.offer-v3-head .lead { max-width: 64ch; }

.offer-v3-stack {
  width: min(100%, 76rem);
  margin-top: clamp(3.5rem, 8vw, 7rem);
  perspective: 1200px;
  display: grid;
  gap: .65rem;
}
.offer-v3-layer {
  --lift: 0px;
  min-height: 7rem;
  display: grid;
  grid-template-columns: 4rem minmax(0,1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.1rem, 2.3vw, 1.8rem) clamp(1.2rem, 3vw, 2.4rem);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 91%, transparent);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--ink) 5%, transparent);
  transform: translate3d(calc(var(--layer-offset, 0px)), var(--lift), 0);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .2s ease, background .2s ease;
}
.offer-v3-layer[data-layer="1"] { --layer-offset: 0px; }
.offer-v3-layer[data-layer="2"] { --layer-offset: clamp(.65rem, 2vw, 1.5rem); }
.offer-v3-layer[data-layer="3"] { --layer-offset: clamp(1.3rem, 4vw, 3rem); }
.offer-v3-layer:hover,
.offer-v3-layer:focus-visible { --lift: -5px; border-color: var(--line-strong); background: var(--paper-2); }
.offer-v3-layer > span { font: 500 var(--fs-1)/1 var(--font-mono); color: var(--ink-3); }
.offer-v3-layer strong { font-size: clamp(1.2rem, 2vw, 1.85rem); letter-spacing: -.025em; }
.offer-v3-layer small { font: 500 .72rem/1.2 var(--font-mono); letter-spacing: .1em; color: var(--ink-3); text-align: right; }

.offer-v3-model { background: color-mix(in srgb, var(--paper-2) 78%, transparent); }
.offer-v3-model .grid { align-items: end; }
.offer-v3-model h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); max-width: 13ch; letter-spacing: -.045em; line-height: .98; }
.offer-v3-model .lead { margin: 0; align-self: end; }

.offer-v3-list { padding-top: 0; }
.offer-v3 { display: grid; grid-template-columns: minmax(8rem, .26fr) minmax(0, 1fr); border-top: 1px solid var(--line-strong); padding: clamp(4rem, 9vw, 8rem) 0; opacity: .56; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.offer-v3:last-child { border-bottom: 1px solid var(--line-strong); }
.offer-v3.in-view { opacity: 1; transform: translateY(0); }
.offer-v3-rail { position: sticky; top: 7rem; align-self: start; display: grid; gap: 1rem; padding-right: 2rem; }
.offer-v3-num { font: 500 clamp(2.5rem, 5vw, 5.5rem)/.9 var(--font-mono); letter-spacing: -.08em; color: var(--line-strong); }
.offer-v3-role { max-width: 14ch; font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .12em; color: var(--ink-3); }
.offer-v3[data-offer="2"] .offer-v3-num { color: var(--meridian); }
.offer-v3[data-offer="3"] .offer-v3-num { color: var(--royal); }
.offer-v3-body h2 { max-width: 17ch; font-size: clamp(2.1rem, 4.4vw, 4.4rem); letter-spacing: -.045em; line-height: .98; }
.offer-v3-lead { max-width: 62ch; margin-top: var(--s-5); font-size: clamp(1.1rem, 1.9vw, 1.45rem); color: var(--ink-2); }
.offer-v3-relation { max-width: 62ch; margin-top: var(--s-4); padding-left: 1rem; border-left: 2px solid var(--line-strong); color: var(--ink-2); }
.offer-v3-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(3rem, 6vw, 5rem); }
.offer-v3-grid > div { min-width: 0; }
.offer-v3-grid ul { margin: 1rem 0 0; padding-left: 1.1rem; columns: 2; column-gap: 2.4rem; }
.offer-v3-grid li { break-inside: avoid; margin-bottom: .7rem; color: var(--ink-2); }
.offer-v3-actions { margin-top: var(--s-6); }

@media (max-width: 900px) {
  .si-hero-visual { min-height: auto; }
  .si-field { width: min(88vw, 34rem); }
  .offer-v3-layer { grid-template-columns: 2.5rem 1fr; }
  .offer-v3-layer small { grid-column: 2; text-align: left; }
  .offer-v3-layer[data-layer="2"], .offer-v3-layer[data-layer="3"] { --layer-offset: 0px; }
  .offer-v3 { grid-template-columns: 1fr; gap: 2rem; }
  .offer-v3-rail { position: static; display: flex; align-items: baseline; justify-content: space-between; padding: 0; }
  .offer-v3-grid { grid-template-columns: 1fr; }
  .offer-v3-grid ul { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .si-field,
  .si-orbit,
  .si-orbit span,
  .si-orbit::after,
  .si-core,
  .si-node,
  .offer-v3,
  .offer-v3-layer { animation: none !important; transition-duration: .01ms !important; transform: none !important; }
  .offer-v3 { opacity: 1; }
}