:root{
    --bg:#0b0f19;
    --card:#151a2fcc;
    --text:#f5f7fa;
    --muted:#c2c7d6;
    --primary:#7c5cff;
    --accent:#00d4ff;
    --hot:#ff3b7f;
    --success:#27d17f;
    --warning:#ffb020;
    --gradient: linear-gradient(90deg, var(--primary), var(--accent));
  }
  
  *{box-sizing:border-box}
  html,body{height:100%;}
  body.theme-dark{
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
    background: radial-gradient(1200px 800px at 60% -20%, #1a2240 0%, #0b0f19 55%, #0b0f19 100%);
    color: var(--text);
    overflow-x: hidden;
  }
  
  /* Background canvas */
  #bg-stars{position:fixed; inset:0; z-index:-2;}
  
  /* Navbar */
  .bg-glass{ background: #0e1324b3; backdrop-filter: blur(10px); border-radius:16px; border:1px solid #ffffff1c; }
  .shadow-soft{ box-shadow:0 10px 40px #00000033; }
  .nav-link{ color:#c6cce0; }
  .nav-link.active, .nav-link:hover{ color:#fff; }
  
  /* Buttons */
  .btn-gradient{
    background: var(--gradient); color:#fff; border:0; border-radius: 999px; padding:.6rem 1rem; font-weight:700;
    box-shadow: 0 8px 20px #5d46ff44;
  }
  .btn-gradient:hover{ filter: brightness(1.05); }
  
  /* HERO (external URL via CSS variable) */
  .hero{ position:relative; padding: 112px 0 56px; display:flex; align-items:center; }
  .hero.hero-img{ position: relative; }
  .hero.hero-img::after{
    content:""; position:absolute; inset:0; z-index:0;
    background-image: var(--hero); background-size: cover; background-position: center;
    filter: saturate(1.05) contrast(1.05); opacity:.95;
  }
  .hero.hero-img::before{
    content:""; position:absolute; inset:0; z-index:1;
    background: radial-gradient(1200px 700px at 10% 0%, #ffffff26 0%, transparent 70%),
                radial-gradient(1000px 700px at 90% 40%, #69e6ff2a 0%, transparent 70%),
                linear-gradient(to bottom, #0b0f1900 0%, #0b0f19 100%);
    mix-blend-mode: soft-light;
  }
  .hero .container-xxl { position: relative; z-index: 2; }
  .hero .title{ font-weight:900; letter-spacing:-.02em; color:#fff; }
  .hero .title .text-gradient{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero .lead{ color:#d9deeb; }
  .hero-tag{
    display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:999px; font-weight:700;
    color:#dfe6ff; background:#1b2240; border:1px solid #445;
  }
  
  /* Cards, sections */
  .card-glass{ background:var(--card); border:1px solid #ffffff33; border-radius:22px; color: var(--text); }
  .card-lift{ transition: transform .3s ease, box-shadow .3s ease; }
  .card-lift:hover{ transform: translateY(-4px); box-shadow: 0 16px 60px #00000055; }
  
  .section{ padding:64px 0; }
  .section-title{ font-weight:900; letter-spacing:-.02em; }
  .section-sub{ color:#d9deeb; }
  .badge-soft{ background:#1d2344; color:#cbd3ff; border:1px solid #2b3260; }
  
  /* KPIs */
  .kpi{ font-size:2.4rem; font-weight:900; letter-spacing:-.02em; color:#fff; }
  .kpi-sub{ color:#e3e6f1; font-weight:600; }
  
  /* Blog cards */
  .blog-card img{ border-top-left-radius:22px; border-top-right-radius:22px; }
  .blog-card .content{ padding:1.1rem 1.25rem; }
  
  /* Logos marquee */
  .logos{ display:flex; gap:24px; opacity:.9; }
  .logos img{ width:160px; height:48px; object-fit:cover; border-radius:10px; filter:grayscale(30%); }
  .marquee{ overflow:hidden; white-space:nowrap; animation: slide 24s linear infinite; }
  @keyframes slide{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  
  /* Timeline */
  .timeline{ position:relative; margin: 0 auto; max-width: 940px; }
  .t-step{ display:flex; gap:16px; align-items:flex-start; padding:14px 0; }
  .t-dot{ width:36px; height:36px; border-radius:50%; background: var(--gradient); display:flex; align-items:center; justify-content:center; font-weight:800; }
  .t-body h5{ margin-bottom:.25rem; }
  
  /* Ratio helpers */
  .ratio{ position:relative; width:100%; }
  .ratio::before{ content:""; display:block; padding-top:56.25%; }
  .ratio-16x9::before{ padding-top:56.25%; }
  .ratio-21x9::before{ padding-top:42.85%; }
  .bg-cover{ background-size:cover; background-position:center; width:100%; height:100%; position:absolute; inset:0; border-top-left-radius:22px; border-top-right-radius:22px; }
  
  /* Utilities */
  .link-faded{ color:#cfd4e2; text-decoration:none; }
  .link-faded:hover{ color:#fff; }
  .form-control-dark{ background:#0f152d; border:1px solid #ffffff1f; color:#fff; }
  .form-control-dark::placeholder{ color:#8891a6; }
  .text-gradient{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
  
  @media (max-width: 991px){
    .hero{ padding-top:84px; }
  }
  

  :root{
    --bg:#0b0f19; --card:#151a2fcc; --text:#f5f7fa; --muted:#c2c7d6;
    --primary:#7c5cff; --accent:#00d4ff; --hot:#ff3b7f; --success:#27d17f; --warning:#ffb020;
    --gradient: linear-gradient(90deg, var(--primary), var(--accent));
  }
  
  *{box-sizing:border-box} html,body{height:100%;}
  body.theme-dark{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background: radial-gradient(1200px 800px at 60% -20%, #1a2240 0%, #0b0f19 55%, #0b0f19 100%); color:var(--text); overflow-x:hidden}
  #bg-stars{position:fixed; inset:0; z-index:-2}
  
  .bg-glass{ background:#0e1324b3; backdrop-filter: blur(10px); border-radius:16px; border:1px solid #ffffff1c}
  .shadow-soft{ box-shadow:0 10px 40px #00000033}
  .nav-link{color:#c6cce0} .nav-link.active,.nav-link:hover{color:#fff}
  
  .btn-gradient{ background:var(--gradient); color:#fff; border:0; border-radius:999px; padding:.6rem 1rem; font-weight:700; box-shadow:0 8px 20px #5d46ff44}
  .btn-gradient:hover{filter:brightness(1.05)}
  
  .hero{position:relative; padding:112px 0 56px; display:flex; align-items:center}
  .hero.hero-img{position:relative}
  .hero.hero-img::after{content:""; position:absolute; inset:0; z-index:0; background-image:var(--hero); background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.05); opacity:.95}
  .hero.hero-img::before{content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(1200px 700px at 10% 0%, #ffffff26 0%, transparent 70%), radial-gradient(1000px 700px at 90% 40%, #69e6ff2a 0%, transparent 70%), linear-gradient(to bottom, #0b0f1900 0%, #0b0f19 100%); mix-blend-mode:soft-light}
  .hero .container-xxl{position:relative; z-index:2}
  .hero .title{font-weight:900; letter-spacing:-.02em; color:#fff}
  .hero .title .text-gradient{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
  .hero .lead{color:#d9deeb}
  .hero-tag{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:999px; font-weight:700; color:#dfe6ff; background:#1b2240; border:1px solid #445}
  
  .section{padding:64px 0} .section-title{font-weight:900; letter-spacing:-.02em}
  .section-sub{color:#d9deeb}
  .card-glass{background:var(--card); border:1px solid #ffffff33; border-radius:22px; color:var(--text)}
  .card-lift{transition:transform .3s ease, box-shadow .3s ease} .card-lift:hover{transform:translateY(-4px); box-shadow:0 16px 60px #00000055}
  .badge-soft{background:#1d2344; color:#cbd3ff; border:1px solid #2b3260}
  
  .kpi{font-size:2.4rem; font-weight:900; letter-spacing:-.02em; color:#fff}
  .kpi-sub{color:#e3e6f1; font-weight:600}
  
  .blog-card img{border-top-left-radius:22px; border-top-right-radius:22px}
  .blog-card .content{padding:1.1rem 1.25rem}
  
  .ratio{position:relative; width:100%} .ratio::before{content:""; display:block; padding-top:56.25%}
  .ratio-16x9::before{padding-top:56.25%} .ratio-21x9::before{padding-top:42.85%}
  .bg-cover{background-size:cover; background-position:center; width:100%; height:100%; position:absolute; inset:0; border-top-left-radius:22px; border-top-right-radius:22px}
  
  .link-faded{color:#cfd4e2; text-decoration:none} .link-faded:hover{color:#fff}
  .form-control-dark{background:#0f152d; border:1px solid #ffffff1f; color:#fff}
  .form-control-dark::placeholder{color:#8891a6}
  .text-gradient{background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
  
  /* Action ribbon */
  .cta-ribbon{background:#0f1428; border-top:1px solid #1f2544; border-bottom:1px solid #1f2544; padding:14px 0}
  .cta-ribbon .bi{color:#7bdfff}
  
  /* Lead magnet layouts */
  .form-label{font-weight:700}
  .form-text{color:#cbd6ff}
  #budgetResult .chip{background:#1d2344; border:1px solid #2b3260; padding:.4rem .7rem; border-radius:999px}
  
  /* Timeline (if you use later) */
  .timeline{position:relative; margin:0 auto; max-width:940px}
  .t-step{display:flex; gap:16px; align-items:flex-start; padding:14px 0}
  .t-dot{width:36px; height:36px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-weight:800}
  .t-body h5{margin-bottom:.25rem}
  
  @media (max-width: 991px){ .hero{padding-top:84px} }

  
  /* --- Section separators --- */
.section-gap{ padding: 8px 0; }
.hr-glow{
  height: 2px; border: 0; margin: 28px 0;
  background: linear-gradient(90deg, rgba(0,0,0,0), #7c5cff66, #00d4ff66, rgba(0,0,0,0));
  box-shadow: 0 0 20px #5d46ff55;
  border-radius: 2px;
}
/* optional subtle dashed line version */
.hr-dashed{
  border: 0; border-top: 1px dashed #2b315a; margin: 24px 0; opacity: .9;
}


/* ===== Social + Platforms HUD ===== */
.social-hud{
    padding: 56px 0;
    background: radial-gradient(900px 400px at 10% 0%, #1c2446 0%, transparent 60%),
                radial-gradient(900px 400px at 90% 100%, #0e1433 0%, transparent 60%);
    border-top: 1px solid #1e2547;
    border-bottom: 1px solid #1e2547;
  }
  .social-title{ font-weight: 900; letter-spacing: -0.02em; }
  
  /* Icon bubbles */
  .icon-row{ display:flex; flex-wrap:wrap; gap:14px; }
  .icon-bubble{
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: #0f152d; border:1px solid #2a2f55;
    box-shadow: 0 8px 24px #00000055 inset, 0 8px 24px #00000033;
    color:#fff; font-size:26px;
    animation: floatY 5.2s ease-in-out infinite;
  }
  .icon-bubble:nth-child(2){ animation-delay:.3s }
  .icon-bubble:nth-child(3){ animation-delay:.6s }
  .icon-bubble:nth-child(4){ animation-delay:.9s }
  .icon-bubble:nth-child(5){ animation-delay:1.2s }
  .icon-bubble:nth-child(6){ animation-delay:1.5s }
  
  /* Brand tints */
  .icon-bubble.ig{ background: radial-gradient(circle at 30% 30%, #ffdc80, #f56040, #bc2a8d, #8a3ab9); }
  .icon-bubble.fb{ background:#1877f2; }
  .icon-bubble.tt{ background:#000; }
  .icon-bubble.sc{ background:#fffc00; color:#000; }
  .icon-bubble.yt{ background:#ff0033; }
  .icon-bubble.in{ background:#0a66c2; }
  
  /* Pulse on hover */
  .icon-bubble:hover{ animation-play-state: paused; transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 30px #00000066; }
  
  /* Platform chips */
  .platforms{ display:flex; flex-wrap:wrap; gap:10px; }
  .platform-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:.55rem .9rem; border-radius:999px;
    background:#11183a; border:1px solid #2a3060; color:#e7ebff; font-weight:700; font-size:.95rem;
    box-shadow: 0 8px 24px #00000033 inset;
  }
  .platform-chip .bi{ font-size:1.1rem; opacity:.95 }
  
  /* Animated strip */
  .platform-strip{ overflow:hidden; }
  .platform-marquee{
    display:flex; gap:12px; width:max-content;
    animation: strip 28s linear infinite;
  }
  .platform-marquee:hover{ animation-play-state: paused; }
  @keyframes strip{
    from{ transform: translateX(0); }
    to  { transform: translateX(-50%); }
  }
  
  @keyframes floatY{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
  }

  
  .hero-right{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hero-vector{
    max-width: 280px;
    animation: floatVector 6s ease-in-out infinite;
  }
  @keyframes floatVector{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  .floating-icons a.icon-bubble{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(var(--angle)) translate(140px) rotate(calc(-1 * var(--angle)));
    animation: orbit-rotate 20s linear infinite;
  }
  

  .hero-badges .badge-logo{
    height: 34px;          /* same height as old dummy ones */
    width: auto;
    object-fit: contain;
    filter: brightness(0.95);
    transition: filter .3s ease;
  }
  .hero-badges .badge-logo:hover{
    filter: brightness(1);
  }
  

  /* Partner badges */
.hero-badges .badge-logo{
  height: 34px;           /* uniform height */
  width: auto;
  display: block;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.hero-badges .badge-logo:hover{
  opacity: 1; transform: translateY(-2px);
}

/* OPTIONAL: chip background if you use icons that need a color plate (e.g., Snapchat) */
.badge-chip{
  display:inline-flex; align-items:center; justify-content:center;
  height: 34px; padding: 6px 10px; border-radius: 10px;
  background:#1b2040; border:1px solid #2b2f55;
}
.badge-chip img{ height: 20px; width:auto; }


/* --- Rich blog & book cards --- */
.ratio-3x4::before{ padding-top: 133.33%; } /* book aspect */
.blog-card .ratio::before{ border-top-left-radius:22px; border-top-right-radius:22px; }
.book-card .book-cover{ border-top-left-radius:22px; border-top-right-radius:22px; }

/* spotlight hover for media areas */
.bg-cover{ transition: transform .45s ease, filter .45s ease; }
.card:hover .bg-cover{ transform: scale(1.035); filter: saturate(1.06) contrast(1.05); }

/* subtle ribbon for book cards */
.gradient-border::before{ opacity:.45; filter: blur(10px); }

/* tiny shimmer on hover CTA */
.card-lift .btn-outline-light:hover{ background:#ffffff14; }

/* nicer badges */
.badge-soft{ padding:.25rem .5rem; border-radius:999px; font-weight:700; }


/* ===== Book Shelves (cover-only like reference) ===== */
.shelf{ border-radius:18px; position:relative; }
.shelf .shelf-controls{ display:flex; gap:8px; }
.shelf-btn{
  width:30px; height:30px; border-radius:50%;
  border:1px solid #2a2f55; background:#12183a; color:#e7ebff;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.shelf-btn:hover{ transform: translateY(-2px); background:#182050; box-shadow:0 6px 14px #0006; }

.shelf-track{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(110px, 1fr);
  gap:12px;
  overflow: hidden;        /* hide native scrollbar */
  scroll-behavior: smooth; /* smooth JS scroll */
  padding: 6px 2px;
}
@media (min-width:576px){ .shelf-track{ grid-auto-columns: 130px; } }
@media (min-width:768px){ .shelf-track{ grid-auto-columns: 150px; } }
@media (min-width:1200px){ .shelf-track{ grid-auto-columns: 160px; } }

.cover{
  position:relative; display:block; border-radius:10px; overflow:hidden;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.cover img{
  display:block; width:100%; height:220px; object-fit:cover;
}
.cover:hover{ transform: translateY(-4px); filter:saturate(1.05) contrast(1.03); box-shadow: 0 16px 34px rgba(0,0,0,.55); }
@media (max-width: 575.98px){ .cover img{ height:180px; } }

/* floating popover card */
.cover-popover{
  position: fixed; z-index: 20; pointer-events: none;
  transform: translate(-50%, -110%); /* sits above the cover */
}
.cover-popover .thumb{
  width:56px; height:72px; border-radius:6px; background-size:cover; background-position:center;
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}
.cover-popover .title{ color:#fff; }
.cover-popover .stars{ color: #ffc400; letter-spacing:.1em; }
.cover-popover .caret{
  position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  width:14px; height:14px; background:#151a2fcc; border-left:1px solid #ffffff33; border-top:1px solid #ffffff33;
  rotate:45deg; border-radius:2px;
}


/* ====== Global responsive resets ====== */
img, video, canvas, svg {max-width: 100%; height: auto; display: block;}
iframe {max-width: 100%;}
.container-xxl { padding-left: 1rem; padding-right: 1rem; }

/* Fluid type scale (keeps big on desktop, compact on mobile) */
:root{
  --fs-display: clamp(2rem, 3vw + 1.2rem, 3.25rem);
  --fs-h1:      clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
  --fs-h2:      clamp(1.35rem, 1.6vw + 0.9rem, 1.75rem);
  --fs-body:    clamp(0.95rem, 0.4vw + 0.83rem, 1.05rem);
  --space-section: clamp(36px, 7vw, 64px);
}
body{ font-size: var(--fs-body); }
.hero { padding: clamp(72px, 8vw, 112px) 0 clamp(28px, 6vw, 56px); }
.hero .title { font-size: var(--fs-display); line-height: 1.05; }
.section { padding: var(--space-section) 0; }
.section-title { font-size: var(--fs-h2); }
.section-sub { font-size: clamp(.95rem, .5vw + .8rem, 1.05rem); }

/* Buttons & inputs: comfortable tap targets on mobile */
@media (max-width: 576px){
  .btn, .form-control, .input-group > * { width: 100%; }
  .btn { padding: .7rem 1rem; }
  .gap-2 > *, .gap-3 > * { width: 100%; }
}

/* Navbar: keep airy, no overflow */
.navbar { min-height: 56px; }
.navbar-brand img{ height: 28px; }

/* Hero: make 2-col → 1-col */
@media (max-width: 992px){
  .hero .row { row-gap: 1.25rem; }
  .hero .lead { margin-bottom: .75rem; }
  /* hide heavy right visual if present */
  .hero-orbit-wrap, .hero-social-caption, .hero-right { display: none !important; }
}

/* KPI cards & feature tiles: stack smartly even if markup lacks col classes */
@media (max-width: 992px){
  .kpi, .kpi + .kpi-sub { text-align: center; }
}
@media (max-width: 768px){
  .card-grid, .row.g-4, .row.g-3 { row-gap: 1rem !important; }
}

/* Blog & Book cards: stable aspect and smaller on phones */
.blog-card .ratio-16x9::before{ padding-top: 56.25%; }
.book-card .book-cover{ aspect-ratio: 3 / 4; }
@media (max-width:576px){
  .book-card .p-4{ padding: .9rem; }
}

/* Partner badges row: wrap nicely */
.hero-badges{ row-gap: .5rem; }

/* Social HUD: stack neatly */
@media (max-width: 992px){
  .social-hud .row { row-gap: 1rem; }
}

/* Calculators & forms: single column on mobile */
@media (max-width: 992px){
  .form-row-2col { display:block !important; }
  .form-row-2col > * { width: 100% !important; }
}

/* Dividers: thinner on small */
@media (max-width: 576px){
  .hr-glow{ margin: 18px 0; }
}

/* Cover shelves: smaller thumbs and friendlier arrows on small */
@media (max-width: 576px){
  .shelf { padding: .75rem !important; }
  .shelf-track { gap: 8px; }
  .cover img { height: 160px; }
  .shelf-btn { width: 28px; height: 28px; }
}
/* Disable hover popover on touch (prevents jumpiness) */
@media (hover: none){
  #coverPopover { display: none !important; }
}

/* Tables (if used later) */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Ensure no accidental horizontal scroll anywhere */
html, body { overflow-x: hidden; }



/* ====== RESPONSIVE ONLY (no markup changes) ====== */

/* Media-safe images & embeds */
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }

/* Slightly tighter container on mobile */
.container-xxl { padding-left: 1rem; padding-right: 1rem; }

/* Fluid typography */
:root{
  --fs-display: clamp(2rem, 3vw + 1.2rem, 3.25rem);
  --fs-h2: clamp(1.35rem, 1.6vw + 0.9rem, 1.75rem);
  --fs-body: clamp(0.95rem, 0.4vw + 0.83rem, 1.05rem);
  --space-section: clamp(36px, 7vw, 64px);
}
body{ font-size: var(--fs-body); }
.section{ padding: var(--space-section) 0; }
.section-title{ font-size: var(--fs-h2); }
.hero{ padding: clamp(72px, 8vw, 112px) 0 clamp(28px, 6vw, 56px); }
.hero .title{ font-size: var(--fs-display); line-height: 1.05; }

/* Navbar */
.navbar{ min-height: 56px; }
.navbar-brand img{ height: 28px; }

/* Partner badges: wrap nicely */
.hero-badges{ row-gap: .5rem; }

/* Buttons & inputs: comfortable tap targets on mobile */
@media (max-width: 576px){
  .btn, .form-control, .input-group > * { width: 100%; }
  .btn{ padding: .7rem 1rem; }
}

/* Hero right-side visuals: hide on small to keep headline clean */
@media (max-width: 992px){
  .hero-orbit-wrap, .hero-social-caption, .hero-right{ display: none !important; }
}

/* KPI tiles center on small */
@media (max-width: 992px){
  .card.text-center, .kpi, .kpi-sub{ text-align: center; }
}

/* Blog/Book cards spacing on small */
@media (max-width: 768px){
  .row.g-3, .row.g-4{ row-gap: 1rem !important; }
}

/* Book cover card aspect stable */
.book-card .book-cover{ aspect-ratio: 3 / 4; }

/* Calculators/forms: reduce gutters on small */
@media (max-width: 992px){
  .row.g-3 > [class^="col-"], .row.g-4 > [class^="col-"]{ margin-bottom: .75rem; }
}

/* Separator thinner on small */
@media (max-width: 576px){
  .hr-glow{ margin: 18px 0; }
}

/* Cover shelves (cover-only section): smaller thumbs on phones */
@media (max-width: 576px){
  .shelf{ padding: .75rem !important; }
  .shelf-track{ gap: 8px; }
  .cover img{ height: 160px; }
  .shelf-btn{ width: 28px; height: 28px; }
}
/* Disable hover popover on touch to avoid jumpiness */
@media (hover: none){
  #coverPopover{ display: none !important; }
}

/* Ensure no accidental horizontal scroll anywhere */
html, body{ overflow-x: hidden; }


/* === VISIBILITY + STACKING FIX (no markup changes) === */

/* 1) Make sure the hero overlays never cover later sections */
.hero.hero-img::before,
.hero.hero-img::after{
  pointer-events: none;
}

/* 2) Ensure every section paints above any earlier layers */
.section,
.social-hud,
footer{
  position: relative;
  z-index: 2;
}

/* 3) Guarantee page scrolls normally on laptops/desktops */
html, body{
  min-height: 100%;
  height: auto;
  overflow-y: auto;
}

/* 4) Safety: prevent any accidental hidden content in wide view */
@media (min-width: 992px){
  .shelf-track{ overflow: visible; }  /* if covers looked clipped */
}


/* Books page responsive niceties */
.book-card .book-cover{ aspect-ratio: 3/4; }            /* stable covers */
.pagination .page-link{ background:#0f152d; border:1px solid #2b2f55; color:#e7ebff; }
.pagination .page-item.active .page-link{ background: var(--primary); border-color: transparent; }
@media (max-width: 576px){
  .card.card-glass.p-3.mb-3 form .row > [class^="col-"]{ margin-bottom:.5rem; }
}


/* ===== Books catalogue & details — responsive only ===== */
.book-card .book-cover{ aspect-ratio: 3/4; }
.ratio-3x4::before{ padding-top:133.33%; }

@media (max-width: 992px){
  /* tighter vertical rhythm on mobile */
  .card.card-glass.p-3, .card.card-glass.p-4 { padding: 1rem !important; }
  .section-sub.lead { margin-bottom: .75rem; }
}

.pagination .page-link{
  background:#0f152d; border:1px solid #2b2f55; color:#e7ebff;
}
.pagination .page-item.active .page-link{
  background: var(--primary); border-color: transparent;
}

/* prevent any accidental horizontal scroll */
html, body{ overflow-x: hidden; }

/* ===== SINGLE VERTICAL SCROLLBAR — FINAL PATCH (CSS-only) ===== */

/* A) Never lock the page to 100% height; let content define height */
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;    /* use browser’s default scrollbar only */
  }
  
  /* B) Background/hero layers must not create their own scroll areas */
  #bg-stars { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
  .hero { position: relative; overflow: clip; } /* clip tiny glow/blur overflows */
  .hero.hero-img::before,
  .hero.hero-img::after { position: absolute; inset: 0; pointer-events: none; }
  
  /* C) Animated bubbles / vectors: keep them inside hero visually */
  .hero-right { position: relative; overflow: clip; }
  .floating-icons { pointer-events: none; }
  .floating-icons .icon-bubble { pointer-events: auto; }
  
  /* D) Shelves and marquees: disable any vertical scroll from shadows/filters */
  .shelf-track { overflow-x: hidden !important; overflow-y: hidden !important; }
  .platform-strip, .platform-marquee { overflow-y: hidden !important; }
  
  /* E) Popovers are fixed; they must not affect layout height */
  #coverPopover { position: fixed !important; }
  
  /* F) Safety: cards with glow/blur shouldn’t push layout */
  .card-glass { overflow: clip; }         /* avoids tiny shadow-induced scroll */
  .gradient-border::before { inset: 0; }  /* ensure pseudo stays inside */
  
  /* G) Last-line defense: nothing may introduce horizontal scroll either */
  html, body { overflow-x: hidden !important; }
/* Hide scrollbar (optional) */
html {
    scrollbar-width: none;           /* Firefox */
  }
  html::-webkit-scrollbar {
    width: 0; height: 0;             /* Chrome/Edge/Safari */
  }