:root{
    --saffron:#E67E22;
    --maroon:#7B1E3A;
    --gold:#C8A951;
    --peacock:#1F3A93;
    --ivory:#F8F1E4;
    --charcoal:#2C2C2C;
  }

  /* Subtle mandala watermark + parchment vibe */
/* Subtle mandala watermark + parchment vibe */
.bg-parchment{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(200,169,81,.20), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(230,126,34,.15), transparent 55%),
    linear-gradient(180deg, #fbf5ea, var(--ivory));
  position: relative;

  /* IMPORTANT: do NOT create a second scroll container */
  overflow-x: hidden;
  
}
  .bg-parchment:before{
    content:"";
    position:absolute; inset:-40px;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cg fill='none' stroke='%23C8A951' stroke-opacity='0.18' stroke-width='2'%3E%3Ccircle cx='450' cy='450' r='120'/%3E%3Ccircle cx='450' cy='450' r='190'/%3E%3Ccircle cx='450' cy='450' r='260'/%3E%3Cpath d='M450 120v660M120 450h660M230 230l440 440M670 230L230 670'/%3E%3Cpath d='M450 180c90 0 170 80 170 170s-80 170-170 170-170-80-170-170 80-170 170-170z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position: 75% 20%;
    background-size: 820px 820px;
    pointer-events:none;
    filter: blur(.2px);
  }

  /* Manuscript border */
  .manuscript-border{
    border: 1px solid rgba(123,30,58,.22);
    box-shadow:
      0 18px 50px rgba(44,44,44,.10),
      0 1px 0 rgba(255,255,255,.7) inset;
    border-radius: 18px;
    position: relative;
  }
  .manuscript-border:before{
    content:"";
    position:absolute; inset:10px;
    border: 1px dashed rgba(200,169,81,.40);
    border-radius: 14px;
    pointer-events:none;
  }

  /* Fancy section divider */
  .divider{
    height: 14px;
    background:
      radial-gradient(circle at 20% 50%, rgba(200,169,81,.55), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(123,30,58,.35), transparent 55%),
      radial-gradient(circle at 80% 50%, rgba(200,169,81,.55), transparent 55%);
    mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    opacity:.9;
  }

  /* Animated sound-wave ribbon */
  .wave-ribbon{
    background: linear-gradient(90deg, rgba(200,169,81,.20), rgba(230,126,34,.10), rgba(200,169,81,.20));
    border: 1px solid rgba(200,169,81,.35);
    border-radius: 999px;
    position: relative;
    overflow:hidden;
  }
  .wave-ribbon svg{ display:block; }
  @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-240px); } }
  .wave-move{ animation: drift 10s linear infinite; opacity:.85; }

  /* Buttons */
  .btn-gold{
    background: linear-gradient(180deg, #d8bf73, var(--gold));
    color: var(--maroon);
    box-shadow: 0 10px 24px rgba(200,169,81,.25), 0 2px 0 rgba(255,255,255,.55) inset;
    border: 1px solid rgba(123,30,58,.18);
  }
  .btn-gold:hover{ filter: brightness(1.05); transform: translateY(-1px); }
  .btn-blue{
    background: linear-gradient(180deg, #2a52cc, var(--peacock));
    color: #fff;
    box-shadow: 0 10px 24px rgba(31,58,147,.25), 0 2px 0 rgba(255,255,255,.18) inset;
    border: 1px solid rgba(31,58,147,.35);
  }
  .btn-blue:hover{ filter: brightness(1.05); transform: translateY(-1px); }

  /* Cards */
  .card{
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(44,44,44,.10);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(44,44,44,.10);
    backdrop-filter: blur(6px);
  }

  /* Tiny icon tile */
  .icon-tile{
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(200,169,81,.35);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(44,44,44,.10);
  }

  /* Smooth scroll */
  html{ scroll-behavior:smooth; }

  /* Page active underline */
  .nav-active{
    position: relative;
  }
  .nav-active:after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-10px;
    height:3px;
    border-radius:999px;
    background: linear-gradient(90deg, var(--gold), var(--saffron));
  }
/* Force single scrollbar: only html scrolls */
html{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

body{
  min-height: 100%;
  overflow: visible !important;
}