/* ==========================================================================
   LUMEZY landing page
   Dark, snapping, ten-screen single page. Values carried over verbatim from
   the Lumezy design canvas; the only additions are focus states and the
   media query that replaces the canvas runtime's JS-driven desktop/mobile flag.
   ========================================================================== */

:root {
  --acc: #C8FF2E;
  --ink: #F2F2EF;
  --bg: #050505;

  /* PT/EN toggle colours, swapped by main.js */
  --lz-pt: var(--acc);
  --lz-en: rgba(242, 242, 239, .4);

  --ease: cubic-bezier(.16, 1, .3, 1);

  --glass-bg: rgba(255, 255, 255, .038);
  --glass-bg-soft: rgba(255, 255, 255, .032);
  --glass-line: rgba(255, 255, 255, .1);
  --glass-line-soft: rgba(255, 255, 255, .09);
  --hairline: rgba(255, 255, 255, .07);

  --gap-card: clamp(12px, 1.4vw, 20px);

  /* Sections share a left gutter wide enough for the margin markers. */
  --sec-pad: clamp(100px, 13vh, 150px) clamp(20px, 5vw, 96px) clamp(60px, 9vh, 110px) clamp(58px, 7vw, 132px);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: Archivo, "Helvetica Neue", Helvetica, sans-serif;
  overflow: hidden;
}

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--ink); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

::selection { background: var(--acc); color: var(--bg); }

[hidden] { display: none !important; }

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

.lz-root {
  position: fixed;
  inset: 0;
  background: var(--bg);
  font-family: Archivo, "Helvetica Neue", Helvetica, sans-serif;
}

/* --------------------------------------------------------------- preloader */

.lz-pre {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(22px, 4vw, 58px);
  pointer-events: none;
  will-change: transform;
}

/* Returning visitors within the session skip it entirely, before first paint. */
.lz-seen .lz-pre { display: none; }

.lz-pre__mark {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(242, 242, 239, .42);
}

.lz-pre__num {
  font-size: clamp(58px, 13vw, 180px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .8;
  font-stretch: 112%;
  color: var(--ink);
}

/* ----------------------------------------------------- progress + grid ink */

.lz-prog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 140;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.lz-grid {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid rgba(255, 255, 255, .055);
}

.lz-grid > span { border-right: 1px solid rgba(255, 255, 255, .055); }

/* --------------------------------------------------------------------- nav */

.lz-nav {
  position: fixed;
  top: clamp(14px, 2vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  transition: transform .55s var(--ease), opacity .4s ease;
  width: min(calc(100vw - 28px), 1120px);
  display: flex;
  justify-content: center;
}

.lz-nav__pill {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  padding: 9px 9px 9px clamp(16px, 1.6vw, 24px);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-line);
  border-radius: 100px;
  max-width: 100%;
}

.lz-nav__brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.lz-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
}

.lz-nav__link {
  font-size: 13px;
  font-weight: 400;
  color: rgba(242, 242, 239, .6);
  cursor: pointer;
  white-space: nowrap;
}

.lz-nav__link:hover { color: var(--ink); }

.lz-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: clamp(4px, 1vw, 12px);
  border-left: 1px solid rgba(255, 255, 255, .12);
  margin-left: 2px;
}

.lz-lang__btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  cursor: pointer;
}

.lz-lang__btn--pt { color: var(--lz-pt); }
.lz-lang__btn--en { color: var(--lz-en); }

.lz-lang__sep { font-size: 11px; color: rgba(242, 242, 239, .24); }

.lz-cta-pill {
  padding: 11px clamp(14px, 1.5vw, 22px);
  background: var(--acc);
  color: var(--bg);
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: opacity .3s ease;
}

.lz-cta-pill:hover { color: var(--bg); opacity: .82; }

.lz-burger {
  width: 38px;
  height: 38px;
  display: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 100px;
  cursor: pointer;
  flex: 0 0 auto;
}

.lz-burger__bars {
  display: block;
  width: 14px;
  height: 1px;
  background: var(--ink);
  box-shadow: 0 -4px 0 var(--ink), 0 4px 0 var(--ink);
}

@media (max-width: 859px) {
  .lz-nav__links { display: none; }
  .lz-burger { display: grid; }
}

/* ---------------------------------------------------------- mobile overlay */

.lz-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 5, 5, .94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: clamp(24px, 7vw, 60px);
}

.lz-menu__close {
  position: absolute;
  top: clamp(20px, 4vw, 40px);
  right: clamp(20px, 4vw, 40px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 100px;
  font-size: 18px;
  cursor: pointer;
}

.lz-menu__link {
  text-align: left;
  font-size: clamp(34px, 9vw, 64px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.06;
  font-stretch: 108%;
  cursor: pointer;
}

.lz-menu__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 5vw, 48px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.lz-menu__foot .lz-lang__btn { font-size: 12px; letter-spacing: .16em; }

.lz-menu__mail {
  margin-left: auto;
  font-size: 14px;
  color: rgba(242, 242, 239, .6);
}

/* ---------------------------------------------------- section index + count */

.lz-hud {
  position: fixed;
  right: clamp(14px, 2.4vw, 34px);
  bottom: clamp(14px, 2.4vw, 34px);
  z-index: 130;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.lz-index {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-line);
  border-radius: 3px;
}

.lz-index__btn {
  font-size: 12px;
  color: rgba(242, 242, 239, .62);
  cursor: pointer;
  padding: 3px 0;
}

.lz-index__btn:hover { color: var(--ink); }

.lz-counter {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line);
  border-radius: 100px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

/* inline-block so the counter's roll-over transform applies */
.lz-counter__cur {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
}

.lz-counter__total { font-size: 11px; color: rgba(242, 242, 239, .34); }

/* ------------------------------------------------------------- the scroller */

.lz-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.lz-scroll::-webkit-scrollbar { width: 0; height: 0; }

.lz-section {
  position: relative;
  min-height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sec-pad);
  border-top: 1px solid var(--hairline);
}

.lz-marker {
  position: absolute;
  left: clamp(20px, 2.4vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3em;
  color: rgba(242, 242, 239, .3);
}

/* ------------------------------------------------------ shared type + parts */

.lz-h2 {
  margin: 0;
  font-size: clamp(34px, 6.4vw, 120px);
  font-weight: 500;
  letter-spacing: -.042em;
  line-height: .92;
  font-stretch: 106%;
}

.lz-h2--tight {
  max-width: 22ch;
  font-size: clamp(34px, 6.2vw, 116px);
  line-height: .94;
}

.lz-h2--narrow { max-width: 20ch; }

.lz-h2--statement {
  max-width: 26ch;
  font-size: clamp(30px, 5.2vw, 92px);
  letter-spacing: -.04em;
  line-height: 1;
  font-stretch: 104%;
  text-wrap: balance;
}

.lz-h2--cta {
  position: relative;
  max-width: 24ch;
  font-size: clamp(34px, 6.8vw, 128px);
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
}

.lz-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.lz-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(242, 242, 239, .34);
  padding-bottom: 10px;
}

/* "Selecione um projeto" labels the picker, so it sits on top of the picker
   rather than stranded against the right edge of the headline row. The
   bottom padding exists only to baseline it against an h2 — not needed here. */
.lz-eyebrow--rail { padding-bottom: 0; }

/* Entry reveals. GSAP takes these over when it loads; the transitions are the
   no-GSAP fallback path driven by the IntersectionObserver in main.js. */
[data-reveal="up"] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* ------------------------------------------------------------------- 01 hero */

.lz-section--hero {
  justify-content: flex-end;
  padding: clamp(96px, 14vh, 180px) clamp(20px, 5vw, 96px) clamp(74px, 11vh, 120px) clamp(58px, 7vw, 132px);
  overflow: hidden;
  border-top: 0;
}

.lz-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 45%;
  will-change: transform;
}

.lz-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.lz-shader--hero { opacity: .4; }
.lz-shader--cta { opacity: .3; }

.lz-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .8) 34%, rgba(5, 5, 5, .42) 62%, rgba(5, 5, 5, .58) 100%);
}

.lz-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, 0) 42%);
}

.lz-hero__copy {
  position: relative;
  max-width: min(1180px, 92%);
}

.lz-hero__title {
  margin: 0;
  font-size: clamp(42px, 7.6vw, 172px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .94;
  font-stretch: 106%;
  text-wrap: balance;
  transform: translateY(30px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.lz-hero__lead {
  margin: clamp(22px, 3vh, 38px) 0 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(242, 242, 239, .62);
  text-wrap: pretty;
  transform: translateY(24px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

/* --------------------------------------------------------------- 02 problema */

.lz-section--problem { gap: clamp(34px, 6vh, 72px); }

.lz-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-card);
  width: 100%;
}

.lz-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  border: 1px solid var(--glass-line);
  border-radius: 3px;
  flex: 1 1 calc(50% - var(--gap-card));
  min-width: min(100%, 272px);
  padding: clamp(22px, 2.4vw, 32px) clamp(18px, 1.8vw, 26px);
}

.lz-card__num {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  color: var(--acc);
  margin-bottom: 16px;
}

.lz-card__title {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.lz-card__text {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(242, 242, 239, .5);
}

/* --------------------------------------------------------------- 03 soluções */

.lz-section--solutions { gap: clamp(30px, 5vh, 60px); }

.lz-sol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--gap-card);
}

.lz-sol__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--glass-bg-soft);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-line-soft);
  border-radius: 3px;
  padding: clamp(22px, 2.4vw, 34px);
}

.lz-sol__num {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  color: var(--acc);
}

.lz-sol__title {
  margin: 0;
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.08;
}

.lz-sol__text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(242, 242, 239, .56);
}

.lz-sol__list {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.lz-sol__list li {
  font-size: 13px;
  font-weight: 300;
  color: rgba(242, 242, 239, .72);
}

/* --------------------------------------------------------------- 04 processo */

.lz-section--process { gap: clamp(34px, 6vh, 74px); }

.lz-steps-wrap { position: relative; }

.lz-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(30px, 4vh, 52px) 0;
}

.lz-step {
  position: relative;
  padding: 30px clamp(20px, 2.6vw, 44px) 0 0;
  border-top: 1px solid var(--glass-line-soft);
}

.lz-step__seg {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}

.lz-step__dot {
  position: absolute;
  top: -5.5px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acc);
  display: block;
  z-index: 1;
}

.lz-step__num {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  color: rgba(242, 242, 239, .36);
  margin-bottom: 12px;
}

.lz-step__title {
  margin: 0 0 10px;
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.lz-step__text {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(242, 242, 239, .52);
}

/* -------------------------------------------------------------- 05 trabalho */

.lz-section--work {
  gap: clamp(20px, 3.2vh, 38px);
  padding: clamp(84px, 10vh, 120px) clamp(20px, 5vw, 96px) clamp(44px, 6vh, 78px) clamp(58px, 7vw, 132px);
}

.lz-work {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 30px);
  align-items: flex-start;
}

.lz-work__list {
  flex: 1 1 296px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 15px);
}

.lz-work__row {
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.4vw, 22px);
  padding: clamp(13px, 1.4vw, 19px);
  min-height: clamp(78px, 7.4vw, 104px);
  background: var(--glass-bg-soft);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-line-soft);
  border-radius: 3px;
  opacity: .44;
  transition: opacity .55s var(--ease), border-color .55s var(--ease), background .4s ease;
}

.lz-work__row:hover { background: rgba(255, 255, 255, .062); }

.lz-work__row[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--acc);
}

.lz-work__thumb {
  flex: 0 0 auto;
  width: clamp(62px, 7vw, 104px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
  background: rgba(255, 255, 255, .05);
}

.lz-work__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lz-work__kind {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acc);
}

.lz-work__name {
  font-size: clamp(25px, 2.9vw, 44px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  font-stretch: 104%;
  /* A project name is one unbreakable word; without this a long one escapes
     the card instead of wrapping inside it. */
  overflow-wrap: anywhere;
}

/* The rail's width now comes from whatever the video leaves over, which no
   viewport formula tracks. Size its contents against the rail itself so the
   title can never be pushed out through the card's edge again. First
   declaration of each pair is the fallback for browsers without cq units. */
.lz-work__list { container-type: inline-size; }

.lz-work__thumb {
  width: clamp(62px, 7vw, 104px);
  width: clamp(62px, 20cqw, 148px);
}

.lz-work__name {
  font-size: clamp(25px, 2.9vw, 44px);
  font-size: clamp(24px, 6.5cqw, 44px);
}

/* --stage-h caps the frame's height; the stage is capped at the width that
   height implies at 16:9, so the frame is always exactly 16:9 with no
   letterboxing and the facts grid below lines up with its edges. */
.lz-work__stage {
  --stage-h: min(52vh, 600px);
  --stage-w: calc(var(--stage-h) * 16 / 9);
  flex: 1.7 1 430px;
  min-width: 0;
  max-width: var(--stage-w);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}

/* 52vh is what fits a 900px-tall screen once the facts row is accounted for.
   Taller screens have the headroom for a wider frame, which also takes up the
   slack that would otherwise sit empty to the right of it. */
@media (min-height: 1000px) {
  .lz-work__stage { --stage-h: min(56vh, 700px); }
}

.lz-work__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: var(--stage-h);
  border: 1px solid var(--glass-line);
  border-radius: 3px;
  overflow: hidden;
  background: #0a0a0a;
}

.lz-work__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity .7s var(--ease);
}

.lz-work__video--off { opacity: 0; }

/* Side by side, the video is pinned to the section's right edge — flush with
   the facts rule below it — and the picker absorbs all the slack to its left,
   so nothing is left floating mid-page. The video holds its ideal 16:9 width;
   only when the row runs out of room does it give way, the picker stopping at
   its 280px floor. Below this width the row wraps and both go full width.
   Placed after the base .lz-work__* rules so it wins the cascade. */
@media (min-width: 820px) {
  .lz-work { flex-wrap: nowrap; }
  .lz-work__list { flex: 1 1 280px; min-width: 280px; }
  .lz-work__stage { flex: 0 1 var(--stage-w); }
}

.lz-work__link {
  position: absolute;
  right: clamp(10px, 1.1vw, 17px);
  bottom: clamp(10px, 1.1vw, 17px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink);
  background: rgba(8, 8, 8, .6);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 100px;
}

.lz-work__link:hover { background: rgba(8, 8, 8, .86); }

/* Spans the whole section, under the picker and the video both, so the section
   closes on one rule and there is a single left edge shared with the headline.
   Narrow tracks keep all five facts on one line. */
.lz-work__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: clamp(11px, 1.2vw, 20px);
  padding-top: clamp(12px, 1.3vw, 17px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.lz-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lz-fact__k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 242, 239, .34);
}

.lz-fact__v {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(242, 242, 239, .78);
}

/* ----------------------------------------------------------------- 06 sobre */

.lz-section--about { gap: clamp(30px, 5vh, 60px); }

.lz-about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 2.8vw, 48px);
  padding-top: clamp(20px, 3vh, 36px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.lz-about__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lz-about__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--acc);
}

.lz-about__text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(242, 242, 239, .6);
  text-wrap: pretty;
}

.lz-about__mail {
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
}

.lz-about__mail:hover { color: var(--acc); }

.lz-about__place {
  font-size: 14px;
  font-weight: 300;
  color: rgba(242, 242, 239, .5);
}

.lz-about__cal {
  font-size: 14px;
  font-weight: 400;
  color: var(--acc);
}

/* ---------------------------------------------------------------- 07 porquê */

.lz-section--why { gap: clamp(30px, 5vh, 58px); }

.lz-why {
  position: relative;
  flex: 1 1 calc(50% - var(--gap-card));
  min-width: min(100%, 272px);
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  border: 1px solid var(--glass-line);
  border-radius: 3px;
  padding: clamp(24px, 2.8vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lz-why__ghost {
  position: absolute;
  right: clamp(-6px, -.4vw, 0px);
  bottom: -.22em;
  font-size: clamp(84px, 9vw, 150px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: .72;
  font-stretch: 112%;
  color: rgba(242, 242, 239, .05);
  pointer-events: none;
}

.lz-why__num {
  position: relative;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  color: var(--acc);
}

.lz-why__title {
  position: relative;
  margin: 0;
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  font-stretch: 104%;
}

.lz-why__text {
  position: relative;
  margin: 0;
  max-width: 32ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(242, 242, 239, .58);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------- 08 FAQ */

.lz-section--faq { gap: clamp(28px, 5vh, 54px); }

.lz-faq {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
  max-width: 1000px;
  width: 100%;
}

.lz-faq__item {
  background: var(--glass-bg-soft);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-line-soft);
  border-radius: 3px;
}

.lz-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: clamp(18px, 2vw, 28px);
  cursor: pointer;
}

.lz-faq__qtext {
  font-size: clamp(17px, 1.7vw, 25px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.lz-faq__sign {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 300;
  color: var(--acc);
}

.lz-faq__a {
  margin: 0;
  padding: 0 clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 30px);
  max-width: 66ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(242, 242, 239, .6);
}

/* ------------------------------------------------------------------- 09 CTA */

.lz-section--cta {
  gap: clamp(28px, 5vh, 52px);
  overflow: hidden;
}

.lz-cta__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 20%, rgba(5, 5, 5, .2) 0%, rgba(5, 5, 5, .86) 62%, #050505 100%);
}

.lz-cta__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  transform: translateY(24px);
}

.lz-btn {
  padding: 16px 30px;
  background: var(--acc);
  color: var(--bg);
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 600;
  transition: opacity .3s ease;
}

.lz-btn:hover { color: var(--bg); opacity: .82; }

.lz-link-underline {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 300;
  color: rgba(242, 242, 239, .66);
  border-bottom: 1px solid rgba(242, 242, 239, .24);
  padding-bottom: 2px;
}

.lz-link-underline:hover { color: var(--ink); }

/* ---------------------------------------------------------------- 10 footer */

.lz-section--footer {
  justify-content: space-between;
  gap: clamp(40px, 8vh, 90px);
  padding: clamp(100px, 13vh, 150px) clamp(20px, 5vw, 96px) clamp(52px, 7vh, 84px) clamp(58px, 7vw, 132px);
}

.lz-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
}

.lz-footer__mailwrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lz-footer__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(242, 242, 239, .34);
}

.lz-footer__mail {
  font-size: clamp(24px, 4.4vw, 72px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  font-stretch: 104%;
  color: var(--ink);
}

.lz-footer__mail:hover { color: var(--acc); }

.lz-footer__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.lz-footer__place {
  font-size: 13px;
  font-weight: 300;
  color: rgba(242, 242, 239, .5);
}

.lz-footer__cal { font-size: 13px; color: var(--acc); }

.lz-footer__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.lz-footer__lang .lz-lang__btn { letter-spacing: .14em; }

.lz-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 34px);
}

.lz-markclip {
  display: block;
  overflow: hidden;
}

.lz-mark {
  display: block;
  font-size: min(12.8vw, 200px);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: .8;
  font-stretch: 112%;
  color: var(--ink);
  white-space: nowrap;
}

.lz-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: clamp(16px, 2.4vh, 26px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11.5px;
  font-weight: 300;
  color: rgba(242, 242, 239, .36);
}

.lz-totop {
  font-size: 11.5px;
  font-weight: 300;
  color: rgba(242, 242, 239, .36);
  cursor: pointer;
}

.lz-totop:hover { color: var(--ink); }

/* ========================================================================
   Legal documents (privacidade / aviso legal)
   Plain scrolling pages. They borrow the landing page's tokens but none of
   its fixed-viewport machinery, so the body scrolls normally here.
   ======================================================================== */

body.lz-doc {
  overflow: auto;
  min-height: 100vh;
}

/* EN counterparts flip which side of the PT/EN pair is lit. */
.lz-doc--en {
  --lz-pt: rgba(242, 242, 239, .4);
  --lz-en: var(--acc);
}

.lz-doc__bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 5vw, 96px);
  background: rgba(5, 5, 5, .82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--hairline);
}

.lz-doc__brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
}

.lz-doc__brand:hover { color: var(--acc); }

.lz-doc__bar .lz-lang { border-left: 0; padding-left: 0; margin-left: 0; }

.lz-doc__wrap {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) clamp(20px, 5vw, 40px) clamp(60px, 10vh, 110px);
}

.lz-doc__title {
  margin: 0 0 14px;
  font-size: clamp(32px, 5.6vw, 64px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  font-stretch: 104%;
  text-wrap: balance;
}

.lz-doc__meta {
  margin: 0 0 clamp(36px, 6vh, 60px);
  padding-bottom: clamp(24px, 4vh, 38px);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 300;
  color: rgba(242, 242, 239, .44);
}

.lz-doc__wrap h2 {
  margin: clamp(38px, 6vh, 58px) 0 14px;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.lz-doc__wrap h3 {
  margin: 26px 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--acc);
}

.lz-doc__wrap p,
.lz-doc__wrap li {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(242, 242, 239, .68);
  text-wrap: pretty;
}

.lz-doc__wrap p { margin: 0 0 14px; }

.lz-doc__wrap ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.lz-doc__wrap li { margin-bottom: 8px; }

.lz-doc__wrap a { border-bottom: 1px solid rgba(200, 255, 46, .35); }

.lz-doc__wrap strong { font-weight: 600; color: var(--ink); }

/* Data the site owner still has to supply. Deliberately loud — this must be
   impossible to publish by accident. */
.lz-todo {
  background: rgba(200, 255, 46, .16);
  color: var(--acc);
  border: 1px dashed rgba(200, 255, 46, .5);
  border-radius: 2px;
  padding: 1px 6px;
  font-size: .92em;
  font-weight: 500;
  white-space: nowrap;
}

.lz-doc__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
}

.lz-doc__table th,
.lz-doc__table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(242, 242, 239, .68);
}

.lz-doc__table th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 242, 239, .38);
}

.lz-doc__scroll { overflow-x: auto; }

.lz-doc__foot {
  padding: clamp(28px, 4vh, 40px) clamp(20px, 5vw, 96px) clamp(36px, 5vh, 52px);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 300;
  color: rgba(242, 242, 239, .36);
}

.lz-doc__foot a { color: rgba(242, 242, 239, .55); }
.lz-doc__foot a:hover { color: var(--acc); }

.lz-doc__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* Footer legal row on the landing page */
.lz-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.lz-footer__links a {
  font-size: 11.5px;
  font-weight: 300;
  color: rgba(242, 242, 239, .36);
}

.lz-footer__links a:hover { color: var(--acc); }