/* Zentora – home page catalogue teaser (front page only) */
.zhk{overflow:hidden;background:radial-gradient(1200px 500px at 85% 50%,rgba(124,58,237,.08),transparent 60%),radial-gradient(800px 400px at 10% 20%,rgba(10,108,255,.07),transparent 60%)}
.zhk .zk-defs{position:absolute;width:0;height:0}
.zhk-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.zhk-copy h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.03em;margin:.35em 0 .4em}
.zhk-copy p{font-size:17px;color:#475569;line-height:1.6;margin:0 0 18px;max-width:34em}
.zhk-pts{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.zhk-pts li{position:relative;padding-left:30px;color:#334155;font-weight:600;font-size:15px}
.zhk-pts li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#0a6cff,#7c3aed) center/100% no-repeat}
.zhk-pts li::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.zhk-copy .zt-arr{transition:transform .25s}.zhk-copy .zt-btn:hover .zt-arr{transform:translateX(4px)}
/* reveal */
.zhk-copy,.zhk-stage{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.zhk-js:not(.zhk-in-view) .zhk-copy,.zhk-js:not(.zhk-in-view) .zhk-stage{opacity:0;transform:translateY(28px)}
.zhk-stage{transition-delay:.15s}
/* stage + book */
.zhk-stage{display:block;position:relative;perspective:1800px;padding:20px 0 50px;text-decoration:none;--w:min(260px,22vw)}
.zhk-book{position:relative;width:calc(var(--w)*2);height:calc(var(--w)*1.413);margin:0 auto;transform-style:preserve-3d;transform:rotateX(14deg) rotateY(-8deg) rotateZ(1deg);animation:zhkFloat 7s ease-in-out infinite}
.zhk-paused .zhk-book{animation-play-state:paused}
@keyframes zhkFloat{0%,100%{transform:rotateX(14deg) rotateY(-8deg) rotateZ(1deg) translateY(0)}50%{transform:rotateX(11deg) rotateY(-4deg) rotateZ(0) translateY(-12px)}}
.zhk-shadow{position:absolute;left:12%;right:12%;bottom:18px;height:28px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,23,42,.28),transparent);filter:blur(4px);animation:zhkSh 7s ease-in-out infinite}
.zhk-paused .zhk-shadow{animation-play-state:paused}
@keyframes zhkSh{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.7}}
.zhk-pg,.zhk-leaf{position:absolute;top:0;width:50%;height:100%}
.zhk-l{left:0;border-radius:10px 2px 2px 10px;overflow:hidden;box-shadow:-10px 20px 40px -14px rgba(15,23,42,.45)}
.zhk-r{right:0;border-radius:2px 10px 10px 2px;overflow:hidden;box-shadow:10px 20px 40px -14px rgba(15,23,42,.45),inset 3px 0 0 #e2e8f0, 4px 4px 0 -1px #f1f5f9,7px 7px 0 -2px #e2e8f0}
.zhk-leaf{right:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.45,.05,.25,1);z-index:calc(10 - var(--n))}
.zhk-leaf.on{transform:rotateY(-180deg);z-index:calc(20 + var(--n))}
.zhk-reset .zhk-leaf{transition:transform .6s ease,opacity .3s}
.zhk-f,.zhk-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.zhk-f{border-radius:2px 10px 10px 2px}
.zhk-b{transform:rotateY(180deg);border-radius:10px 2px 2px 10px}
.zhk-f::after,.zhk-b::after{content:"";position:absolute;inset:0;pointer-events:none}
.zhk-f::after{background:linear-gradient(90deg,rgba(15,23,42,.14),transparent 14%)}
.zhk-b::after{background:linear-gradient(270deg,rgba(15,23,42,.14),transparent 14%)}
.zhk-spine{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(#cbd5e1,#94a3b8,#cbd5e1);z-index:40;transform:translateZ(1px)}
/* thumbnails */
.zhk-t{position:absolute;inset:0;background:#fff;padding:9% 9% 8%;display:flex;flex-direction:column;gap:6%;font-size:calc(var(--w)/20);color:#0f172a;text-align:left;box-sizing:border-box}
.zhk-t em{font-style:normal;font-weight:800;font-size:.8em;color:#7c3aed;letter-spacing:.08em}
.zhk-t>b{font-size:1.45em;line-height:1.1;letter-spacing:-.02em;margin-top:-4%}
.zhk-cv{background:linear-gradient(155deg,#020b24 0%,#071a44 50%,#1e1b6b 100%);color:#fff;justify-content:flex-start}
.zhk-cv .zk-cover-art{position:absolute;inset:0;width:100%;height:100%}
.zhk-cv img,.zhk-cv b,.zhk-cv span{position:relative;z-index:1}
.zhk-cv img{width:44%;height:auto}
.zhk-cv b{font-size:1.55em;line-height:1.05;letter-spacing:-.03em;margin-top:18%;max-width:92%}
.zhk-cv span{margin-top:auto;align-self:flex-start;font-size:.7em;font-weight:700;padding:.45em .9em;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.zhk-grid{display:grid;grid-template-columns:1fr 1fr;gap:6%;flex:1}
.zhk-grid i{display:flex;align-items:center;justify-content:center;background:#f8fafc;border:1px solid #eef2f7;border-radius:8px}
.zhk-ic{width:92%;height:auto}
.zhk-tl{list-style:none;margin:0;padding:0 0 0 4%;display:flex;flex-direction:column;justify-content:flex-start;gap:1.5em;margin-top:6%;position:relative}
.zhk-tl::before{content:"";position:absolute;left:calc(4% + 1.05em);top:1em;bottom:1em;width:2px;background:linear-gradient(#0a6cff,#ec4899)}
.zhk-tl li{display:flex;align-items:center;gap:.7em;font-weight:700;font-size:.92em;line-height:1.15;position:relative}
.zhk-tl span{flex:0 0 2.1em;height:2.1em;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8em;background:linear-gradient(135deg,#0a6cff,#7c3aed);box-shadow:0 0 0 4px #fff}
.zhk-pks{display:flex;flex-direction:column;gap:6%;flex:1}
.zhk-pk{flex:1;border:1px solid #e2e8f0;border-radius:8px;padding:5% 7%;display:flex;flex-direction:column;gap:7%;justify-content:center}
.zhk-pk strong{font-size:.95em}
.zhk-pk s{display:block;height:.42em;border-radius:9px;background:#e2e8f0;text-decoration:none}
.zhk-pk s:nth-of-type(2){width:80%}.zhk-pk s:nth-of-type(3){width:60%}
.zhk-pk.on{background:linear-gradient(135deg,#0a6cff,#7c3aed);border-color:transparent;color:#fff}
.zhk-pk.on s{background:rgba(255,255,255,.4)}
/* responsive */
@media (max-width:900px){
	.zhk-in{grid-template-columns:1fr;gap:28px}
	.zhk-copy{text-align:left}
	.zhk-stage{--w:min(42vw,220px);padding:10px 0 40px}
}
@media (prefers-reduced-motion:reduce){
	.zhk-book,.zhk-shadow{animation:none}
	.zhk-leaf{transition:none}
	.zhk-js .zhk-copy,.zhk-js .zhk-stage{opacity:1!important;transform:none!important;transition:none}
}