@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Poppins:wght@300;400;600;800&display=swap');

       * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
       }

       :root {
         --hot-pink: #ff006e;
         --soft-pink: #ffc2d1;
         --baby-pink: #ffe5f0;
         --deep-pink: #c9184a;
         --rose-gold: #e83e8c;
         --white: #ffffff;
       }

       body {
         font-family: 'Poppins', sans-serif;
         background: linear-gradient(135deg, #ffe5f0 0%, #ffc2d1 50%, #ffafcc 100%);
         min-height: 100vh;
         overflow-x: hidden;
         cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewport="0 0 24 24" fill="%23ff006e"><text y="20" font-size="20">💕</text></svg>'), auto;
       }

       /* Floating Hearts Background Animation */
       .hearts-container {
         position: fixed;
         width: 100%;
         height: 100%;
         overflow: hidden;
         z-index: -1;
         pointer-events: none;
       }

       .heart {
         position: absolute;
         font-size: 20px;
         opacity: 0.3;
         animation: float 15s infinite;
       }

       @keyframes float {

         0%,
         100% {
           transform: translateY(100vh) rotate(0deg);
           opacity: 0;
         }

         10% {
           opacity: 0.4;
         }

         90% {
           opacity: 0.4;
         }

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

       /* Hero Section */
       header {
         min-height: 100vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
         position: relative;
         padding: 2rem;
       }

       .profile-container {
         position: relative;
         margin-bottom: 2rem;
         animation: bounce-in 1.5s ease-out;
       }

       @keyframes bounce-in {
         0% {
           transform: scale(0) rotate(-180deg);
           opacity: 0;
         }

         60% {
           transform: scale(1.1) rotate(10deg);
         }

         100% {
           transform: scale(1) rotate(0deg);
           opacity: 1;
         }
       }

       .profile-img {
         width: 280px;
         height: 280px;
         border-radius: 50%;
         object-fit: cover;
         border: 8px solid var(--white);
         box-shadow:
           0 0 0 15px rgba(255, 105, 180, 0.3),
           0 20px 50px rgba(255, 0, 110, 0.4);
         transition: transform 0.4s ease, box-shadow 0.4s ease;
         animation: pulse-glow 3s infinite;
       }

       @keyframes pulse-glow {

         0%,
         100% {
           box-shadow: 0 0 0 15px rgba(255, 105, 180, 0.3), 0 20px 50px rgba(255, 0, 110, 0.4);
         }

         50% {
           box-shadow: 0 0 0 25px rgba(255, 105, 180, 0.1), 0 30px 60px rgba(255, 0, 110, 0.6);
         }
       }

       .profile-img:hover {
         transform: scale(1.05) rotate(5deg);
       }

       .status-badge {
         position: absolute;
         bottom: 20px;
         right: 20px;
         background: var(--hot-pink);
         color: white;
         padding: 0.5rem 1.5rem;
         border-radius: 30px;
         font-weight: 800;
         font-size: 0.9rem;
         box-shadow: 0 4px 15px rgba(255, 0, 110, 0.4);
         animation: wiggle 2s infinite;
       }

       @keyframes wiggle {

         0%,
         100% {
           transform: rotate(-3deg);
         }

         50% {
           transform: rotate(3deg);
         }
       }

       h1 {
         font-family: 'Playfair Display', serif;
         font-size: 5rem;
         font-weight: 900;
         background: linear-gradient(45deg, var(--deep-pink), var(--hot-pink), var(--rose-gold));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         margin-bottom: 1rem;
         text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
         animation: slide-down 1s ease-out;
         letter-spacing: -2px;
       }

       @keyframes slide-down {
         from {
           transform: translateY(-50px);
           opacity: 0;
         }

         to {
           transform: translateY(0);
           opacity: 1;
         }
       }

       .tagline {
         font-size: 1.5rem;
         color: var(--deep-pink);
         font-weight: 300;
         margin-bottom: 2rem;
         animation: fade-in 2s ease-out;
         font-style: italic;
       }

       @keyframes fade-in {
         from {
           opacity: 0;
         }

         to {
           opacity: 1;
         }
       }

       .stats {
         display: flex;
         gap: 3rem;
         margin-top: 2rem;
         animation: slide-up 1s ease-out 0.5s backwards;
       }

       @keyframes slide-up {
         from {
           transform: translateY(50px);
           opacity: 0;
         }

         to {
           transform: translateY(0);
           opacity: 1;
         }
       }

       .stat-item {
         text-align: center;
         background: rgba(255, 255, 255, 0.8);
         padding: 1rem 2rem;
         border-radius: 20px;
         backdrop-filter: blur(10px);
         box-shadow: 0 8px 32px rgba(255, 105, 180, 0.2);
         transition: transform 0.3s ease;
       }

       .stat-item:hover {
         transform: translateY(-10px);
         box-shadow: 0 15px 40px rgba(255, 105, 180, 0.4);
       }

       .stat-number {
         font-size: 2.5rem;
         font-weight: 800;
         color: var(--hot-pink);
         display: block;
       }

       .stat-label {
         color: var(--deep-pink);
         font-size: 0.9rem;
         font-weight: 600;
       }

       /* About Section */
       section.about {
         padding: 6rem 2rem;
         background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4));
       }

       .container {
         max-width: 1200px;
         margin: 0 auto;
       }

       .section-title {
         font-family: 'Playfair Display', serif;
         font-size: 3.5rem;
         text-align: center;
         color: var(--deep-pink);
         margin-bottom: 3rem;
         position: relative;
         display: inline-block;
         left: 50%;
         transform: translateX(-50%);
       }

       .section-title::after {
         content: '✨';
         position: absolute;
         right: -50px;
         top: -10px;
         font-size: 2rem;
         animation: sparkle 2s infinite;
       }

       .section-title::before {
         content: '✨';
         position: absolute;
         left: -50px;
         top: -10px;
         font-size: 2rem;
         animation: sparkle 2s infinite 1s;
       }

       @keyframes sparkle {

         0%,
         100% {
           opacity: 1;
           transform: scale(1);
         }

         50% {
           opacity: 0.5;
           transform: scale(1.2);
         }
       }

       .about-content {
         background: rgba(255, 255, 255, 0.9);
         padding: 3rem;
         border-radius: 30px;
         box-shadow: 0 20px 60px rgba(255, 0, 110, 0.15);
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 3rem;
         align-items: center;
         position: relative;
         overflow: hidden;
       }

       .about-content::before {
         content: '';
         position: absolute;
         top: -50%;
         left: -50%;
         width: 200%;
         height: 200%;
         background: radial-gradient(circle, rgba(255, 182, 193, 0.2) 0%, transparent 70%);
         animation: rotate 20s linear infinite;
       }

       @keyframes rotate {
         from {
           transform: rotate(0deg);
         }

         to {
           transform: rotate(360deg);
         }
       }

       .about-text {
         position: relative;
         z-index: 1;
       }

       .about-text p {
         font-size: 1.2rem;
         line-height: 1.8;
         color: #555;
         margin-bottom: 1.5rem;
       }

       .highlight {
         color: var(--hot-pink);
         font-weight: 700;
         background: linear-gradient(120deg, rgba(255, 0, 110, 0.2) 0%, rgba(255, 0, 110, 0.2) 100%);
         background-repeat: no-repeat;
         background-size: 100% 0.4em;
         background-position: 0 88%;
         transition: background-size 0.3s ease;
       }

       .about-details {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 1rem;
         margin-top: 2rem;
       }

       .detail-item {
         background: var(--baby-pink);
         padding: 1rem;
         border-radius: 15px;
         text-align: center;
         border: 2px solid var(--soft-pink);
         transition: all 0.3s ease;
       }

       .detail-item:hover {
         background: var(--hot-pink);
         color: white;
         transform: scale(1.05);
       }

       .detail-label {
         font-size: 0.8rem;
         opacity: 0.8;
         margin-bottom: 0.3rem;
       }

       .detail-value {
         font-weight: 700;
         font-size: 1.1rem;
       }

       .about-image {
         position: relative;
         z-index: 1;
       }

       .about-image img {
         width: 100%;
         border-radius: 20px;
         box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
         transform: rotate(3deg);
         transition: transform 0.4s ease;
       }

       .about-image:hover img {
         transform: rotate(-3deg) scale(1.02);
       }

       /* Reviews Section (Ex-Girlfriend Ratings) */
       .reviews-section {
         padding: 6rem 2rem;
         background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
       }

       .warning-banner {
         background: linear-gradient(90deg, #ff006e, #ff4d6d);
         color: white;
         text-align: center;
         padding: 1rem;
         font-weight: 700;
         margin-bottom: 3rem;
         border-radius: 50px;
         box-shadow: 0 5px 20px rgba(255, 0, 110, 0.4);
         animation: shine 3s infinite;
         position: relative;
         overflow: hidden;
       }

       @keyframes shine {
         0% {
           background-position: -200% center;
         }

         100% {
           background-position: 200% center;
         }
       }

       .reviews-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2rem;
       }

       .review-card {
         background: white;
         border-radius: 25px;
         padding: 2rem;
         box-shadow: 0 10px 40px rgba(255, 105, 180, 0.2);
         position: relative;
         overflow: hidden;
         transition: transform 0.4s ease, box-shadow 0.4s ease;
         border: 3px solid transparent;
         background-clip: padding-box;
       }

       .review-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: linear-gradient(135deg, #ff006e, #ff4d6d);
         z-index: -1;
         border-radius: 25px;
         opacity: 0;
         transition: opacity 0.4s ease;
       }

       .review-card:hover {
         transform: translateY(-10px) rotate(1deg);
         box-shadow: 0 20px 60px rgba(255, 0, 110, 0.3);
       }

       .review-card:hover::before {
         opacity: 1;
       }

       .review-card:hover * {
         color: white;
         position: relative;
         z-index: 2;
       }

       .review-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 1rem;
       }

       .reviewer-name {
         font-weight: 800;
         font-size: 1.3rem;
         color: var(--deep-pink);
       }

       .relationship-period {
         font-size: 0.85rem;
         color: #666;
         background: var(--baby-pink);
         padding: 0.3rem 0.8rem;
         border-radius: 20px;
       }

       .review-card:hover .relationship-period {
         background: rgba(255, 255, 255, 0.2);
       }

       .rating {
         margin-bottom: 1rem;
       }

       .stars {
         font-size: 1.5rem;
         color: #ffd700;
         letter-spacing: 3px;
         animation: twinkle 1.5s infinite;
         display: inline-block;
       }

       @keyframes twinkle {

         0%,
         100% {
           opacity: 1;
         }

         50% {
           opacity: 0.7;
         }
       }

       .review-text {
         color: #555;
         line-height: 1.6;
         font-style: italic;
         font-size: 1rem;
       }

       .review-card:hover .review-text {
         color: white;
       }

       .verified-badge {
         position: absolute;
         top: 15px;
         right: 15px;
         background: #00d9ff;
         color: white;
         width: 30px;
         height: 30px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 0.9rem;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
         animation: ping 2s infinite;
       }

       @keyframes ping {
         0% {
           transform: scale(1);
           opacity: 1;
         }

         75% {
           transform: scale(1.5);
           opacity: 0;
         }

         100% {
           transform: scale(1);
           opacity: 0;
         }
       }

       .heart-rating {
         position: absolute;
         bottom: -10px;
         right: 20px;
         font-size: 4rem;
         opacity: 0.1;
         transform: rotate(-15deg);
       }

       /* Footer */
       footer {
         background: linear-gradient(135deg, var(--deep-pink), var(--hot-pink));
         color: white;
         text-align: center;
         padding: 3rem 2rem;
         position: relative;
         overflow: hidden;
       }

       .footer-content h2 {
         font-family: 'Playfair Display', serif;
         font-size: 2.5rem;
         margin-bottom: 1rem;
       }

       .cta-button {
         display: inline-block;
         margin-top: 1.5rem;
         padding: 1.2rem 3rem;
         background: white;
         color: var(--hot-pink);
         text-decoration: none;
         border-radius: 50px;
         font-weight: 800;
         font-size: 1.2rem;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
       }

       .cta-button:hover {
         transform: translateY(-5px) scale(1.05);
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
       }

       .cta-button::after {
         content: '💌';
         margin-left: 10px;
       }

       .scroll-indicator {
         position: fixed;
         top: 0;
         left: 0;
         height: 5px;
         background: linear-gradient(90deg, var(--hot-pink), var(--rose-gold));
         z-index: 1000;
         animation: scroll-progress linear;
         animation-timeline: scroll();
       }

       @keyframes scroll-progress {
         from {
           width: 0%;
         }

         to {
           width: 100%;
         }
       }

       /* Responsive */
       @media (max-width: 768px) {
         h1 {
           font-size: 3rem;
         }

         .about-content {
           grid-template-columns: 1fr;
         }

         .stats {
           flex-direction: column;
           gap: 1rem;
         }

         .section-title {
           font-size: 2.5rem;
         }
       }

       /* Custom Cursor Trail */
       .cursor-heart {
         position: fixed;
         pointer-events: none;
         font-size: 20px;
         opacity: 0;
         animation: cursor-trail 1s forwards;
         z-index: 9999;
       }

       @keyframes cursor-trail {
         0% {
           opacity: 1;
           transform: scale(1);
         }

         100% {
           opacity: 0;
           transform: scale(0) translateY(20px);
         }
       }