:root{
  --bg:#0c0c0f;
  --bg-2:#111116;
  --text:#e6e6f0;
  --muted:#9aa0aa;
  --accent:#ff2a4f;
  --accent-2:#ff4d4d;
  --card:#15151a;
  --stroke:#22222b;
  --ring: rgba(255,42,79,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Bebas Neue',Inter,sans-serif;letter-spacing:.5px}
h1{font-size:64px;line-height:1;margin:0 0 12px}
h2{font-size:36px;margin:0 0 10px}
h3{font-size:20px;margin:0 0 6px}
.lead{font-size:18px;color:var(--text);opacity:.9}
.muted{color:var(--muted)}

.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#0c0c0f 0%,rgba(12,12,15,.75) 60%,rgba(12,12,15,0) 100%);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(255,255,255,.03)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:'Bebas Neue';font-size:28px;letter-spacing:2px;color:#fff}
.menu{display:flex;gap:18px}
.menu a{padding:9px 12px;border-radius:10px;transition:.2s}
.menu a:hover{background:rgba(255,255,255,.05)}

#nav-toggle{display:none}
.hamburger{display:none;cursor:pointer}
.hamburger span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;transition:.2s}

.hero{position:relative;min-height:76vh;display:grid;place-items:center;border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden}
.hero .backdrop{position:absolute;inset:0;background:radial-gradient(1200px 600px at 10% 10%,rgba(255,42,79,.10),transparent 60%), radial-gradient(900px 500px at 90% 80%,rgba(255,77,77,.10),transparent 60%), linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
.glow{position:absolute;filter:blur(80px);opacity:.6}
.glow-1{width:40vw;height:40vw;background:radial-gradient(circle,var(--accent),transparent 60%);top:-10%;left:-10%;animation:pulse 8s ease-in-out infinite}
.glow-2{width:35vw;height:35vw;background:radial-gradient(circle,var(--accent-2),transparent 60%);bottom:-10%;right:-10%;animation:pulse 9s ease-in-out infinite reverse}
.noise{position:absolute;inset:0;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%224%22 height=%224%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%222%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%220.035%22/></svg>');mix-blend-mode:soft-light}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.hero-inner{text-align:center;position:relative;z-index:2;padding:60px 0 80px}
.logo-title{font-size:96px;letter-spacing:8px;text-shadow:0 0 30px rgba(255,42,79,.35), 0 0 6px rgba(255,42,79,.75)}
.tagline{color:#fff;opacity:.9;font-size:18px;margin:8px 0 22px}
.cta{display:flex;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:#fff;font-weight:600;letter-spacing:.25px;transition:.2s;box-shadow:0 0 0 0 var(--ring)}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 6px var(--ring)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{height:36px;padding:0 12px;font-size:14px;border-radius:10px}

.page-hero{padding:72px 0 24px;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,42,79,.07),rgba(0,0,0,0))}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 10px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.card.locked .card-img{filter:grayscale(1);opacity:.5}
.card .card-img{height:150px;background:#0b0b0f;border-bottom:1px solid var(--stroke)}
.card .card-body{padding:14px}

.card.xl .card-img{height:260px}
.cover-ep1{background:linear-gradient(180deg,rgba(255,42,79,.2),rgba(0,0,0,.2)), radial-gradient(600px 300px at 70% 0%, rgba(255,77,77,.25), transparent), linear-gradient(90deg,#191922,#0c0c0f)}

.about,.families,.episodes{padding:44px 0}

.grid-characters{display:grid;grid-template-columns:1fr;gap:22px;padding:44px 0}
.profile{display:grid;grid-template-columns:120px 1fr;gap:18px;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:16px}
.profile .avatar{width:100%;height:120px;border-radius:12px;background:#0b0b0f}
.tag{font-size:14px;color:#fff;background:rgba(255,42,79,.25);border:1px solid rgba(255,42,79,.35);padding:2px 8px;border-radius:999px;margin-left:8px}

.episodes-grid{display:grid;grid-template-columns:1fr;gap:22px;padding:44px 0}
.episode{display:grid;grid-template-columns:220px 1fr;gap:18px;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:16px}
.episode.locked{opacity:.65}
.cover.tall{height:280px}
.cover{background:#0b0b0f;border-radius:12px}

.shop-grid{padding:32px 0}

.placeholder{position:relative;display:block}
.placeholder::after{content:'';position:absolute;inset:0;border:1px dashed rgba(255,255,255,.15);border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 30%);}

.video-wrap{padding:44px 0}
.ratio{position:relative;width:100%;max-width:1000px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--stroke);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ratio::before{content:'';display:block;padding-top:56.25%}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%}

.site-footer{margin-top:60px;border-top:1px solid rgba(255,255,255,.06);background:var(--bg-2)}
.footer-inner{padding:24px 20px;display:grid;gap:10px}
.footer-inner .grid{display:flex;gap:12px}
.copyright{color:var(--muted);font-size:13px;margin-top:6px}

@media (max-width: 900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .episode{grid-template-columns:1fr}
  .profile{grid-template-columns:80px 1fr}
  .logo-title{font-size:64px}
}
@media (max-width: 900px){
  .site-header .nav{ position: relative; }

  /* by default menu hidden on mobile */
  .menu{
    display: none;
    position: absolute;
    top: 64px;   /* header ke niche khulega */
    right: 20px;
    left: 20px;
    background: var(--bg-2);
    border: 1px solid var(--stroke);
    border-radius: 12px;
    padding: 8px;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    z-index: 60;
  }

  /* jab hamburger (checkbox) click hoga */
  #nav-toggle:checked ~ .menu{
    display: flex;
  }

  .hamburger{display:block; cursor:pointer}
  .hamburger span{display:block;width:26px;height:2px;background:#fff;margin:6px 0}

  .menu a{
    padding: 12px 14px;
    border-radius: 10px;
  }
  .menu a:hover{background: rgba(255,255,255,.06)}

  .cards{grid-template-columns:1fr}
  .logo-title{font-size:48px}
}
/* ===== Sticky Marvel-style Header ===== */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,12,15,.7);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--stroke);
}
.site-header .nav{
  display: grid;
  grid-template-columns: 180px 1fr 180px; /* left logo | center menu | right empty */
  align-items: center;
  height: 64px;
  gap: 12px;
}

/* Brand -> MIONATU block (Marvel vibe) */
.brand.mionatu{
  display:inline-flex; align-items:center; justify-content:center;
  height: 36px; padding: 0 12px;
  background: #E62429; color: #fff; font-weight: 900;
  letter-spacing: .12em; font-size: 16px; border-radius: 4px;
  text-decoration: none;
}

/* Centered desktop menu */
.menu{
  justify-self: center;
  display: flex; align-items: center; gap: 24px;
}
.menu a{ font-weight: 600; }

/* right slot empty (reserve alignment like Marvel’s right icons) */
.nav .right-slot{ justify-self: end; }

/* Mobile: dropdown via checkbox (you already have this) */
#nav-toggle{ position: absolute; left: -9999px; }
.hamburger{ display:none; cursor:pointer; padding:10px; border-radius:10px }
.hamburger span{ display:block; width:26px; height:2px; background:#fff; margin:6px 0; transition:.2s }

@media (max-width: 900px){
  .site-header .nav{ grid-template-columns: 1fr 40px; }
  .brand.mionatu{ justify-self: start; }
  .hamburger{ display:block; justify-self: end; }

  .menu{
    display:none; position:absolute; top:64px; left:20px; right:20px;
    background: var(--bg-2); border:1px solid var(--stroke);
    border-radius: 12px; padding: 10px; flex-direction: column; gap: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45); z-index: 60;
  }
  #nav-toggle:checked ~ .menu{ display:flex; }
  .nav .right-slot{ display:none; }
}
/* ===== Character hover pop (desktop only) ===== */
.grid-characters { overflow: visible; }
.profile{
  position: relative;
  overflow: visible;           /* pop ko cut hone se bachao */
}

/* hidden by default + animate in */
.profile-pop{
  position: absolute; top: 0; left: calc(100% + 10px);
  width: 320px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  padding: 12px;
  z-index: 60;

  opacity: 0; visibility: hidden;
  transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events: none;
}
.profile:hover .profile-pop{
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
  pointer-events: auto;
}

/* popup inner */
.profile-pop .pop-head{ display:flex; gap:12px; align-items:center }
.profile-pop img{
  width:72px; height:72px; object-fit:cover;
  border-radius:10px; border:1px solid var(--stroke)
}
.profile-pop h4{ margin:0; font-size:16px }
.profile-pop p{ margin:6px 0 10px; color:var(--muted); font-size:13px }
.profile-pop .btn{ padding:8px 10px; font-size:13px }

/* Rightmost tiles ke liye flip (so it doesn't go off-screen) */
.profile.pop-left .profile-pop{ left:auto; right: calc(100% + 10px); }

/* Mobile/tablet (no hover) — only truly disable on non-hover devices */
@media (hover: none){
  .profile-pop{ display: none !important; }
}
/* ===== Bottom Follow Bar (Marvel style) ===== */
body.has-followbar { padding-bottom: 56px; } /* content ko bar se upar push kare */

.follow-bar.bottom{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.12);
  height: 56px;
}

.follow-bar.bottom .inner{
  height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

.follow-bar .label{
  color:#fff; font-weight: 900; letter-spacing:.12em; font-size:12px;
  text-transform: uppercase;
}

.follow-icons{ display:flex; gap:12px }
.follow-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  transition:.18s;
}
.follow-icons a:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.32) }
.follow-icons svg{ width:16px; height:16px; fill:#fff; opacity:.92 }

@media (max-width: 480px){
  body.has-followbar { padding-bottom: 52px; }
  .follow-bar.bottom{ height: 52px; }
  .follow-bar.bottom .inner{ height: 52px; }
  .follow-icons a{ width:28px; height:28px; border-radius:6px }
  .follow-icons svg{ width:14px; height:14px }
  .follow-bar .label{ font-size:11px; letter-spacing:.1em }
}
/* ===== Home Kingpins: Hover Pop (desktop only) ===== */
.cards.cards-8 { overflow: visible; }
.cards.cards-8 .card{
  position: relative;
  overflow: visible; /* popup cut na ho */
}

/* hidden by default + animate */
.card-pop{
  position: absolute; top: 0; left: calc(100% + 10px);
  width: 340px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  padding: 12px;
  z-index: 70;

  opacity: 0; visibility: hidden;
  transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events: none;
}
.cards.cards-8 .card:hover .card-pop{
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
  pointer-events: auto;
}

/* popup inner */
.card-pop .pop-head{ display:flex; gap:12px; align-items:center }
.card-pop img{
  width:72px; height:72px; object-fit:cover;
  border-radius:10px; border:1px solid var(--stroke);
}
.card-pop h4{ margin:0; font-size:16px }
.card-pop p{ margin:6px 0 10px; color:var(--muted); font-size:13px }
.card-pop .btn{ padding:8px 10px; font-size:13px }

/* rightmost column flips left */
.card.pop-left .card-pop{ left:auto; right: calc(100% + 10px); }

/* mobile/tablet without hover: hide */
@media (hover: none){
  .card-pop{ display: none !important; }
}
/* ===== Mega Hero (Marvel-style) ===== */
.mega-hero{
  position: relative; isolation: isolate;
  min-height: 64svh; /* tall but responsive */
  display: grid; align-items: end;
  background: #08080a;
  border-bottom: 1px solid var(--stroke);
}
/* Fix for hero background image fit */
.mega-hero .bg{
  position:absolute; inset:0;
  z-index: 0;                          /* was -2 */
  background-size: cover;
  background-position: center top;     /* yahan 30%-60% bhi try kar sakte ho */
  background-repeat: no-repeat;
}

.mega-hero::after{
  content:""; position:absolute; inset:0;
  z-index: 1;                          /* was -1 */
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.65) 88%),
    radial-gradient(120% 80% at 10% 10%, rgba(0,0,0,.55), transparent 60%);
}

.mega-hero .inner{
  position: relative;                   /* add */
  z-index: 2;                           /* add: text hamesha upar रहे */
  padding: 22px 0 28px;
}
.mega-hero .stack{
  max-width: 720px;
}
.mega-hero .logo{
  display:block; width:min(420px, 60vw);
  height:auto; margin: 0 0 10px;
}
.mega-hero h1{
  font-family: "Bebas Neue", system-ui, sans-serif;
  letter-spacing:.02em; font-size: clamp(28px, 5vw, 46px);
  margin: 4px 0 6px;
}
.mega-hero .blurb{
  color: var(--muted); max-width: 60ch; margin: 8px 0 14px; font-size: 15px;
}
.mega-hero .cta{ display:flex; flex-wrap:wrap; gap:10px; }
.mega-hero .cta .btn{ padding:12px 16px; font-weight:700 }
.mega-hero .cta .btn.secondary{ background:transparent; border:1px solid var(--stroke) }

.mega-hero .dots{
  display:flex; gap:8px; margin-top:14px;
}
.mega-hero .dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(255,255,255,.35);
}
.mega-hero .dot.active{ background:#fff; }

@media (max-width: 860px){
  .mega-hero{ min-height: 54svh; }
  .mega-hero .stack{ max-width: 92%; }
}
/* ===== Preview Modal (comic reader) ===== */
.preview-modal{position:fixed; inset:0; z-index:999; display:none;}
.preview-modal.active{display:block;}
.pv-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter: blur(4px);}
.pv-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(96vw, 980px); max-height:90vh;
  background: var(--bg-2); border:1px solid var(--stroke);
  border-radius:16px; box-shadow:0 30px 120px rgba(0,0,0,.65);
  display:flex; flex-direction:column; overflow:hidden;
}
.pv-close{
  position:absolute; right:12px; top:10px; z-index:3;
  height:32px; width:32px; border-radius:8px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.06); color:#fff; font-weight:700; cursor:pointer;
}
.pv-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--stroke); background:rgba(0,0,0,.3);
}
.pv-head h3{margin:0; font-family:'Bebas Neue',sans-serif; letter-spacing:.08em;}
.pv-meta{font-weight:700; opacity:.9}

.pv-stage{
  position:relative; flex:1; min-height: 50vh;
  display:grid; place-items:center; background:#0b0b0f;
}
#pv-img{
  max-width:100%; max-height:84vh; width:auto; height:auto;
  object-fit:contain; display:block;
  transition:filter .2s ease;
}
.pv-lock{
  position:absolute; inset:auto 16px 16px 16px;
  background:rgba(0,0,0,.72); border:1px solid var(--stroke);
  backdrop-filter: blur(2px);
  border-radius:12px; padding:12px; text-align:center;
}
.pv-lock.hidden{display:none;}
.pv-lock h4{margin:0 0 6px}
.pv-cta{display:flex; gap:8px; justify-content:center; margin-top:8px}

.pv-controls{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-top:1px solid var(--stroke); background:rgba(0,0,0,.3);
}
.pv-dots{display:flex; gap:8px}
.pv-dots .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35)}
.pv-dots .dot.active{background:#fff}

@media (max-width: 600px){
  .pv-dialog{width: 96vw; max-height: 92vh;}
  #pv-img{max-height:78vh;}
  .pv-lock{inset:auto 12px 12px 12px;}
}