:root{
  --bg:#0c0b0a; --gold:#bb854d; --gold-2:#c79a6b; --graphite:#a79f98; --border:#2a2623;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:#eee;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif}
a{color:var(--gold);text-decoration:none}
a:hover{opacity:.92}
.mt-2{margin-top:10px}.mt-3{margin-top:16px}

.lux-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 55% at 20% 10%, rgba(187,133,77,.20), transparent 60%),
    radial-gradient(50% 45% at 80% 0%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(50% 65% at 50% 100%, rgba(187,133,77,.16), transparent 65%),
    linear-gradient(180deg, #0c0b0a 0%, #0c0b0a 40%, #12100f 100%);
  filter: saturate(1.05);
}
.lux-noise{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.07;background-image:url('https://grainy-gradients.vercel.app/noise.svg');animation:noiseSlide 18s linear infinite}
@keyframes noiseSlide{from{background-position:0 0}to{background-position:1000px 600px}}

/* Glitter */
.glitter{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.glitter span{position:absolute;display:block;border-radius:50%;width:var(--s,2px);height:var(--s,2px);
  background:radial-gradient(circle at 40% 40%, #fff8, #d8b38e 60%, #bb854d 100%);
  box-shadow:0 0 8px rgba(220,180,120,.7), 0 0 18px rgba(220,180,120,.35);
  opacity:.0;animation:float var(--fd,9s) ease-in-out infinite, twinkle var(--td,3.5s) ease-in-out infinite alternate}
@keyframes float{0%{transform:translateY(40px);opacity:.0} 10%{opacity:.8} 50%{opacity:.35} 100%{transform:translateY(-120vh);opacity:0}}
@keyframes twinkle{0%{filter:brightness(1)} 50%{filter:brightness(1.6)} 100%{filter:brightness(1)}}

/* Header */
.header{position:sticky;top:0;z-index:30;border-bottom: 1px solid #bb854d14;transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease}
.header.scrolled{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)),
    rgba(12,11,10,0.42);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(16px) saturate(1.3);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold);font-weight:700}
.nav{display:flex;gap: 44px;align-items:center}
.nav a{color:var(--gold);text-transform:uppercase;font-weight:300;font-size:15px}
.nav a:hover{background: linear-gradient(90deg, #bb854d, #dbd5cd, #bb854d);-webkit-background-clip: text;-webkit-text-fill-color: transparent;transition: background 0.5s ease;}

.container{max-width:1180px;margin:0 auto;padding:0 20px}
.section{padding: 60px 0;position:relative}
.h1{color:var(--gold);font-weight:800}
.h1.big{font-size: clamp(42px, 7vw, 84px);line-height:1.04;}
.p{color: #9b8671;line-height: 30px;font-weight: 300;}

/* v4 hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;position:relative}
.persp{perspective:1600px}
.book{position:relative;margin:0 auto;width:min(92%,460px)}
.book-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .15s ease-out}
.book-inner{position:relative;aspect-ratio:3/4;border:1px solid var(--border);border-radius:18px;overflow:hidden;transform-style:preserve-3d;animation:spin 20s linear infinite;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.face{position:absolute;inset:0;backface-visibility:hidden}
.face img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.face.back{transform:rotateY(180deg)}
.spine{position:absolute;left:0;top:0;bottom:0;width:12px;background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0))}
.gloss{position:absolute;inset:0;background:linear-gradient(70deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);animation:glint 10s ease-in-out infinite;pointer-events:none}
@keyframes spin{to{transform:rotateY(360deg)}}
@keyframes glint{0%{transform:translateX(-130%)}50%{transform:translateX(0%)}100%{transform:translateX(140%)}}
.book:hover .book-inner{animation-play-state:paused}
.book:hover .gloss{animation-play-state:paused}

/* Gold glow */
.book::after{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;top:-8%;bottom:-12%;
  background: radial-gradient(50% 60% at 50% 60%, rgba(187,133,77,.28), rgba(187,133,77,.10) 45%, transparent 72%);
  filter: blur(18px);
}

/* Grids/cards */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:rgba(26,23,21,.72);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 8px 26px rgba(0,0,0,.22);transition:transform .2s ease}
.card:hover{transform:translateY(-2px)}
.price{font-weight:800;color:var(--gold)}
.teaser-frame{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:rgba(187,133,77,.06)}

/* Buttons & ripple */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 20px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:transform .2s ease, background-color .25s ease, border-color .25s ease; overflow:hidden; color: var(--bg)}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
.btn-gradient{--g1:#d8b38e;--g2:#bb854d;--g3:#a0733f;background-image:linear-gradient(135deg,var(--g1),var(--g2) 50%,var(--g3));background-size:220% 220%;background-position:0% 50%;box-shadow:0 10px 30px rgba(187,133,77,.28), 0 2px 0 rgba(0,0,0,.15) inset}
.btn-gradient:hover{background-position:100% 50%}
.btn-outline{border:1px solid var(--gold);color:var(--gold);background:linear-gradient(180deg, rgba(187,133,77,.10), rgba(187,133,77,.06))}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background:rgba(255,255,255,.35);pointer-events:none}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}

/* Page transitions */
.page{opacity:0;transform:translateY(14px);transition:opacity .45s ease, transform .45s ease}
.page.enter{opacity:1;transform:translateY(0)}

.buy-float{position:fixed;left:12px;right:12px;bottom:14px;z-index:40;display:none}
.buy-float.visible{display:block}

.footer{border-top:1px solid var(--border);padding:24px 0;color:var(--graphite)}
.loader{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(12,11,10,.75);backdrop-filter:blur(6px)}
.loader.visible{display:flex}
.loader .bar{width:56%;max-width:560px;height:4px;border-radius:999px;overflow:hidden;background:#1f1b18;border:1px solid var(--border);box-shadow:0 6px 22px rgba(0,0,0,.35), inset 0 0 14px rgba(0,0,0,.35)}
.loader .bar>span{display:block;width:40%;height:100%;background:linear-gradient(90deg,#a0733f,#bb854d,#d8b38e);animation:loadrun 1.4s ease-in-out infinite}
@keyframes loadrun{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

@media (max-width: 980px){
  .header-inner{height:60px}
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .h1.big{font-size: clamp(36px, 7vw, 64px)}
}
@media (max-width: 520px){
  .grid-4{grid-template-columns:1fr}
}

/* mobile drawer */
.hamburger{ display:none; width:42px; height:42px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.04); backdrop-filter: blur(6px); align-items:center; justify-content:center; gap:5px; }
.hamburger span{ display:block; width:18px; height:2px; background:#e6d3bf; transition:transform .25s ease, opacity .2s ease; }
.hamburger.open span:nth-child(1){ transform: translateY(6px) rotate(45deg) }
.hamburger.open span:nth-child(2){ opacity:0 }
.hamburger.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }
.nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:39; opacity:0; transition:opacity .25s ease; }
.nav-backdrop.show{ opacity:1 }
.nav-drawer{ position:fixed; left:0; right:0; top:0; z-index:40; transform: translateY(-100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)), rgba(12,11,10,0.75);
  backdrop-filter: blur(14px) saturate(1.25); border-bottom:1px solid rgba(255,255,255,0.08); box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  padding: 68px 20px 20px; display:flex; flex-direction:column; gap:14px; transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav-drawer.open{ transform: translateY(0) }
.nav-drawer a{ color:#e6d3bf; font-size:18px; padding:10px 6px; border-radius:8px; }
.nav-drawer a:hover{ background:rgba(255,255,255,.06) }
@media (max-width:980px){ .nav{ display:none } .hamburger{ display:flex } }






/* ---------- page title sizes / spacing ---------- */
.page-title {
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--gold);
  margin: 32px 0 18px;
}

/* give sections a consistent vertical rhythm on inner pages */
.section .container > .page-title:first-child {
  margin-top: 6px;
}

/* ---------- “What you’ll learn inside” crystal frame ---------- */
.learn-crystal {
  position: relative;
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(187,133,77,0.08), transparent 55%),
    radial-gradient(120% 100% at 80% 0%, rgba(255,255,255,0.05), transparent 60%),
    rgba(26,23,21,0.55);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 40px rgba(0,0,0,0.35);
}
.learn-crystal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* ---------- newsletter (sleek, earlier look) ---------- */
.newsletter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.newsletter .field {
  min-width: 260px;
  flex: 1 1 320px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #fff;
  outline: none;
}
.newsletter .btn {
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: 0 0 0 rgba(199,154,107,0.0), 0 6px 16px rgba(199,154,107,0.24);
  transition: box-shadow .2s ease, transform .2s ease;
}
.newsletter .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 rgba(199,154,107,0.0), 0 10px 24px rgba(199,154,107,0.34);
}

/* keep long page headers from colliding with the top */
.page .section:first-child { padding-top: 40px; }

@media (max-width: 768px) {
  .page-title { font-size: clamp(28px, 7vw, 40px); }
}





/* ===== About the book (frosted + luxe) ===== */
.about-book {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(187,133,77,0.08), transparent 55%),
    radial-gradient(120% 100% at 80% 0%, rgba(255,255,255,0.05), transparent 60%),
    rgba(26,23,21,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 42px rgba(0,0,0,0.35);
}
.about-book .ab-copy { padding: 10px 8px; }
.about-book .ab-copy .lead { font-size: 18px; color: var(--text); opacity: .9; }
.about-book .bullets { margin: 10px 0 0; padding: 0 0 0 18px; }
.about-book .bullets li {margin: 10px 0;color: var(--muted);color: #9c8671;font-weight: 300;line-height: 30px;}
.about-book .ab-ctas {margin-top: 30px;display: flex;gap: 10px;flex-wrap: wrap;}

.about-book .ab-art {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}
.about-book .ab-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

/* page title refinement used on About/Contact/Blog */
.page-title {
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--gold);
  margin: 32px 0 18px;
}
.page .section:first-child { padding-top: 40px; }

/* “What you’ll learn inside” crystal frame */
.learn-crystal {
  position: relative;
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(187,133,77,0.08), transparent 55%),
    radial-gradient(120% 100% at 80% 0%, rgba(255,255,255,0.05), transparent 60%),
    rgba(26,23,21,0.55);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px rgba(0,0,0,0.35);
}
.learn-crystal img { display:block; width:100%; height:auto; border-radius:12px; object-fit:cover; }

/* newsletter (sleek) */
.newsletter { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.newsletter .field {
  min-width:260px; flex:1 1 320px;
  padding:12px 14px; background:rgba(0,0,0,0.25);
  border:1px solid var(--border); border-radius:999px; color:#fff;
}

/* responsive tightening */
@media (max-width: 1024px) {
  .about-book { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .page-title { font-size: clamp(28px, 7vw, 40px); }
  .about-book .ab-art img { min-height: 220px; }
}


/* ---- Inner page titles (cannot be overridden) ---- */
.page-title {
  font-size: clamp(34px, 5.2vw, 48px) !important;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--gold);
  margin: 28px 0 16px;
}
.page .section:first-child { padding-top: 40px; }

/* ---- Contact Right Panel ---- */
.contact-aside .line {margin: 8px 0;color: var(--muted);color: #9c8671;font-weight: 300;}
.contact-aside .hint { font-size: 12px; opacity: .75; margin-top: 4px; }
.contact-aside .stack { display: grid; gap: 10px; }
.contact-aside .cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ---- Blog card thumb (broken images) ---- */
.post-card .thumb img { background: #0f0e0d; }
.post-card .thumb img:where([src=""], [src=" "]) { content-visibility: hidden; }


.kicker{
        color: #bb854d;
    text-transform: uppercase;
    font-weight: 200;
}
}