:root { --p: #6d64ff; --y: #fcc339; --void: #0a0c12; }
html { background-color: #0a0c12; color-scheme: dark; }
body { background-color: var(--void); color: #fff; overscroll-behavior: none; }
body > header.fixed { background-color: rgba(10,12,18,.94); border: 0; border-bottom: 1px solid rgba(255,255,255,.06); transition: background-color .35s ease, box-shadow .35s ease; }
body > header.is-scrolled { background-color: #0a0c12; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
body > header a:focus-visible, body > header button:focus-visible { outline: 2px solid #a39bff; outline-offset: 6px; border-radius: 3px; }
.brand-header-lockup { -webkit-user-select: none; user-select: none; }
.brand-header-lockup img { -webkit-user-drag: none; }
.brand-header-lockup .brand-header-logo { display: block; width: 5.8rem; height: auto; flex: 0 0 auto; }

/* Prevent horizontal scroll from decorative off-screen glows/blurs.
   clip (not hidden) keeps position:sticky working. */
html, body { overflow-x: hidden; overflow-x: clip; }

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

/* ─── CINEMATIC BACKGROUND SYSTEM (From index9) ─── */
.master-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--void);
  overflow: hidden; /* clip the oversized 200vw ambient-mesh so it can't trigger horizontal scroll on mobile */
}

/* Closed mobile-menu drawer sits off-screen (translate-x-full); clip it so the
   fixed subtree can't extend the scrollable width on mobile. */
#mobile-menu { overflow-x: clip; }
.master-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: blur(40px) saturate(1.3); transition: opacity 2s ease, filter 2s ease;
}
.master-bg img.active { opacity: 0.45; filter: blur(15px) saturate(1.3); z-index: 10; }
.master-bg img { transform: translate3d(var(--bg-x, 0px), calc(var(--bg-y, 0px) + var(--bg-scroll-y, 0px)), 0) scale(1.08); transition: opacity 2s ease, filter 2s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }

.ambient-mesh {
  position: fixed; top: -50%; left: -50%; width: 200vw; height: 200vh;
  background: 
    radial-gradient(circle at 30% 50%, rgba(109,100,255,0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(252,195,57,0.2) 0%, transparent 50%);
  filter: blur(100px); z-index: -1; animation: meshFlow 20s infinite alternate ease-in-out; pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes meshFlow { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(30deg) scale(1.1); } }

/* ─── GLASSMORPHIC PANELS (From index9) ─── */
.glass-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 40px rgba(0,0,0,0.4);
  border-radius: 24px; transition: transform 0.5s ease, border-color 0.5s ease;
  position: relative; overflow: hidden;
}
.glass-panel:hover { border-color: rgba(255,255,255,0.25); box-shadow: 0 30px 60px rgba(0,0,0,0.6); }

.glass-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(60px); opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; mix-blend-mode: screen; z-index: 0;
}
.glass-panel:hover .glass-glow { opacity: 0.8; transform: scale(1.2); }
.glass-content { position: relative; z-index: 10; }

/* ─── THE FLAWLESS SKEW BUTTON ─── */
.btn-skew {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 40px; background: transparent; color: #fff; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem;
  border: 1px solid rgba(109,100,255,0.4); overflow: hidden; transition: all 0.4s; cursor: pointer;
  border-radius: 999px; backdrop-filter: blur(10px);
}
.btn-skew .bg-skew {
  position: absolute; top: -10%; left: -20%; width: 140%; height: 120%; 
  background: linear-gradient(90deg, var(--p), var(--y));
  transform: translateX(-100%) skewX(-15deg); 
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); z-index: -1;
}
.btn-skew:hover .bg-skew { transform: translateX(0) skewX(-15deg); }
.btn-skew:hover { border-color: transparent; box-shadow: 0 0 40px rgba(109,100,255,0.4); transform: translateY(-2px); }

.btn-skew-ghost {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem;
  border: 1px solid rgba(255,255,255,0.2); transition: all 0.4s; cursor: pointer; overflow: hidden;
  border-radius: 999px; color: rgba(255,255,255,0.7); backdrop-filter: blur(10px); background: rgba(255,255,255,0.03);
}
.btn-skew-ghost::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 100%;
  background: rgba(255,255,255,0.1); transition: width 0.4s cubic-bezier(0.16,1,0.3,1); z-index: -1;
}
.btn-skew-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.4); box-shadow: 0 10px 30px rgba(255,255,255,0.1); transform: translateY(-2px); }
.btn-skew-ghost:hover::after { width: 100%; }

/* ─── REVEALS ─── */
.reveal-host { opacity: 0; transition: opacity 0.1s; } 
.reveal-host.in { opacity: 1; }

.reveal-mask {
  /* overflow:hidden clips the inner while it slides up from translateY(110%).
     The mask must be tall enough that the pre-reveal inner (displaced ~110% downward)
     doesn't peek through the bottom padding — opacity:0 + blur makes the tiny
     sub-pixel overlap invisible in practice. */
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  padding-top: 0.08em;
  padding-bottom: 0.14em;
}
.reveal-mask-inner {
  display: inline-block; transform: translateY(110%);
  filter: blur(10px) brightness(2); opacity: 0;
  /* padding-bottom extends the element box below the tight line-height so that
     bg-clip-text gradients cover glyph descenders (g, y, p, etc.).
     Without this, text-transparent + bg-clip-text leaves descenders invisible
     because background-image only paints inside the element box, which at
     line-height:1 ends above where the ink actually reaches. */
  padding-bottom: 0.22em;
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1), filter 1.4s cubic-bezier(0.16,1,0.3,1), opacity 1.4s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, filter, opacity;
}
.reveal-mask-inner.text-transparent,
.reveal-mask-inner.gradient-shimmer {
  line-height: 1.18;
  padding-bottom: 0.32em;
}
.in .reveal-mask-inner { transform: translateY(0); filter: blur(0) brightness(1); opacity: 1; text-shadow: none; }

.reveal-fade { 
  opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(15px);
  transition: all 1.4s cubic-bezier(0.16,1,0.3,1); will-change: transform,opacity,filter; 
}
.reveal-fade.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.d-1 { transition-delay: 200ms; } .d-2 { transition-delay: 400ms; } .d-3 { transition-delay: 600ms; }

/* ─── GRADIENT SHIMMER ─── */
.gradient-shimmer {
  background-size: 200% auto;
  animation: colorSweep 8s ease-in-out infinite;
  animation-delay: 2s; /* Wait for initial reveal to finish */
}
@keyframes colorSweep {
  0%, 80% { 
    background-position: 0% 50%; 
  }
  90% { 
    background-position: 100% 50%;
  }
  100% { 
    background-position: 0% 50%; 
  }
}

/* ─── MASSIVE EDITORIAL NUMBERS (From index6) ─── */
.massive-number {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  font-size: clamp(8rem, 15vw, 16rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em;
  color: rgba(255,255,255,0.03); pointer-events: none; z-index: 0; transition: color 0.5s; mix-blend-mode: overlay;
}
.glass-panel:hover .massive-number { color: rgba(255,255,255,0.1); }

/* ─── FRAMEWORK ABSTRACT GRIDS ─── */
.bg-grid-p {
  background-image: 
    linear-gradient(to right, rgba(109, 100, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(109, 100, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-grid-y {
  background-image: 
    linear-gradient(to right, rgba(252, 195, 57, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252, 195, 57, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

.kicker { font-family:'Space Mono', monospace; font-size:0.75rem; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:var(--p); }

/* ─── HERO LOGO: gradient shimmer via mask ─── */
.hero-logo-wrap {
  position: relative;
}

.hero-pretitle {
  position: relative; /* anchor for .hero-fly */
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 30;
}

/* Clear the fixed header (backdrop-blur) so the fly-by's top lane stays visible */
@media (min-width: 768px) {
  .hero-pretitle { margin-top: 3.5rem; }
}

.hero-logo-gradient {
  width: 320px;
  aspect-ratio: 1080 / 535; /* ajuste se precisar */
  opacity: 0.96;

  background:
    linear-gradient(
      90deg,
      #7c73ff 0%,
      #f3f4ff 18%,
      #ffffff 34%,
      #b9b4ff 52%,
      #ffffff 68%,
      #8a82ff 82%,
      #ffffff 100%
    );
  background-size: 220% 100%;
  background-position: 0% 50%;

  -webkit-mask-image: url("assets/logos/acquiris_marca1080.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("assets/logos/acquiris_marca1080.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  filter:
    drop-shadow(0 0 22px rgba(255,255,255,0.10))
    drop-shadow(0 0 42px rgba(109,100,255,0.10));

  animation:
    heroLogoReveal 1.15s cubic-bezier(0.16,1,0.3,1) forwards,
    heroLogoSweep 8s ease-in-out infinite 1.4s;
}

@media (min-width: 768px) {
  .hero-logo-gradient { width: 430px; }
}

@media (min-width: 1024px) {
  .hero-logo-gradient { width: 580px; }
}

@media (min-width: 1280px) {
  .hero-logo-gradient { width: 680px; }
}

/* reveal curto e elegante */
.hero-logo-reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  filter: blur(10px);
  animation:
    heroLogoReveal 1.15s cubic-bezier(0.16,1,0.3,1) forwards,
    heroLogoGlow 6s ease-in-out infinite 1.2s;
}

@keyframes heroLogoReveal {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    filter: blur(10px);
  }
  100% {
    opacity: 0.96;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* shimmer parecido com o do texto */
@keyframes heroLogoSweep {
  0%, 80%, 100% {
    background-position: 0% 50%;
  }
  90% {
    background-position: 100% 50%;
  }
}

@keyframes heroLogoGlow {
  0%, 100% {
    filter:
      blur(0)
      brightness(1)
      drop-shadow(0 0 22px rgba(255,255,255,0.10))
      drop-shadow(0 0 42px rgba(109,100,255,0.10));
  }

  50% {
    filter:
      blur(0)
      brightness(1.08)
      drop-shadow(0 0 28px rgba(255,255,255,0.18))
      drop-shadow(0 0 60px rgba(109,100,255,0.25));
  }
}


.hero-pretitle-text {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  text-align: center;
  text-shadow: 0 0 10px rgba(255,255,255,0.10);
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  animation: pretitleReveal 1s ease forwards;
  animation-delay: 0.2s;
}

@keyframes pretitleReveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ─── HERO: ACQUIRIS FLY-BY ─── */
/* Words drift gently in two lanes — above and below the pretitle text —
   in a canon: while one fades out above, the next is already fading in
   below. Short travel near the center, slow and quiet.
   Pure CSS: 8 staggered animations share one 48s cycle; each word is
   active for 12s (25% of its timeline), starting 6s apart, so two words
   overlap at any moment. */
.hero-fly {
  position: absolute; inset: 0;
  pointer-events: none; user-select: none;
}
.hero-fly span {
  position: absolute; left: 50%; top: 50%;
  font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
  font-size: clamp(2rem, 3vw, 3rem);
  color: rgba(255,255,255,0.06);
  opacity: 0;
  transform: translate(calc(-50% + 5vw), var(--lane-ty));
  animation: heroFlyWord 48s linear infinite;
  animation-delay: calc(var(--i) * 6s);
  will-change: transform, opacity;
}
/* Alternating lanes relative to the pretitle text center */
.hero-fly span:nth-child(odd)  { --lane-ty: calc(-50% - 2.75rem); }
.hero-fly span:nth-child(even) { --lane-ty: calc(-50% + 2.75rem); }
.hero-fly span b {
  font-weight: 800;
  color: rgba(124,115,255,0.25);
  animation: heroFlyCap 48s linear infinite;
  animation-delay: calc(var(--i) * 6s);
}
@keyframes heroFlyWord {
  0%        { transform: translate(calc(-50% + 5vw), var(--lane-ty)); opacity: 0; }
  8%        { opacity: 1; }
  17%       { opacity: 1; }
  25%, 100% { transform: translate(calc(-50% - 5vw), var(--lane-ty)); opacity: 0; }
}
/* Initial breathes softly while the word holds near center */
@keyframes heroFlyCap {
  0%, 9%       { color: rgba(124,115,255,0.25); text-shadow: 0 0 0 rgba(109,100,255,0); }
  11.5%, 13.5% { color: rgba(180,172,255,0.75); text-shadow: 0 0 14px rgba(109,100,255,0.55), 0 0 30px rgba(109,100,255,0.3); }
  16%, 100%    { color: rgba(124,115,255,0.25); text-shadow: 0 0 0 rgba(109,100,255,0); }
}
/* The words are too large for phone widths. */
@media (max-width: 767px) {
  .hero-fly { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fly { display: none; }
  .hero-logo-reveal {
    animation: heroLogoReveal 1.15s cubic-bezier(0.16,1,0.3,1) forwards;
  }
}

/* ACQUAIRIS local brand experiment. The original site is preserved separately. */
.acquairis-main { --brand-line: rgba(255,255,255,.17); --brand-muted: rgba(255,255,255,.62); }
.acquairis-main section { position: relative; border-top: 1px solid var(--brand-line); }
.brand-shell { width: min(100% - 3rem, 1320px); margin-inline: auto; }
.brand-eyebrow { color: #b7b3ff; font: 700 .68rem/1.5 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .21em; }
.brand-eyebrow span { color: rgba(255,255,255,.3); padding-inline: .5rem; }
.acquairis-main h1, .acquairis-main h2, .acquairis-main h3 { font-family: 'Plus Jakarta Sans', sans-serif; }
.acquairis-main h1 { font-size: clamp(3.4rem, 7vw, 8rem); line-height: 1.02; letter-spacing: -.075em; font-weight: 600; }
.acquairis-main h2 { font-size: clamp(2.65rem, 5vw, 5.9rem); line-height: 1.08; letter-spacing: -.068em; font-weight: 600; }
.acquairis-main h1 em, .acquairis-main h2 em { font-style: normal; color: #b9b4ff; }
.acquairis-main p { line-height: 1.7; }
.brand-section { padding-block: clamp(6rem, 11vw, 11rem); background: rgba(9,10,14,.52); }
.brand-section:nth-of-type(even) { background: rgba(15,16,22,.64); }
.brand-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(3rem, 9vw, 9rem); align-items: start; }
.brand-split h2 { margin-top: 2rem; }
.brand-prose { color: var(--brand-muted); font-size: clamp(1.05rem, 1.3vw, 1.25rem); font-weight: 400; max-width: 39rem; }
.brand-prose p + p { margin-top: 1.5rem; }
.brand-lede { color: #f3f3f5; font-size: clamp(1.3rem, 1.8vw, 1.8rem); font-weight: 400; max-width: 38rem; }
.brand-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 3.7rem; padding: .85rem 1.25rem; border: 1px solid rgba(255,255,255,.65); background: #f4f4f4; color: #101116; border-radius: 0; font-size: .76rem; line-height: 1.25; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: color .25s, background .25s, border-color .25s, transform .25s; cursor: pointer; }
.brand-button:hover { color: #fff; background: #28263e; border-color: #b7b3ff; transform: translateY(-2px); }
.brand-button span, .brand-text-link span { font-size: 1.25rem; font-weight: 400; }
.brand-text-link { display: inline-flex; align-items: center; gap: 1.5rem; color: #eee; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.brand-text-link:hover { color: #b7b3ff; border-color: #b7b3ff; }
.brand-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 2.5rem; }
.brand-hero { min-height: min(100svh, 1050px); display: flex; align-items: stretch; background: linear-gradient(90deg, rgba(7,8,11,.97), rgba(7,8,11,.7) 62%, rgba(7,8,11,.55)); }
.brand-hero-inner { display: flex; flex-direction: column; padding-top: clamp(9rem, 15vh, 13rem); padding-bottom: 2rem; }
.brand-hero-wordmark { display: block; width: min(100%, 890px); margin: clamp(3.2rem, 8vh, 7rem) auto clamp(3rem, 8vh, 7rem); filter: drop-shadow(0 0 18px rgba(153,145,255,.2)); }
.brand-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: clamp(2rem, 7vw, 7rem); }
.brand-hero-grid h1 { font-size: clamp(2.25rem, 4.125vw, 4.8rem); }
.brand-hero-aside { padding-bottom: .4rem; }
.brand-hero-aside > p { color: #d5d5dd; font-size: clamp(1.1rem, 1.4vw, 1.4rem); }
.brand-hero-foot { margin-top: auto; padding-top: 5rem; display: flex; justify-content: space-between; gap: 1rem; color: rgba(255,255,255,.4); font: 400 .65rem/1.5 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.brand-problem { background: rgba(5,6,10,.8); }
.brand-gate { background: rgba(12,12,18,.88); }
.brand-section-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 3rem; }
.brand-index { color: rgba(255,255,255,.25); font: 400 .75rem 'Space Mono', monospace; }
.brand-gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 9rem); }
.brand-gate-grid h2 { font-size: clamp(5rem, 10vw, 11.5rem); line-height: .9; margin-bottom: 2.5rem; }
.brand-period { color: #8c84ff; }
.brand-gate-grid .brand-button { margin-top: 2.5rem; }
.brand-gate-steps { border-top: 1px solid var(--brand-line); }
.brand-gate-steps p { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; border-bottom: 1px solid var(--brand-line); padding-block: 1.65rem; color: #eee; font-size: clamp(1rem, 1.3vw, 1.35rem); }
.brand-gate-steps b { color: #a9a2ff; font: 400 .7rem 'Space Mono', monospace; padding-top: .35rem; }
.brand-gate-note { margin-top: 5rem; color: rgba(255,255,255,.42); font-size: .9rem; }
.brand-method .brand-split { align-items: end; margin-bottom: 4rem; }
.brand-method-rail { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--brand-line); border-bottom: 1px solid var(--brand-line); margin-top: 4rem; }
.brand-method-rail > div { padding: 2.5rem 2rem 3rem; border-right: 1px solid var(--brand-line); min-width: 0; }
.brand-method-rail > div:first-child { padding-left: 0; }
.brand-method-rail > div:last-child { border-right: 0; }
.brand-method-rail span { display: block; color: #a9a2ff; font: 400 .65rem/1.5 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2rem; }
.brand-method-rail strong { display: block; color: white; font-size: clamp(1.55rem, 2.5vw, 3rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.1; }
.brand-method-rail p { color: var(--brand-muted); margin-top: 1.5rem; font-size: .98rem; max-width: 24rem; }
.brand-method-center { background: rgba(138,130,255,.12); }
.brand-details { border-bottom: 1px solid var(--brand-line); }
.brand-details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 1.4rem; cursor: pointer; color: #f3f3f3; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.brand-details summary::-webkit-details-marker { display: none; }
.brand-details[open] summary span { transform: rotate(45deg); }
.brand-details summary span { transition: transform .2s; }
.brand-movements, .brand-definitions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 2rem 0 3rem; color: var(--brand-muted); }
.brand-movements b, .brand-definitions h3 { color: #b9b4ff; font-size: .75rem; letter-spacing: .12em; }
.brand-small { color: var(--brand-muted); font-size: .85rem; padding-bottom: 2rem; }
.brand-definitions { grid-template-columns: 1fr 1fr; }
.brand-definitions h3 { margin-bottom: 1rem; }
.brand-definitions p { margin-bottom: .8rem; font-size: .95rem; }
.brand-definitions b { color: #fff; }
.brand-advisory { background: rgba(8,9,14,.84); }
.brand-advisory .brand-text-link, .brand-prose .brand-text-link { margin-top: 2rem; }
.brand-capabilities { background: rgba(11,11,16,.8); }
.brand-capabilities h2 { margin: 2rem 0 4rem; }
.brand-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--brand-line); }
.brand-capability-grid span { display: flex; align-items: end; min-height: 9rem; padding: 1.5rem 1rem 1.5rem 0; border-bottom: 1px solid var(--brand-line); font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.brand-evidence-intro { padding-top: 8rem; }
.brand-evidence-intro h2 { margin-top: 2rem; }
.brand-final { background: rgba(9,9,13,.94); }
.brand-final .brand-button { margin-top: 2rem; }
.brand-final .brand-text-link { margin-left: 1rem; }
.brand-page-hero { min-height: 85svh; display: flex; align-items: end; padding: 13rem 0 7rem; background: rgba(7,8,12,.78); }
.brand-page-hero h1 { margin: 2.5rem 0 4rem; }
.brand-page-hero .brand-hero-grid { align-items: start; border-top: 1px solid var(--brand-line); padding-top: 2.5rem; }
.brand-page-hero .brand-prose .brand-button { margin-top: 2rem; }
.brand-question-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; border-top: 1px solid var(--brand-line); }
.brand-question-grid article { min-height: 17rem; padding: 1.6rem 2rem 2rem 0; border-bottom: 1px solid var(--brand-line); }
.brand-question-grid b { display: block; margin-bottom: 2.5rem; color: #aaa4ff; font: 400 .7rem 'Space Mono', monospace; text-transform: uppercase; }
.brand-question-grid h3 { font-size: clamp(1.3rem, 1.8vw, 1.8rem); font-weight: 600; letter-spacing: -.04em; }
.brand-question-grid p { color: var(--brand-muted); margin-top: 1rem; max-width: 20rem; }
.brand-about-wordmark { width: min(100%, 500px); margin-top: 4rem; }
.brand-about-hero h1 { font-size: clamp(3rem, 5vw, 5.8rem); }
.brand-why strong { color: #fff; }

@media (max-width: 900px) {
  .brand-hero-grid, .brand-split, .brand-gate-grid, .brand-page-hero .brand-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .brand-hero { min-height: 100svh; }
  .brand-hero-wordmark { margin: 5rem auto 4rem; }
  .brand-gate-grid h2 { font-size: clamp(5rem, 15vw, 9rem); }
  .brand-method-rail > div { padding-inline: 1.3rem; }
  .brand-method-rail strong { font-size: 1.8rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #header > div > nav { display: none !important; }
  #header button[onclick="toggleMobileMenu(true)"] { display: flex !important; }
}
@media (max-width: 640px) {
  .brand-shell { width: min(100% - 2.5rem, 1320px); }
  .brand-hero-inner { padding-top: 9rem; }
  .brand-hero-wordmark { margin: 5.5rem auto 4rem; }
  .brand-hero-grid h1 { font-size: clamp(2.1rem, 8.25vw, 3.3rem); }
  .brand-hero-foot { padding-top: 3rem; }
  .brand-hero-foot span:first-child { display: none; }
  .brand-actions { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .brand-section { padding-block: 6rem; }
  .brand-gate-grid h2 { font-size: clamp(5rem, 22vw, 8rem); }
  .brand-method-rail { grid-template-columns: 1fr; }
  .brand-method-rail > div { padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--brand-line); }
  .brand-method-rail > div:last-child { border-bottom: 0; }
  .brand-method-center { margin-inline: -1.25rem; padding-inline: 1.25rem !important; }
  .brand-movements, .brand-definitions, .brand-capability-grid, .brand-question-grid { grid-template-columns: 1fr; }
  .brand-question-grid article { min-height: auto; padding: 1.6rem 0; }
  .brand-question-grid b { margin-bottom: 1rem; }
  .brand-capability-grid span { min-height: 5.5rem; }
  .brand-page-hero { min-height: auto; padding: 11rem 0 6rem; }
  .brand-page-hero h1 { overflow-wrap: anywhere; }
  .brand-final .brand-text-link { margin: 1.5rem 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .acquairis-main *, .acquairis-main *::before, .acquairis-main *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Restored vertical logo lockup and a sequenced hero prelude. */
.brand-header-lockup { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 6rem; flex: 0 0 6rem; }
.brand-header-symbol { display: block; width: 2rem; height: 2rem; margin: 0; object-fit: contain; filter: drop-shadow(0 0 8px rgba(156,147,255,.22)); }
.brand-header-lockup img:last-child { display: block; width: 5.8rem; height: auto; max-height: none; }
.brand-hero { isolation: isolate; overflow: hidden; position: relative; }
.brand-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 32rem 28rem at var(--halo-x, 50%) var(--halo-y, 44%), rgba(112,102,222,.18), transparent 74%); opacity: .8; transition: opacity .6s ease; }
.brand-hero::after { content: ''; position: absolute; inset: -5rem 0 0; z-index: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 81px, rgba(173,167,255,.13) 82px), repeating-linear-gradient(90deg, transparent 0 81px, rgba(173,167,255,.1) 82px); transform: translate3d(0,var(--depth-y, 0px),0); transition: transform .8s cubic-bezier(.16,1,.3,1); mask-image: linear-gradient(transparent, black 25%, transparent 85%); }
.brand-hero-inner { position: relative; z-index: 2; padding-top: clamp(8rem, 13vh, 10rem); }
.brand-hero-prelude { position: relative; height: clamp(7rem, 15vh, 10rem); text-align: center; }
.brand-stage-flow { position: relative; height: clamp(4rem, 9vh, 6.5rem); overflow: hidden; pointer-events: none; user-select: none; }
.brand-stage-flow span { position: absolute; left: 50%; top: 50%; white-space: nowrap; font: 700 clamp(2rem, 4.1vw, 4.2rem)/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.055em; color: rgba(255,255,255,.4); opacity: 0; transform: translate3d(-42%, -35%, 0) scale(.96); }
.brand-stage-flow span.is-active { animation: brandStagePass 5.5s ease-in-out both; }
.brand-stage-flow span b { color: #c6c1ff; font-weight: 800; text-shadow: 0 0 20px rgba(164,153,255,.75); }
.brand-stage-flow span.is-active b { animation: brandInitialPulse 5.5s ease-in-out both; }
.brand-stage-flow span:nth-child(7) { font-size: clamp(1.8rem, 3.5vw, 3.7rem); }
.brand-hero-clarity { color: rgba(246,245,255,.77); font: 400 clamp(.72rem, 1vw, .9rem)/1.5 'Space Mono', monospace; letter-spacing: .42em; text-transform: uppercase; }
.brand-hero-lockup { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; margin: clamp(1rem, 2.5vh, 2rem) auto clamp(1.4rem, 3vh, 2.5rem); position: relative; }
.brand-hero-symbol { width: clamp(143px, 15vw, 210px); height: auto; opacity: .56; filter: drop-shadow(0 0 24px rgba(159,150,255,.32)); animation: brandMarkReveal 1.1s cubic-bezier(.16,1,.3,1) both, brandMarkGlow 7s ease-in-out 1.1s infinite; }
.brand-hero-wordmark { width: min(100%, 585px); margin: 0; opacity: .56; animation: brandMarkReveal 1.2s cubic-bezier(.16,1,.3,1) .18s both; }
.brand-hero-lockup::before, .brand-hero-lockup::after { content: ''; position: absolute; left: 50%; z-index: 2; pointer-events: none; transform: translateX(-50%); background: linear-gradient(110deg, transparent 26%, rgba(196,187,255,.45) 39%, rgba(255,255,255,.98) 48%, rgba(172,162,255,.4) 57%, transparent 70%) 0 0 / 220% 100%, radial-gradient(ellipse at 50% 45%, rgba(140,130,240,.26), rgba(93,83,180,.08) 70%); animation: brandInnerLight 8s ease-in-out infinite alternate; }
.brand-hero-lockup::before { top: 0; width: clamp(143px, 15vw, 210px); aspect-ratio: 1; -webkit-mask: url('../assets/logos/acquairis-symbol.svg') center / contain no-repeat; mask: url('../assets/logos/acquairis-symbol.svg') center / contain no-repeat; }
.brand-hero-lockup::after { bottom: 0; width: min(100%, 585px); aspect-ratio: 5449 / 738; -webkit-mask: url('../assets/logos/acquairis-wordmark.svg') center / contain no-repeat; mask: url('../assets/logos/acquairis-wordmark.svg') center / contain no-repeat; animation-delay: -3s; }
.brand-hero-descriptor { align-self: center; text-align: center; margin-bottom: clamp(2rem, 5vh, 4rem); }
.brand-hero-grid { align-items: start; }
@keyframes brandStagePass { 0% { opacity: 0; transform: translate3d(-48%, -48%, 0) scale(.98); filter: blur(6px); } 28%, 70% { opacity: .82; filter: blur(0); } 50% { transform: translate3d(-50%, -50%, 0) scale(1); } 100% { opacity: 0; transform: translate3d(-52%, -52%, 0) scale(1.01); filter: blur(6px); } }
@keyframes brandInitialPulse { 0%, 100% { color: #a39bff; text-shadow: 0 0 10px rgba(164,153,255,.45); } 38%, 62% { color: #fff; text-shadow: 0 0 18px rgba(190,183,255,1), 0 0 38px rgba(145,133,255,.7); } }
@keyframes brandMarkReveal { from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(8px); } to { opacity: .56; transform: translateY(0) scale(1); } }
@keyframes brandMarkGlow { 0%,100% { filter: drop-shadow(0 0 16px rgba(159,150,255,.18)); } 50% { filter: drop-shadow(0 0 26px rgba(159,150,255,.42)); } }
@keyframes brandInnerLight { from { background-position: 0% 0%, 50% 50%; opacity: .62; } to { background-position: 100% 0%, 50% 50%; opacity: .82; } }
.brand-about-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 3.5rem; }
.brand-about-symbol { width: 100px; height: auto; filter: drop-shadow(0 0 16px rgba(159,150,255,.25)); }
.brand-about-wordmark { margin-top: 0; }
@media (max-width: 900px) {
  .brand-hero-lockup { margin-top: 1.5rem; margin-bottom: 2rem; }
}
@media (max-width: 640px) {
  .brand-header-lockup { width: 5rem; flex-basis: 5rem; }
  .brand-header-symbol { width: 1.6rem; height: 1.6rem; }
  .brand-header-lockup img:last-child { width: 4.9rem; }
  .brand-header-lockup .brand-header-logo { width: 4.9rem; }
  .brand-hero-inner { padding-top: 7.5rem; }
  .brand-hero-prelude { height: 6.2rem; }
  .brand-stage-flow { height: 4rem; }
  .brand-stage-flow span { font-size: clamp(1.6rem, 7vw, 2.3rem); }
  .brand-stage-flow span:nth-child(7) { font-size: clamp(1.35rem, 6vw, 2rem); }
  .brand-hero-clarity { font-size: .65rem; letter-spacing: .3em; }
  .brand-hero-symbol { width: clamp(98px, 21vw, 135px); }
  .brand-hero-wordmark { width: 75%; }
  .brand-hero-lockup::before { width: clamp(98px, 21vw, 135px); }
  .brand-hero-lockup::after { width: 75%; }
  .brand-hero-descriptor { margin-bottom: 2.5rem; }
  .brand-about-symbol { width: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-stage-flow span { display: none; }
  .brand-stage-flow span:first-child { display: block; opacity: 1; transform: translate3d(-50%,-50%,0); }
  .brand-hero-symbol, .brand-hero-wordmark { animation: none; }
  .brand-hero-lockup::before, .brand-hero-lockup::after { animation: none; }
  .master-bg img, .brand-hero::after { transition: none; transform: none; }
}

/* Keep the old page visible until the next document is ready. */
@view-transition { navigation: auto; }
body > header.fixed { view-transition-name: site-header; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* The same upward title reveal used by Sample Outputs, for interior sections. */
.section-title-mask { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; padding: .05em 0 .13em; }
.section-title-inner { display: block; opacity: 0; filter: blur(7px); transform: translateY(105%); transition: transform 1.15s cubic-bezier(.16,1,.3,1), opacity .9s ease, filter 1.15s ease; }
.section-title-visible .section-title-inner { opacity: 1; filter: blur(0); transform: translateY(0); }
.section-title-mask:nth-of-type(2) .section-title-inner { transition-delay: .13s; }
@media (prefers-reduced-motion: reduce) { .section-title-inner { opacity: 1; filter: none; transform: none; transition: none; } }


/* ==========================================================================
   LANGUAGE SWITCH (EN / PT-BR)
   ========================================================================== */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:"Space Mono","SFMono-Regular",ui-monospace,monospace;
  font-size:10px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  white-space:nowrap;
  flex-shrink:0;
}
.lang-switch a{
  color:inherit;
  text-decoration:none;
  padding:4px 2px;
  transition:color .3s ease,opacity .3s ease;
}
.lang-switch a:hover,
.lang-switch a:focus-visible{ color:#fff; }
.lang-switch a.is-active{ color:#fff; font-weight:700; }
.lang-switch .lang-sep{ opacity:.3; }
.lang-switch--mobile{
  font-size:12px;
  letter-spacing:.24em;
  gap:.7rem;
  color:rgba(255,255,255,.4);
  margin-bottom:.25rem;
}
@media (max-width:420px){
  .lang-switch{ letter-spacing:.12em; gap:.3rem; }
}