/* =========================================================
   HERO-NEW — Consolidated Styles (scoped, layout-safe)
   Goal: Clean + predictable, no layout changes
========================================================= */

/* ---------------------------------------------------------
   1) Title (matches your intent, clamp + centered)
--------------------------------------------------------- */
#hero-new #hero-title{
  font-size: clamp(2.15rem, 1.35rem + 2.8vw, 3.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 clamp(0.8rem, 0.55rem + 0.9vw, 1.15rem) !important;
  text-align: center !important;
  text-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* ---------------------------------------------------------
   2) Dek + Byline (scoped to this hero only)
   - Dek: bigger clamped (your request)
   - Byline: simple (no underline, not overproduced)
--------------------------------------------------------- */
#hero-new .text-container .hero-dek{
  max-width: 50ch;
  margin: 0 auto clamp(0.55rem, 0.4rem + 0.8vw, 0.95rem) !important;
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.7rem) !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.38) !important;
  text-wrap: pretty;
}

#hero-new .text-container .hero-byline{
  margin: 0 auto clamp(0.45rem, 0.3rem + 0.6vw, 0.8rem) !important;
  text-align: center !important;
  max-width: 52ch;
}

#hero-new .hero-byline .by{
  font-size: 0.82rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  margin-right: 0.5rem !important;
}

#hero-new .hero-byline .name{
  font-weight: 700 !important;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem) !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
  text-decoration: none !important; /* kill underline */
}

/* ---------------------------------------------------------
   3) Text column spacing (reduce tall stack slightly)
--------------------------------------------------------- */
#hero-new .text-container{
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 0.35rem + 0.7vw, 0.85rem);
}

/* CTA group centered + tight (no lift behavior controlled elsewhere) */
#hero-new .hero-button-group{
  margin: clamp(0.35rem, 0.25rem + 0.6vw, 0.65rem) auto clamp(0.4rem, 0.25rem + 0.6vw, 0.7rem) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

#hero-new .hero-button-group .preorder-btn{
  padding: clamp(0.65rem, 0.55rem + 0.4vw, 0.8rem) clamp(1rem, 0.9rem + 0.6vw, 1.25rem) !important;
  font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1rem) !important;
}

/* Reviews: smaller + tighter */
#hero-new .pricing-p{
  margin: 0 auto !important;
  max-width: 52ch;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem) !important;
  line-height: 1.55 !important;
  opacity: 0.92;
  text-wrap: pretty;
}

#hero-new .pricing-p strong{
  font-weight: 700;
  opacity: 0.9;
}

/* ---------------------------------------------------------
   4) Mobile behavior (layout-preserving)
   - Hide the book cover column on small phones (your existing behavior)
   - Hide sound toggle/audio on small phones (your existing behavior)
--------------------------------------------------------- */
@media (max-width: 767.98px){
  /* Hide book cover column on mobile */
  #hero-new .col-lg-7.col-md-8.text-center.px-0{
    display: none !important;
  }

  /* Hide sound icon and audio on mobile */
  #sound-toggle,
  #ambient-audio{
    display: none !important;
  }
}

@media (max-width: 575px){
  #hero-new .text-container .hero-dek{
    max-width: 44ch;
    line-height: 1.62 !important;
  }
}

/* ---------------------------------------------------------
   5) Animation keyframes (kept, even if not used here yet)
--------------------------------------------------------- */
@keyframes heroTwinkleBright{
  0%, 100%{ opacity: 0; }
  25%{ opacity: 1; }
  75%{ opacity: 0.6; }
}

/* ---------------------------------------------------------
   6) Lite YouTube placeholder (kept for your page usage)
--------------------------------------------------------- */
.lite-yt{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.lite-yt::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:68px;
  height:48px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="68" height="48" viewBox="0 0 68 48"><path fill="#f00" d="M66.52 7.74a8 8 0 0 0-5.63-5.66C56.49 1 34 1 34 1s-22.49 0-26.89 1.08A8 8 0 0 0 1.48 7.74 83.1 83.1 0 0 0 .4 24a83.1 83.1 0 0 0 1.08 16.26 8 8 0 0 0 5.63 5.66C11.51 47 34 47 34 47s22.49 0 26.89-1.08a8 8 0 0 0 5.63-5.66A83.1 83.1 0 0 0 67.6 24a83.1 83.1 0 0 0-1.08-16.26Z"/><path fill="#fff" d="M45 24 27 14v20"/></svg>') no-repeat center / 68px 48px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

.lite-yt > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .3s ease;
  filter: brightness(.9);
}

.lite-yt:hover > img{ transform: scale(1.02); }

/* =========================================================
   HERO-NEW — Treat <=970px as “mobile mode”
   (uses the same behavior you currently have at <=767.98px)
========================================================= */
@media (max-width: 970px){

  /* Hide book cover column */
  #hero-new .col-lg-7.col-md-8.text-center.px-0{
    display: none !important;
  }

  /* Hide sound icon and audio */
  #sound-toggle,
  #ambient-audio{
    display: none !important;
  }

  /* Optional (recommended): keep text column centered when cover disappears */
  #hero-new .text-container{
    text-align: center;
    align-items: center;
  }
}

/* =========================================================
   HERO-NEW — Mobile background image (instead of black/video)
========================================================= */
@media (max-width: 970px){

  /* Hide the mobile hero video so the image becomes the background */
  #hero-new #hero-video-mobile{
    display: none !important;
  }

  /* Paint the mobile background image */
  #hero-new{
    background-image: url("assets/img/hero/utlof-mobile.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important; /* fallback while image loads */
  }
}

/* =========================================================
   HERO-NEW — Mobile glass for the dek line
========================================================= */
@media (max-width: 970px){
  #hero-new .text-container p.hero-dek{
    display: inline-block;              /* shrink-wrap to content width */
    max-width: min(52ch, 100%);
    margin: 0 auto 0.9rem !important;   /* keep centered and spaced */
    padding: 0.85rem 0.95rem !important;

    border-radius: 16px;

    /* gentle glass */
    background: rgba(10, 14, 16, 0.48) !important;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);

    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    /* soft depth without “lifting” */
    box-shadow:
      0 10px 26px rgba(0,0,0,0.28),
      inset 0 1px 0 rgba(255,255,255,0.10);

    color: rgba(255,255,255,0.94) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.40) !important;
  }
}

/* =========================================================
   HERO-NEW — Mobile glass for the BYLINE (matches dek)
========================================================= */
@media (max-width: 970px){
  #hero-new .text-container p.hero-byline{
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;

    max-width: min(52ch, 100%);
    margin: 0 auto 0.9rem !important;
    padding: 0.55rem 0.85rem !important;

    border-radius: 999px;

    /* gentle glass */
    background: rgba(10, 14, 16, 0.42) !important;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow:
      0 10px 24px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.10);

    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.36) !important;
  }

  /* keep the "By" subtle */
  #hero-new .text-container .hero-byline .by{
    font-size: 0.78rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.62) !important;
  }

  /* author name: clean, readable, no underline */
  #hero-new .text-container .hero-byline .name{
    font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.18rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    color: rgba(255,255,255,0.92) !important;
    text-decoration: none !important;
  }
}


/* ================================
   HERO NEW — Scoped styles only
   (safe to paste after main.css)
================================ */

/* ---------- 0) Mobile breakpoint preference (970px) ---------- */
@media (max-width: 970px){
  /* treat as “mobile mode” */
  #hero-new .col-lg-7.col-md-8.text-center.px-0{ display:none !important; } /* hide cover */
  #hero-new .text-container{ text-align:center; }

  /* use your mobile image as the hero background */
  #hero-new{
    background: url("assets/img/hero/utlof-mobile.webp") center/cover no-repeat;
  }

  /* keep overlay readable on image */
  #hero-new .hero-new-overlay{
    background: linear-gradient(180deg,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.62) 55%,
      rgba(0,0,0,0.70) 100%) !important;
  }

  /* mobile “glass” around dek + byline cluster */
  #hero-new .hero-dek,
  #hero-new .hero-byline{
    display: block;
    width: min(560px, 92%);
    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0.95rem 1rem;
    border-radius: 16px;

    background: rgba(12, 18, 18, 0.46);
    border: 1px solid rgba(255,255,255,0.14);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
      0 16px 36px rgba(0,0,0,0.40),
      inset 0 0 0 1px rgba(255,255,255,0.06);
  }

  /* tighten between the two glass blocks so it feels like one unit */
  #hero-new .hero-dek{ margin-bottom: 0.65rem !important; }
  #hero-new .hero-byline{ margin-top: 0 !important; }

  /* bring CTA closer (mobile) */
  #hero-new .hero-button-group{
    justify-content: center;
    margin-top: 0.9rem !important;
  }

  /* reviews smaller on mobile so hero isn’t a full page */
  #hero-new .pricing-p{
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    margin-top: 1rem !important;
  }
}

/* ---------- 1) Title (keep your current look, just safer clamp) ---------- */
#hero-new #hero-title{
  font-size: clamp(2.15rem, 1.35rem + 2.8vw, 3.35rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 clamp(0.8rem, 0.55rem + 0.9vw, 1.15rem) !important;
  text-align: center !important;
  text-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* ---------- 2) Award line (badge on top + line below, no wrappers) ---------- */
#hero-new .hero-awardline{
  margin: 0 auto clamp(0.85rem, 0.65rem + 0.9vw, 1.1rem) !important;
  text-align: center;
  max-width: 56ch;
}

#hero-new .hero-awardline__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;

  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(10,10,10,0.95);
  background: linear-gradient(135deg,
    rgba(255, 244, 170, 0.98),
    rgba(255, 206, 70, 0.98),
    rgba(255, 152, 30, 0.98)
  );

  box-shadow:
    0 10px 24px rgba(0,0,0,0.35),
    0 0 26px rgba(255, 210, 90, 0.25);
  margin-bottom: 0.55rem;
}

#hero-new .hero-awardline__text{
  display: inline-block;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem);
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* tooltip trigger: tiny “i” button inline (no layout shift) */
#hero-new .hero-awardtip{
  position: relative;
  display: inline-block;
  margin-left: 0.4rem;
}

#hero-new .hero-awardtip-btn{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.9);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* tooltip bubble (appears on hover/focus/click) */
#hero-new .hero-awardtip-bubble{
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  width: min(420px, 84vw);

  padding: 0.85rem 0.95rem;
  border-radius: 14px;

  background: rgba(12, 18, 18, 0.72);
  border: 1px solid rgba(255,255,255,0.14);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 18px 46px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05) inset;

  color: rgba(255,255,255,0.90);
  font-size: 0.98rem;
  line-height: 1.45;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

#hero-new .hero-awardtip-bubble::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: rgba(12, 18, 18, 0.72);
  border-left: 1px solid rgba(255,255,255,0.14);
  border-top: 1px solid rgba(255,255,255,0.14);
  transform: translateX(-50%) rotate(45deg);
}

/* show bubble */
#hero-new .hero-awardtip.is-open .hero-awardtip-bubble,
#hero-new .hero-awardtip:hover .hero-awardtip-bubble,
#hero-new .hero-awardtip:focus-within .hero-awardtip-bubble{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 3) Dek: bigger clamped + readable (desktop too) ---------- */
#hero-new .text-container p.hero-dek{
  max-width: 52ch;
  margin: 0 auto clamp(0.85rem, 0.65rem + 0.9vw, 1.15rem) !important;

  font-size: clamp(1.18rem, 1.02rem + 0.75vw, 1.55rem) !important;
  line-height: 1.7 !important;

  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.38) !important;
  text-wrap: pretty;
}

/* ---------- 4) Byline: clean, no underline ---------- */
#hero-new .hero-byline{
  margin: 0 auto clamp(0.65rem, 0.45rem + 0.8vw, 0.95rem) !important;
  text-align: center;
  max-width: 52ch;
}

#hero-new .hero-byline .by{
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-right: 0.5rem;
}

#hero-new .hero-byline .name{
  font-weight: 700;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.88);
  text-decoration: none !important;
}

/* ---------- 5) CTA group: centered (desktop + mobile) ---------- */
#hero-new .hero-button-group{
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin: 0.75rem auto 0.75rem !important;
}

/* ---------- 6) Reviews: a bit smaller to reduce hero height ---------- */
#hero-new .pricing-p{
  margin: 0 auto !important;
  max-width: 52ch;

  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem) !important;
  line-height: 1.55 !important;
  opacity: 0.92;
}

#hero-new .pricing-p strong{ font-weight: 700; opacity: 0.9; }

/* Hide sound icon and audio on mobile (keep your existing behavior) */
@media (max-width: 970px){
  #sound-toggle,
  #ambient-audio{
    display: none !important;
  }
}
</style>

<style>
/* =========================================================
   HERO — hide award tooltip on mobile (<=970px)
   Paste AFTER the hero tooltip styles
========================================================= */
@media (max-width: 970px){
  #hero-new .hero-awardtip{
    display: none !important;
  }
}
</style>

<style>
/* =========================================================
   HERO — Byline (editorial, not overproduced)
   - BY in small caps / spaced
   - Name slightly heavier + subtle accent underline
   - No pill, no glow, no “badge” feel
========================================================= */

#hero-new .hero-byline{
  margin: 0.35rem auto 0.95rem !important;
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.55rem;
}

#hero-new .hero-byline .by{
  font-size: 0.78rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  font-weight: 700 !important;
}

/* “Designed but normal”: weight + underline accent that's NOT a link underline */
#hero-new .hero-byline .name{
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.92) !important;

  /* remove any inherited link-y underline */
  text-decoration: none !important;

  /* subtle editorial accent */
  display: inline-block;
  padding-bottom: 0.12rem;
  border-bottom: 1px solid rgba(255, 210, 90, 0.40);
}

/* micro “finish”: tiny shadow for separation on busy video frames */
#hero-new .hero-byline .name{
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Mobile: keep it crisp (no extra bulk) */
@media (max-width: 970px){
  #hero-new .hero-byline{
    margin-bottom: 0.75rem !important;
  }
  #hero-new .hero-byline .by{
    font-size: 0.74rem !important;
  }
}

/* =========================================================
   HERO — Byline (clean editorial, bigger on desktop)
   - No underline, no pill, no glow
========================================================= */

#hero-new .hero-byline{
  margin: 0.45rem auto 1.05rem !important;
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem;
}

#hero-new .hero-byline .by{
  font-size: 0.8rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  font-weight: 700 !important;
}

/* Bigger + a touch more presence on desktop */
#hero-new .hero-byline .name{
  text-decoration: none !important;
  border: 0 !important;
  padding: 0 !important;

  font-weight: 850 !important;
  letter-spacing: 0.045em !important;
  color: rgba(255,255,255,0.93) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);

  /* base (mobile+desktop) */
  font-size: clamp(1.06rem, 1.0rem + 0.25vw, 1.22rem) !important;
}

/* Desktop-only bump */
@media (min-width: 992px){
  #hero-new .hero-byline .name{
    font-size: clamp(1.18rem, 1.05rem + 0.45vw, 1.38rem) !important;
  }
}

/* Keep it tidy when you switch to “mobile mode” at 970px */
@media (max-width: 970px){
  #hero-new .hero-byline{
    margin-bottom: 0.8rem !important;
  }
  #hero-new .hero-byline .by{
    font-size: 0.76rem !important;
  }
}



/* =========================================================
   HERO — Award line (smaller + clamped)
========================================================= */

#hero-new .hero-awardline{
  margin: 0 0 0.85rem;
  line-height: 1.15;
}

/* The small “Award-Winning” pill */
#hero-new .hero-awardline__badge{
  display: inline-flex;
  align-items: center;
  padding: 0.22em 0.58em;
  border-radius: 999px;

  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  /* smaller + clamped */
  font-size: clamp(0.62rem, 0.58rem + 0.22vw, 0.78rem);

  /* keep your existing vibe (adjust if needed) */
  color: rgba(10,10,10,0.92);
  background: rgba(255, 210, 90, 0.92);
  box-shadow: 0 0 14px rgba(255,210,90,0.18);
}

/* The “2026 Winner …” line */
#hero-new .hero-awardline__text{
  display: inline-block;
  margin-top: 0.28rem;

  /* smaller + clamped */
  font-size: clamp(0.85rem, 0.80rem + 0.28vw, 1.00rem);

  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.86);
}

/* Optional: keep the bold from feeling too shouty at small sizes */
#hero-new .hero-awardline__text strong{
  font-weight: 900;
}

/* =========================================================
   HERO — Dek subtle glass panel (not stark)
========================================================= */
#hero-new .hero-dek{
  /* spacing */
  margin: 1rem auto 1.15rem;
  max-width: 42ch;

  /* subtle glass */
  padding: 0.85rem 1.05rem;
  border-radius: 16px;

  background:
    radial-gradient(140px 60px at 18% 25%, rgba(255,255,255,0.08), transparent 65%),
    radial-gradient(220px 120px at 85% 90%, rgba(0,255,214,0.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));

  border: 1px solid rgba(255,255,255,0.10);

  /* gentle depth */
  box-shadow:
    0 14px 30px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);

  /* actual glass blur (falls back gracefully) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* readable text */
  color: rgba(255,255,255,0.88);
  line-height: 1.65;
}

/* Optional: slightly calmer on small screens */
@media (max-width: 768px){
  #hero-new .hero-dek{
    padding: 0.75rem 0.95rem;
    border-radius: 14px;
  }
}

/* HERO — dek panel re-balance */
#hero-new .hero-dek{
  max-width: 34ch;                 /* tighter line length */
  margin: 1rem auto 1.15rem;
  padding: 0.85rem 0.95rem;        /* slightly tighter */
  border-radius: 18px;

  /* less “modal” */
  background:
    radial-gradient(160px 70px at 20% 20%, rgba(255,255,255,0.07), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.34));

  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 28px rgba(0,0,0,0.26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  text-align: center;
  text-wrap: balance;              /* helps line breaks when supported */
}

#hero-new .hero-dek{ text-wrap: balance; }

/* HERO — dek firefly border glow */
#hero-new .hero-dek{
  border: 1px solid rgba(255, 234, 150, 0.18); /* warm firefly edge */

  box-shadow:
    /* existing depth (keep) */
    0 14px 28px rgba(0,0,0,0.26),

    /* inner glass highlight */
    inset 0 1px 0 rgba(255,255,255,0.08),

    /* firefly glow (warm) */
    0 0 0 1px rgba(255, 234, 150, 0.10),
    0 0 18px rgba(255, 210, 90, 0.16),

    /* tiny cool twinkle (optional 80s accent) */
    0 0 16px rgba(0, 255, 214, 0.08);
}

/* Optional: slightly brighter on hover (very subtle) */
#hero-new .hero-dek:hover{
  box-shadow:
    0 14px 28px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(255, 234, 150, 0.14),
    0 0 22px rgba(255, 210, 90, 0.18),
    0 0 18px rgba(0, 255, 214, 0.10);
}

/* =========================================================
   PAC-MAN NEON AWARD BADGE (FINAL / WINNER)
   80s neon glow + blue “ghost” highlights + SOLID coin plate
   - Badge lives inside .hero-book-wrap (overlay on book cover)
   - Ribbon spans wider than circle with BOTH tails
   - Current placement: center-ish vertically, far-left on the book
========================================================= */

/* ---------------------------------------------------------
   0) Required wrapper context
--------------------------------------------------------- */
.hero-book-wrap{
  position: relative;
  display: inline-block;
  overflow: visible; /* allow ribbon ends outside the book image */
}

/* ---------------------------------------------------------
   1) Badge container (size, placement, glow, interaction)
--------------------------------------------------------- */
.pac-badge{
  position: absolute;

  /* FINAL PLACEMENT: center vertically, far-left */
  top: 52%;
  left: -10%;
  right: auto;

  /* size scales via em (10em badge) */
  font-size: clamp(11px, 9.5px + 0.75vw, 16px);

  width: 10em;
  height: 10em;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  text-align: center;

  /* keep rotation + vertically center on its own height */
  transform: translateY(-50%) rotate(-14deg);
  transform-origin: 50% 50%;

  /* motion + hover */
  transition: transform 220ms ease, filter 220ms ease;

  /* neon separation off the cover */
  filter:
    drop-shadow(0 20px 38px rgba(0,0,0,0.58))
    drop-shadow(0 0 30px rgba(0,255,214,0.22))
    drop-shadow(0 0 28px rgba(60,140,255,0.18))
    drop-shadow(0 0 22px rgba(255,79,209,0.14));

  z-index: 3;
  overflow: visible; /* ribbon tails may extend */
}

/* Hover (slight tilt + scale) */
.pac-badge:hover{
  transform: translateY(-50%) rotate(-10deg) scale(1.05);
}

/* Reduced motion: remove hover transition */
@media (prefers-reduced-motion: reduce){
  .pac-badge{ transition: none; }
}

/* Mobile: keep it inside the cover slightly */
@media (max-width: 768px){
  .pac-badge{
    left: -2%;
    top: 54%;
  }
}

/* ---------------------------------------------------------
   2) Solid “coin” plate (NO transparency / no ghostiness)
   - Deep arcade base with neon blooms
--------------------------------------------------------- */
.pac-badge::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);

  width: 10em;
  height: 10em;
  border-radius: 999px;

  /* SOLID base + controlled neon blooms */
  background:
    radial-gradient(72% 70% at 30% 28%, rgba(0,255,214,0.22), transparent 62%),
    radial-gradient(72% 70% at 78% 72%, rgba(60,140,255,0.24), transparent 60%),
    radial-gradient(78% 78% at 55% 52%, rgba(255,79,209,0.18), transparent 66%),
    linear-gradient(180deg, #08142a 0%, #130727 100%);

  border: 1px solid rgba(255,255,255,0.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -18px 26px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,255,214,0.24),
    0 0 26px rgba(0,255,214,0.18),
    0 0 26px rgba(60,140,255,0.16),
    0 0 18px rgba(255,79,209,0.12);

  opacity: 1;
}

/* ---------------------------------------------------------
   3) SVG layer (rings + curved text)
--------------------------------------------------------- */
.pac-badge__svg{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);

  width: 10em;
  height: 10em;

  display:block;
  z-index: 0;
}

/* Base ring element */
.pac-badge__ring{ fill: none; }

/* Outer ring (Pac-Man neon) */
.pac-badge__ring--outer{
  stroke: url(#pacRing);
  stroke-width: 2.6px;
  opacity: 1;

  filter:
    drop-shadow(0 0 14px rgba(255, 235, 90, 0.22))
    drop-shadow(0 0 14px rgba(255, 170, 40, 0.16));
}

/* Inner ring (blue ghost highlight) */
.pac-badge__ring--inner{
  stroke: url(#ghostRing);
  stroke-width: 2px;
  opacity: 0.92;

  filter:
    drop-shadow(0 0 14px rgba(60, 140, 255, 0.22))
    drop-shadow(0 0 14px rgba(0, 255, 214, 0.14));
}

/* Curved text (smaller + readable) */
.pac-badge__curve{
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;

  /* FINAL curved text size */
  font-size: 13px;

  /* bright tube white */
  fill: rgba(240, 255, 255, 0.98);

  /* dark outline so it reads over anything */
  stroke: rgba(0,0,0,0.72);
  stroke-width: 2.4px;
  paint-order: stroke fill;

  filter:
    drop-shadow(0 0 14px rgba(60,140,255,0.22))
    drop-shadow(0 0 14px rgba(0,255,214,0.16));
}

/* ---------------------------------------------------------
   4) Ribbon label (center banner) + tails
   - Wider than the circle
   - BOTH tails visible
--------------------------------------------------------- */
.pac-badge__label{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  display: inline-block;
  white-space: nowrap;
  text-align: center;

  /* FINAL ribbon width: wider than badge so text fits */
  width: calc(100% + 5.2em);

  /* Comfortable padding */
  padding: 0.28em 1.20em;
  border-radius: 0.55em;

  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;

  /* FINAL ribbon text size */
  font-size: 0.62em;

  /* solid ribbon plate */
  background: linear-gradient(180deg, #0b1f4a 0%, #1a0836 100%);
  border: 1px solid rgba(255,255,255,0.20);

  /* Pac-Man yellow text (kept for vibe) */
  color: rgba(255, 235, 90, 0.96);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(60,140,255,0.26),
    0 0 18px rgba(60,140,255,0.18),
    0 0 16px rgba(0,255,214,0.12),
    0 10px 22px rgba(0,0,0,0.45);

  text-shadow:
    0 1px 0 rgba(0,0,0,0.75),
    0 0 12px rgba(255,235,90,0.18),
    0 0 10px rgba(60,140,255,0.12);

  z-index: 2;
}

/* Ribbon tails */
.pac-badge__label::before,
.pac-badge__label::after{
  content:"";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 1.55em;
  height: 1.20em;

  background: linear-gradient(180deg, rgba(10, 22, 46, 0.95), rgba(38, 12, 52, 0.95));
  border: 1px solid rgba(255,255,255,0.14);

  box-shadow:
    0 0 14px rgba(60, 140, 255, 0.10),
    0 0 12px rgba(255, 235, 90, 0.08);

  opacity: 0.98;
  z-index: 1; /* tails sit above coin plate */
}

/* Left tail */
.pac-badge__label::before{
  left: -1.25em;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

/* Right tail */
.pac-badge__label::after{
  right: -1.25em;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}