:root{
  --bg:#070910;
  --text:#f6f7fb;
  --muted:#a8b0c7;
  --brand1:#7c3aed;
  --brand2:#22d3ee;
  --brand3:#22c55e;
  --stroke:#1d2440;
  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --radius: 20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.35), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(34,211,238,.25), transparent 55%),
radial-gradient(900px 650px at 50% 110%, rgba(34,197,94,.18), transparent 55%),
var(--bg); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:rgba(7,9,16,.72);backdrop-filter: blur(14px);border-bottom:1px solid rgba(29,36,64,.55);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.logoDot{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--brand1),var(--brand2),var(--brand3));box-shadow:0 12px 35px rgba(124,58,237,.35);}
.navLinks{display:flex;gap:14px;flex-wrap:wrap}
.navLinks a{padding:10px 12px;border-radius:999px;color:var(--muted);border:1px solid transparent;}
.navLinks a:hover{color:var(--text);border-color:rgba(34,211,238,.24);background:rgba(14,18,32,.5);}
.hero{padding:64px 0 26px}
.kicker{display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:999px;border:1px solid rgba(34,211,238,.25);background:rgba(14,18,32,.55);color:var(--muted);}
.hTitle{font-size:clamp(34px,4vw,52px);line-height:1.05;margin:18px 0 10px}
.hSub{max-width:760px;color:var(--muted);font-size:18px;line-height:1.6}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;border:1px solid rgba(29,36,64,.8);background:rgba(14,18,32,.65);color:var(--text);box-shadow:0 14px 40px rgba(0,0,0,.25);}
.btn:hover{transform:translateY(-1px);border-color:rgba(34,211,238,.35)}
.btnPrimary{border:none;background:linear-gradient(135deg,var(--brand1),var(--brand2));box-shadow:0 16px 45px rgba(124,58,237,.28);}
.section{padding:42px 0}
.h2{font-size:24px;margin:0 0 14px}
.card{background:linear-gradient(180deg, rgba(14,18,32,.85), rgba(12,16,32,.75));border:1px solid rgba(29,36,64,.75);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.cardPad{padding:18px}
.cardText{color:var(--muted);margin:0;line-height:1.55}
.featuredWrap{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.featuredWrap{grid-template-columns:1.05fr .95fr}}
.mediaBox{aspect-ratio:16/9;background:#070910;display:flex;align-items:center;justify-content:center}
.mediaBox iframe{width:100%;height:100%;border:0}
.listCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.miniCard{border-radius:16px;border:1px solid rgba(29,36,64,.75);background:rgba(14,18,32,.55);overflow:hidden;}
.miniCard:hover{border-color:rgba(34,211,238,.35);transform:translateY(-1px)}
.thumb{aspect-ratio:16/9;background:#0a0d18}
.thumb img{width:100%;height:100%;object-fit:cover}
.miniPad{padding:14px}
.miniTitle{margin:0 0 6px;font-weight:800}
.miniSub{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.footer{padding:34px 0 44px;border-top:1px solid rgba(29,36,64,.55);color:var(--muted)}
.footerRow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(29,36,64,.8);background:rgba(14,18,32,.45)}
.social a:hover{border-color:rgba(34,211,238,.35);color:var(--text)}
.small{font-size:13px;color:var(--muted)}

.brand{display:flex;align-items:center;gap:12px;font-weight:800}
.brandLogo{width:34px;height:34px;border-radius:12px}
.heroBookWrap{display:flex;justify-content:center;margin:24px 0}
.heroBook{max-width:520px;border-radius:18px;overflow:hidden}
.heroBook img{width:100%;display:block}

.listCards--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:720px){.listCards--two{grid-template-columns:1fr}}


.homeVideoGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 720px) {
  
.homeVideoGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

}

/* Micro-interactions */
.miniCard {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.miniCard:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 55px rgba(34,211,238,.18);
  border-color: rgba(34,211,238,.45);
}
.heroBook {
  transition: transform .35s ease, box-shadow .35s ease;
}
.heroBook:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 28px 90px rgba(124,58,237,.35);
}
.btn {
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(124,58,237,.25);
}

/* Vol.2 Interior Cards */
.interiorGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  margin-top:24px;
}
.interiorCard{
  background:#0b0f1a;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.interiorCard img{width:100%;display:block}
.interiorCardBody{padding:14px 16px 18px}
.interiorCardBody h4{margin:0 0 6px;font-size:1rem}
.interiorCardBody p{font-size:.9rem;opacity:.85;line-height:1.45}

/* Vol.2 Hero Front Cover */
.vol2-hero{
  display:flex;
  justify-content:center;
  margin:40px 0 24px;
}
.vol2-hero a img{
  max-width:420px;
  width:100%;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  transition:transform .3s ease, box-shadow .3s ease;
}
.vol2-hero a:hover img{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 30px 80px rgba(0,0,0,.75);
}

/* Vol.2 Hero CTA Buttons */
.vol2-ctas{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:18px 0 36px;
  flex-wrap:wrap;
}
.vol2-ctas a{
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
}
.vol2-ctas .buy{
  background:linear-gradient(135deg,#7cffc7,#6aa7ff);
  color:#081018;
}
.vol2-ctas .buy:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(124,255,199,.35);
}
.vol2-ctas .start{
  border:1px solid rgba(255,255,255,.25);
  color:#e6ebff;
}
.vol2-ctas .start:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-2px);
}

/* Global Subscribe Section */
.subscribe-global{
  max-width:900px;
  margin:80px auto 40px;
  padding:32px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(80,80,255,.12), rgba(0,255,200,.08));
}
.subscribe-global h2{margin-bottom:6px}
.subscribe-global p{opacity:.8;margin-bottom:18px}
.subscribe-form{display:flex;gap:12px;flex-wrap:wrap}
.subscribe-form input{
  flex:1;
  padding:14px 16px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.subscribe-form button{
  padding:14px 22px;
  border-radius:999px;
  border:none;
  font-weight:600;
  background:linear-gradient(135deg,#7cffc7,#6aa7ff);
  color:#081018;
  cursor:pointer;
}
.subscribe-form button:hover{transform:translateY(-2px)}
/* Book Cover – Vol.1 & Vol.2 Consistent Sizing */
.book-cover {
  max-width: 320px;        /* Matches Vol.2 visual scale */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 40px auto; /* Centers + spacing below */
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
/* Vol.1 Front Cover Hover Link Effect */
.vol1-hero {
  display: flex;
  justify-content: center;
  margin: 32px 0 48px;
}

.vol1-hero a {
  display: inline-block;
  border-radius: 18px;
}

.vol1-hero img.book-cover {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

/* Hover Effect */
.vol1-hero a:hover img.book-cover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 25px 80px rgba(124,58,237,.35),
    0 0 0 1px rgba(34,211,238,.35);
  filter: brightness(1.05);
}