:root {
      --bg: #0f1225;
      --card: #171a2f;
      --accent: #7c5cff;
      --accent-2: #ff7ab6;
      --text: #e7e8ee;
      --muted: #a0a3b5;
      --success: #22c55e;
      --warning: #f59e0b;
    }

    [data-theme="light"] {
      --bg: #f7f7fb;
      --card: #ffffff;
      --accent: #6b4bff;
      --accent-2: #ff4d97;
      --text: #141625;
      --muted: #4b4f69;
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      font-family: Poppins, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: radial-gradient(1200px 800px at 10% -10%, rgba(124, 92, 255, .25), transparent 60%),
        radial-gradient(1200px 800px at 110% 10%, rgba(255, 122, 182, .2), transparent 60%),
        var(--bg);
      color: var(--text);
      letter-spacing: .2px;
    }

    a {
      color: inherit
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 24px
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: .5px
    }

    .chip {
      padding: .35rem .7rem;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      color: white;
      font-size: .8rem
    }

    .btn {
      appearance: none;
      border: 0;
      background: var(--accent);
      color: white;
      padding: .8rem 1rem;
      border-radius: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(124, 92, 255, .25);
      transition: transform .1s ease, box-shadow .2s ease, opacity .2s
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(124, 92, 255, .35)
    }

    .btn.secondary {
      background: transparent;
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, .15)
    }

    .btn.ghost {
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, .25)
    }

    .grid {
      display: grid;
      gap: 20px
    }

    .hero {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      align-items: center;
      gap: 24px;
      padding: 32px 0
    }

    .card {
      background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 20px;
      padding: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25)
    }

    .card.soft {
      background: var(--card)
    }

    .badge-list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .badge {
      font-size: .85rem;
      padding: .4rem .65rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .14);
      color: var(--muted)
    }

    .title {
      font-size: clamp(28px, 6vw, 56px);
      line-height: 1.05;
      margin: 10px 0 8px
    }

    .subtitle {
      font-size: clamp(16px, 2.2vw, 20px);
      color: var(--muted);
      margin: 0 0 18px
    }

    .cta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px
    }

    .kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 16px
    }

    .kpi {
      background: var(--card);
      border-radius: 16px;
      padding: 14px;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, .08)
    }

    .kpi b {
      display: block;
      font-size: 1.6rem
    }

    .section {
      margin: 32px 0
    }

    .section h2 {
      margin: 0 0 12px
    }

    .timeline {
      display: grid;
      gap: 12px
    }

    .item {
      display: flex;
      gap: 12px;
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: 14px
    }

    .item .dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      margin-top: 4px
    }

    .item h4 {
      margin: 0
    }

    .item p {
      margin: 6px 0 0;
      color: var(--muted)
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .gallery img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 14px;
      filter: saturate(1.05)
    }

    .rsvp {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 16px;
      align-items: stretch
    }

    .field {
      display: grid;
      gap: 6px
    }

    input,
    textarea,
    select {
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--text);
      padding: .8rem 1rem;
      border-radius: 12px;
      outline: none
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 18px 0;
      color: var(--muted)
    }

    /* Confetti canvas fixed */
    #confettiCanvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 999
    }

    /* Responsive */
    @media (max-width: 920px) {
      .hero {
        grid-template-columns: 1fr
      }

      .rsvp {
        grid-template-columns: 1fr
      }

      .gallery {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width: 560px) {
      .kpis {
        grid-template-columns: repeat(2, 1fr)
      }

      .gallery {
        grid-template-columns: 1fr
      }
    }

    /* pop-up */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
     width: 100vw; height: 100vh;

      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 10;
      
    }

    .popup-content {
      background: white;
      padding: 4px;
      border-radius: 8px;
      
      max-width: 90%;
      height: auto;
      object-fit: cover;
      text-align: center;
      position: relative;
    }

    .popup-img{
      width: 100%;
  height: auto;
  display: block;
    }

    .close-btn {
      position: absolute;
      top: 10px;
      color: red;
      right: 15px;
      font-size: 20px;
      font-weight: semi-bold;
      cursor: pointer;
    }

    /* Animate */
    .roll-in-left {
      -webkit-animation: roll-in-left .8s ease-out both;
      animation: roll-in-left .8s ease-out both
    }

    .wobble-hor-bottom {
      -webkit-animation: wobble-hor-bottom .8s 3 both;
      animation: wobble-hor-bottom .8s 3 both
    }

    .jello-horizontal {
      -webkit-animation: jello-horizontal .9s 1s 3 both;
      animation: jello-horizontal .9s 1s 3 both
    }

    .text-pop-up-top {
      -webkit-animation: text-pop-up-top 4s cubic-bezier(.25, .46, .45, .94) 1s infinite both;
      animation: text-pop-up-top 4s cubic-bezier(.25, .46, .45, .94) 1s infinite both
    }

    .text-flicker-in-glow {
      -webkit-animation: text-flicker-in-glow 6s linear 3s 3 both;
      animation: text-flicker-in-glow 6s linear 3s 3 both
    }

    .slide-in-left {
	-webkit-animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s 2 both;
	        animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) 8s 2 both;
}
.text-focus-in {
	-webkit-animation: text-focus-in 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
	        animation: text-focus-in 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-11-2 11:57:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}


    @keyframes slide-in-left {
      0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
      }

      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
      }
    }

    @-webkit-keyframes text-flicker-in-glow {
      0% {
        opacity: 0
      }

      10% {
        opacity: 0;
        text-shadow: none
      }

      10.1% {
        opacity: 1;
        text-shadow: none
      }

      10.2% {
        opacity: 0;
        text-shadow: none
      }

      20% {
        opacity: 0;
        text-shadow: none
      }

      20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .25)
      }

      20.6% {
        opacity: 0;
        text-shadow: none
      }

      30% {
        opacity: 0;
        text-shadow: none
      }

      30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      30.6% {
        opacity: 0;
        text-shadow: none
      }

      45% {
        opacity: 0;
        text-shadow: none
      }

      45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      50% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      55% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      55.1% {
        opacity: 0;
        text-shadow: none
      }

      57% {
        opacity: 0;
        text-shadow: none
      }

      57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35)
      }

      60% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35)
      }

      60.1% {
        opacity: 0;
        text-shadow: none
      }

      65% {
        opacity: 0;
        text-shadow: none
      }

      65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35), 0 0 100px rgba(255, 255, 255, .1)
      }

      75% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35), 0 0 100px rgba(255, 255, 255, .1)
      }

      75.1% {
        opacity: 0;
        text-shadow: none
      }

      77% {
        opacity: 0;
        text-shadow: none
      }

      77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .4), 0 0 110px rgba(255, 255, 255, .2), 0 0 100px rgba(255, 255, 255, .1)
      }

      85% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .4), 0 0 110px rgba(255, 255, 255, .2), 0 0 100px rgba(255, 255, 255, .1)
      }

      85.1% {
        opacity: 0;
        text-shadow: none
      }

      86% {
        opacity: 0;
        text-shadow: none
      }

      86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .6), 0 0 60px rgba(255, 255, 255, .45), 0 0 110px rgba(255, 255, 255, .25), 0 0 100px rgba(255, 255, 255, .1)
      }

      100% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .6), 0 0 60px rgba(255, 255, 255, .45), 0 0 110px rgba(255, 255, 255, .25), 0 0 100px rgba(255, 255, 255, .1)
      }
    }

    @keyframes text-flicker-in-glow {
      0% {
        opacity: 0
      }

      10% {
        opacity: 0;
        text-shadow: none
      }

      10.1% {
        opacity: 1;
        text-shadow: none
      }

      10.2% {
        opacity: 0;
        text-shadow: none
      }

      20% {
        opacity: 0;
        text-shadow: none
      }

      20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .25)
      }

      20.6% {
        opacity: 0;
        text-shadow: none
      }

      30% {
        opacity: 0;
        text-shadow: none
      }

      30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      30.6% {
        opacity: 0;
        text-shadow: none
      }

      45% {
        opacity: 0;
        text-shadow: none
      }

      45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      50% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      55% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 255, 255, .25)
      }

      55.1% {
        opacity: 0;
        text-shadow: none
      }

      57% {
        opacity: 0;
        text-shadow: none
      }

      57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35)
      }

      60% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35)
      }

      60.1% {
        opacity: 0;
        text-shadow: none
      }

      65% {
        opacity: 0;
        text-shadow: none
      }

      65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35), 0 0 100px rgba(255, 255, 255, .1)
      }

      75% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .35), 0 0 100px rgba(255, 255, 255, .1)
      }

      75.1% {
        opacity: 0;
        text-shadow: none
      }

      77% {
        opacity: 0;
        text-shadow: none
      }

      77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .4), 0 0 110px rgba(255, 255, 255, .2), 0 0 100px rgba(255, 255, 255, .1)
      }

      85% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .55), 0 0 60px rgba(255, 255, 255, .4), 0 0 110px rgba(255, 255, 255, .2), 0 0 100px rgba(255, 255, 255, .1)
      }

      85.1% {
        opacity: 0;
        text-shadow: none
      }

      86% {
        opacity: 0;
        text-shadow: none
      }

      86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .6), 0 0 60px rgba(255, 255, 255, .45), 0 0 110px rgba(255, 255, 255, .25), 0 0 100px rgba(255, 255, 255, .1)
      }

      100% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, .6), 0 0 60px rgba(255, 255, 255, .45), 0 0 110px rgba(255, 255, 255, .25), 0 0 100px rgba(255, 255, 255, .1)
      }
    }

    @-webkit-keyframes text-pop-up-top {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: none
      }

   
      100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #FFFBB8, 0 2px 0 #FFFBB8, 0 3px 0 #FFFBB8, 0 4px 0 #FFFBB8, 0 5px 0 #FFFBB8, 0 6px 0 #FFFBB8, 0 7px 0 #FFFBB8, 0 8px 0 #FFFBB8, 0 9px 0 #FFFBB8, 0 50px 30px rgba(0, 0, 0, .3)
      }
    }

    @keyframes text-pop-up-top {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: none
      }

      100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #FFFBB8, 0 2px 0 #FFFBB8, 0 3px 0 #FFFBB8, 0 4px 0 #FFFBB8, 0 5px 0 #FFFBB8, 0 6px 0 #FFFBB8, 0 7px 0 #FFFBB8, 0 8px 0 #FFFBB8, 0 9px 0 #FFFBB8, 0 50px 30px rgba(0, 0, 0, .3)
      }
    }

    @-webkit-keyframes roll-in-left {
      0% {
        -webkit-transform: translateX(-800px) rotate(-540deg);
        transform: translateX(-800px) rotate(-540deg);
        opacity: 0
      }

      100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        opacity: 1
      }
    }

    @keyframes roll-in-left {
      0% {
        -webkit-transform: translateX(-800px) rotate(-540deg);
        transform: translateX(-800px) rotate(-540deg);
        opacity: 0
      }

      100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        opacity: 1
      }
    }

    @-webkit-keyframes wobble-hor-bottom {

      0%,
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
      }

      15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg)
      }

      30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg)
      }

      45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg)
      }

      60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg)
      }

      75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg)
      }
    }

    @keyframes wobble-hor-bottom {

      0%,
      100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
      }

      15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg)
      }

      30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg)
      }

      45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg)
      }

      60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg)
      }

      75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg)
      }
    }

    @-webkit-keyframes jello-horizontal {
      0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }

      30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
      }

      40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
      }

      50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
      }

      65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
      }

      75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
      }

      100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }

    @keyframes jello-horizontal {
      0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }

      30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
      }

      40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
      }

      50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
      }

      65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
      }

      75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
      }

      100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    }