:root {
  --paper: #f4eee3;
  --ink: #0b0a09;
  --ember: #d28a43;
  --display: "Newsreader", Georgia, serif;
  --body: "Manrope", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { background: var(--ink); color: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

.hero { isolation: isolate; position: relative; min-height: 100svh; overflow: clip; display: grid; grid-template-rows: 92px minmax(0, 1fr) auto; background: var(--ink); }
.hero__visual { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__background { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; scale: 1.035; animation: background-in 1800ms var(--ease) 100ms both; }
.hero__visual::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,4,.58) 0%, rgba(5,5,4,.34) 43%, rgba(5,5,4,.08) 72%, rgba(5,5,4,.2) 100%), linear-gradient(0deg, rgba(5,5,4,.52) 0%, transparent 34%); }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }

.hero__header, .hero__content, .hero__foot { width: min(calc(100% - 96px), 1500px); margin-inline: auto; }
.hero__header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(244,238,227,.13); }
.brand { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-decoration: none; }
.hero__header p { margin: 0; color: rgba(244,238,227,.52); font-size: 9px; font-weight: 500; letter-spacing: .22em; }

.hero__content { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); align-items: center; gap: clamp(40px, 5vw, 90px); padding: clamp(44px, 6vh, 80px) 0; }
.copy { position: relative; z-index: 2; min-width: 0; max-width: 760px; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 30px; color: var(--ember); font-size: 9px; font-weight: 600; letter-spacing: .18em; }
.eyebrow span { color: rgba(244,238,227,.42); }
.headline { margin: 0; font-family: var(--display); font-size: clamp(61px, 5.55vw, 92px); font-weight: 400; line-height: .91; letter-spacing: -.048em; }
.headline em { color: var(--ember); font-weight: 400; }
.headline__line { display: block; overflow: hidden; padding: .04em .08em .1em 0; margin-bottom: -.1em; }
.headline__line > span { display: block; animation: line-in 1050ms var(--ease) both; }
.headline__line:nth-child(1) > span { animation-delay: 180ms; }
.headline__line:nth-child(2) > span { animation-delay: 290ms; }
.supporting { max-width: 510px; margin: 36px 0 0; color: rgba(244,238,227,.68); font-size: 14px; line-height: 1.7; }
.conversion { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.cta { min-height: 52px; display: inline-flex; align-items: center; gap: 34px; padding: 0 18px 0 21px; border: 1px solid rgba(244,238,227,.65); background: rgba(244,238,227,.02); color: var(--paper); font-size: 11px; font-weight: 600; text-decoration: none; letter-spacing: .01em; backdrop-filter: blur(8px); transition: color 350ms ease, background-color 350ms ease, border-color 350ms ease, transform 350ms var(--ease); }
.cta svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform 350ms var(--ease); }
.cta:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); transform: translateY(-2px); }
.cta:hover svg { transform: translateX(4px); }
.price { font-family: var(--display); color: rgba(244,238,227,.85); font-size: 21px; font-weight: 400; }

.product { position: relative; min-width: 0; display: grid; place-items: center; align-self: stretch; perspective: 1200px; animation: product-in 1350ms var(--ease) 340ms both; }
.product::before { content: ""; position: absolute; width: min(33vw, 500px); aspect-ratio: 1; border: 1px solid rgba(210,138,67,.25); border-radius: 50%; transform: translate(10%, 1%) scale(1); animation: orbit-in 1500ms var(--ease) 520ms both; }
.product::after { content: ""; position: absolute; width: 1px; height: 76%; left: 51%; top: 12%; background: linear-gradient(transparent, rgba(210,138,67,.38), transparent); transform: rotate(31deg) scaleY(1); transform-origin: center; animation: rule-in 1300ms var(--ease) 650ms both; }
.product__numeral { position: absolute; inset: 10% -5% auto auto; z-index: 0; display: flex; align-items: baseline; color: rgba(244,238,227,.075); font-family: var(--display); font-size: clamp(190px, 26vw, 420px); font-weight: 400; line-height: .72; letter-spacing: -.105em; transform: translate3d(calc(var(--book-x, 0) * -.35), calc(var(--book-y, 0) * -.25), 0); transition: transform 700ms var(--ease); user-select: none; }
.product__numeral span { display: block; animation: numeral-in 1200ms var(--ease) both; }
.product__numeral span:nth-child(1) { transform: translateY(-7%); animation-delay: 360ms; }
.product__numeral span:nth-child(2) { color: rgba(210,138,67,.11); animation-delay: 460ms; }
.product__numeral span:nth-child(3) { transform: translateY(8%); animation-delay: 560ms; }
.orbit-label { position: absolute; z-index: 2; color: rgba(244,238,227,.36); font-size: 7px; letter-spacing: .18em; white-space: nowrap; }
.orbit-label--2 { left: 4%; top: 17%; }
.orbit-label--1 { right: 0; top: 45%; writing-mode: vertical-rl; }
.orbit-label--3 { left: 12%; bottom: 12%; }
.hero__book { position: relative; z-index: 1; display: block; width: min(39vw, 610px); height: auto; filter: drop-shadow(0 42px 35px rgba(0,0,0,.52)); transform: translate3d(var(--book-x, 0), var(--book-y, 0), 0) rotate(-1.4deg) scale(.98); transform-origin: 50% 80%; transition: transform 500ms var(--ease), filter 700ms var(--ease); will-change: transform; }
.product:hover .hero__book { filter: drop-shadow(0 54px 42px rgba(0,0,0,.62)); }

.hero__foot { min-height: 72px; display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 32px; border-top: 1px solid rgba(244,238,227,.13); }
.hero__foot p { margin: 0; }
.microcopy { color: rgba(244,238,227,.48); font-size: 9px; letter-spacing: .02em; }
.microcopy span { margin-inline: 7px; color: var(--ember); }
.mechanism { font-family: var(--display); color: rgba(244,238,227,.82); font-size: 15px; }
.signature { color: rgba(244,238,227,.42); font-size: 8px; letter-spacing: .17em; text-transform: uppercase; }

.reveal { animation: reveal-in 850ms var(--ease) both; }
.reveal--1 { animation-delay: 60ms; } .reveal--2 { animation-delay: 130ms; }
.reveal--5 { animation-delay: 400ms; } .reveal--6 { animation-delay: 500ms; } .reveal--7 { animation-delay: 650ms; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes line-in { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes product-in { from { opacity: 0; transform: translate3d(36px, 42px, 0) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes numeral-in { from { opacity: 0; transform: translateY(22%); } }
@keyframes orbit-in { from { opacity: 0; transform: translate(10%, 1%) scale(.72); } }
@keyframes rule-in { from { opacity: 0; transform: rotate(31deg) scaleY(0); } }
@keyframes background-in { from { opacity: .45; scale: 1.09; } to { opacity: 1; scale: 1.035; } }

@media (max-width: 1100px) {
  .hero { grid-template-rows: 80px minmax(0, 1fr) auto; }
  .hero__header, .hero__content, .hero__foot { width: calc(100% - 56px); }
  .hero__content { grid-template-columns: minmax(0, 1.12fr) minmax(310px, .88fr); gap: 24px; }
  .headline { font-size: clamp(58px, 6.7vw, 76px); }
  .hero__book { width: min(40vw, 500px); }
  .hero__foot { grid-template-columns: 1fr auto; }
  .signature { display: none; }
}

@media (max-width: 820px) {
  .hero { min-height: 100svh; grid-template-rows: 70px auto auto; }
  .hero__visual::before { background: linear-gradient(180deg, rgba(5,5,4,.66) 0%, rgba(5,5,4,.48) 52%, rgba(5,5,4,.18) 100%); }
  .hero__background { object-position: 61% center; }
  .hero__header, .hero__content, .hero__foot { width: calc(100% - 40px); }
  .hero__content { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: clamp(48px, 7vh, 70px) 0 30px; }
  .copy { max-width: 680px; }
  .headline { max-width: 700px; font-size: clamp(58px, 10.5vw, 82px); }
  .supporting { max-width: 560px; margin-top: 28px; }
  .product { min-height: 42svh; align-self: auto; }
  .product::before { width: min(63vw, 470px); transform: translate(4%, 0); }
  .product__numeral { inset: 12% 3% auto auto; font-size: min(45vw, 350px); }
  .hero__book { width: min(62vw, 440px); }
  .hero__foot { min-height: 76px; grid-template-columns: 1fr auto; }
}

@media (max-width: 600px) {
  .hero { grid-template-rows: 64px auto auto; }
  .hero__header, .hero__content, .hero__foot { width: calc(100% - 36px); }
  .hero__header p { display: none; }
  .brand { font-size: 11px; }
  .hero__content { gap: 20px; padding: 42px 0 20px; }
  .eyebrow { margin-bottom: 21px; }
  .headline { max-width: 430px; font-size: clamp(45px, 12.7vw, 58px); line-height: .92; }
  .headline__line { overflow: visible; }
  .supporting { margin-top: 24px; font-size: 12px; line-height: 1.65; }
  .conversion { margin-top: 26px; gap: 16px; }
  .conversion { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .cta { min-width: 0; min-height: 50px; justify-content: space-between; gap: 16px; }
  .price { flex: none; font-size: 19px; }
  .product { min-height: 43svh; }
  .product::before { width: 76vw; }
  .product::after { height: 68%; left: 49%; top: 16%; }
  .product__numeral { inset: 13% 1% auto auto; font-size: 47vw; }
  .orbit-label--2 { left: 1%; top: 14%; }
  .orbit-label--1 { right: 2%; }
  .orbit-label--3 { left: 2%; bottom: 12%; }
  .hero__book { width: min(82vw, 350px); }
  .hero__foot { min-height: 68px; display: flex; justify-content: space-between; gap: 20px; }
  .microcopy { max-width: 180px; line-height: 1.55; }
  .microcopy span { margin-inline: 3px; }
  .mechanism { max-width: 120px; font-size: 12px; line-height: 1.2; text-align: right; }
}

@media (max-width: 370px) {
  .hero__content { padding-top: 30px; }
  .headline { font-size: 43px; }
  .supporting { font-size: 11px; }
  .product { min-height: 39svh; }
  .hero__book { width: min(80vw, 300px); }
}

@media (hover: hover) and (pointer: fine) {
  .product:hover .hero__book { transform: translate3d(var(--book-x, 0), calc(var(--book-y, 0) - 10px), 0) rotate(-.4deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}