/* ==========================================================================
   LMN/SYSTEMS  —  QUIET TECHNOLOGY
   Sistema visual: folha técnica, tipografia neo-grotesca, ciano como sinal.
   O ciano nunca preenche áreas: apenas sinaliza, conecta e orienta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 / TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* paleta oficial */
  --black:      #111418;
  --graphite:   #20262D;
  --paper:      #F2F5F7;
  --windows:	#F2F5F7;
  --cyan:       #19D3E2;
  --gray:       #5A6672;

  /* papéis (sobrescritos em seções escuras) */
  --ink:        var(--black);
  --bg:         var(--paper);
  --surface:    #FFFFFF;
  --meta:       var(--gray);
  --rule:       rgba(17, 20, 24, .13);
  --rule-hi:    rgba(17, 20, 24, .28);

  /* estrutura */
  --frame:      clamp(10px, 1.4vw, 22px);
  --pad:        clamp(20px, 5vw, 64px);
  --head-h:     58px;
  --maxw:       1320px;
  --gap:        clamp(28px, 4vw, 64px);
  --sec-y:      clamp(80px, 11vw, 168px);

  /* tipografia */
  --f-display:  'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-body:     'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:     'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --t-hero:     clamp(2.35rem, 6vw, 5.25rem);
  --t-h2:       clamp(1.55rem, 2.9vw, 2.75rem);
  --t-h3:       clamp(1.5rem, 2.4vw, 2.25rem);
  --t-lead:     clamp(1.0625rem, 1.15vw, 1.3125rem);
  --t-body:     clamp(0.9688rem, .32vw + .9rem, 1.0625rem);
  --t-mono:     0.6875rem;

  --e:          cubic-bezier(.22, .68, .18, 1);
}

/* --------------------------------------------------------------------------
   02 / RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + var(--frame) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: 'ss01', 'cv05';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: calc(var(--frame) + var(--head-h));
}

body.is-locked { overflow: hidden; }

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--cyan); color: var(--black); }

.skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--black);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform .2s var(--e);
}
.skip:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   03 / A FOLHA  —  elemento-assinatura
   Moldura técnica fixa, marcas de canto no eixo da barra ( / ),
   índice vivo da seção à esquerda e progresso de leitura à direita.
   -------------------------------------------------------------------------- */

.sheet, .index, .progress { position: fixed; z-index: 80; pointer-events: none; }

.sheet {
  inset: 0;
  overflow: hidden;
}

.sheet__frame {
  position: absolute;
  inset: var(--frame);

  border: 1px solid rgba(90, 102, 114, .42);

  /* Esconde tudo que passa por fora da janela */
  box-shadow: 0 0 0 100vmax var(--windows);
}

.sheet__tick {
  position: absolute;
  width: 13px; height: 13px;
  border: 0 solid var(--cyan);
}
.sheet__tick--bl {
  left: var(--frame); bottom: var(--frame);
  border-left-width: 2px; border-bottom-width: 2px;
  margin: 0 0 -1px -1px;
}
.sheet__tick--tr {
  right: var(--frame); top: var(--frame);
  border-right-width: 2px; border-top-width: 2px;
  margin: -1px -1px 0 0;
}

.index {
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: calc(var(--frame) + 6px);
  display: flex; justify-content: center;
}
.index__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gray);
  white-space: nowrap;
  transition: opacity .35s var(--e);
}

.progress {
  right: calc(var(--frame) / 2 - 0.5px);
  top: 22vh; bottom: 22vh;
  width: 1px;
  background: rgba(90, 102, 114, .3);
}
.progress__bar {
  display: block;
  width: 100%; height: 100%;
  background: var(--cyan);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .1s linear;
}

@media (max-width: 1179px) {
  .index, .progress { display: none; }
}

/* --------------------------------------------------------------------------
   04 / TIPOGRAFIA E ÁTOMOS
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.mono, .eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow { color: var(--meta); display: inline-flex; align-items: center; }
.eyebrow__n { color: var(--ink); }

/* a barra: dispositivo de conexão, sempre em ciano */
.s {
  color: var(--cyan);
  padding-inline: .5em;
  font-weight: 500;
}

.headline {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--ink);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
  max-width: 32ch;
}

.prose {
  color: var(--meta);
  max-width: 62ch;
}
.prose + .prose { margin-top: 1.1em; }
.headline + .prose { margin-top: clamp(18px, 1.9vw, 28px); }
.section--dark .prose { color: #9AA6B2; }

.footnote {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: .85em;
  font-family: var(--f-mono);
  font-size: .75rem;
  line-height: 1.7;
  color: var(--meta);
}
.footnote__mark { color: var(--cyan); flex: none; }
.footnote__text { max-width: 88ch; }

/* --------------------------------------------------------------------------
   05 / SEÇÕES E GRIDS
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--sec-y);
  background: var(--bg);
  color: var(--ink);
}
/*.section + .section { border-top: 0px solid var(--rule); }*/
.section + .section {
  position: relative;
  border-top: none;
}

.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  border-top: 1px solid var(--rule);
}

.section--dark {
  --ink: var(--paper);
  --bg: var(--black);
  --surface: var(--graphite);
  --meta: #8B98A5;
  --rule: rgba(242, 245, 247, .15);
  --rule-hi: rgba(242, 245, 247, .3);
  border-top-color: transparent;
}

.sechead {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(36px, 5vw, 72px);
}
.sechead__rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--e);
}
.sechead.is-in .sechead__rule { transform: scaleX(1); }

.grid { display: grid; gap: var(--gap); }

.grid--intro {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  margin-bottom: clamp(40px, 5.5vw, 80px);
}

.grid--about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .8fr); }

.grid--founder { grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); }

.grid--contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

@media (max-width: 1020px) {
  .grid--about   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid--about .col-head { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .grid--intro,
  .grid--about,
  .grid--founder,
  .grid--contact { grid-template-columns: minmax(0, 1fr); }
  .grid--intro { align-items: start; }
}

/* --------------------------------------------------------------------------
   06 / CABEÇALHO
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  top: var(--frame); left: var(--frame); right: var(--frame);
  height: var(--head-h);
  z-index: 100;
  background: rgba(242, 245, 247, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(14px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 24px;
}

.wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.wordmark__slash {
  color: var(--cyan);
  padding-inline: .06em;
  font-weight: 600;
}
.wordmark--lg { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: clamp(16px, 2.2vw, 34px); }
.nav__foot { display: none; }

.nav__link {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .15em;
  color: var(--gray);
  padding-block: 6px;
  position: relative;
  transition: color .25s var(--e);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--e);
}
.nav__link:hover { color: var(--black); }
.nav__link.is-active { color: var(--black); }
.nav__link.is-active::after,
.nav__link:hover::after { transform: scaleX(1); }

.masthead__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 22px;
  border-left: 1px solid var(--rule);
}

.state {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.state__dot {
  width: 5px; height: 5px;
  margin-right: 9px;
  background: var(--cyan);
  border-radius: 50%;
  animation: pulse 3.6s var(--e) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(25, 211, 226, .55); }
  55%      { opacity: .5; box-shadow: 0 0 0 5px rgba(25, 211, 226, 0); }
}

.lang {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--gray);
  display: inline-flex;
  gap: 3px;
}
.lang__on  { color: var(--black); }
.lang__sep { color: var(--rule-hi); }
.lang:hover .lang__off { color: var(--black); }

.burger { display: none; }

/* --------------------------------------------------------------------------
   07 / HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(52px, 8vw, 108px) clamp(56px, 7vw, 104px);
}
/*.hero + .section { border-top: 0px solid var(--rule); }*/
.hero + .section {
  position: relative;
  border-top: none;
}

.hero + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  border-top: 1px solid var(--rule);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(288px, .68fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.hero__title {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.042em;
  word-spacing: .06em;
  margin: clamp(20px, 2.6vw, 34px) 0 clamp(24px, 3vw, 40px);
}

.hero__lead { max-width: 40ch; }

.lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: clamp(28px, 3.4vw, 44px);
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--gray);
}
.lines li { padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--rule); }
.lines li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

@media (max-width: 640px) {
  .lines { flex-direction: column; gap: 7px; }
  .lines li { border-right: 0; margin-right: 0; padding-right: 0; }
}

.jump {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 68px);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  color: var(--black);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-hi);
  transition: border-color .3s var(--e);
}
.jump:hover { border-color: var(--cyan); }
.jump__arrow { color: var(--cyan); animation: nudge 2.6s var(--e) infinite; }
@keyframes nudge {
  0%, 70%, 100% { transform: translateY(0); }
  82%           { transform: translateY(3px); }
}

/* registro da companhia — bloco escuro derivado do brand board */
.record {
  background: var(--black);
  color: var(--paper);
  padding: clamp(24px, 2.6vw, 34px);
  position: relative;
}
.record__title {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .17em;
  color: var(--cyan);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(242, 245, 247, .16);
}
.record__mark { color: var(--cyan); font-style: normal; font-size: 1rem; line-height: 1; }

.record__list { padding-block: 6px; }
.record__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 14px;
  padding-block: 11px;
  border-bottom: 1px solid rgba(242, 245, 247, .09);
}
.record__row dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .13em;
  color: #7C8B99;
  padding-top: 2px;
}
.record__row dd {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--paper);
}
.record__row dd.is-signal {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--cyan);
  display: flex;
  align-items: center;
  padding-top: 3px;
}

.record__note {
  margin-top: 20px;
  font-size: .8125rem;
  line-height: 1.62;
  color: #8B98A5;
}
.record__stamp {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(242, 245, 247, .16);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .13em;
  color: #7C8B99;
}

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .record { margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   08 / 01 ABOUT
   -------------------------------------------------------------------------- */

.pull {
  border-top: 2px solid var(--cyan);
  padding-top: 20px;
}
.pull__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .17em;
  color: var(--meta);
  margin-bottom: 14px;
}
.pull__text {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}

.factlist { margin-top: clamp(32px, 3.6vw, 48px); }
.factlist__row { padding-block: 16px; border-top: 1px solid var(--rule); }
.factlist__row dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--meta);
  margin-bottom: 7px;
}
.factlist__row dd { font-size: .9375rem; line-height: 1.5; color: var(--ink); }

/* --------------------------------------------------------------------------
   09 / 02 SYSTEMS
   -------------------------------------------------------------------------- */

.systems { display: grid; gap: clamp(20px, 2.4vw, 32px); }

.system {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(22px, 3vw, 44px);
  transition: border-color .4s var(--e);
}
.system:hover { border-color: var(--rule-hi); }

.system__top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: clamp(22px, 2.4vw, 32px);
  border-bottom: 1px solid var(--rule);
}

.plate {
  flex: none;
  width: 46px; height: 46px;
  background: var(--black);
  color: var(--cyan);
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  display: grid;
  place-items: center;
}

.system__code { color: var(--meta); }

.system__cols {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: var(--gap);
  padding-block: clamp(26px, 3vw, 40px);
}

.system__name {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.05;
}
.system__desc {
  margin-top: 12px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--meta);
  max-width: 34ch;
}

/* ciclo de vida do sistema */
.cycle {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  padding-block: 20px;
  border-block: 1px solid var(--rule);
  flex-wrap: wrap;
}
.cycle__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .17em;
  color: var(--meta);
  flex: none;
}
.cycle__track {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  flex-wrap: wrap;
}
.cycle__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(90, 102, 114, .55);
  position: relative;
}
.cycle__step + .cycle__step::before {
  content: '';
  position: absolute;
  left: clamp(-22px, -1.6vw, -10px);
  width: clamp(8px, 1.4vw, 18px);
  height: 1px;
  background: var(--rule);
}
.cycle__dot {
  width: 7px; height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.cycle__step.is-done   { color: var(--meta); }
.cycle__step.is-done .cycle__dot { background: var(--meta); border-color: var(--meta); }
.cycle__step.is-active { color: var(--cyan); }
.cycle__step.is-active .cycle__dot {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(25, 211, 226, .18);
}

.system__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  padding-top: clamp(22px, 2.4vw, 32px);
  flex-wrap: wrap;
}

.datarows {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 14px clamp(24px, 3vw, 48px);
  min-width: min(100%, 460px);
}
.datarows__row--wide { grid-column: 1 / -1; }
.datarows dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--meta);
  margin-bottom: 6px;
}
.datarows dd {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--ink);
}
.datarows dd.is-signal { color: var(--cyan); }

.link-out {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule-hi);
  transition: border-color .3s var(--e), color .3s var(--e);
  white-space: nowrap;
}
.link-out i { font-style: normal; color: var(--cyan); transition: transform .3s var(--e); }
.link-out:hover { border-color: var(--cyan); }
.link-out:hover i { transform: translate(2px, -2px); }
.link-out--sm { font-size: 10px; letter-spacing: .14em; }
.link-out.is-muted {
  color: var(--meta);
  border-bottom-style: dashed;
  border-bottom-color: var(--rule);
}

@media (max-width: 880px) {
  .system__cols { grid-template-columns: minmax(0, 1fr); }
  .datarows { grid-template-columns: repeat(2, auto); }
}

/* --------------------------------------------------------------------------
   10 / 03 METHOD
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.step { position: relative; }
.step__code {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  color: var(--ink);
}
.step__rule {
  display: block;
  height: 1px;
  margin-block: 18px 22px;
  background: var(--rule);
  position: relative;
}
.step__rule::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--e) .15s;
}
.step.is-in .step__rule::after { transform: scaleX(1); }

.step__title {
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 12px;
}
.step__body {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--meta);
}

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   11 / 04 PRINCIPLES
   -------------------------------------------------------------------------- */

.principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.principle {
  padding: clamp(22px, 2.4vw, 34px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 210px;
  display: flex;
  flex-direction: column;
}
.principle__n {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--cyan);
  margin-bottom: 20px;
}
.principle__title {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .11em;
  line-height: 1.5;
  color: var(--ink);
  min-height: 2.25rem;
  margin-bottom: 14px;
}
.principle__body {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--meta);
}

.principle--sign {
  background: var(--black);
  color: var(--paper);
  justify-content: space-between;
}
.principle__slash {
  font-family: var(--f-display);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
}
.principle__sign {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .17em;
  line-height: 1.9;
  color: #7C8B99;
}
.principle__sign span { color: var(--cyan); }

@media (max-width: 1100px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle { min-height: 0; }
}

/* --------------------------------------------------------------------------
   12 / 05 FOUNDER
   -------------------------------------------------------------------------- */

.founder__card {
  border: 1px solid var(--rule);
  padding: clamp(24px, 2.6vw, 34px);
  align-self: start;
  position: sticky;
  top: calc(var(--head-h) + var(--frame) + 32px);
}
.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--black);
  color: var(--paper);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -.03em;
  white-space: nowrap;
  margin-bottom: 26px;
}
.monogram i { color: var(--cyan); font-style: normal; }

.founder__name {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.founder__role {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--meta);
}
.founder__rule { display: block; height: 1px; background: var(--rule); margin-block: 22px; }
.founder__loc {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--meta);
  margin-bottom: 20px;
}
.founder__links { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

.founder__text .prose { margin-top: 1.4em; }

.quote {
  margin: clamp(32px, 3.6vw, 48px) 0 0;
  padding-left: clamp(20px, 2.4vw, 32px);
  border-left: 2px solid var(--cyan);
}
.quote p {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: var(--ink);
}
.quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--meta);
}

@media (max-width: 760px) { .founder__card { position: static; } }

/* --------------------------------------------------------------------------
   13 / 06 NOTES
   -------------------------------------------------------------------------- */

.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.note {
  border-top: 2px solid var(--ink);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.note__kind {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--meta);
}
.note__title {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.22;
  margin-block: 16px 12px;
}
.note__body { font-size: .9375rem; line-height: 1.58; color: var(--meta); }
.note__state {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--meta);
  display: flex;
  align-items: center;
  gap: 9px;
}
.note__state::before {
  content: '';
  width: 6px; height: 6px;
  border: 1px solid var(--meta);
  border-radius: 50%;
}

@media (max-width: 880px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .notes { grid-template-columns: minmax(0, 1fr); } .note { min-height: 0; } }

/* --------------------------------------------------------------------------
   14 / 07 CONTACT
   -------------------------------------------------------------------------- */

.section--contact { padding-bottom: clamp(64px, 8vw, 120px); }

.contact__block {
  border: 1px solid var(--rule);
  padding: clamp(24px, 2.8vw, 40px);
}
.contact__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .17em;
  color: var(--cyan);
  margin-bottom: 14px;
}
.contact__email {
  display: inline-block;
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--ink);
  word-break: break-word;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-hi);
  transition: border-color .3s var(--e);
}
.contact__email:hover { border-color: var(--cyan); }

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: clamp(28px, 3vw, 38px);
}
.contact__note {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--meta);
}

/* --------------------------------------------------------------------------
   15 / RODAPÉ
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  background: var(--black);
  color: var(--paper);
  padding-block: clamp(52px, 6vw, 88px) clamp(28px, 3vw, 40px);
  border-top: none;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 1px;
  background: rgba(242, 245, 247, .15);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 80px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer__descriptor {
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan);
}
.footer__boiler {
  margin-top: 20px;
  font-size: .875rem;
  line-height: 1.62;
  color: #8B98A5;
  max-width: 46ch;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.45fr 1.45fr;
  gap: clamp(20px, 2.4vw, 36px);
}
.footer__title {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .17em;
  color: #6E7C8A;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(242, 245, 247, .15);
}
.footer__col li + li { margin-top: 11px; }
.footer__col a {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B4BFC9;
  transition: color .25s var(--e);
  display: inline-block;
  overflow-wrap: break-word;
  max-width: 100%;
}
.footer__col a:hover { color: var(--cyan); }
.footer__col a[aria-current="true"] { color: var(--paper); }

.footer__band {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-block: 22px;
  border-block: 1px solid rgba(242, 245, 247, .15);
}
.footer__band span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #8B98A5;
  padding-right: clamp(18px, 3vw, 44px);
  margin-right: clamp(18px, 3vw, 44px);
  border-right: 1px solid rgba(242, 245, 247, .15);
}
.footer__band span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 3vw, 40px);
  padding-top: 24px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E7C8A;
}
.footer__tag { margin-left: auto; color: var(--cyan); }

@media (max-width: 900px) {
  .footer__top  { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__tag  { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   16 / MOVIMENTO
   Revelação lenta e intencional. Nada de partículas, glitch ou parallax.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .85s var(--e), transform .85s var(--e);
}
.reveal.is-in { opacity: 1; transform: none; }

.system.reveal  { transform: translateY(20px); }
.record.reveal  { transition-delay: .12s; }

/* --------------------------------------------------------------------------
   17 / NAVEGAÇÃO MÓVEL
   -------------------------------------------------------------------------- */

@media (max-width: 940px) {
  .masthead__meta { display: none; }

  .burger {
    display: grid;
    place-content: center;
    gap: 5px;
    margin-left: auto;
    width: 40px; height: 40px;
    margin-right: -8px;
  }
  .burger__bar {
    display: block;
    width: 20px; height: 1.5px;
    background: var(--black);
    transition: transform .3s var(--e), opacity .3s var(--e);
  }
  .burger[aria-expanded="true"] .burger__bar:first-child { transform: translateY(3.25px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

  .nav {
    position: fixed;
    top: calc(var(--frame) + var(--head-h));
    left: var(--frame); right: var(--frame);
    max-height: calc(100dvh - var(--head-h) - var(--frame) * 2);
    overflow-y: auto;
    margin-left: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 12px clamp(14px, 4vw, 48px) 26px;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .45s var(--e);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }

  .nav__list { flex-direction: column; gap: 0; }
  .nav__link {
    display: block;
    padding-block: 16px;
    font-size: .8125rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__link::after { display: none; }

  .nav__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
  }
  .lang--inline { font-size: var(--t-mono); letter-spacing: .16em; color: var(--black); }
}

/* --------------------------------------------------------------------------
   18 / PREFERÊNCIAS E IMPRESSÃO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .sechead__rule { transform: scaleX(1); }
  .step__rule::after { transform: scaleX(1); }
}

@media print {
  .sheet, .index, .progress, .masthead, .jump { display: none !important; }
  body { padding-top: 0; }
  .section, .footer, .record, .principle--sign { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}