/* ============================================================
   Home page
   ============================================================ */

/* ---------------- Hero ---------------- */
.hero{
  position:relative;min-height:min(92vh,860px);
  display:flex;align-items:center;
  background:var(--night);
  overflow:hidden;
}
.hero-img{
  position:absolute;inset:0;
  background:url('img/hero-lion.jpg') center 28% / cover no-repeat;
  filter:saturate(.72) contrast(1.04);
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0);}to{transform:scale(1.13) translate3d(-1.4%,-1.2%,0);}}
@media(prefers-reduced-motion:reduce){.hero-img{animation:none;transform:scale(1.03);}}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(20,15,8,.94) 0%, rgba(20,15,8,.82) 40%, rgba(20,15,8,.36) 72%, rgba(20,15,8,.55) 100%),
    radial-gradient(ellipse 70% 60% at 12% 50%, rgba(140,99,30,.20), transparent 70%);
}
.hero-grain{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
.hero-inner{position:relative;z-index:2;width:100%;padding:clamp(96px,14vw,150px) 0 clamp(72px,10vw,110px);}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(32px,5vw,64px);align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(216,169,75,.42);background:rgba(216,169,75,.10);
  color:var(--gold-lit);border-radius:30px;padding:7px 17px 7px 13px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:26px;
}
.hero-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-lit);box-shadow:0 0 0 3px rgba(216,169,75,.22);}
.hero h1{color:#FFFDF6;max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.4);}
.hero h1 em{font-style:italic;font-weight:300;color:var(--gold-lit);display:block;}
.hero-sub{
  color:rgba(253,250,242,.80);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.72;
  max-width:52ch;margin:26px 0 0;
}
.hero-sub b{color:#FFFDF6;font-weight:600;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;}
.hero-meta{
  display:flex;gap:clamp(22px,4vw,44px);flex-wrap:wrap;margin-top:46px;
  padding-top:28px;border-top:1px solid rgba(251,246,234,.15);
}
.hero-meta div{display:flex;flex-direction:column;gap:3px;}
.hero-meta b{font-family:'Fraunces',serif;font-weight:400;font-size:1.85rem;color:var(--gold-lit);line-height:1;}
.hero-meta span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,246,234,.5);}

.hero-book{justify-self:center;}
.hero-book img{
  width:clamp(190px,24vw,300px);
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.6));
  animation:bookFloat 7s ease-in-out infinite;
}
@keyframes bookFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-14px) rotate(1deg);}}
@media(prefers-reduced-motion:reduce){.hero-book img{animation:none;}}
@media(max-width:900px){.hero-book{display:none;}}

/* ---------------- Marquee strip ---------------- */
.strip{background:var(--ink);color:rgba(251,246,234,.72);padding:15px 0;overflow:hidden;border-top:1px solid rgba(251,246,234,.08);}
.strip-track{display:flex;gap:0;white-space:nowrap;animation:marquee 46s linear infinite;width:max-content;}
.strip-track span{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:0 30px;display:inline-flex;align-items:center;gap:30px;
}
.strip-track span::after{content:"◆";color:var(--gold);font-size:7px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none;}}

/* ---------------- Two-col intro ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start;}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px;}}
.split p+p{margin-top:18px;}
.pullbox{
  background:var(--ink);color:var(--cream);
  padding:clamp(30px,4vw,44px);border-radius:5px;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.pullbox::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--gold-lit),var(--rust));}
.pullbox h3{color:#FDFAF2;font-style:italic;margin-bottom:18px;}
.pullbox p{color:rgba(251,246,234,.72);font-size:15px;line-height:1.75;margin:0 0 16px;}
.pullbox p:last-child{margin-bottom:0;}
.pullbox em{color:var(--gold-lit);font-style:normal;font-weight:600;}

/* ---------------- Seven animals ---------------- */
.animal-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:34px;}
@media(max-width:900px){.animal-picker{grid-template-columns:repeat(4,1fr);}}
@media(max-width:520px){.animal-picker{grid-template-columns:repeat(3,1fr);gap:8px;}}
.a-tab{
  background:var(--paper);border:1px solid var(--line);border-radius:5px;
  padding:16px 8px 13px;display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  position:relative;overflow:hidden;
}
.a-tab img{width:clamp(38px,5vw,52px);height:clamp(38px,5vw,52px);object-fit:contain;transition:transform .3s var(--ease);filter:grayscale(.45) opacity(.72);}
.a-tab span{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-dim);text-align:center;line-height:1.25;transition:color .2s;}
.a-tab:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.a-tab:hover img{transform:scale(1.08);filter:grayscale(0) opacity(1);}
.a-tab.on{border-color:var(--ac);background:var(--paper);box-shadow:0 0 0 1px var(--ac), var(--shadow);transform:translateY(-3px);}
.a-tab.on img{filter:none;transform:scale(1.06);}
.a-tab.on span{color:var(--ac);}
.a-tab.on::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--ac);}

.a-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:280px 1fr;
  min-height:400px;
}
@media(max-width:860px){.a-panel{grid-template-columns:1fr;min-height:0;}}
.a-side{
  background:linear-gradient(165deg,var(--ac),color-mix(in srgb,var(--ac) 62%, #1C1409));
  padding:clamp(28px,4vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  position:relative;overflow:hidden;transition:background .5s var(--ease);
}
.a-side::after{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.a-side-num{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.62);position:relative;z-index:1;}
.a-side img{width:clamp(110px,16vw,150px);margin:0 auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.35));position:relative;z-index:1;}
.a-side-skill{position:relative;z-index:1;}
.a-side-skill em{display:block;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px;}
.a-side-skill b{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:1.45rem;color:#fff;}

.a-body{padding:clamp(28px,4vw,46px);}
.a-body h3{font-style:italic;margin-bottom:6px;}
.a-body .a-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-bottom:20px;}
.a-body p{color:var(--muted);font-size:15px;line-height:1.76;margin:0 0 15px;}
.a-traits-h{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--line);}
.a-traits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.a-traits li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.62;color:var(--muted);}
.a-traits li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--ac);}
.a-fade{animation:aFade .45s var(--ease);}
@keyframes aFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------------- Quiz teaser ---------------- */
.teaser{
  position:relative;background:var(--night-2);color:var(--cream);
  border-radius:6px;padding:clamp(38px,6vw,72px);overflow:hidden;
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,60px);align-items:center;
  box-shadow:var(--shadow-lg);
}
@media(max-width:840px){.teaser{grid-template-columns:1fr;}}
.teaser::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 90% at 88% 50%, rgba(184,134,46,.24), transparent 66%);
}
.teaser>*{position:relative;z-index:1;}
.teaser h2{color:#FFFDF6;margin-bottom:18px;}
.teaser h2 em{font-style:italic;color:var(--gold-lit);}
.teaser p{color:rgba(251,246,234,.7);font-size:15.5px;line-height:1.74;max-width:50ch;margin:0 0 30px;}
.teaser-facts{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:32px;}
.teaser-facts div{display:flex;flex-direction:column;gap:2px;}
.teaser-facts b{font-family:'Fraunces',serif;font-weight:400;font-size:1.6rem;color:var(--gold-lit);line-height:1;}
.teaser-facts span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,246,234,.45);}
.teaser-ring{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.teaser-ring div{
  aspect-ratio:1;border:1px solid rgba(251,246,234,.16);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(251,246,234,.04);
  transition:border-color .3s,transform .3s;
}
.teaser-ring div:hover{border-color:var(--gold-lit);transform:translateY(-4px);}
.teaser-ring img{width:56%;filter:brightness(1.06);}
.teaser-ring div:nth-child(8){grid-column:2;}
@media(max-width:840px){.teaser-ring{max-width:320px;}}

/* ---------------- Testimonials ---------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:880px){.quotes{grid-template-columns:1fr;}}
.quote{
  background:var(--paper);border:1px solid var(--line);border-radius:5px;
  padding:clamp(28px,3.4vw,38px);display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-strong);}
.quote-mark{font-family:'Fraunces',serif;font-size:3.4rem;line-height:.5;color:var(--gold);opacity:.4;margin-bottom:20px;}
.quote p{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:1.14rem;line-height:1.52;color:var(--ink);margin:0 0 auto;}
.quote cite{
  display:block;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);
}

/* ---------------- Author ---------------- */
.author-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,80px);align-items:center;}
@media(max-width:860px){.author-grid{grid-template-columns:1fr;}}
.author-photo{position:relative;}
.author-photo img{width:100%;border-radius:5px;}
.author-photo::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--gold);border-radius:5px;z-index:-1;
}
.author-name{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);}
.author-name b{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:1.35rem;display:block;}
.author-name span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);}
.author-stats{display:flex;gap:clamp(20px,4vw,44px);flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--line);}
.author-stats div{display:flex;flex-direction:column;gap:3px;}
.author-stats b{font-family:'Fraunces',serif;font-weight:400;font-size:1.85rem;color:var(--gold-deep);line-height:1;}
.author-stats span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-dim);}

/* ---------------- Buy ---------------- */
.buy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px;margin:0 auto;}
@media(max-width:700px){.buy-grid{grid-template-columns:1fr;}}
.buy-card{
  display:flex;flex-direction:column;align-items:center;gap:13px;text-decoration:none;
  padding:30px 22px;border:1px solid rgba(251,246,234,.16);border-radius:5px;
  background:rgba(251,246,234,.03);
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.buy-card:hover{border-color:var(--gold-lit);background:rgba(216,169,75,.09);transform:translateY(-4px);}
.buy-card b{font-size:14px;font-weight:600;color:#FDFAF2;}
.buy-card span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,246,234,.45);}
.buy-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--gold-lit);}
.buy-icon svg{width:100%;height:100%;fill:currentColor;}

/* ---------------- Mobile refinements ---------------- */
@media(max-width:620px){
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(20,15,8,.92) 0%, rgba(20,15,8,.80) 45%, rgba(20,15,8,.90) 100%),
      radial-gradient(ellipse 90% 55% at 50% 40%, rgba(140,99,30,.18), transparent 72%);
  }
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .hero-meta{gap:22px 30px;}
  .hero-meta b{font-size:1.5rem;}
}
@media(max-width:520px){
  .a-side{flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;padding:22px;}
  .a-side img{width:80px;margin:0;}
  .a-side-num{display:none;}
}