  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --void:       #04020c;
      --deep:       #0b0520;
      --amethyst:   #6b2fa0;
      --violet:     #9b4fd8;
      --lavender:   #c89eff;
       --lavender-lite:#d287fb;
      --gold:       #e8c84a;
      --gold-pale:  #f5e4a0;
      --gold-glow:  #ffda00;
      --teal:       #00d4c8;
      --teal-glow:  #00ffee;
      --rose:       #e84a8a;
      --rose-glow:  #ff6aaa;
      --star:       rgba(255,255,255,0.85);
      --frame-gold: #c8a030;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--void);
    }

    /* ══════════════════════════════════════════
       VIDEO BACKGROUND
    ══════════════════════════════════════════ */
    .video-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
    }

    /*
      VIDEO PLACEHOLDER
      Replace the placeholder div below with:
      <video autoplay muted loop playsinline style="width:100%;height:100%;object-fit:cover;opacity:0.6;">
        <source src="your-mystical-video.mp4" type="video/mp4" />
      </video>
    */
    .video-placeholder {
      width: 100%;
      height: 100%;
      background:
        radial-gradient(ellipse at 50% 0%,   #2a0a50 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%,  #0a1a40 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%,  #1a0a30 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%,  #0d0520 0%, #04020c 100%);
      animation: bgPulse 8s ease-in-out infinite alternate;
    }

    @keyframes bgPulse {
      0%   { filter: hue-rotate(0deg)   brightness(1); }
      50%  { filter: hue-rotate(20deg)  brightness(1.08); }
      100% { filter: hue-rotate(-15deg) brightness(0.95); }
    }

    /* Animated starfield */
    .stars {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .star {
      position: absolute;
      background: white;
      border-radius: 50%;
      animation: twinkle var(--dur) ease-in-out infinite alternate;
      opacity: 0;
    }

    @keyframes twinkle {
      0%   { opacity: 0; transform: scale(0.5); }
      50%  { opacity: var(--bright); }
      100% { opacity: calc(var(--bright) * 0.3); transform: scale(1.2); }
    }

    /* Floating orbs */
    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      animation: orbFloat var(--dur) ease-in-out infinite alternate;
      opacity: 0.18;
    }

    @keyframes orbFloat {
      0%   { transform: translate(0, 0) scale(1); }
      100% { transform: translate(var(--dx), var(--dy)) scale(1.15); }
    }

    /* Dark overlay for readability */
    .video-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 40%, rgba(4,2,12,0.25) 0%, rgba(4,2,12,0.65) 100%);
    }

    /* ══════════════════════════════════════════
       SVG SWIRL FRAME BORDER
       To remove the frame, delete the .frame element
       and the .frame-corner elements below.
    ══════════════════════════════════════════ */
    .frame {
      position: fixed;
      inset: 0;
      z-index: 10;
      pointer-events: none;
    }

    .frame svg {
      width: 100%;
      height: 100%;
    }

    /* ══════════════════════════════════════════
       MAIN CONTENT
    ══════════════════════════════════════════ */
    .splash {
      position: fixed;
      inset: 0;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem 2rem;
      text-align: center;
    }

    /* Top ornament */
    .ornament-top {
      font-family: 'Cinzel Decorative', serif;
      font-size: 28px;
      color: var(--gold);
      letter-spacing: 0.4em;
      margin-bottom: 1.2rem;
      opacity: 0.75;
      animation: fadeUp 1.5s ease forwards;
      animation-delay: 0.3s;
      opacity: 0;
    }

    /* Subtitle above title */
    .pre-title {
      font-family: 'IM Fell English', Georgia, serif;
      font-style: italic;
      font-size: clamp(15px, 2vw, 20px);
      color: var(--lavender);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 0.6s;
      opacity: 0;
    }
    #pink-title {  

      color: var(--lavender-lite); 
    }

    /* Main title */
    .main-title {
      font-family: 'Cinzel Decorative', serif;
     font-size: clamp(50px, 6vw, 83px);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: 0.04em;
      background: linear-gradient(135deg, #f5e4a0 0%, #e8c84a 30%, #ffffff 50%, #e8c84a 70%, #f5e4a0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 30px rgba(232,200,74,0.55));
      margin-bottom: 0.6rem;
      animation: fadeUp 1.4s ease forwards, titleGlow 4s ease-in-out infinite alternate;
      animation-delay: 0.9s, 2.3s;
      opacity: 0;
    }

    @keyframes titleGlow {
      0%   { filter: drop-shadow(0 0 22px rgba(232,200,74,0.45)); }
      100% { filter: drop-shadow(0 0 50px rgba(232,200,74,0.85)) drop-shadow(0 0 80px rgba(155,79,216,0.3)); }
    }

    /* Divider rule */
    .title-rule {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.2rem auto 0.6rem;
      width: min(500px, 80vw);
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.1s;
      opacity: 0;
    }

    .title-rule::before, .title-rule::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold), transparent);
    }

    .title-rule-gem {
      font-size: 20px;
      color: var(--gold);
      filter: drop-shadow(0 0 8px var(--gold-glow));
    }

    /* Tagline */
    .tagline {
      font-family: 'IM Fell English', Georgia, serif;
  /*  font-style:italic;*/
      font-size: clamp(25px, 2.2vw, 30px);
      color: rgba(200,158,255,0.88);
      letter-spacing: 0.08em;
      margin-top:1rem;
      margin-bottom: 3rem;
      max-width: 560px;
      line-height: 1.6;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.3s;
      opacity: 0;
    }

    /* ── Buttons ── */
    .button-row {
      display: flex;
      gap: 1.5rem;
      justify-content: center;
      flex-wrap: wrap;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 1.6s;
      opacity: 0;
    }

    .mystic-btn {
      position: relative;
      font-family: 'Cinzel', serif;
      font-size: clamp(13px, 1.6vw, 16px);
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--gold-pale);
      padding: 14px 34px;
      border-radius: 50px;
      border: 1px solid rgba(232,200,74,0.4);
      background: rgba(11,5,32,0.6);
      backdrop-filter: blur(8px);
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
      min-width: 200px;
    }

    /* Shimmer layer */
    .mystic-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg,
        transparent 30%,
        rgba(255,255,255,0.08) 50%,
        transparent 70%
      );
      transform: translateX(-100%);
      transition: transform 0.5s ease;
    }

    .mystic-btn:hover::before { transform: translateX(100%); }

    /* Glow border on hover */
    .mystic-btn::after {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 50px;
      opacity: 0;
      transition: opacity 0.3s;
    }

    /* Button 1 — gold glow */
    .btn-gold {
      border-color: rgba(232,200,74,0.5);
      box-shadow: 0 0 18px rgba(232,200,74,0.12), inset 0 0 20px rgba(232,200,74,0.05);
    }
    .btn-gold::after { box-shadow: 0 0 0 2px var(--gold-glow), 0 0 35px rgba(255,218,0,0.5); }
    .btn-gold:hover  { background: rgba(232,200,74,0.12); color: #fff; }
    .btn-gold:hover::after, .btn-gold:active::after { opacity: 1; }
    .btn-gold:active {
      transform: scale(0.97);
      box-shadow: 0 0 0 2px var(--gold-glow), 0 0 60px rgba(255,218,0,0.8), 0 0 120px rgba(255,218,0,0.4);
      background: rgba(232,200,74,0.2);
      color: #fff;
    }

    /* Button 2 — teal glow */
    .btn-teal {
      border-color: rgba(0,212,200,0.5);
      box-shadow: 0 0 18px rgba(0,212,200,0.12), inset 0 0 20px rgba(0,212,200,0.05);
      color: #a0f5f0;
    }
    .btn-teal::after { box-shadow: 0 0 0 2px var(--teal-glow), 0 0 35px rgba(0,255,238,0.5); }
    .btn-teal:hover  { background: rgba(0,212,200,0.12); color: #fff; }
    .btn-teal:hover::after, .btn-teal:active::after { opacity: 1; }
    .btn-teal:active {
      transform: scale(0.97);
      box-shadow: 0 0 0 2px var(--teal-glow), 0 0 60px rgba(0,255,238,0.8), 0 0 120px rgba(0,255,238,0.4);
      background: rgba(0,212,200,0.2);
      color: #fff;
    }

    /* Button 3 — rose glow */
    .btn-rose {
      border-color: rgba(232,74,138,0.5);
      box-shadow: 0 0 18px rgba(232,74,138,0.12), inset 0 0 20px rgba(232,74,138,0.05);
      color: #ffb0d0;
    }
    .btn-rose::after { box-shadow: 0 0 0 2px var(--rose-glow), 0 0 35px rgba(255,106,170,0.5); }
    .btn-rose:hover  { background: rgba(232,74,138,0.12); color: #fff; }
    .btn-rose:hover::after, .btn-rose:active::after { opacity: 1; }
    .btn-rose:active {
      transform: scale(0.97);
      box-shadow: 0 0 0 2px var(--rose-glow), 0 0 60px rgba(255,106,170,0.8), 0 0 120px rgba(255,106,170,0.4);
      background: rgba(232,74,138,0.2);
      color: #fff;
    }

    /* Bottom ornament */
    .ornament-bottom {
      margin-top: 3rem;
      font-family: 'Cinzel Decorative', serif;
      font-size: 18px;
      color: var(--amethyst);
      letter-spacing: 0.5em;
      opacity: 0.5;
      animation: fadeUp 1.4s ease forwards;
      animation-delay: 2s;
      opacity: 0;
    }

    @keyframes fadeUp {
      0%   { opacity: 0; transform: translateY(22px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Particle sparkles */
    .sparkle {
      position: fixed;
      pointer-events: none;
      border-radius: 50%;
      animation: sparkleFly var(--dur) ease-out forwards;
      z-index: 6;
    }

    @keyframes sparkleFly {
      0%   { transform: translate(0,0) scale(1); opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
    }

    /* ── Floating Mandala ── */
    .mandala-wrap {
      position: fixed;
      z-index: 3;
      pointer-events: none;
      animation: mandalaFloat 38s ease-in-out infinite, mandalaDrift 60s linear infinite;
      opacity: 0;
      animation-fill-mode: forwards;
    }

    @keyframes mandalaFloat {
      0%   { opacity: 0;    transform: translateY(0px)    rotate(0deg); }
      8%   { opacity: 0.62; }
      50%  { opacity: 0.55; transform: translateY(-28px)  rotate(180deg); }
      92%  { opacity: 0.62; }
      100% { opacity: 0;    transform: translateY(0px)    rotate(360deg); }
    }

    @keyframes mandalaDrift {
      0%   { left: 8vw;  top: 55vh; }
      25%  { left: 72vw; top: 20vh; }
      50%  { left: 80vw; top: 65vh; }
      75%  { left: 20vw; top: 75vh; }
      100% { left: 8vw;  top: 55vh; }
    }

    .mandala-wrap svg {
      width: 220px;
      height: 220px;
      filter: drop-shadow(0 0 22px rgba(155,79,216,0.80))
              drop-shadow(0 0 45px rgba(232,200,74,0.50))
              drop-shadow(0 0 8px  rgba(200,158,255,0.60));
    }

    @media (max-width: 600px) {
      .button-row { flex-direction: column; align-items: center; }
      .mystic-btn { min-width: 240px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; }
    }
  </style>