@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: #000;
        overflow: hidden;
    }

    /* Transparent Content Container */
    .content-container {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(5px);
        border-radius: 16px;
        padding: 18px;
        margin: 15px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
        min-height: 350px;
        max-height: 450px;
    }

    .content-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #e31e24, #114a82);
        border-radius: 16px 16px 0 0;
    }

    /* Typography */
    .slide-title {
        font-size: 1.3em;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 10px;
        text-align: center;
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9), 1px 1px 2px rgba(0, 0, 0, 0.8);
        position: relative;
        line-height: 1.2;
        background: rgba(0, 0, 0, 0.3);
        padding: 8px 12px;
        border-radius: 8px;
        backdrop-filter: blur(5px);
    }

    .slide-title::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        width: 45px;
        height: 2px;
        background: linear-gradient(90deg, #e31e24, #114a82);
        border-radius: 1px;
    }

    .slide-content {
        font-size: 0.85em;
        color: #ffffff;
        line-height: 1.3;
        font-weight: 400;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    }

    /* Modern List Styling */
    .feature-list {
        list-style: none;
        padding: 0;
        margin: 10px 0;
        overflow: hidden;
    }

    .feature-list li {
        margin-bottom: 6px;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        border-left: 3px solid #e31e24;
        position: relative;
        font-weight: 500;
        backdrop-filter: blur(8px);
        transition: all 0.3s ease;
        font-size: 0.8em;
        line-height: 1.25;
        word-wrap: break-word;
        color: #ffffff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .feature-list li::before {
        content: '✦';
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
        background: #e31e24;
        color: white;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5px;
        font-weight: bold;
    }

    /* Modern Button */
    .cta-button {
        display: inline-block;
        padding: 10px 20px;
        background: linear-gradient(135deg, #e31e24 0%, #114a82 100%);
        color: white;
        text-decoration: none;
        border-radius: 18px;
        font-size: 0.85em;
        font-weight: 600;
        text-align: center;
        box-shadow: 0 4px 15px rgba(227, 30, 36, 0.5);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .cta-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s;
    }

    .cta-button:hover::before {
        left: 100%;
    }

    /* Highlight Box */
    .highlight-box {
        background: linear-gradient(135deg, #e31e24 0%, #114a82 100%);
        color: white;
        padding: 10px;
        border-radius: 5px;
        margin: 8px 0;
        text-align: center;
        font-weight: 600;
        box-shadow: 0 3px 12px rgba(227, 30, 36, 0.5);
        font-size: 0.8em;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Success Message */
    .success-message {
        background: linear-gradient(135deg, #114a82 0%, #e31e24 100%);
        color: white;
        padding: 10px;
        border-radius: 5px;
        margin: 8px 0;
        text-align: center;
        font-weight: 600;
        box-shadow: 0 3px 12px rgba(17, 74, 130, 0.5);
        font-size: 0.75em;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Unique Animations for Each Slide - Content Slides Up from Bottom */
    
    /* Slide 1 - Bounce Up Animation */
    .slide-1 .content-container {
        animation: slide1BounceUp 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        transform: translateY(80px);
        opacity: 0;
    }

    @keyframes slide1BounceUp {
        0% {
            transform: translateY(80px);
            opacity: 0;
        }
        60% {
            transform: translateY(-8px);
            opacity: 1;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .slide-1 .slide-title {
        animation: titleSlide1 1s ease-out 0.4s forwards;
        opacity: 0;
        transform: translateY(20px);
    }

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

    .slide-1 .feature-list li {
        animation: listItemSlide1 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
    }

    .slide-1 .feature-list li:nth-child(1) { animation-delay: 0.6s; }
    .slide-1 .feature-list li:nth-child(2) { animation-delay: 0.8s; }
    .slide-1 .feature-list li:nth-child(3) { animation-delay: 1.0s; }

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

    /* Slide 2 - Slide Up with Fade */
    .slide-2 .content-container {
        animation: slide2SlideUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        transform: translateY(80px);
        opacity: 0;
    }

    @keyframes slide2SlideUp {
        0% {
            transform: translateY(80px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .slide-2 .slide-title {
        animation: titleSlide2 1s ease-out 0.3s forwards;
        opacity: 0;
        transform: translateY(15px);
    }

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

    .slide-2 .feature-list li {
        animation: listItemSlide2 0.7s ease-out forwards;
        opacity: 0;
        transform: translateY(15px);
    }

    .slide-2 .feature-list li:nth-child(1) { animation-delay: 0.5s; }
    .slide-2 .feature-list li:nth-child(2) { animation-delay: 0.7s; }
    .slide-2 .feature-list li:nth-child(3) { animation-delay: 0.9s; }

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

    /* Slide 3 - Scale Up from Bottom */
    .slide-3 .content-container {
        animation: slide3ScaleUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        transform: translateY(80px) scale(0.9);
        opacity: 0;
    }

    @keyframes slide3ScaleUp {
        0% {
            transform: translateY(80px) scale(0.9);
            opacity: 0;
        }
        100% {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
    }

    .slide-3 .slide-title {
        animation: titleSlide3 1s ease-out 0.4s forwards;
        opacity: 0;
        transform: translateY(20px);
    }

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

    .slide-3 .highlight-box {
        animation: highlightSlide3 0.8s ease-out 0.6s forwards;
        opacity: 0;
        transform: translateY(15px);
    }

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

    .slide-3 .feature-list li {
        animation: listItemSlide3 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(12px);
    }

    .slide-3 .feature-list li:nth-child(1) { animation-delay: 0.8s; }
    .slide-3 .feature-list li:nth-child(2) { animation-delay: 1.0s; }
    .slide-3 .feature-list li:nth-child(3) { animation-delay: 1.2s; }

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

    /* Slide 4 - Slide Up with Rotation */
    .slide-4 .content-container {
        animation: slide4SlideUpRotate 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        transform: translateY(80px) rotateX(-8deg);
        opacity: 0;
    }

    @keyframes slide4SlideUpRotate {
        0% {
            transform: translateY(80px) rotateX(-8deg);
            opacity: 0;
        }
        100% {
            transform: translateY(0) rotateX(0);
            opacity: 1;
        }
    }

    .slide-4 .slide-title {
        animation: titleSlide4 1s ease-out 0.3s forwards;
        opacity: 0;
        transform: translateY(15px);
    }

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

    .slide-4 .feature-list li {
        animation: listItemSlide4 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(15px);
    }

    .slide-4 .feature-list li:nth-child(1) { animation-delay: 0.5s; }
    .slide-4 .feature-list li:nth-child(2) { animation-delay: 0.7s; }
    .slide-4 .feature-list li:nth-child(3) { animation-delay: 0.9s; }

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

    .slide-4 .success-message {
        animation: successSlide4 0.8s ease-out 1.1s forwards;
        opacity: 0;
        transform: translateY(15px);
    }

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

    /* Slide 5 - Elastic Slide Up */
    .slide-5 .content-container {
        animation: slide5ElasticUp 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        transform: translateY(80px);
        opacity: 0;
    }

    @keyframes slide5ElasticUp {
        0% {
            transform: translateY(80px);
            opacity: 0;
        }
        60% {
            transform: translateY(-4px);
            opacity: 1;
        }
        80% {
            transform: translateY(2px);
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .slide-5 .slide-title {
        animation: titleSlide5 1s ease-out 0.4s forwards;
        opacity: 0;
        transform: translateY(20px);
    }

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

    .slide-5 .highlight-box {
        animation: highlightSlide5 0.8s ease-out 0.6s forwards;
        opacity: 0;
        transform: translateY(15px);
    }

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

    .slide-5 .feature-list li {
        animation: listItemSlide5 0.7s ease-out forwards;
        opacity: 0;
        transform: translateY(15px);
    }

    .slide-5 .feature-list li:nth-child(1) { animation-delay: 0.8s; }
    .slide-5 .feature-list li:nth-child(2) { animation-delay: 1.0s; }
    .slide-5 .feature-list li:nth-child(3) { animation-delay: 1.2s; }

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

    /* Slide 6 - Final Slide Up with Glow */
    .slide-6 .content-container {
        animation: slide6SlideUpGlow 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        transform: translateY(80px);
        opacity: 0;
    }

    @keyframes slide6SlideUpGlow {
        0% {
            transform: translateY(80px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .slide-6 .slide-content {
        animation: contentSlide6 1s ease-out 0.4s forwards;
        opacity: 0;
        transform: translateY(20px);
    }

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

    .slide-6 .cta-button {
        animation: buttonSlide6 1s ease-out 0.8s forwards;
        opacity: 0;
        transform: translateY(25px) scale(0.9);
    }

    @keyframes buttonSlide6 {
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .content-container {
            padding: 15px;
            margin: 10px;
            min-height: 300px;
            max-height: 400px;
        }
        
        .slide-title {
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        
        .slide-content {
            font-size: 0.8em;
        }
        
        .feature-list li {
            padding: 6px 10px;
            margin-bottom: 6px;
            font-size: 0.75em;
            line-height: 1.2;
        }
        
        .cta-button {
            padding: 8px 16px;
            font-size: 0.8em;
            margin-top: 10px;
        }
        
        .highlight-box, .success-message {
            padding: 8px;
            font-size: 0.75em;
            margin: 8px 0;
        }
    }

    /* Ensure content is always visible */
    .content-container {
        z-index: 10;
        position: relative;
    }

    /* Better contrast for readability */
    .slide-title, .slide-content, .feature-list li {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }

    /* Slide Transition Animations */
    amp-story-page {
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Slide Enter Animation */
    amp-story-page[active] {
        animation: slideEnter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    @keyframes slideEnter {
        0% {
            opacity: 0;
            transform: translateX(30px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    /* Slide Exit Animation */
    amp-story-page:not([active]) {
        animation: slideExit 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    @keyframes slideExit {
        0% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
        100% {
            opacity: 0;
            transform: translateX(-30px) scale(0.95);
        }
    }

    /* Background Image Transition */
    amp-story-page[active] amp-img {
        animation: backgroundFadeIn 1s ease-out forwards;
    }

    @keyframes backgroundFadeIn {
        0% {
            opacity: 0;
            transform: scale(1.05);
        }
        100% {
            opacity: 0.7;
            transform: scale(1);
        }
    }

    /* Content Container Slide Transition */
    amp-story-page[active] .content-container {
        animation: contentSlideIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    @keyframes contentSlideIn {
        0% {
            opacity: 0;
            transform: translateY(50px) scale(0.9);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Smooth Navigation Transitions */
    amp-story-navigation-layer {
        transition: all 0.4s ease;
    }

    /* Progress Bar Animation */
    amp-story-progress-bar {
        transition: all 0.3s ease;
    }

    /* Bookend Transition */
    amp-story-bookend {
        animation: bookendSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    @keyframes bookendSlideIn {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Enhanced Page Transitions */
    amp-story-page {
        position: relative;
        overflow: hidden;
    }

    /* Slide Background Parallax Effect */
    amp-story-page[active] amp-img {
        transition: transform 0.8s ease-out;
    }

    /* Content Layer Transition */
    amp-story-grid-layer {
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Smooth Auto-advance Transition */
    amp-story-page[auto-advance-after] {
        transition: all 0.5s ease-in-out;
    }