.hex-bg::before{
      content:"";
      position:absolute; inset:0;
      background-image:
        radial-gradient(circle at 25px 15px, rgba(255,255,255,.06) 1px, transparent 1px),
        radial-gradient(circle at 55px 30px, rgba(255,255,255,.06) 1px, transparent 1px),
        radial-gradient(circle at 0 30px, rgba(255,255,255,.06) 1px, transparent 1px),
        radial-gradient(circle at 30px 45px, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 60px 52px;
      opacity:.35;
      pointer-events:none;
    }
    /* teal “scroll to top” with rings */
    .scroll-bubble{
      --bg1:#11d5c4; --bg2:#11b7aa; --edge:#2e1a63;
      position:absolute; right:1.25rem; bottom:1.25rem;
      width:56px; height:56px; border-radius:9999px;
      background:linear-gradient(135deg,var(--bg1),var(--bg2));
      display:grid; place-items:center; color:#082f2b;
      border:4px solid var(--edge);
      box-shadow:
        0 0 0 8px rgba(17,213,196,.25),
        0 0 0 18px rgba(17,213,196,.12);
      transition: transform .2s ease;
    }
    .scroll-bubble:hover{ transform: translateY(-2px) scale(1.03); }



    /* Gradient fade overlay */
    .fade-left, .fade-right {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 120px;
      z-index: 10;
      pointer-events: none;
    }
    .fade-left {
      left: 0;
      background: linear-gradient(to right, #fdf2e9 0%, #fdf2e9 20%, rgba(253, 242, 233, 0.8) 60%, transparent 100%);
    }
    .fade-right {
      right: 0;
      background: linear-gradient(to left, #fdf2e9 0%, #fdf2e9 20%, rgba(253, 242, 233, 0.8) 60%, transparent 100%);
    }
    
    /* Ensure proper slide sizing */