@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Rethink+Sans:wght@400;500;700&display=swap');

:root { --bg: #080808; --text: #fff; --muted: #9a9a9f; --line: #242424; }
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "Rethink Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { position: absolute; z-index: 10; top: 0; right: 0; left: 0; height: 64px; display: flex; align-items: center; gap: 40px; padding: 0 40px; border-bottom: 2px solid var(--line); background: rgb(8 8 8 / 50%); backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; gap: 13px; font-size: 12px; white-space: nowrap; }
.brand-mark { width: 24px; height: 24px; display: block; object-fit: contain; }
.announcement { flex: 1; margin: 0; color: #9a9a9a; font-size: 12px; font-weight: 500; text-align: right; }
.announcement strong { font-weight: 700; }

.hero { height: 100vh; min-height: 640px; position: relative; overflow: hidden; }
.hero-image { position: absolute; z-index: 0; top: 72px; right: -70px; width: min(1040px, 82vw); height: calc(100% - 90px); opacity: .3; background: url("bat.png") center/contain no-repeat; }
.hero-image::after { content: none; }
.hero-content { position: relative; z-index: 1; height: 100%; margin-left: 80px; width: min(971px, calc(100% - 160px)); display: flex; flex-direction: column; }
h1 { margin: 139px 0 0; max-width: 971px; color: #dadbde; font: 400 96px/1.08 "Geist Mono", monospace; letter-spacing: -4px; }
.hero-bottom { position: absolute; right: 0; bottom: 80px; left: 0; }
.hero-bottom p { width: 676px; margin: 0 0 40px; font-size: 20px; line-height: 1.35; }
.actions { display: flex; gap: 12px; }

.button { isolation: isolate; position: relative; display: inline-grid; place-items: center; min-height: 45px; padding: 0 23px; overflow: hidden; border: 1px solid #fff; color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; transition: color 0ms linear 300ms, border-color 200ms ease; }
.button::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #fff; transform: scaleY(0); transform-origin: top; transition: transform 300ms ease; }
.button:hover, .button:focus-visible { color: #000; border-color: #fff; transition-delay: 0ms; }
.button:hover::before, .button:focus-visible::before { transform: scaleY(1); }
.button:active::before { background: #e1e1e1; transition: background-color 200ms ease; }
.button-filled { color: #000; background: #fff; border-color: #fff; transition: color 0ms linear 300ms, background-color 0ms linear 300ms, border-color 200ms ease; }
.button-filled::before { background: var(--bg); transform: scaleY(0); }
.button-filled:hover, .button-filled:focus-visible { color: #fff; background: #fff; border-color: #fff; }
.button-filled:hover::before, .button-filled:focus-visible::before { transform: scaleY(1); }
.button-filled:active { border-color: #a9a9a9; }

.statement { height: 540px; display: grid; place-items: center; padding: 0 192px; }
.statement p, .closing-content > p { margin: 0; max-width: 896px; font-size: 40px; line-height: 1.3; text-align: center; }
.belief { position: relative; overflow: hidden; height: 494px; }
.belief-one { height: 525px; }
.belief article { position: relative; z-index: 1; width: 500px; }
.belief-one article, .belief-three article { margin: 80px 0 0 80px; }
.belief-two article { margin: 80px 80px 0 auto; }
.belief-heading { margin-bottom: 27px; }
.belief-heading span { display: block; margin-bottom: 8px; color: var(--muted); font: 500 24px/1 "Geist Mono", monospace; }
.belief-heading h2 { margin: 0; font-size: 40px; font-weight: 500; line-height: 1.3; }
.belief-heading.reverse { text-align: right; }
.belief-heading.reverse span { margin-left: auto; }
.belief article > p { margin: 0; font-size: 16px; line-height: 1.32; }
.belief article > .button { margin-top: 40px; }
.belief-image { position: absolute; pointer-events: none; }
.adam { top: -30px; right: 0; width: 815px; height: 584px; background: url("creation-of-adam.png") right center/contain no-repeat; }
.adam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgb(8 8 8 / .82) 14%, transparent 42%); }
.eye { left: 13px; top: 66px; width: 633px; height: 362px; background: url("eye.png") center/cover no-repeat; }
.flower { top: 59px; right: 0; width: 633px; height: 362px; background: url("flower.png") center/cover no-repeat; }
.belief-two article > p { text-align: right; }

.closing { height: 1016px; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 192px; overflow: hidden; }
.closing::after { content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 592px; background: linear-gradient(180deg, var(--bg) 0%, rgb(8 8 8 / .18) 35%, rgb(8 8 8 / .12) 100%), url("bottom-background.jpg") center 55%/cover no-repeat; }
.closing-content { position: relative; z-index: 1; display: grid; justify-items: center; gap: 40px; }
.socials { position: absolute; z-index: 1; bottom: 40px; left: 40px; display: flex; gap: 20px; }
.socials a { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; transition: none; }
.socials a:hover { opacity: .88; filter: brightness(.88); }
.socials a:active { opacity: .66; filter: brightness(.66); }
.socials img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.aim-high { position: absolute; z-index: 1; right: 40px; bottom: 40px; color: #fff; font: 500 24px/1.05 "Geist Mono", monospace; text-align: right; }

@media (max-width: 760px) {
  .site-header { height: auto; min-height: 64px; align-items: flex-start; gap: 16px; padding: 17px 20px; }
  .announcement { font-size: 10px; line-height: 1.25; }
  .hero { height: 750px; }
  .hero-image { top: 72px; right: -16%; left: auto; width: 108%; height: calc(100% - 90px); background-position: center; }
  .hero-content { width: auto; margin: 0 24px; }
  h1 { margin-top: 100px; font-size: clamp(46px, 13vw, 72px); letter-spacing: -3px; }
  .hero-bottom { right: 24px; bottom: 42px; left: 24px; }
  .hero-bottom p { width: auto; margin-bottom: 24px; font-size: 17px; }
  .actions { flex-wrap: wrap; }
  .statement { height: auto; min-height: 430px; padding: 72px 24px; }
  .statement p, .closing-content > p { font-size: clamp(27px, 7.8vw, 40px); }
  .belief, .belief-one { height: auto; min-height: 620px; display: flex; align-items: flex-end; padding: 300px 24px 56px; }
  .belief article, .belief-one article, .belief-two article, .belief-three article { width: auto; margin: 0; }
  .belief-heading h2 { font-size: 31px; }
  .belief-heading.reverse { text-align: right; }
  .belief-heading.reverse span { margin-left: auto; }
  .belief-image { top: 0; right: 0; left: 0; width: 100%; height: 310px; }
  .adam { background: url("creation-of-adam.png") center/contain no-repeat; }
  .eye { background-position: center; }
  .flower { background-position: center 35%; }
  .closing { height: 760px; padding: 96px 24px 0; }
  .closing::after { height: 430px; background-position: center; }
  .socials { bottom: 30px; left: 24px; }
  .aim-high { right: 24px; bottom: 30px; font-size: 19px; }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .belief-image { transform: scale(.82); }
  .adam { transform-origin: right center; }
  .eye { transform-origin: left center; }
  .flower { transform-origin: right center; }
}