/* ABC Arizona Serif */
@font-face {
  font-family: 'ABC Arizona Serif';
  src: url('assets/fonts/ABCArizonaSerif-Light-Trial.woff2') format('woff2'),
       url('assets/fonts/ABCArizonaSerif-Light-Trial.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Arizona Serif';
  src: url('assets/fonts/ABCArizonaSerif-Regular-Trial.woff2') format('woff2'),
       url('assets/fonts/ABCArizonaSerif-Regular-Trial.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Arizona Serif';
  src: url('assets/fonts/ABCArizonaSerif-Medium-Trial.woff2') format('woff2'),
       url('assets/fonts/ABCArizonaSerif-Medium-Trial.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #000;
  color: #fff;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; }
button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

html, body { overflow-x: clip; }

/* Page container — Figma frame is 1600 wide.
   Use left:50% + translateX so the page is centered in the viewport
   even when the viewport is narrower than 1600px (margin auto can't
   center content wider than its parent). All absolute children stay
   aligned with the viewport center. */
.page {
  position: relative;
  width: 1600px;
  height: 10334px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
}

/* Background dot pattern */
.bg-pattern {
  position: absolute;
  left: 32px;
  top: 939px;
  width: 1536px;
  height: 4499px;
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

/* ----- Header ----- */
.header {
  position: absolute;
  left: 200px;
  top: 0;
  width: 1200px;
  height: 84px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.logo-wrap {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.logo {
  width: 159.91px;
  height: 26.28px;
}
.tm {
  font-family: 'Unbounded', sans-serif;
  font-size: 6.88px;
  font-weight: 400;
  color: #fff;
  margin-top: 1px;
}

/* ----- Top right icon ----- */
.top-right-icon {
  position: absolute;
  left: 1544px;
  top: 22px;
  width: 40px;
  height: 40px;
}

/* ----- Hero text ----- */
.hero {
  position: absolute;
  left: 200px;
  top: 168px;
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.hero-title {
  margin: 0;
  font-family: 'ABC Arizona Serif', 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 84px;
  letter-spacing: -0.01em;
  text-align: center;
}
.hero-sub {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}

/* ----- Hero video card ----- */
.video-card {
  position: absolute;
  left: 200px;
  top: 412px;
  width: 1200px;
  height: 661px;
  background: #010F1B;
  border-radius: 24px;
  overflow: hidden;
}
.video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #010F1B;
}
.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.video-card.is-playing .video-overlay {
  opacity: 0;
}
.video-card.is-playing.is-paused .video-overlay {
  opacity: 1;
}
.video-card.is-playing .watch-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Pause/Play toggle — 64×64 round button with 24×24 icon, centered, hover-revealed */
.toggle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, background-color 0.2s ease;
  cursor: pointer;
}
.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.toggle-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}
.toggle-btn .icon-play { display: none; }
.video-card.is-paused .toggle-btn .icon-pause { display: none; }
.video-card.is-paused .toggle-btn .icon-play { display: block; }
/* Reveal toggle only when video is playing AND user is hovering the card */
.video-card.is-playing:hover .toggle-btn,
.video-card.is-playing.is-paused .toggle-btn {
  opacity: 1;
  pointer-events: auto;
}
.watch-btn {
  --glow-hue: 222deg;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(1, 13, 25, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-radius: 99px;
  padding: 4px;
  display: flex;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    0 8px 32px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}
.watch-btn:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 0.5),
    0 8px 32px 0 rgba(0, 0, 0, 0.12);
}
.watch-btn-inner {
  background: #2377DD;
  border-radius: 50px;
  padding: 12px 20px 12px 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background-color 0.2s ease;
}
.watch-btn:hover .watch-btn-inner {
  background: #1C5FB1;
}
.watch-play {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.watch-play img { width: 32px; height: 32px; }
.watch-text {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}
.watch-dot, .watch-time {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  opacity: 0.5;
}

/* ----- Vertical scroll-line decorations ----- */
.scroll-line {
  position: absolute;
  width: 8px;
  height: 168px;
  pointer-events: none;
  --progress: 0; /* set by JS, 0..1 */
}
/* Faint static rail — fades to transparent at both ends, solid in the middle */
.scroll-line::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 160px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 100%);
}
/* Scroll-driven dot */
.scroll-line::after {
  content: '';
  position: absolute;
  top: calc(var(--progress) * 160px + 4px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(255,255,255,0.6);
}
.scroll-line-1 { left: 796px; top: 1133px; }
.scroll-line-2 { left: 796px; top: 2561px; }
.scroll-line-3 { left: 796px; top: 6657px; }
.scroll-line-4 { left: 796px; top: 7565px; }
.scroll-line-5 { left: 796px; top: 8575px; }

/* ----- Common section text styles ----- */
.serif-h1 {
  margin: 0;
  font-family: 'ABC Arizona Serif', 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  text-align: center;
  letter-spacing: -0.01em;
}
.serif-h1-small {
  margin: 0;
  font-family: 'ABC Arizona Serif', 'Instrument Serif', serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 60px;
  text-align: center;
  letter-spacing: -0.01em;
}
.serif-h1-light {
  margin: 0;
  font-family: 'ABC Arizona Serif', 'Instrument Serif', serif;
  font-weight: 300;
  font-size: 72px;
  line-height: 84px;
  text-align: center;
  letter-spacing: -0.02em;
}
.serif-h2 {
  margin: 0;
  font-family: 'ABC Arizona Serif', 'Instrument Serif', serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 48px;
  text-align: center;
  letter-spacing: -0.01em;
}
.muted-p {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: rgba(255,255,255,0.72);
}
.muted-p.left { text-align: left; }

/* ----- Section: One area thriving ----- */
.section-thriving {
  position: absolute;
  left: 200px;
  top: 1369px;
  width: 1200px;
  display: flex;
  align-items: center;
  gap: 144px;
}
.thriving-text {
  width: 528px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 0 72px;
}
.thriving-graphic {
  width: 528px;
  flex-shrink: 0;
  height: 484px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background: #1E1E1E;
}
.thriving-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  display: block;
}

/* ----- Section: System ----- */
.section-system {
  position: absolute;
  left: 200px;
  top: 1973px;
  width: 1200px;
  display: flex;
  align-items: center;
  gap: 144px;
}
.system-pill-area {
  width: 528px;
  flex-shrink: 0;
  height: 484px;
  background: #1E1E1E;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.system-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

.system-text {
  width: 528px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 0 72px;
}
.system-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0.5;
}
.system-quote-mark {
  flex-shrink: 0;
  width: 46px;
  height: 72px;
  display: block;
}
.system-quote-mark + .system-quote-text + .system-quote-mark {
  transform: scaleX(-1);
}
.system-quote-text {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

/* ----- Five Pillars ----- */
.five-pillars {
  position: absolute;
  left: 190px;
  top: 2797px;
  width: 1220px;
}
.pillars-title {
  margin: 0;
  width: 100%;
}
.pillars-scroll {
  position: relative;
  height: 3800px;
}
.pillars-sticky {
  position: sticky;
  top: calc((100vh - 658px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  height: 658px;
}
.pillars-stage {
  display: flex;
  align-items: center;
  gap: 144px;
  height: 538px;
}
.pillars-indicator {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  pointer-events: none;
}
.pillars-indicator-dot {
  width: 2px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  transition: height 0.3s ease, background-color 0.3s ease;
}
.pillars-indicator-dot.is-active {
  height: 28px;
  background: rgba(255, 255, 255, 1);
}
.pillar-graphic {
  width: 538px;
  flex-shrink: 0;
  height: 538px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.star-svg {
  width: 538px;
  height: 538px;
  display: block;
}
/* Only the rays/outline/glows/dots group rotates — rings + labels
   stay perfectly still. Transform-origin pinned to the SVG centre. */
.star-svg .star-spin-group {
  transform-origin: 269px 269px;
}
@keyframes star-svg-spin {
  to { transform: rotate(360deg); }
}
.star-svg.is-spinning .star-spin-group {
  animation: star-svg-spin 40s linear infinite;
}
.star-svg .star-ray {
  transition: filter 0.6s ease;
}
.star-svg .axis-dot {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.star-svg .axis-dot.is-visible {
  opacity: 1;
}
/* While the star spins on the final step, recede the supporting
   scaffolding (rings + revealed dots) so the rotating star reads
   as the focal element. */
.star-svg .star-rings {
  transition: opacity 0.6s ease;
}
.star-svg.is-spinning .star-rings {
  opacity: 0.1;
}
.star-svg.is-spinning .axis-dot.is-visible {
  opacity: 0.3;
}
.star-svg .star-ray.is-glowing {
  filter: url(#ray-glow);
}
.star-svg .star-label-name,
.star-svg .star-label-level {
  fill: rgba(255, 255, 255, 0.5);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease, fill 0.3s ease;
}
.star-svg .star-label-name.is-visible,
.star-svg .star-label-level.is-visible {
  opacity: 1;
}
.star-svg .star-label-name.is-lit {
  fill: #FFFFFF;
}
.star-svg .star-label-level .level-sep {
  font-size: 10px;
}
.star-svg .star-outline {
  transition: opacity 0.3s ease;
}

/* While the star spins on the final step, hide the per-axis labels
   and reveal the static "Aligned" overlay above where Body used to sit. */
.star-svg .star-label-name,
.star-svg .star-label-level {
  transition: opacity 0.35s ease;
}
.star-svg.is-spinning ~ .star-aligned,
.pillar-graphic:has(.is-spinning) .star-aligned {
  opacity: 1;
}
.star-svg.is-spinning .star-label-name,
.star-svg.is-spinning .star-label-level {
  opacity: 0;
}
.star-aligned {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 2;
}
.pillars-text-stack {
  position: relative;
  width: 538px;
  height: 538px;
  flex-shrink: 0;
}
.pillar-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 72px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pillar-info.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pillar-info-inner {
  width: 378px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.pillar-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar-title {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 56px;
}
.pillar-tagline {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  color: rgba(255,255,255,0.34);
}
.pillar-desc {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255,255,255,0.72);
}
.pillar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}
.pillar-list img { width: 20px; height: 20px; flex-shrink: 0; }

/* ----- Step section ----- */
.step-section {
  position: absolute;
  left: 200px;
  top: 6893px;
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.step-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  align-items: center;
}
.step-sub {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: rgba(255,255,255,0.7);
  width: 480px;
}

.step-circles {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.step-block {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 24px;
}
.step-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.3);
}
.step-line--gap {
  flex: 0 0 72px;
}
.step-block:first-child > .step-line:first-child,
.step-block:last-child > .step-line:last-child {
  background: transparent;
}
.step-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}

.step-cards {
  display: flex;
  width: 100%;
  gap: 72px;
}
.step-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step-card h4 {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #fff;
}
.step-card p {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: rgba(255,255,255,0.72);
}

.cta-wrap {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

/* ----- CEO video modal ----- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: video-modal-in 0.25s ease;
}
.video-modal[hidden] { display: none; }
@keyframes video-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.video-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(1, 13, 25, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    0 8px 32px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  z-index: 2;
}
.video-modal-close:hover {
  transform: scale(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    0 8px 32px 0 rgba(0, 0, 0, 0.3);
}
.video-modal-frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 1100 / 620;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.video-modal-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
body.modal-open { overflow: hidden; }

/* ----- Liquid-glass shimmer (inner pill) ----- */
@property --shimmer {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes btn-shimmer-rotate {
  0% { --shimmer: 0deg; }
  100% { --shimmer: 360deg; }
}
@keyframes btn-shine {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.btn-shimmer {
  --glow-hue: 222deg;
  --inset: 30px;
  isolation: isolate;
  position: relative;
  transition: all 0.3s;
}
.btn-shimmer .shimmer {
  position: absolute;
  inset: calc(var(--inset) * -1);
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: conic-gradient(from var(--shimmer), transparent 0%, transparent 20%, black 36%, black 45%, transparent 50%, transparent 70%, black 85%, black 95%, transparent 100%);
  mask-image: conic-gradient(from var(--shimmer), transparent 0%, transparent 20%, black 36%, black 45%, transparent 50%, transparent 70%, black 85%, black 95%, transparent 100%);
  -webkit-mask-size: cover;
  mask-size: cover;
  mix-blend-mode: plus-lighter;
  animation: 1s linear infinite both btn-shimmer-rotate;
}
.btn-shimmer .shimmer::before,
.btn-shimmer .shimmer::after {
  content: '';
  position: absolute;
  inset: var(--inset);
  border-radius: inherit;
  mix-blend-mode: color;
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s;
}
.btn-shimmer .shimmer::before {
  box-shadow:
    0 0 3px 2px hsl(var(--glow-hue) 20% 95%),
    0 0 7px 4px hsl(var(--glow-hue) 20% 80%),
    0 0 13px 4px hsl(var(--glow-hue) 50% 70%),
    0 0 25px 5px hsl(var(--glow-hue) 100% 70%);
  z-index: -1;
}
.btn-shimmer .shimmer::after {
  box-shadow:
    inset 0 0 0 1px hsl(var(--glow-hue) 70% 95%),
    inset 0 0 2px 1px hsl(var(--glow-hue) 100% 80%),
    inset 0 0 5px 2px hsl(var(--glow-hue) 100% 70%);
  z-index: 2;
}
:hover > .btn-shimmer .shimmer::before,
:hover > .btn-shimmer .shimmer::after,
.btn-shimmer:hover .shimmer::before,
.btn-shimmer:hover .shimmer::after {
  opacity: 1;
  animation: 1.2s ease-in forwards btn-shine;
}
:hover > .btn-shimmer,
.btn-shimmer:hover {
  box-shadow: 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 0.5);
}
.btn-text { position: relative; z-index: 3; }

/* ----- Primary button (liquid glass) ----- */
.btn-primary {
  --glow-hue: 222deg;
  background: rgba(1, 13, 25, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-radius: 99px;
  padding: 4px;
  display: inline-flex;
  cursor: pointer;
  isolation: isolate;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    0 8px 32px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}
.btn-primary > span {
  background: #2377DD;
  border-radius: 50px;
  padding: 8px 24px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 36px;
  color: #fff;
  display: inline-block;
  transition: background-color 0.2s ease;
}
.btn-primary:hover > span {
  background: #1C5FB1;
}
.btn-primary:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 0.5),
    0 8px 32px 0 rgba(0, 0, 0, 0.12);
}

/* ----- Stars don't stay still ----- */
.stars-still {
  position: absolute;
  left: 190px;
  top: 7801px;
  width: 1220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.stars-still-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 1200px;
  align-items: center;
}
.quote-card {
  width: 100%;
  display: flex;
  justify-content: center;
}
.quote-card-inner {
  display: flex;
  align-items: center;
  gap: 72px;
  padding: 16px;
  width: 100%;
  height: 538px;
  background: rgba(1, 13, 25, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    0 8px 32px 0 rgba(0, 0, 0, 0.08);
}
.ceo-portrait {
  position: relative;
  width: 558px;
  height: 506px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.ceo-bg {
  position: absolute;
  left: -229px;
  top: 0;
  width: 1100px;
  height: 692px;
  object-fit: cover;
  filter: brightness(0.7);
}
.ceo-mark {
  --glow-hue: 222deg;
  position: absolute;
  left: 231px;
  top: 205px;
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 50%;
  background: rgba(1, 13, 25, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    0 8px 32px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  padding: 0;
}
.ceo-mark:hover {
  transform: scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 0.5),
    0 8px 32px 0 rgba(0, 0, 0, 0.12);
}
.ceo-mark svg { width: 32px; height: 32px; display: block; }

.quote-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding-right: 56px;
}
.quote-text {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 48px;
  text-align: center;
  color: rgba(255,255,255,0.72);
}
.quote-author {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: rgba(255,255,255,0.72);
  width: 480px;
}

/* ----- Wearable ----- */
.wearable {
  position: absolute;
  left: 190px;
  top: 8811px;
  width: 1220px;
}
.wearable-card {
  width: 100%;
  padding: 16px;
  background: rgba(1, 13, 25, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 72px;
  box-sizing: border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    0 8px 32px 0 rgba(0, 0, 0, 0.08);
}
.wearable-card > * {
  background: #000;
  border-radius: 16px;
}
.wearable-text {
  width: 558px;
  flex: 0 0 558px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 36px 72px;
  box-sizing: border-box;
}
.wearable-desc {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #fff;
}
.finishes-card {
  border: 1px solid #404040;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.finishes-top {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.finishes-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finishes-title {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}
.finishes-shipping {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}
.finishes-picker {
  display: flex;
  align-items: center;
  gap: 16px;
}
.finishes-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}
.swatch {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.swatch-dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.swatch.is-active::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.swatch-name {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.5);
}
.finishes-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
.finishes-link-muted {
  color: rgba(255, 255, 255, 0.5);
}
.finishes-link-cta {
  color: #fff;
  text-decoration: underline;
}
.finishes-link-arrow {
  color: #fff;
}
.wearable-image {
  width: 558px;
  flex: 0 0 558px;
  height: 538px;
  border-radius: 16px;
  overflow: hidden;
}
.pendant {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* ----- Footer CTA ----- */
.footer-cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 9534px;
  width: 100vw;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 250px 200px 0;
  gap: 72px;
  background: linear-gradient(180deg, #000 27.08%, #152F49 63.8%, #5F697C 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Parallax star field — three layers of CSS box-shadow stars looping
   on different speeds (technique by Eddie Bebber). Populated by JS. */
.footer-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.footer-cta > h2,
.footer-cta > .btn-primary {
  position: relative;
  z-index: 1;
}
.footer-star-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--star-size, 1px);
  height: var(--star-size, 1px);
  background: transparent;
  box-shadow: var(--star-shadows);
  animation: footer-stars-drift var(--star-speed, 200s) linear infinite;
}
.footer-star-layer::after {
  content: '';
  position: absolute;
  top: 2000px;
  left: 0;
  width: inherit;
  height: inherit;
  background: transparent;
  box-shadow: var(--star-shadows);
}
@keyframes footer-stars-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-2000px); }
}

/* Footer copyright — pinned to the bottom inside the gradient block. */
.footer-copyright {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   MOBILE / TABLET ADAPTATION
   The desktop layout uses absolute positioning inside a fixed
   1600×N page. Below 1024px we collapse that into a normal
   vertical document flow.
   ============================================================ */
@media (max-width: 1023px) {
  /* Page becomes fluid, normal flow */
  .page {
    width: 100%;
    height: auto;
    left: auto;
    transform: none;
  }
  body { overflow-x: hidden; }

  /* Strip absolute positioning from every section */
  .header,
  .hero,
  .video-card,
  .section,
  .section-thriving,
  .section-system,
  .five-pillars,
  .stars-still,
  .wearable,
  .footer-cta {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  /* Hero typography scaling */
  .header { padding: 16px 24px !important; }
  .hero {
    padding: 80px 24px 48px !important;
    text-align: center;
  }
  .serif-h1 { font-size: 32px; line-height: 38px; }
  .serif-h1-light { font-size: 36px; line-height: 44px; padding: 0 16px; }
  .serif-h1-small { font-size: 28px; line-height: 36px; }
  .serif-h2 { font-size: 24px; line-height: 32px; }
  .step-sub { width: 100%; font-size: 16px; line-height: 24px; }
  .muted-p { font-size: 14px; line-height: 22px; }

  /* Bg pattern off — pixel grid only makes sense at 1600px */
  .bg-pattern { display: none; }

  /* Decorative scroll lines hidden on mobile */
  .scroll-line { display: none !important; }

  /* Hero video card — full width, fixed aspect */
  .video-card {
    position: relative !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    margin: 24px 0 !important;
    padding: 0 !important;
    border-radius: 16px;
  }
  .watch-btn { transform: translate(-50%, -50%) scale(0.85); }

  /* "One area thriving" / "A custom system" two-column → stack */
  .section-thriving,
  .section-system {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 48px 24px !important;
    align-items: center;
  }
  .thriving-text,
  .system-text {
    width: 100% !important;
    padding: 0 !important;
    text-align: center;
  }
  .thriving-graphic,
  .system-pill-area {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    max-width: 480px;
  }

  /* Five Pillars — drop sticky behaviour, render each pillar as
     a stacked card with the star above the text. The scroll-driven
     animation is desktop-only; on mobile the rays sit at full level
     so the star reads as a static graphic. */
  .pillars-scroll {
    height: auto !important;
  }
  .pillars-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    padding: 32px 0 !important;
    gap: 32px;
  }
  .pillars-indicator { display: none; }
  .pillars-stage {
    flex-direction: column !important;
    height: auto !important;
    gap: 32px;
  }
  .pillar-graphic,
  .pillars-text-stack {
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto;
  }
  .pillars-text-stack { height: auto !important; min-height: 220px; }
  .pillar-info {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 16px 0 !important;
    display: block !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .pillar-info:first-child { border-top: 0; }
  .pillar-info-inner { width: 100% !important; max-width: 360px; margin: 0 auto; }
  .pillar-title { font-size: 28px; line-height: 36px; }
  .pillar-tagline { font-size: 18px; line-height: 26px; }
  .star-svg { width: 100%; height: auto; max-width: 360px; }

  /* Steps row → 3 stacked cards */
  .step-section { gap: 32px; padding: 48px 24px !important; }
  .step-circles { flex-direction: column; gap: 16px; }
  .step-block { width: 100%; }
  .step-line, .step-line--gap { display: none; }
  .step-cards { flex-direction: column; gap: 24px; }
  .step-card { width: 100%; text-align: center; }

  /* "Stars don't stay still" — quote card stacks */
  .stars-still { padding: 48px 24px !important; }
  .quote-card-inner {
    flex-direction: column;
    height: auto !important;
    padding: 24px;
    gap: 24px;
  }
  .ceo-portrait { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1 / 0.95; margin: 0 auto; }
  .ceo-bg {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .ceo-mark {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
  }
  .quote-content { padding: 0; text-align: center; }

  /* Wearable card */
  .wearable { padding: 48px 24px !important; }
  .wearable-card {
    flex-direction: column;
    gap: 24px;
    padding: 16px;
  }
  .wearable-text,
  .wearable-image {
    flex: none;
    width: 100% !important;
    height: auto !important;
  }
  .wearable-text { padding: 24px !important; box-sizing: border-box; }
  .wearable-image { aspect-ratio: 1 / 1; min-height: 320px; }
  .finishes-card { padding: 16px; }
  .finishes-top { gap: 24px; }
  .finishes-link { flex-wrap: wrap; }
  .pendant { width: 80%; max-width: 280px; }

  /* Footer CTA */
  .footer-cta {
    padding: 96px 24px 60px !important;
    gap: 32px !important;
  }
  .footer-copyright { font-size: 11px; bottom: 16px; }

  /* Generic button tweak — slightly smaller on mobile */
  .btn-primary span { padding: 6px 18px; font-size: 14px; line-height: 28px; }
  .watch-btn-inner { padding: 10px 16px 10px 10px; }
  .watch-play { width: 28px; height: 28px; }
  .watch-play img { width: 28px; height: 28px; }
  .watch-text, .watch-time, .watch-dot { font-size: 14px; line-height: 22px; }
}

/* Small phones — tighten further */
@media (max-width: 480px) {
  .serif-h1 { font-size: 28px; line-height: 34px; }
  .serif-h1-light { font-size: 30px; line-height: 38px; }
  .serif-h2 { font-size: 22px; line-height: 30px; }
  .hero { padding: 64px 20px 40px !important; }
  .video-card { margin: 16px 0 !important; }
  .section-thriving,
  .section-system,
  .step-section,
  .stars-still,
  .wearable { padding: 40px 20px !important; }
  .footer-cta { padding: 80px 20px 56px !important; }
}