/* Home page + "coming soon" book pages (loaded after styles.css) */
.acc-indigo{--a:#818CF8; --a2:#4F46E5}
.acc-teal{--a:#2DD4BF; --a2:#0D9488}
.acc-amber{--a:#FBBF24; --a2:#B45309}
.acc-pink{--a:#F472B6; --a2:#BE185D}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- CSS book covers ---------- */
.bcover{container-type:inline-size; position:relative; aspect-ratio:1100/1556; width:100%; border-radius:4px 12px 12px 4px; overflow:hidden; color:#fff; display:flex; flex-direction:column; padding:0;
  background:
    radial-gradient(70% 45% at 85% 72%, color-mix(in srgb, var(--a2) 60%, transparent), transparent 70%),
    radial-gradient(55% 40% at 5% 105%, color-mix(in srgb, var(--a) 30%, transparent), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/7cqw 7cqw,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/7cqw 7cqw,
    #070A1F;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08)}
.bcover::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,rgba(255,255,255,.14),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05)); pointer-events:none}
.bcover-img{padding:0; background:#070A1F}
.bcover-img img{width:100%; height:100%; object-fit:cover}
.bc-series{align-self:flex-start; max-width:84cqw; margin:9cqw 8cqw 0; font:700 2.5cqw/1 Inter, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--a); border:1px solid color-mix(in srgb, var(--a) 45%, transparent); background:color-mix(in srgb, var(--a) 12%, transparent); padding:1.8cqw 3cqw; border-radius:99px; white-space:nowrap}
.bc-title{font:700 13.5cqw/1 'Space Grotesk', sans-serif; letter-spacing:-.03em; margin:11cqw 8cqw 0; color:#fff}
.bc-long .bc-title{font-size:11cqw}
.bc-title em{font-style:normal; color:var(--a)}
.bc-sub{font:500 4.1cqw/1.4 Inter, sans-serif; color:#C7CDE4; margin:5cqw 8cqw 0; max-width:72cqw}
.bc-art{position:absolute; left:8cqw; bottom:15cqw; width:84cqw; height:auto}
.bc-ed{position:absolute; left:8cqw; bottom:6.5cqw; font:600 3.3cqw Inter, sans-serif; color:#94A3B8; letter-spacing:.06em; text-transform:uppercase}

/* ---------- status badges ---------- */
.status-badge{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.02em}
.status-badge.live{color:#6EE7B7; background:rgba(16,185,129,.14); border:1px solid rgba(52,211,153,.3)}
.status-badge.soon{color:#FCD34D; background:rgba(245,158,11,.12); border:1px solid rgba(251,191,36,.28)}
.status-badge.sm{font-size:11px; padding:3px 9px}
.dot-soon{width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(251,191,36,.7); animation:pulseA 2s infinite}
@keyframes pulseA{70%{box-shadow:0 0 0 10px rgba(251,191,36,0)}100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}}

/* ---------- home hero: fanned shelf ---------- */
.home-hero h1{font-size:clamp(40px,5.8vw,72px)}
.shelf{position:relative; height:540px; width:100%; max-width:540px; justify-self:center}
.shelf-book{position:absolute; width:46%; transition:transform .6s var(--ease), filter .4s; animation:bob 7s ease-in-out infinite; filter:brightness(.82)}
.shelf-book:hover{filter:brightness(1)}
.shelf-book.s0{left:0; top:15%; transform:rotate(-15deg); animation-delay:-1s}
.shelf-book.s1{left:15%; top:6%; transform:rotate(-6deg); animation-delay:-3s}
.shelf-book.s2{left:52%; top:9%; transform:rotate(8deg); animation-delay:-5s}
.shelf-book.s3{left:27%; top:16%; width:50%; z-index:2; filter:none; animation-delay:-2s}
.shelf-book.s0:hover{transform:rotate(-15deg) translateY(-14px)} .shelf-book.s1:hover{transform:rotate(-6deg) translateY(-14px)}
.shelf-book.s2:hover{transform:rotate(8deg) translateY(-14px)} .shelf-book.s3:hover{transform:translateY(-14px)}

/* ---------- book grid ---------- */
.bgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.bcard{position:relative; display:flex; flex-direction:column; border-radius:24px; overflow:hidden; color:inherit; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); transition:transform .4s var(--ease), border-color .3s}
.bcard::before{content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(129,140,248,.14),transparent 40%); opacity:0; transition:opacity .4s; pointer-events:none}
.bcard:hover{transform:translateY(-6px); border-color:rgba(165,180,252,.35); color:inherit} .bcard:hover::before{opacity:1}
.bcard.is-live{border-color:rgba(52,211,153,.3)}
.bcard-cover{padding:26px 34px 0; background:radial-gradient(80% 70% at 50% 100%,rgba(99,102,241,.16),transparent)}
.bcard-cover .bcover{transition:transform .5s var(--ease)}
.bcard:hover .bcard-cover .bcover{transform:translateY(-4px) rotate(-1.2deg)}
.bcard-body{display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; flex:1}
.bcard-track{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.bcard h3{font-size:21px; margin:0}
.bcard p{margin:0; font-size:14.5px; color:var(--ink2); flex:1}
.bcard .tags{display:flex; flex-wrap:wrap; gap:6px}
.bcard .tags span{font-size:11.5px; padding:3px 9px; border-radius:7px; background:rgba(255,255,255,.07); color:var(--ink2)}
.bcard-cta{margin-top:6px; font-weight:600; color:#A5B4FC}
.bcard:hover .bcard-cta{color:#fff}

/* ---------- learning path ---------- */
.path{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; counter-reset:p}
.path::before{content:""; position:absolute; left:6%; right:6%; top:34px; height:2px; background:linear-gradient(90deg,#FBBF24,#2DD4BF,#818CF8,#F472B6); opacity:.5}
.path li a{position:relative; display:flex; flex-direction:column; gap:8px; height:100%; padding:20px; border-radius:20px; color:inherit; border:1px solid var(--line); background:rgba(11,16,41,.82); transition:transform .4s var(--ease), border-color .3s}
.path li a:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--a) 55%, transparent)}
.path-no{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 14px 'Space Grotesk'; color:#0B1029; background:var(--a)}
.path-round{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--a)}
.path b{font:600 18px 'Space Grotesk'; color:var(--ink)}
.path-tag{font-size:14px; color:var(--muted); flex:1}

.bento.three{grid-template-columns:repeat(3,1fr)}

/* ---------- coming-soon page ---------- */
.soon-hero{min-height:86vh}
.soon-hero h1 .grad{background:linear-gradient(100deg,var(--a) 0%,#C084FC 55%,#A5B4FC 100%); -webkit-background-clip:text; background-clip:text; background-size:200% auto}
.soon-visual{display:grid; place-items:center; perspective:1600px}
.soon-book{width:min(330px,72vw); transform:rotateY(-18deg) rotateX(6deg); animation:bob 6s ease-in-out infinite; filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.waitlist{display:flex; flex-wrap:wrap; gap:10px; max-width:540px; margin:4px 0 0}
.waitlist input{flex:1 1 240px; min-width:0; height:54px; padding:0 18px; border-radius:999px; border:1px solid var(--line2); background:rgba(255,255,255,.05); color:#fff; font:500 16px Inter; outline:none; transition:border-color .2s, box-shadow .2s}
.waitlist input:focus{border-color:#818CF8; box-shadow:0 0 0 4px rgba(129,140,248,.2)}
.waitlist .btn{--h:54px; padding:0 24px}
.waitlist .wl-msg{flex-basis:100%; margin:2px 6px 0}
.waitlist .wl-msg.bad{color:#FDA4AF}
.waitlist.done .wl-msg{color:#6EE7B7}
.waitlist.done .btn{background:linear-gradient(135deg,#059669,#10B981); opacity:1}
.chip-row{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.chip-row li{font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid var(--line2); background:var(--panel); color:var(--ink2)}

.promo{display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center; padding:40px; border-radius:30px; background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(45,212,191,.06)); border:1px solid rgba(165,180,252,.25)}
.promo h2{font-size:clamp(26px,3.2vw,38px); margin-bottom:12px}
.promo p{margin:0 0 22px; color:var(--ink2)}
.promo-cover{transform:rotate(-4deg)}

.mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.mini-book{display:flex; gap:16px; align-items:center; padding:16px; border-radius:18px; border:1px solid var(--line); background:var(--panel); color:inherit; transition:transform .4s var(--ease), border-color .3s}
.mini-book:hover{transform:translateY(-4px); border-color:rgba(165,180,252,.35); color:inherit}
.mini-cover{width:76px; flex:none}
.mini-meta b{display:block; font:600 16px 'Space Grotesk'; color:var(--ink)}
.mini-meta > span:not(.status-badge){display:block; font-size:13px; color:var(--muted); margin:4px 0 8px}
.mini-meta .status-badge{display:inline-flex; margin:0}
.mini-book .bcover{border-radius:2px 6px 6px 2px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .path{grid-template-columns:repeat(2,1fr)} .path::before{display:none}
}
@media (max-width:1020px){
  .shelf{height:470px; max-width:460px}
  .soon-hero{min-height:auto}
  .waitlist{margin-inline:auto} .chip-row{justify-content:center}
  .mini-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .shelf{height:min(380px,92vw); max-width:380px}
  .bento.three{grid-template-columns:1fr}
  .promo{grid-template-columns:1fr; padding:26px; text-align:center; gap:24px} .promo-cover{width:160px; margin:0 auto} .promo .cta-row{justify-content:center}
}
@media (max-width:640px){
  .bgrid{grid-template-columns:1fr; gap:14px}
  .bcard{flex-direction:row}
  .bcard-cover{width:118px; flex:none; padding:18px 0 18px 16px; background:none}
  .bcard-body{padding:18px 16px 18px 16px; gap:7px}
  .bcard h3{font-size:18px}
  .bcard p{font-size:13.5px}
  .path{grid-template-columns:1fr}
  .waitlist .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.shelf-book,.soon-book,.dot-soon{animation:none}}