/* =============================================================================
   LAYOUT.CSS — Bullet Website
   Page layout, container, section scaffolding, split/grid patterns.

   Load order: 4th
   Depends on: tokens.css, base.css
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Container — horizontal spine of the page
----------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}


/* -----------------------------------------------------------------------------
   Section — vertical rhythm wrapper used by every content block
----------------------------------------------------------------------------- */

.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
  position: relative;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
}

.section--manifesto {
  background-color: var(--color-bg-black);
  position: relative;
  overflow: hidden;
}

.section--manifesto .section__title {
  font-size: clamp(1.75rem, 5vw, 4rem);
  text-wrap: balance;
}

/* Storytelling: Banks Break — Screen 1 (intro) + Screen 2 (reveal) */
.section--storytelling {
  overflow: hidden;
  background-color: var(--color-bg-black);
  position: relative;
  padding: 0; /* absolute-positioned children own the layout */
}

/* Both screens fill the whole section.
   No overflow:hidden here — the parent section already clips, and adding it
   would prevent entry animations from being visible. */
.manifesto-intro,
.manifesto-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* Screen 1 */
.manifesto-intro {
  z-index: 2;
  justify-content: center;
  align-items: center;
  gap: clamp(var(--space-12), 14vh, var(--space-24));
}

.manifesto-intro__eyebrow-wrap {
  text-align: center;
  padding: 0 var(--space-6);
}

/* Screen 1: eyebrow + marquee use transitions (reversible in both directions) */
.manifesto-intro__eyebrow {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.75;
  max-width: 580px;
  opacity: 0;
  transform: translateY(-50px);
  filter: blur(0);
  transition: opacity 0.9s var(--ease-default),
              transform 0.9s var(--ease-default),
              filter 0.75s var(--ease-default);
}

.section--storytelling.is-visible .manifesto-intro__eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.manifesto-intro__marquee-wrap {
  width: 100%;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(70px);
  filter: blur(0);
  padding-block: 0.15em; /* room for descenders (g, y, p…) */
  transition: opacity 0.9s var(--ease-default),
              transform 0.9s var(--ease-default),
              filter 0.75s var(--ease-default);
}

.section--storytelling.is-visible .manifesto-intro__marquee-wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.manifesto-intro__marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marqueeScroll 18s linear infinite;
  font-size: clamp(3rem, 7.5vw, 7rem);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  line-height: 1.1;
  will-change: transform;
}

.manifesto-intro__marquee-track span {
  display: inline-block;
  /* word-sized gap between loop repetitions */
  padding-inline-end: 0.3em;
}

/* Screen 1 EXIT (phases 1, 2, 3) — zoom + blur; reverses smoothly on return */
.section--storytelling[data-phase="1"] .manifesto-intro__eyebrow,
.section--storytelling[data-phase="2"] .manifesto-intro__eyebrow,
.section--storytelling[data-phase="3"] .manifesto-intro__eyebrow {
  opacity: 0;
  transform: scale(2) translateY(-25vh);
  filter: blur(30px);
  transition-duration: 0.75s, 0.75s, 0.75s;
  transition-delay: 0s;
}

.section--storytelling[data-phase="1"] .manifesto-intro__marquee-wrap,
.section--storytelling[data-phase="2"] .manifesto-intro__marquee-wrap,
.section--storytelling[data-phase="3"] .manifesto-intro__marquee-wrap {
  opacity: 0;
  transform: scale(2) translateY(25vh);
  filter: blur(30px);
  transition-duration: 0.75s, 0.75s, 0.75s;
  transition-delay: 0.05s;
}

/* Screen 2 */
.manifesto-reveal {
  z-index: 1;
  justify-content: center;
  align-items: center;
  gap: clamp(var(--space-6), 5vh, var(--space-10));
  padding: 0 var(--container-padding);
}

.manifesto-reveal__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.4s var(--ease-default) 0.1s;
}

.section--storytelling[data-phase="1"] .manifesto-reveal__bg-video,
.section--storytelling[data-phase="2"] .manifesto-reveal__bg-video,
.section--storytelling[data-phase="3"] .manifesto-reveal__bg-video {
  opacity: 0.3;
}

.manifesto-reveal__title-wrap,
.manifesto-reveal__cards {
  position: relative;
  z-index: 1;
}

.manifesto-reveal__title-wrap {
  text-align: center;
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.9s var(--ease-default) 0.15s,
              transform 0.9s var(--ease-default) 0.15s;
}

.section--storytelling[data-phase="1"] .manifesto-reveal__title-wrap,
.section--storytelling[data-phase="2"] .manifesto-reveal__title-wrap,
.section--storytelling[data-phase="3"] .manifesto-reveal__title-wrap {
  opacity: 1;
  transform: translateY(0);
}

.manifesto-reveal__title {
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 1.05;
  color: var(--color-text-primary);
}

.manifesto-reveal__title strong {
  display: block;
  font-weight: var(--font-weight-bold);
}

.manifesto-reveal__title span {
  display: block;
  font-weight: var(--font-weight-light);
}

.manifesto-reveal__cards {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 900px;
  opacity: 0;
  transform: translateY(40px);
  position: relative;
  transition: opacity 0.9s var(--ease-default) 0.3s,
              transform 0.9s var(--ease-default) 0.3s;
}

.section--storytelling[data-phase="1"] .manifesto-reveal__cards,
.section--storytelling[data-phase="2"] .manifesto-reveal__cards,
.section--storytelling[data-phase="3"] .manifesto-reveal__cards {
  opacity: 1;
  transform: translateY(0);
}

/* Screen 2 carousel dots — hidden on desktop, shown on mobile */
.manifesto-reveal__dots { display: none; }

.manifesto-reveal__card {
  background-color: rgba(11, 11, 11, 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  text-align: left;
  /* Stacked in the same grid cell — only one visible at a time */
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
}

.manifesto-reveal__card p {
  text-align: left;
  margin: 0;
  max-width: none;
}


.nowrap { white-space: nowrap; }

.section--manifesto .section__inner--narrow {
  max-width: calc(var(--container-narrow) + 320px);
}

.section--manifesto .section__lede,
.section--manifesto .eyebrow {
  max-width: none;
  text-wrap: pretty;
}

.section--faq .section__inner--narrow {
  max-width: calc(var(--container-narrow) + 80px);
}

.section--faq .section__title {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

.section--manifesto .container {
  position: relative;
  z-index: 1;
}
.section--blockchain { background-color: var(--color-bg-secondary); }

.section--borderless {
  background-color: var(--color-bg-primary);
  padding-inline: var(--container-padding);
  /* Extra 80px padding-top shifts content down to clear the fixed header.
     The black box below receives the same +80px on its top inset so box
     and content stay vertically centered together. */
  padding-top: calc(clamp(var(--space-16), 8vw, var(--space-32)) + 80px);
  position: relative;
}

/* Black box that starts full-bleed and shrinks into a centered card,
   leaving equal visual margins after compensating for the fixed header. */
.borderless__shrink {
  position: absolute;
  top: -120px;
  right: -120px;
  bottom: -120px;
  left: -120px;
  background-color: var(--color-bg-black);
  border-radius: 0;
  z-index: 0;
  pointer-events: none;
  transition: top 1.4s var(--ease-default) 0.3s,
              right 1.4s var(--ease-default) 0.3s,
              bottom 1.4s var(--ease-default) 0.3s,
              left 1.4s var(--ease-default) 0.3s,
              border-radius 1.4s var(--ease-default) 0.3s;
  will-change: top, right, bottom, left, border-radius;
}

/* Top inset gets +80px to clear the header; sides/bottom stay at clamp(80–160px). */
.section--borderless.is-visible .borderless__shrink {
  top: calc(clamp(80px, 10vh, 160px) + 80px);
  right: clamp(80px, 10vh, 160px);
  bottom: clamp(80px, 10vh, 160px);
  left: clamp(80px, 10vh, 160px);
  border-radius: var(--radius-2xl);
}

/* Container is relative so it centers naturally over the black box. */
.section--borderless .container {
  position: relative;
  z-index: 1;
  background-color: transparent;
  padding: clamp(var(--space-8), 5vh, var(--space-16));
}

/* Borderless content uses min(vw, vh) so the content shrinks when EITHER
   axis (width OR height) reduces, guaranteeing it always fits inside the box. */
.section--borderless .section__title {
  font-size: clamp(2rem, min(5vw, 8.5vh), 5.5rem);
  line-height: 1.05;
  white-space: nowrap;
}

.section--borderless .section__lede {
  font-size: clamp(0.9rem, min(1.3vw, 2.1vh), 1.5rem);
  line-height: 1.55;
  max-width: 48ch;
}

.section--borderless .split__media--video {
  max-width: clamp(220px, min(26vw, 42vh), 480px);
}

/* Cap on copy width pushes text to the right of the column, increasing
   the distance between text and the left edge of the black box. */
.section--borderless .split__copy {
  max-width: clamp(320px, min(32vw, 52vh), 560px);
  margin-left: auto;
  margin-right: 0;
}

.section--borderless .chip-list {
  gap: clamp(5px, min(0.5vw, 0.7vh), 10px);
  flex-wrap: nowrap;
}

.section--borderless .chip-list li {
  padding: clamp(5px, min(0.6vw, 0.9vh), 9px)
           clamp(8px, min(1vw, 1.5vh), 14px);
  font-size: clamp(10px, min(0.85vw, 1.3vh), 13px);
}

.section--borderless .split {
  gap: clamp(var(--space-6), min(4vw, 6vh), var(--space-20));
}

.section--borderless .split__copy {
  gap: clamp(var(--space-2), min(1vw, 1.5vh), var(--space-6));
}
.section--different  { background-color: var(--color-bg-different); }

.section--oneaccount {
  background-color: var(--color-bg-primary);
  position: relative;
  overflow: hidden;
}

.oneaccount__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}

.section--oneaccount .container {
  position: relative;
  z-index: 1;
}

/* Vertically center media + copy; smaller gap shortens lock-to-text distance */
.section--oneaccount .split {
  align-items: center;
  gap: var(--space-6);
}

/* Lock animation — "A New Foundation." */
.lock-animation {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: translateY(20%);
}

.lock-animation__front,
.lock-animation__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* cadeado_02 (open) sits in front, static */
.lock-animation__front {
  z-index: 2;
  transform: scale(0.55);
  transform-origin: center center;
}

/* cadeado_01 (closed) starts above and behind — waits for the animation */
.lock-animation__back {
  z-index: 1;
  /* translateY in % scales with the lock-animation container size so
     the gap between cadeado_01 and cadeado_02 stays proportional on
     mid-width screens (between mobile and full desktop). */
  transform: translateY(-37%) scale(0.35);
  transform-origin: center center;
}

@keyframes lockDescend {
  from { transform: translateY(-37%) scale(0.35); }
  to   { transform: translateY(-28%) scale(0.35); }
}

.section--oneaccount.is-visible .lock-animation__back {
  animation: lockDescend 0.7s var(--ease-default) 0.35s both;
}
.section--faq        { background-color: var(--color-bg-secondary); }

.section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.section__inner--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.section__inner--center {
  text-align: center;
  align-items: center;
}

.section__inner--center .eyebrow,
.section__inner--center .section__lede,
.section__inner--center .section__body,
.section__inner--center .section__highlight {
  margin-inline: auto;
}

.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  text-align: center;
}


/* -----------------------------------------------------------------------------
   Header (site)
----------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: transparent;
  border-bottom: none;
  padding-top: 40px;
  padding-bottom: 20px;
  transition: background-color 0.3s var(--ease-default),
              backdrop-filter 0.3s var(--ease-default);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* After leaving the hero: translucent black bar with blur */
.site-header--scrolled {
  background-color: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding-top: 20px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 33px;
  width: auto;
}

.site-footer__logo img {
  height: 26px;
  width: auto;
}


/* -----------------------------------------------------------------------------
   Hero
----------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
  padding-top: calc(clamp(var(--space-16), 10vw, var(--space-32)) + var(--header-height));
  background-color: var(--color-bg-primary);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

/* Stacked hero background layers */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-bg-black);
  background-image: url('/images/Backgroundhero.png');
  background-size: cover;
  background-position: center;
}

.hero__bg > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 1. Base video in grayscale (lowest layer) */
.hero__bg-video {
  z-index: 1;
  filter: grayscale(100%);
}

/* 2. Backgroundhero photo on top of the video */
.hero__bg-photo {
  z-index: 2;
  opacity: 0.4;
}

/* Auxiliary layers — kept disabled, available for reactivation */
.hero__bg-desaturate,
.hero__bg-video--lum {
  display: none;
}

.hero > .container {
  position: relative;
}

.hero__copy {
  position: relative;
  z-index: 3;
}

.hero__visual {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Bullet-green glow behind the phone — compact halo close to the device */
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 35% 38% at 50% 50%,
    rgba(194, 241, 65, 0.60) 0%,
    rgba(194, 241, 65, 0.30) 35%,
    rgba(194, 241, 65, 0.08) 65%,
    transparent 80%
  );
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, #000000 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__title {
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-light);
}

.hero__title-static {
  /* Static text — not animated, baseline locked */
  display: inline-block;
  vertical-align: baseline;
}

.hero__title-future {
  /* Letters animated via JS — default font inherited from .hero__title.
     line-height locks vertical metrics so per-letter font swaps don't
     shift the baseline of the rest of the line. */
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
}

.hero__title-future__letter {
  /* line-height:1 keeps the baseline aligned with the rest of the title
     (no extra leading that could misalign the "F" against the "T").
     Width is set in JS to the max of both fonts to avoid layout shift. */
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  text-align: center;
  transition: color 0.25s ease;
}

.hero__title-future__letter.is-stack {
  font-family: 'Stack Sans Notch', var(--font-family-base);
  font-weight: var(--font-weight-stack-display);
  color: var(--color-accent);
}

.hero__subtitle {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--color-text-secondary);
  max-width: 36ch;
}

.hero__cta { align-self: flex-start; }

.hero__visual img {
  width: 100%;
  height: auto;
  max-width: 1260px;
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}

/* Phone entry — rises while transitioning from blurred to focused */
@keyframes heroPhoneRise {
  0% {
    transform: translateY(110%);
    opacity: 0;
    filter: blur(24px);
  }
  55% {
    opacity: 1;
    filter: blur(12px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

.hero__visual.is-animating img {
  animation: heroPhoneRise 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Title, subtitle and CTA enter via transitions — more cross-browser robust than keyframes */
.hero .hero__title,
.hero .hero__subtitle,
.hero .hero__cta {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.hero.is-animating .hero__title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.hero.is-animating .hero__subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}
.hero.is-animating .hero__cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}


/* -----------------------------------------------------------------------------
   Split — 50/50 image + copy pattern (sections 4, 5, 7)
----------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Mobile: copy always before image (better reading order) */
.split .split__copy  { order: 1; }
.split .split__media { order: 2; }

.split__media img,
.split__media video {
  width: 100%;
  height: auto;
  max-width: 520px;
  margin-inline: auto;
  display: block;
}

.split__media--video {
  aspect-ratio: 1 / 1;
  max-width: 340px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 50%;
  /* Soft circular edge (~10% feather) */
  -webkit-mask-image: radial-gradient(circle, black 90%, transparent 100%);
  mask-image: radial-gradient(circle, black 90%, transparent 100%);
}

.split__media--video video {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  /* Video keeps a visual size of ~460px while the circular crop sits at 340px */
  transform: scale(1.353);
  transform-origin: center center;
}

.split__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Translucent box with backdrop blur (glassmorphism) */
.split__copy--glass {
  background-color: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(248, 243, 233, 0.08);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}


/* -----------------------------------------------------------------------------
   Card grid — section 6
----------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}


/* -----------------------------------------------------------------------------
   Footer (site)
----------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--color-bg-footer);
  padding-block: var(--space-16) var(--space-10);
  margin-top: auto;
  scroll-snap-align: start;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.site-footer__logo {
  display: flex;
  align-items: center;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10) var(--space-6);
}

.footer-col__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.footer-col a.footer-col__cta {
  align-self: flex-start;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  min-height: auto;
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}
.footer-col a.footer-col__cta:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.site-footer__copy {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.site-footer__compliance {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  max-width: 80ch;
  line-height: var(--line-height-relaxed);
}


/* -----------------------------------------------------------------------------
   Manifest page
----------------------------------------------------------------------------- */

.manifest {
  background-color: var(--color-bg-primary);
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-32));
}

/* Video banner at the top */
.manifest__banner {
  width: 100%;
  height: clamp(220px, 35vh, 380px);
  overflow: hidden;
  position: relative;
}

.manifest__banner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}

.manifest__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22,22,22,0.2) 0%, var(--color-bg-primary) 100%);
  pointer-events: none;
}

/* Title + subtitle — overlap the bottom of the video banner */
.manifest__hero {
  padding-top: clamp(var(--space-4), 2vw, var(--space-8));
  padding-bottom: clamp(var(--space-8), 5vw, var(--space-16));
  text-align: center;
  margin-top: clamp(-140px, -10vw, -60px);
  position: relative;
  z-index: 2;
}

.manifest__title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: var(--font-weight-light);
}

.manifest__subtitle {
  margin-top: var(--space-4);
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  font-weight: var(--font-weight-semibold);
}

.manifest__inner {
  max-width: 960px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.manifest__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.manifest__block h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.manifest__block p {
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  opacity: 0.85;
  line-height: var(--line-height-relaxed);
}

.manifest__block--closing { border-top: 1px solid var(--color-border); padding-top: var(--space-10); }

.manifest__block--quote blockquote {
  margin: 0;
}

.manifest__quote-attr {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  font-style: normal;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.manifest__block--quote p {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--color-text-primary);
  opacity: 1;
  line-height: 1.5;
}

.manifest__closing {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  line-height: 1.2;
  opacity: 1;
}

.manifest__closing--accent { color: var(--color-accent); }

.manifest__cta { display: flex; justify-content: center; }