@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #root {
  width: 100%;
  background: #050505;
  color: #fff;
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

.font-sans { font-family: "Manrope", sans-serif; }
.font-serif { font-family: "Instrument Serif", serif; }
.font-mono { font-family: "JetBrains Mono", monospace; }

/* Bubble menu */
.bubble-menu { display: flex; align-items: center; gap: 12px; z-index: 50; position: absolute; }
.bubble {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  transition: transform .2s ease, background .3s ease;
}
.bubble:hover { transform: scale(1.05); }
.menu-btn { flex-direction: column; gap: 6px; background: #fff; }
.menu-line { width: 20px; height: 2px; border-radius: 2px; transition: all .3s ease; background: #111; }
.menu-line.short { width: 14px; }
.menu-btn:hover .menu-line.short { width: 20px; }
.menu-btn.open .menu-line:not(.short) { transform: translateY(4px) rotate(45deg); }
.menu-btn.open .menu-line.short { transform: translateY(-4px) rotate(-45deg); width: 20px; }

.bubble-menu-items {
  position: fixed; inset: 0; z-index: 40;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pill-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 800px;
}
.pill-link {
  display: block; padding: 16px 36px; border-radius: 9999px;
  background-color: var(--pill-bg); color: var(--pill-color);
  text-decoration: none; font-weight: 500; font-size: 24px;
  transform: rotate(var(--item-rot));
  transition: all .3s ease;
  border: 1px solid rgba(255,255,255,0.1);
  font-family: "Instrument Serif", serif; font-style: italic; letter-spacing: 0.01em;
}
.pill-link:hover {
  background-color: var(--hover-bg) !important;
  color: var(--hover-color) !important;
  transform: scale(1.05) rotate(0deg);
}
.pill-label { display: block; }

/* Layout helpers */
.absolute { position: absolute; }
.relative { position: relative; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.text-center { text-align: center; }
.text-white { color: #fff; }
.inset-0 { inset: 0; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Section structure */
.screen-1 {
  position: sticky; top: 0; z-index: 0;
  width: 100%; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.screen-2 {
  position: relative; z-index: 10;
  width: 100%; height: 100dvh; overflow: hidden;
  background: #000; color: #fff;
  box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
}

/* Spotlight reveal */
.spotlight {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; background: #000;
  pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.spotlight video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.spotlight svg.mask-layer { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Wordmark */
.wordmark {
  font-family: "Instrument Serif", serif;
  font-size: 28px; letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline; gap: 2px;
  color: #fff;
}
.wordmark .num { font-style: italic; }
.wordmark .digits {
  font-family: "Manrope", sans-serif;
  font-weight: 600; font-style: normal;
  letter-spacing: -0.03em;
  font-size: 26px;
  position: relative; top: -1px;
}
.wordmark .tick {
  width: 8px; height: 8px; border-radius: 50%;
  background: #DA3A16; display: inline-block; margin-left: 4px;
  position: relative; top: -2px;
}

/* Header */
.site-header {
  position: relative; z-index: 50;
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 36px 40px 0 40px;
}
.site-header .center-mark {
  position: absolute; left: 50%; top: 36px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}

/* Screen 1 main */
.s1-main {
  position: relative; z-index: 10;
  width: 100%; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 0 16px 96px 16px;
  text-align: center; color: #fff;
}
.s1-headline {
  font-weight: 500; line-height: 1.05; letter-spacing: -0.02em;
  width: 100%; margin: 0 auto;
  transform: translateY(40px);
  font-size: clamp(20px, 3.2vw, 56px);
  text-wrap: pretty;
}
.s1-headline .line { display: block; }
.s1-headline .serif { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; padding-right: 4px; }

/* Hover hot zones */
.hover-zone-1 {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 75%; z-index: 20;
}

/* Screen 2 elements */
.stat-card {
  position: absolute;
  left: calc(8% + 200px); top: 20%;
  z-index: 20; width: 320px;
  padding: 24px 32px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.16);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
}
.stat-card .row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 16px; }
.stat-card .stat-num {
  font-family: "Instrument Serif", serif; font-style: italic;
  color: #DA3A16; font-size: 72px; line-height: 80px;
  letter-spacing: -0.03em;
}
.stat-card h3 {
  font-family: "Instrument Serif", serif;
  color: #fff; font-size: 15px; letter-spacing: 0.02em;
  text-transform: uppercase; margin-bottom: 8px; line-height: 1.2;
  font-weight: 400;
}
.stat-card p {
  font-family: "Instrument Serif", serif; font-style: italic;
  color: rgba(255,255,255,0.64); font-size: 13px;
}

.s2-headline-wrap {
  position: absolute; left: 8%; bottom: 12%;
  z-index: 20; color: #fff; max-width: 540px;
}
.s2-headline {
  font-size: 44px; line-height: 1.05; letter-spacing: -0.02em;
  display: flex; flex-direction: column;
}
.s2-headline .sans { font-family: "Manrope", sans-serif; font-weight: 500; }
.s2-headline .serif { font-family: "Instrument Serif", serif; font-weight: 400; padding-top: 4px; }
.s2-headline .serif .italic { font-style: italic; }
.s2-headline .serif .not-italic { font-style: normal; }

.s2-cta {
  position: absolute; right: calc(8% + 100px); bottom: 12%;
  z-index: 20; display: flex; flex-direction: column; align-items: center;
}
.s2-cta .label {
  background: #fff; width: 180px; padding: 6px 0;
  display: flex; justify-content: center; align-items: center;
}
.s2-cta .label span {
  color: #000; font-family: "JetBrains Mono", monospace;
  font-size: 10px; text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.12em; line-height: 16px;
}
.s2-cta .badge {
  background: #DA3A16; width: 180px; height: 100px;
  display: flex; justify-content: center; align-items: center;
  color: #fff;
}

.hover-zone-2a {
  position: absolute; right: calc(8% + 100px); bottom: 12%;
  width: calc(50% - 50px); height: calc(50% + 230px); z-index: 30;
}
.hover-zone-2b {
  position: absolute; left: calc(8% + 200px); top: calc(20% + 190px);
  width: calc(15% + 250px); height: calc(22.5% + 130px);
  transform: translateY(-100%); z-index: 30;
}

/* Section index labels (corner annotations) */
.corner-mark {
  position: absolute; z-index: 25;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.corner-mark.tl { top: 36px; left: 40px; }
.corner-mark.br { right: 40px; bottom: 36px; }
.corner-mark.bl { left: 40px; bottom: 36px; }
.corner-mark.tr { right: 40px; top: 36px; }

.corner-mark .pulse {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #DA3A16; margin-right: 8px;
  animation: pulse 2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Placeholder media styling */
.media-placeholder-bg {
  background:
    repeating-linear-gradient(135deg,
      #1a1a1a 0, #1a1a1a 12px,
      #232323 12px, #232323 24px);
}
.media-placeholder-bg.video {
  background:
    repeating-linear-gradient(135deg,
      #DA3A16 0, #DA3A16 12px,
      #8a2410 12px, #8a2410 24px);
}
.media-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.5);
  padding: 8px 14px; border: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}

.fine-print {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}