:root {
  --cream: #f8f1e6;
  --paper: #fff8ea;
  --paper-edge: #d8b97b;
  --brown: #3f2417;
  --brown-2: #6d3f24;
  --gold: #d7a94d;
  --gold-soft: rgba(215, 169, 77, .45);
  --ink: #24150f;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Montserrat, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: #120a07; color: white; overflow: hidden; }
.landing-shell { min-height: 100vh; display: grid; place-items: center; position: relative; isolation: isolate; padding: 28px; background: radial-gradient(circle at 50% 38%, rgba(247,214,134,.20), transparent 26%), radial-gradient(circle at 15% 15%, rgba(122,74,35,.58), transparent 32%), radial-gradient(circle at 88% 76%, rgba(215,169,77,.18), transparent 34%), linear-gradient(135deg, #140905 0%, #2a160d 46%, #0c0604 100%); perspective: 1400px; }
.landing-shell::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at center, black, transparent 72%); opacity:.42; z-index:-2; }
.landing-shell::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0,0,0,.46) 86%); pointer-events:none; z-index: 4; }
.intro-bg span { position: absolute; width: 44vmin; height: 44vmin; border-radius: 50%; border: 1px solid rgba(215,169,77,.14); box-shadow: 0 0 80px rgba(215,169,77,.12) inset; animation: orbFloat 6s ease-in-out infinite; }
.intro-bg span:nth-child(1){ top: 8%; left: 8%; }
.intro-bg span:nth-child(2){ right: 6%; bottom: 10%; animation-delay: -2s; }
.intro-bg span:nth-child(3){ width: 25vmin; height: 25vmin; right: 17%; top: 14%; animation-delay: -3.5s; }
@keyframes orbFloat { 50% { transform: translate3d(0,-18px,60px) rotate(18deg); opacity: .62; } }
.landing-content { position: relative; z-index: 8; width: min(980px, 94vw); min-height: 88vh; display: grid; place-items: center; text-align: center; }
.intro-stage { position: relative; width: min(70vw, 600px); height: min(54vw, 430px); display: grid; place-items: center; transform-style: preserve-3d; animation: stageEntrance 1200ms cubic-bezier(.16,1,.3,1) both, stageFadeOut 1400ms cubic-bezier(.16,1,.3,1) 3.35s forwards; margin-top: -5vh; }

@keyframes stageFadeOut {
  0% { opacity: 1; filter: blur(0); }
  45% { opacity: .42; filter: blur(6px); }
  100% { opacity: 0; filter: blur(16px); pointer-events:none; }
}
.landing-copy { z-index: 10; }

@keyframes stageEntrance { from { opacity: 0; transform: translateY(42px) rotateX(22deg) scale(.82); filter: blur(12px); } to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); } }
.book-shadow { position: absolute; width: 68%; height: 16%; bottom: 13%; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(28px); transform: rotateX(76deg) translateZ(-80px); animation: shadowPulse 4200ms ease-in-out infinite; }
@keyframes shadowPulse { 50% { transform: rotateX(76deg) translateZ(-80px) scale(.88); opacity: .72; } }
.book { position: relative; width: 360px; height: 246px; transform-style: preserve-3d; transform: rotateX(63deg) rotateZ(-8deg) rotateY(-12deg); animation: bookReveal 4300ms cubic-bezier(.77,0,.18,1) forwards, bookFloat 4200ms ease-in-out 4300ms infinite; }
@keyframes bookReveal { 0% { transform: rotateX(68deg) rotateZ(-15deg) rotateY(-20deg) scale(.86); } 28% { transform: rotateX(62deg) rotateZ(-8deg) rotateY(-10deg) scale(1); } 54% { transform: rotateX(58deg) rotateZ(-4deg) rotateY(0deg) scale(1.04); } 78% { transform: rotateX(52deg) rotateZ(0deg) rotateY(0deg) scale(1.08); } 100% { transform: rotateX(43deg) rotateZ(0deg) rotateY(0deg) scale(1.18) translateY(-8px); } }
@keyframes bookFloat { 50% { transform: rotateX(41deg) rotateZ(.6deg) rotateY(2deg) scale(1.18) translateY(-16px); } }
.book-back, .front-cover, .page, .book-pages-left, .book-pages-right { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; border-radius: 8px 15px 15px 8px; }
.book-back { left: 50%; background: linear-gradient(135deg, #5c331f, #2f180f 58%, #1b0c07); box-shadow: 0 16px 45px rgba(0,0,0,.42), inset -12px 0 28px rgba(0,0,0,.38), inset 0 0 0 2px rgba(215,169,77,.26); transform: rotateY(0deg) translateZ(-10px); }
.front-cover { left: 50%; transform-origin: left center; background: radial-gradient(circle at 36% 38%, rgba(255,227,153,.20), transparent 20%), linear-gradient(135deg, #7b4627 0%, #3b2115 56%, #1b0c07 100%); box-shadow: 0 18px 42px rgba(0,0,0,.45), inset 12px 0 20px rgba(255,231,173,.1), inset -18px 0 22px rgba(0,0,0,.38), inset 0 0 0 2px rgba(215,169,77,.34); animation: coverOpen 4300ms cubic-bezier(.77,0,.18,1) forwards; }
@keyframes coverOpen { 0%, 28% { transform: rotateY(0deg) translateZ(15px); } 58% { transform: rotateY(-78deg) translateZ(15px); } 78% { transform: rotateY(-154deg) translateZ(15px); } 100% { transform: rotateY(-181deg) translateZ(15px); } }
.cover-grain { position:absolute; inset:0; border-radius: inherit; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px); mix-blend-mode: screen; opacity: .45; }
.cover-border { position: absolute; inset: 20px; border: 1.5px solid rgba(215,169,77,.58); border-radius: 9px; box-shadow: 0 0 0 6px rgba(215,169,77,.05) inset; }
.cover-spine { position:absolute; left: calc(50% - 12px); top: -3px; width: 24px; height: 103%; border-radius: 9px; background: linear-gradient(90deg, #1a0b06, #92572d, #2a130b); transform: translateZ(18px); box-shadow: 0 0 22px rgba(0,0,0,.4); }
.page-stack { position:absolute; inset:0; transform-style:preserve-3d; }
.page { left: 50%; transform-origin: left center; background: linear-gradient(90deg, rgba(96,52,28,.16), transparent 13%), repeating-linear-gradient(#0000 0 18px, rgba(113,78,32,.11) 19px 20px), linear-gradient(135deg, var(--paper), #f4dfb6); box-shadow: inset -9px 0 16px rgba(94,52,24,.13), inset 0 0 0 1px rgba(110,74,29,.16), 0 7px 16px rgba(0,0,0,.08); backface-visibility: visible; }
.page::after { content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(90deg, rgba(255,255,255,.22), transparent 35%, rgba(108,65,22,.12)); transform: rotateY(180deg); backface-visibility: visible; }
.page-1 { transform: translateZ(12px); animation: pageFlip1 4300ms cubic-bezier(.65,0,.2,1) forwards; }
.page-2 { transform: translateZ(9px); animation: pageFlip2 4300ms cubic-bezier(.65,0,.2,1) forwards; }
.page-3 { transform: translateZ(6px); animation: pageFlip3 4300ms cubic-bezier(.65,0,.2,1) forwards; }
.page-4 { transform: translateZ(3px); animation: pageFlip4 4300ms cubic-bezier(.65,0,.2,1) forwards; }
.page-5 { transform: translateZ(0px); animation: pageFlip5 4300ms cubic-bezier(.65,0,.2,1) forwards; }
.page-6 { transform: translateZ(-3px); animation: pageSettle 4300ms ease forwards; }
@keyframes pageFlip1 { 0%,38%{transform:rotateY(0) translateZ(12px)} 60%,100%{transform:rotateY(-176deg) translateZ(12px)} }
@keyframes pageFlip2 { 0%,45%{transform:rotateY(0) translateZ(9px)} 68%,100%{transform:rotateY(-171deg) translateZ(9px)} }
@keyframes pageFlip3 { 0%,52%{transform:rotateY(0) translateZ(6px)} 76%,100%{transform:rotateY(-166deg) translateZ(6px)} }
@keyframes pageFlip4 { 0%,59%{transform:rotateY(0) translateZ(3px)} 84%,100%{transform:rotateY(-158deg) translateZ(3px)} }
@keyframes pageFlip5 { 0%,66%{transform:rotateY(0) translateZ(0)} 92%,100%{transform:rotateY(-148deg) translateZ(0)} }
@keyframes pageSettle { 0%,70%{filter:brightness(.96)} 100%{filter:brightness(1.06)} }
.book-pages-left { left: 0; background: linear-gradient(90deg, #ecd29e, #fff5dc 88%); transform: translateZ(2px); border-radius: 15px 8px 8px 15px; opacity: 0; animation: leftPages 4300ms ease forwards; }
.book-pages-right { left: 50%; background: linear-gradient(90deg, #fff6df, #e9cd91); transform: translateZ(1px); opacity: 1; }
@keyframes leftPages { 0%,50%{opacity:0} 72%,100%{opacity:1} }
.landing-copy { position:absolute; left:50%; bottom: 7vh; transform:translateX(-50%) translateY(18px); width:min(820px, 90vw); opacity:0; filter: blur(14px); animation: revealCopy 1100ms cubic-bezier(.16,1,.3,1) 3.35s forwards; }
.landing-copy .eyebrow { margin:0 0 10px; text-transform: uppercase; letter-spacing: .22em; color: #d7a94d; font-weight: 900; font-size: 13px; }
.landing-copy h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(38px, 7.2vw, 88px); line-height: .9; margin: 0; text-shadow: 0 22px 60px rgba(0,0,0,.45); }
.landing-copy p { margin:18px auto 24px; max-width:720px; color: rgba(255,244,219,.78); font-weight:600; font-size: clamp(15px, 2vw, 19px); line-height:1.65; }
.start-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height: 56px; padding: 0 28px; border-radius: 999px; color:#2a160d; background: linear-gradient(135deg, #fff1c9, #d7a94d 55%, #a66c2d); text-decoration:none; font-weight:900; box-shadow: 0 16px 44px rgba(215,169,77,.24), inset 0 1px 0 rgba(255,255,255,.55); transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; }
.start-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 24px 60px rgba(215,169,77,.32); filter: saturate(1.12); }
@keyframes revealCopy { to { opacity:1; filter: blur(0); transform:translateX(-50%) translateY(0); } }
.skip-link { position:absolute; right:24px; top:22px; z-index:10; color:rgba(255,244,219,.7); text-decoration:none; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:12px; border:1px solid rgba(255,244,219,.16); border-radius:999px; padding:10px 14px; background:rgba(255,255,255,.04); backdrop-filter: blur(12px); }
@media (max-width: 640px){ .book { width: 280px; height: 192px; } .intro-stage { width: 94vw; height: 70vw; margin-top: -14vh; } .landing-copy{ bottom:5vh;} .landing-copy h1{font-size:42px;} }
@media (prefers-reduced-motion: reduce){ * { animation:none!important; transition:none!important; } .landing-copy { opacity:1; filter:none; transform:translateX(-50%); } }

/* ===== Client logo-led intro polish ===== */
html, body{
  background:#070403;
}
.landing-shell{
  background:
    radial-gradient(circle at 50% 34%,rgba(143,68,51,.30),transparent 24%),
    radial-gradient(circle at 16% 18%,rgba(199,155,91,.22),transparent 34%),
    radial-gradient(circle at 86% 72%,rgba(145,70,48,.24),transparent 32%),
    linear-gradient(135deg,#050403 0%,#1c0d0a 36%,#5d2d27 70%,#070403 100%)!important;
}
.landing-shell::before{
  background-image:
    linear-gradient(rgba(199,155,91,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(199,155,91,.055) 1px,transparent 1px);
}
.intro-bg span{
  border-color:rgba(143,68,51,.26);
  box-shadow:0 0 86px rgba(199,155,91,.16) inset,0 0 52px rgba(143,68,51,.08);
}
.cover-logo-plate{
  position:absolute;
  left:50%;
  top:50%;
  width:78%;
  min-height:78px;
  transform:translate(-50%,-50%) translateZ(26px);
  display:grid;
  place-items:center;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,248,242,.88));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.76);
  backface-visibility:hidden;
}
.cover-logo-plate img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 14px rgba(63,36,23,.12));
}
.landing-logo-mark{
  width:min(320px,72vw);
  margin:0 auto 18px;
  padding:14px 20px;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.36);
  box-shadow:0 22px 64px rgba(0,0,0,.25),0 0 0 1px rgba(199,155,91,.10) inset;
  backdrop-filter:blur(14px);
}
.landing-logo-mark img{
  width:100%;
  display:block;
  height:auto;
}
.landing-copy .eyebrow{
  color:#e7b777;
}
.start-btn{
  background:linear-gradient(135deg,#fff8f1,#c79b5b 54%,#8f4433)!important;
  color:#140905!important;
}
@media (max-width:640px){
  .cover-logo-plate{width:82%;min-height:60px;padding:10px;border-radius:13px}
  .landing-logo-mark{width:min(260px,76vw);padding:12px 16px;border-radius:20px;margin-bottom:14px}
}


/* ===== White intro background update for logo polish ===== */
html, body{
  background:#fff!important;
  color:#24150f;
}
.landing-shell{
  background:#fff!important;
}
.landing-shell::before{
  background-image:
    linear-gradient(rgba(199,155,91,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(199,155,91,.10) 1px,transparent 1px)!important;
  opacity:.24;
}
.landing-shell::after{
  background:radial-gradient(circle at 50% 50%,transparent 0 55%,rgba(199,155,91,.10) 100%)!important;
}
.intro-bg span{
  border-color:rgba(199,155,91,.18)!important;
  box-shadow:0 0 86px rgba(199,155,91,.10) inset,0 0 52px rgba(143,68,51,.04)!important;
}
.landing-copy, .landing-copy h1, .landing-copy p{
  color:#24150f;
}
.landing-copy .eyebrow{
  color:#7b3f35!important;
}
.landing-logo-mark{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  padding:0!important;
}
.skip-link{
  color:#7b3f35!important;
  border-color:rgba(123,63,53,.18)!important;
  background:rgba(255,255,255,.72)!important;
}

/* ===== Final premium index intro: clean white, no text glow ===== */
html, body{
  background:#fffaf5!important;
  color:#2b1712!important;
}
.landing-shell{
  background:
    radial-gradient(circle at 14% 12%,rgba(215,169,77,.18),transparent 31%),
    radial-gradient(circle at 88% 78%,rgba(143,68,51,.10),transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#fffaf3 48%,#fff7ed 100%)!important;
  overflow:hidden;
}
.landing-shell::before{
  background-image:
    linear-gradient(rgba(123,63,53,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,63,53,.055) 1px,transparent 1px)!important;
  background-size:58px 58px!important;
  mask-image:radial-gradient(circle at center, black, transparent 76%)!important;
  opacity:.34!important;
}
.landing-shell::after{
  background:
    radial-gradient(circle at 50% 50%,transparent 0 60%,rgba(123,63,53,.055) 100%),
    linear-gradient(180deg,rgba(255,255,255,0),rgba(255,250,245,.38))!important;
}
.intro-bg span{
  border-color:rgba(199,155,91,.20)!important;
  box-shadow:0 0 90px rgba(199,155,91,.10) inset,0 20px 80px rgba(123,63,53,.055)!important;
}
.intro-stage{
  filter:none!important;
}
.book-shadow{
  background:rgba(63,36,23,.14)!important;
  filter:blur(24px)!important;
  opacity:.68!important;
}
.cover-logo-plate{
  background:#fff!important;
  border:1px solid rgba(123,63,53,.08)!important;
  box-shadow:0 18px 40px rgba(63,36,23,.12), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.cover-logo-plate img,
.landing-logo-mark img{
  filter:none!important;
}
.landing-logo-mark{
  width:min(300px,70vw)!important;
  margin:0 auto 22px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.landing-copy{
  bottom:7.5vh!important;
  color:#2b1712!important;
}
.landing-copy .eyebrow{
  color:#8f4433!important;
  letter-spacing:.30em!important;
  font-size:12px!important;
  margin-bottom:14px!important;
}
.landing-copy h1{
  color:#3f2417!important;
  text-shadow:none!important;
  filter:none!important;
  letter-spacing:-.055em!important;
  line-height:.94!important;
  max-width:900px!important;
  margin:0 auto!important;
}
.landing-copy p{
  color:rgba(43,23,18,.72)!important;
  text-shadow:none!important;
  filter:none!important;
  max-width:680px!important;
  margin:20px auto 26px!important;
  font-weight:650!important;
  font-size:clamp(15px,1.7vw,18px)!important;
}
.start-btn{
  color:#fffaf4!important;
  background:linear-gradient(135deg,#7b3f35 0%,#3f2417 56%,#19100d 100%)!important;
  box-shadow:0 18px 44px rgba(63,36,23,.18), inset 0 1px 0 rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.26)!important;
}
.start-btn:hover{
  box-shadow:0 26px 64px rgba(63,36,23,.24)!important;
}
.skip-link{
  color:#7b3f35!important;
  border-color:rgba(123,63,53,.16)!important;
  background:rgba(255,255,255,.76)!important;
  box-shadow:0 12px 28px rgba(63,36,23,.08)!important;
}
@media (max-width:640px){
  .landing-copy{bottom:5vh!important;}
  .landing-copy h1{font-size:clamp(38px,13vw,52px)!important;letter-spacing:-.045em!important;}
  .landing-copy p{font-size:14px!important;margin:16px auto 22px!important;}
  .start-btn{min-height:52px;padding:0 22px!important;}
}