 <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial,sans-serif;
    }

    body{
      height:100vh;
      overflow-x:hidden;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(135deg,#ff9a9e,#fad0c4,#ffdde1);
      position:relative;
    }

    .bg_heart{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      overflow:hidden;
      background-image:url('https://images.unsplash.com/photo-1518199266791-5375a83190b7?q=80&w=1600&auto=format&fit=crop');
      background-size:cover;
      background-position:center;
      z-index:-2;
    }

    .bg_heart::after{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.45);
      z-index:-1;
    }

    .heart{
      position:absolute;
      bottom:-50px;
      transform:rotate(-45deg);
      opacity:0.8;
    }

    .heart:before,
    .heart:after{
      position:absolute;
      content:'';
      width:100%;
      height:100%;
      background:inherit;
      border-radius:50%;
    }

    .heart:before{
      top:-50%;
      left:0;
    }

    .heart:after{
      top:0;
      right:-50%;
    }

    @keyframes love{
      0%{
        transform:translateY(0) rotate(-45deg);
        opacity:1;
      }

      100%{
        transform:translateY(-120vh) rotate(-45deg);
        opacity:0;
      }
    }

    .heart{
      position:absolute;
      color:rgba(255,0,85,0.7);
      animation:float 6s linear infinite;
      font-size:20px;
    }

    @keyframes float{
      0%{
        transform:translateY(100vh) scale(0.5);
        opacity:0;
      }
      50%{
        opacity:1;
      }
      100%{
        transform:translateY(-120vh) scale(1.2);
        opacity:0;
      }
    }

    .navbar{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:18px 50px;
      background:rgba(255,255,255,0.12);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(255,255,255,0.2);
      z-index:999;
    }

    .logo{
      font-size:30px;
      color:white;
      font-weight:bold;
      letter-spacing:1px;
      text-shadow:0 3px 10px rgba(0,0,0,0.3);
    }

    .nav-links{
      display:flex;
      list-style:none;
      gap:28px;
    }

    .nav-links li a{
      text-decoration:none;
      color:white;
      font-size:18px;
      font-weight:600;
      transition:0.3s ease;
      position:relative;
    }

    .nav-links li a::after{
      content:'';
      position:absolute;
      left:0;
      bottom:-6px;
      width:0%;
      height:2px;
      background:white;
      transition:0.3s ease;
    }

    .nav-links li a:hover::after{
      width:100%;
    }

    .nav-links li a:hover{
      color:#ffd1dc;
    }

    .container{
      width:90%;
      max-width:1100px;
      padding:50px;
      border-radius:35px;
      background:rgba(255,255,255,0.18);
      backdrop-filter:blur(18px);
      box-shadow:0 10px 40px rgba(0,0,0,0.25);
      text-align:center;
      position:relative;
      z-index:2;
      border:1px solid rgba(255,255,255,0.35);
      overflow-y:auto;
      max-height:92vh;
    }

    h1{
      font-size:70px;
      color:#ff004c;
      margin-bottom:15px;
      animation:pulse 2s infinite;
    }

    @keyframes pulse{
      0%{transform:scale(1);}
      50%{transform:scale(1.05);}
      100%{transform:scale(1);}
    }

    .subtitle{
      font-size:24px;
      color:#333;
      margin-bottom:30px;
    }

    .hero-section{
      position:relative;
      width:100%;
      display:flex;
      justify-content:center;
      margin-bottom:40px;
      overflow:hidden;
      border-radius:35px;
    }

    .love-img{
      width:100%;
      max-width:850px;
      height:450px;
      object-fit:cover;
      border-radius:35px;
      border:6px solid rgba(255,255,255,0.9);
      box-shadow:0 15px 40px rgba(0,0,0,0.3);
      transition:0.6s ease;
      filter:brightness(0.8);
    }

    .hero-section:hover .love-img{
      transform:scale(1.05);
      filter:brightness(1);
    }

    .hero-overlay{
      position:absolute;
      bottom:0;
      width:100%;
      padding:35px;
      background:linear-gradient(to top, rgba(0,0,0,0.75), transparent);
      color:white;
      text-align:left;
      border-radius:0 0 35px 35px;
    }

    .hero-overlay h2{
      font-size:42px;
      margin-bottom:10px;
      text-shadow:0 4px 10px rgba(0,0,0,0.4);
    }

    .hero-overlay p{
      font-size:20px;
      line-height:1.7;
      max-width:650px;
      color:#f5f5f5;
    }

    .love-img:hover{
      transform:scale(1.03);
    }

    .text{
      font-size:21px;
      line-height:2;
      color:#222;
      margin-bottom:18px;
      padding:0 10px;
    }

    .love{
      font-size:35px;
      color:#ff004c;
      margin-top:25px;
      font-weight:bold;
    }

    .buttons{
      margin-top:35px;
      display:flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .btn{
      padding:15px 35px;
      border:none;
      border-radius:50px;
      font-size:18px;
      cursor:pointer;
      transition:0.3s ease;
      text-decoration:none;
      font-weight:bold;
    }

    .btn1{
      background:#ff004c;
      color:white;
    }

    .btn1:hover{
      background:#d80041;
      transform:scale(1.08);
    }

    .btn2{
      background:white;
      color:#ff004c;
    }

    .btn2:hover{
      transform:scale(1.08);
    }

    .footer{
      margin-top:40px;
      color:#444;
      font-size:16px;
    }

    .timeline{
      margin-top:50px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:25px;
    }

    .card{
      background:rgba(255,255,255,0.28);
      padding:28px;
      border-radius:25px;
      backdrop-filter:blur(12px);
      box-shadow:0 8px 25px rgba(0,0,0,0.12);
      transition:0.4s ease;
      border:1px solid rgba(255,255,255,0.35);
      position:relative;
      overflow:hidden;
    }

    .card::before{
      content:'';
      position:absolute;
      top:-40px;
      right:-40px;
      width:120px;
      height:120px;
      background:rgba(255,255,255,0.15);
      border-radius:50%;
    }

    .card:hover{
      transform:translateY(-12px) scale(1.04);
      box-shadow:0 15px 35px rgba(0,0,0,0.2);
    }

    .card h2{
      color:#ff004c;
      margin-bottom:10px;
      font-size:24px;
    }

    .card p{
      color:#222;
      line-height:1.6;
      font-size:16px;
    }

    .quote-box{
      margin-top:45px;
      padding:35px;
      border-radius:25px;
      background:linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.15));
      color:#ff0055;
      font-size:28px;
      font-weight:bold;
      line-height:1.8;
      box-shadow:0 8px 25px rgba(0,0,0,0.12);
      border:1px solid rgba(255,255,255,0.3);
      transition:0.4s ease;
    }

    .quote-box:hover{
      transform:scale(1.02);
    }

    .quotes-grid{
      margin-top:35px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:25px;
    }

    .quote-card{
      background:rgba(255,255,255,0.22);
      border:1px solid rgba(255,255,255,0.3);
      backdrop-filter:blur(10px);
      padding:30px 25px;
      border-radius:25px;
      box-shadow:0 8px 25px rgba(0,0,0,0.12);
      transition:0.4s ease;
      color:#222;
    }

    .quote-card:hover{
      transform:translateY(-10px) scale(1.03);
      box-shadow:0 15px 35px rgba(0,0,0,0.2);
    }

    .quote-card span{
      font-size:40px;
      display:block;
      margin-bottom:15px;
    }

    .quote-card p{
      font-size:18px;
      line-height:1.8;
      font-weight:500;
    }

    .sorry-section{
      margin-top:60px;
      margin-bottom:60px;
      padding:50px 35px;
      border-radius:35px;
      background:rgba(255,255,255,0.18);
      backdrop-filter:blur(12px);
      box-shadow:0 10px 35px rgba(0,0,0,0.15);
      border:1px solid rgba(255,255,255,0.25);
      position:relative;
      overflow:hidden;
    }

    .sorry-section::before{
      content:'';
      position:absolute;
      top:-80px;
      right:-80px;
      width:220px;
      height:220px;
      background:rgba(255,255,255,0.12);
      border-radius:50%;
    }

    .sorry-content h2{
      font-size:48px;
      color:#ff0055;
      margin-bottom:25px;
      text-shadow:0 4px 10px rgba(0,0,0,0.15);
    }

    .sorry-content p{
      font-size:20px;
      line-height:2;
      color:#222;
      margin-bottom:22px;
    }

    .sorry-quote{
      margin-top:25px;
      padding:22px;
      border-radius:20px;
      background:rgba(255,255,255,0.25);
      color:#ff0055;
      font-size:24px;
      font-weight:bold;
      line-height:1.7;
      box-shadow:0 8px 25px rgba(0,0,0,0.1);
    }

    .gallery-title{
      margin-top:55px;
      margin-bottom:25px;
      font-size:38px;
      color:#ff0055;
      font-weight:bold;
    }

    .gallery{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      grid-auto-rows:250px;
      gap:20px;
      margin-bottom:40px;
    }

    .gallery-item{
      overflow:hidden;
      border-radius:28px;
      position:relative;
      box-shadow:0 10px 25px rgba(0,0,0,0.18);
      transition:0.5s ease;
    }

    .gallery-item img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:0.6s ease;
    }

    .gallery-item:hover img{
      transform:scale(1.12);
    }

    .gallery-item:hover{
      transform:translateY(-8px);
      box-shadow:0 18px 35px rgba(0,0,0,0.25);
    }

    .gallery-item::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(to top, rgba(0,0,0,0.35), transparent);
      opacity:0;
      transition:0.4s ease;
    }

    .gallery-item:hover::after{
      opacity:1;
    }

    .gallery-item.tall{
      grid-row:span 2;
    }

    .gallery-item.wide{
      grid-column:span 2;
    }

    @media(max-width:900px){
      .navbar{
        flex-direction:column;
        align-items:flex-start;
        padding:16px 18px;
      }

      .logo{
        font-size:26px;
        margin-bottom:10px;
      }

      .nav-links{
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        justify-content:center;
      }

      .nav-links li a{
        font-size:15px;
        padding:10px 14px;
        background:rgba(255,255,255,0.12);
        border-radius:30px;
      }

      .container{
        margin-top:120px;
        padding:28px 20px;
      }

      .hero-overlay h2{
        font-size:30px;
      }

      .hero-overlay p{
        font-size:16px;
      }

      .sorry-content h2{
        font-size:36px;
      }

      .sorry-content p{
        font-size:17px;
        line-height:1.9;
      }
    }

      .nav-links{
        gap:16px;
        flex-wrap:wrap;
        justify-content:center;
      }

      .nav-links li a{
        font-size:15px;
      }
    }

    @media(max-width:768px){
      .gallery-item.wide{
        grid-column:span 1;
      }

      .gallery-item.tall{
        grid-row:span 1;
      }

      .hero-overlay h2{
        font-size:28px;
      }

      .hero-overlay p{
        font-size:16px;
      }
    }
  
  /**/
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family:'Poppins',sans-serif;
      overflow-x:hidden;
      background:linear-gradient(135deg,#ff4b91,#ff8fab,#ffc2d1);
      min-height:100vh;
      color:white;
      position:relative;
    }

    .hearts{
      position:fixed;
      width:100%;
      height:100%;
      overflow:hidden;
      z-index:0;
    }

    .heart{
      position:absolute;
      bottom:-20px;
      color:rgba(255,255,255,0.6);
      animation:float 10s linear infinite;
      font-size:20px;
    }

    @keyframes float{
      0%{
        transform:translateY(0) rotate(0deg);
        opacity:0;
      }
      10%{
        opacity:1;
      }
      100%{
        transform:translateY(-110vh) rotate(360deg);
        opacity:0;
      }
    }

    .container{
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      text-align:center;
      min-height:100vh;
      padding:20px;
    }

    .glass{
      width:100%;
      max-width:850px;
      background:rgba(255,255,255,0.12);
      backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.2);
      border-radius:30px;
      padding:40px 30px;
      box-shadow:0 10px 40px rgba(0,0,0,0.25);
      animation:fadeIn 1.2s ease;
    }

    @keyframes fadeIn{
      from{
        opacity:0;
        transform:translateY(40px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    .title{
      font-size:4rem;
      font-family:'Dancing Script',cursive;
      margin-bottom:10px;
      text-shadow:0 0 15px rgba(255,255,255,0.4);
    }

    .subtitle{
      font-size:1.2rem;
      margin-bottom:25px;
      opacity:0.95;
    }

    .photo{
      width:180px;
      height:180px;
      border-radius:50%;
      object-fit:cover;
      border:5px solid rgba(255,255,255,0.5);
      margin:20px auto;
      display:block;
      box-shadow:0 10px 25px rgba(0,0,0,0.3);
      animation:pulse 2.5s infinite;
    }

    @keyframes pulse{
      0%{
        transform:scale(1);
      }
      50%{
        transform:scale(1.05);
      }
      100%{
        transform:scale(1);
      }
    }

    .message{
      margin-top:25px;
      font-size:1.1rem;
      line-height:1.9;
      color:#fff;
    }

    .message span{
      color:#ffe066;
      font-weight:600;
    }

    .counter-box{
      margin-top:35px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
      gap:18px;
    }

    .counter{
      background:rgba(255,255,255,0.14);
      padding:20px 10px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,0.18);
    }

    .counter h2{
      font-size:2rem;
      margin-bottom:5px;
    }

    .counter p{
      font-size:0.9rem;
      opacity:0.9;
    }

    .love-btn{
      margin-top:35px;
      padding:15px 35px;
      border:none;
      border-radius:50px;
      background:white;
      color:#ff2e74;
      font-size:1rem;
      font-weight:700;
      cursor:pointer;
      transition:0.3s ease;
      box-shadow:0 8px 20px rgba(0,0,0,0.2);
    }

    .love-btn:hover{
      transform:translateY(-4px) scale(1.03);
      background:#ffe5ec;
    }

    .popup{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.5);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:999;
      padding:20px;
    }

    .popup-content{
      background:white;
      color:#ff2e74;
      padding:35px 25px;
      border-radius:25px;
      max-width:450px;
      text-align:center;
      animation:zoom 0.4s ease;
    }

    @keyframes zoom{
      from{
        transform:scale(0.7);
        opacity:0;
      }
      to{
        transform:scale(1);
        opacity:1;
      }
    }

    .popup-content h2{
      margin-bottom:15px;
      font-size:2rem;
    }

    .popup-content p{
      line-height:1.8;
      color:#444;
    }

    .close-btn{
      margin-top:20px;
      padding:10px 20px;
      border:none;
      background:#ff2e74;
      color:white;
      border-radius:30px;
      cursor:pointer;
      font-weight:600;
    }

    .footer{
      margin-top:35px;
      font-size:0.9rem;
      opacity:0.9;
    }

    audio{
      display:none;
    }

    @media(max-width:768px){
      .title{
        font-size:3rem;
      }

      .message{
        font-size:1rem;
      }

      .glass{
        padding:30px 20px;
      }
    }
  </style>