/* Font Definitions */
@font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Regular'), local('Roboto-Regular');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Bold'), local('Roboto-Bold');
    font-weight: bold;
    font-display: swap;
}

/* CSS Variables */
:root {
    /* Brand Colors */
    --color-primary-purple: #9b5de5;
    --color-primary-purple-light: #b967ff;
    --color-accent-lime: #CEFF0C;

    /* Text Colors */
    --color-white: #ffffff;
    --color-dark-text: #333;
    --color-text-primary: rgba(255, 255, 255, 0.9);
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    --color-text-muted: rgba(255, 255, 255, 0.7);

    /* Overlays */
    --color-overlay-light: rgba(255, 255, 255, 0.2);
    --color-overlay-medium: rgba(255, 255, 255, 0.3);
    --color-shadow: rgba(0, 0, 0, 0.2);

    /* Buttons */
    --color-button-bg: rgba(41, 51, 155, 1);
    --color-button-bg-hover: rgba(50, 61, 175, 1);
    --color-button-bg-active: rgba(25, 32, 115, 1);

    /* Status */
    --color-success: #4ade80;
    --color-error: #f87171;
}

/* Accessibility: Focus States */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 2px solid var(--color-accent-lime);
    outline-offset: 2px;
}

/* Remove outline for mouse users, keep for keyboard */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent-lime);
    outline-offset: 2px;
}

/* Accessibility: Visually Hidden (for screen readers) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

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

/* Padding for banner when active - currently disabled
Re-enable this when contest banner is active again ()
padding padding-top = 50px with banner. CONTEST BANNER KEY
*/
body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #9b5de5 0%, #b967ff 60%, #9b5de5 100%);
    background-size: 200% 200%;
    animation: gradient-move 10s ease infinite;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    line-height: 1.6;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Background Pattern */
.background-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.12), transparent 40%),
        radial-gradient(circle at 40% 90%, rgba(255, 255, 255, 0.1), transparent 35%),
        radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.08), transparent 30%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.background-pattern::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Topographic lines */
        repeating-conic-gradient(
            from 0deg at 30% 60%,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0) 1deg,
            rgba(255, 255, 255, 0.05) 1.5deg,
            rgba(255, 255, 255, 0) 2deg,
            rgba(255, 255, 255, 0) 18deg
        ),
        repeating-conic-gradient(
            from 90deg at 70% 40%,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0) 1deg,
            rgba(255, 255, 255, 0.05) 1.5deg,
            rgba(255, 255, 255, 0) 2deg,
            rgba(255, 255, 255, 0) 18deg
        );
    opacity: 0.6;
    animation: flow-opposite 20s linear infinite;
}

@keyframes flow-opposite {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(-10deg) scale(1.15);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.background-pattern::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
        /* Contour lines */
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0px,
            transparent 20px,
            rgba(255, 255, 255, 0.03) 20px,
            rgba(255, 255, 255, 0.03) 22px,
            transparent 22px,
            transparent 40px,
            rgba(255, 255, 255, 0.05) 40px,
            rgba(255, 255, 255, 0.05) 42px,
            transparent 42px,
            transparent 60px,
            rgba(255, 255, 255, 0.07) 60px,
            rgba(255, 255, 255, 0.07) 62px,
            transparent 62px,
            transparent 80px,
            rgba(255, 255, 255, 0.09) 80px,
            rgba(255, 255, 255, 0.09) 82px
        ),
        /* Flow lines */
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 15px,
            rgba(255, 255, 255, 0.03) 15px,
            rgba(255, 255, 255, 0.03) 16px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 25px,
            rgba(255, 255, 255, 0.03) 25px,
            rgba(255, 255, 255, 0.03) 26px
        ),
        /* Base gradient */
        conic-gradient(
            from 0deg at 50% 50%,
            rgba(155, 93, 229, 0.2) 0deg,
            rgba(206, 255, 12, 0.1) 90deg,
            rgba(155, 93, 229, 0.15) 180deg,
            rgba(206, 255, 12, 0.05) 270deg,
            rgba(155, 93, 229, 0.2) 360deg
        );
    opacity: 0.8;
    filter: blur(1px);
    animation: flow 30s linear infinite;
}

@keyframes flow {
    0% {
        transform: rotate(0deg) scale(1.1);
    }
    25% {
        transform: rotate(8deg) scale(1.3);
    }
    50% {
        transform: rotate(0deg) scale(1.1);
    }
    75% {
        transform: rotate(-8deg) scale(1.3);
    }
    100% {
        transform: rotate(0deg) scale(1.1);
    }
}

#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}


/* Container and Layout */
.logo-container {
    max-width: 430px;
    margin: 2rem auto 0;
    padding: 1rem;
}

.container {
    max-width: 700px;
    margin: 2rem auto;
    padding: 1rem 2rem;
    position: relative;
    z-index: 1;
    text-align: center;
}

.main-content {
    max-width: 650px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

/* Typography Styles */
h1 {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
    background: linear-gradient(to right, #ffffff, #d8c8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255,255,255,0.1);
}

h2 {
    font-size: 2rem;
    margin: 2rem 0 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    opacity: 0;
    animation: fadeIn 1s ease 0.2s forwards;
    color: #fff;
}

p {
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeIn 1s ease 0.3s forwards;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}

/* Unified list styling */
ul, ol {
    margin: 0 0 1.5rem 0;
    padding-left: 1.5rem;
    opacity: 0;
    animation: fadeIn 1s ease 0.3s forwards;
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

li {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.8rem;
    line-height: 1.7;
}

/* Bullet styling for unordered lists */
ul li {
    position: relative;
}

ul li::before {
    color: rgba(255, 255, 255, 0.4);
}

/* Ensure nested lists have proper spacing */
li > ul, li > ol {
    margin-top: 0.75rem;
    margin-bottom: 0;
    opacity: 1;
    animation: none;
    padding-left: 1.5rem;
}

/* Special styling for important list items */
li.important {
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
}

/* Logo */
.logo {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.logo img {
    width: 380px;
    height: auto;
    max-width: 100%;
}

/* App Demo */
.app-demo {
    width: 100%;
    position: relative;
    z-index: 2; 
}

.demo-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    aspect-ratio: 9/16;
}

/* Content */
.content-text {
    text-align: center;
    color: white;
    margin: 2rem 0;
    font-size: 1.5rem;
    font-weight: 500;
}

/* Link styles */
a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

a:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.8);
}

/* Subscribe Form Styles */
.newsletter-form {
    width: 100%;
    max-width: 500px;
    margin: 2rem auto; 
    padding: 0 1rem;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.newsletter-title {
    color: white;
    margin: 0;
    text-align: center;
    font-size: 1.25rem;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.form-group {
    position: relative;
    width: 100%;
    max-width: 300px;
}

input[type="email"] {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    width: 100%;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

input[type="email"]:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.25);
}

input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.form-cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin: 0.75rem auto 0;
    min-width: 150px;
    width: 200px;
    max-width: 90%;
    transition: all 0.3s ease;
    cursor: pointer;
}

.form-cta-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.form-cta-button:disabled {
    opacity: 0.7;
    transform: none;
}

.message {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
}

.message.visible {
    opacity: 1;
}

.message.success {
    color: #4ade80;
}

.message.error {
    color: #f87171;
}

/* Animation Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button Styles */
.cta-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2.25rem;
    background: linear-gradient(
        145deg,
        rgba(41, 51, 155, 1),
        rgba(30, 40, 135, 1)
    );
    border-radius: 50px;
    color: rgba(206, 255, 12, 1);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    backdrop-filter: blur(12px);
    border: none;
    margin: 1.5rem auto;
    width: 80%;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 
        0 12px 36px -12px rgba(41, 51, 155, 0.4),
        0 4px 8px -2px rgba(0, 0, 0, 0.1),
        0 0 1px rgba(41, 51, 155, 0.6);
    overflow: hidden;
}

.cta-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(206, 255, 12, 0),
        rgba(206, 255, 12, 0.1),
        rgba(206, 255, 12, 0)
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.cta-button:hover {
    background: linear-gradient(
        145deg,
        rgba(50, 61, 175, 1),
        rgba(41, 51, 155, 1)
    );
    box-shadow: 
        0 16px 40px -12px rgba(41, 51, 155, 0.5),
        0 8px 12px -2px rgba(0, 0, 0, 0.15),
        0 0 2px rgba(206, 255, 12, 0.4);
    transform: translateY(-2px);
}

.cta-button:hover::before {
    transform: translateX(100%);
}

.cta-button:active {
    transform: translateY(1px);
    background: linear-gradient(
        145deg,
        rgba(30, 40, 135, 1),
        rgba(25, 32, 115, 1)
    );
    box-shadow: 
        0 8px 20px -8px rgba(41, 51, 155, 0.4),
        0 2px 4px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
}

.floating-accept-button {
    position: fixed;
    bottom: 30px; 
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
        145deg,
        rgba(41, 51, 155, 1),
        rgba(30, 40, 135, 1)
    );
    border-radius: 50px;
    color: rgba(206, 255, 12, 1);
    text-decoration: none;
    padding: 0.8rem 1.4rem; 
    font-size: 1rem;  
    font-weight: bold;
    backdrop-filter: blur(12px);
    border: none;
    margin: 1.5rem auto;
    transition: all 0.3s ease;
    box-shadow: 
        0 12px 36px -12px rgba(41, 51, 155, 0.4),
        0 4px 8px -2px rgba(0, 0, 0, 0.1),
        0 0 1px rgba(41, 51, 155, 0.6);
    overflow: hidden;
    z-index: 9999;
    transition: all 0.3s ease;
}

.floating-accept-button:hover {
    background: linear-gradient(
        145deg,
        rgba(50, 61, 175, 1),
        rgba(41, 51, 155, 1)
    );
    box-shadow: 
        0 16px 40px -12px rgba(41, 51, 155, 0.5),
        0 8px 12px -2px rgba(0, 0, 0, 0.15),
        0 0 2px rgba(206, 255, 12, 0.4);
    transform: translateX(-50%) translateY(-2px);
}

.floating-accept-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(206, 255, 12, 0),
        rgba(206, 255, 12, 0.1),
        rgba(206, 255, 12, 0)
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.floating-accept-button:hover::before {
    transform: translateX(100%);
}

.floating-accept-button:active {
    transform: translateX(-50%) translateY(0);
    background: linear-gradient(
        145deg,
        rgba(30, 40, 135, 1),
        rgba(25, 32, 115, 1)
    );
    box-shadow: 
        0 8px 20px -8px rgba(41, 51, 155, 0.4),
        0 2px 4px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
}

/* Menu Styles */
.hamburger-menu {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 11;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.hamburger-line {
    width: 60%;
    height: 2px;
    background: white;
    transition: all 0.3s ease;
}

.floating-menu {
    position: fixed;
    bottom: 6rem;
    left: 2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    width: 250px;
    padding: 1rem;
    z-index: 11;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.menu-active .floating-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.menu-active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.menu-active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.menu-item {
    padding: 0.8rem 0;
    display: block;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 500;
    transition: all 0.2s ease;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:hover {
    color: #9b5de5;
}

/* Callout section */
.callout {
    background: linear-gradient(
        145deg,
        rgba(59, 130, 246, 0.15),
        rgba(37, 99, 235, 0.08)
    );
    box-shadow: 
        0 12px 36px -12px rgba(59, 130, 246, 0.3),
        0 4px 8px -2px rgba(0, 0, 0, 0.06),
        0 0 1px rgba(59, 130, 246, 0.5);
    padding: 1.75rem;
    margin: 1.5rem 0 3.5rem;
    border-radius: 1rem;
    backdrop-filter: blur(12px);
    animation: fadeIn 0.9s ease 0.3s forwards;
    opacity: 0;
    border-left: 5px solid rgba(59, 130, 246, 0.7);
    position: relative;
    max-width: 100%;
    word-wrap: break-word;
}

.callout::before {
    content: "Important";
    position: absolute;
    top: -12px;
    left: 20px;
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 1),
        rgba(37, 99, 235, 1)
    );
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Variants for different types of callouts */
.callout.tip::before {
    content: "Tip";
    background: linear-gradient(
        90deg,
        rgba(16, 185, 129, 1),
        rgba(5, 150, 105, 1)
    );
}

.callout.warning {
    background: linear-gradient(
        145deg,
        rgba(251, 191, 36, 0.15),
        rgba(245, 158, 11, 0.08)
    );
    box-shadow: 
        0 12px 36px -12px rgba(251, 191, 36, 0.3),
        0 4px 8px -2px rgba(0, 0, 0, 0.06),
        0 0 1px rgba(251, 191, 36, 0.5);
    border-left: 5px solid rgba(251, 191, 36, 0.7);
}

.callout.warning::before {
    content: "Warning";
    background: linear-gradient(
        90deg,
        rgba(251, 191, 36, 1),
        rgba(245, 158, 11, 1)
    );
}

.callout.note {
    background: linear-gradient(
        145deg,
        rgba(99, 102, 241, 0.15),
        rgba(79, 70, 229, 0.08)
    );
    box-shadow: 
        0 12px 36px -12px rgba(99, 102, 241, 0.3),
        0 4px 8px -2px rgba(0, 0, 0, 0.06),
        0 0 1px rgba(99, 102, 241, 0.5);
    border-left: 5px solid rgba(99, 102, 241, 0.7);
}

.callout.note::before {
    content: "Note";
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 1),
        rgba(79, 70, 229, 1)
    );
}

.callout h2 {
    margin-top: 0;
}

.callout p:last-child {
    margin-bottom: 0;
}

/* TLDR Section Styling */
.tldr {
    background: linear-gradient(
        145deg,
        rgba(146, 100, 230, 0.18),
        rgba(100, 130, 230, 0.1)
    );
    box-shadow: 
        0 12px 36px -12px rgba(146, 100, 230, 0.35),
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 0 1px rgba(146, 100, 230, 0.6);
    padding: 1.75rem;
    margin: 1.5rem 0 3.5rem;
    border-radius: 1rem;
    backdrop-filter: blur(12px);
    animation: fadeIn 0.8s ease 0.15s forwards;
    opacity: 0;
    border-left: 5px solid rgba(146, 100, 230, 0.7);
    position: relative;
    max-width: 100%;
    word-wrap: break-word;
}

.tldr::before {
    content: "TLDR";
    position: absolute;
    top: -12px;
    left: 20px;
    background: linear-gradient(
        90deg,
        rgba(146, 100, 230, 1),
        rgba(100, 130, 230, 1)
    );
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tldr h3 {
    margin-top: 0;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    opacity: 1;
    animation: none;
}

.tldr p {
    font-size: 1.1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
    animation: none;
}

.tldr p:last-child {
    margin-bottom: 0;
}

/* Question format */
.question-format {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    opacity: 0;
    animation: fadeIn 1s ease 0.5s forwards;
}

.question-format p {
    margin-bottom: 0.5rem;
    opacity: 1;
    animation: none;
}

.question-format p:last-child {
    margin-bottom: 0;
}

/* Footnotes styling */
.footnotes {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: fadeIn 1s ease 0.6s forwards;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

.footnotes ol {
    opacity: 1;
    animation: none;
}

.footnotes li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    word-break: break-word;
    hyphens: auto;
    line-height: 1.5;
}

.footnotes a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    word-break: break-all;
    transition: color 0.3s ease;
}

.footnotes a:hover {
    color: rgba(255, 255, 255, 1);
}

/* Superscript styling for footnotes */
sup {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
}

/* Video Feature Styling */
.video-feature {
    text-align: center;
    margin: 3rem 0;
    opacity: 0;
    animation: fadeIn 1s ease 0.4s forwards;
}

.video-feature img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.video-caption {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Breadcrumb navigation */
.breadcrumb-nav {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    width: 100%;
}

.breadcrumb-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    opacity: 1;
    animation: none;
}

.breadcrumb-nav li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb-nav li:not(:last-child)::after {
    content: "›";
    margin: 0 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb-nav a {
    color: rgba(255, 255, 255, 0.7);
    border-bottom: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.breadcrumb-nav a:hover {
    color: rgba(255, 255, 255, 1);
}

.breadcrumb-nav li:last-child a,
.breadcrumb-nav li:last-child span {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    pointer-events: none;
}

/* Research articles list styling */
.research-articles {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.article-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.article-card h2 {
    margin-top: 0;
}

.article-card p {
    opacity: 0.8;
}

.read-more {
    display: inline-block;
    margin-top: 1rem;
    color: #CEFF0C;
    font-weight: 500;
    border-bottom: none;
}

.read-more:hover {
    color: #4373a6;
}

/* Resource Links Styling */
.resource-links {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}

.resource-link {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: none;
    display: block;
}

.resource-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.resource-link h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
}

.resource-link p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
}

/* FAQ Section Styling */
.faq-section {
    margin: 2rem 0;
}

.faq-item {
    margin-bottom: 2rem;
}

.faq-item h3 {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.faq-item p {
    color: rgba(255, 255, 255, 0.7);
}

/* Social links styling */
.social-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem 0;
}

.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(155, 93, 229, 0.1);
    color: #9b5de5;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-link img {
    height: 24px;
    /* You might also want to set width to auto to maintain aspect ratio */
    width: auto;
  }

.social-link:hover {
    background: rgba(155, 93, 229, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(155, 93, 229, 0.2);
}

/* Bottom Navigation Bar */
.bottom-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: relative;
    bottom: 20px;
    left: 0;
    right: 0;
    padding: 15px 0;
    z-index: 5;
    border-radius: 10px;
    margin: 0 auto 50px;
}

.bottom-nav-item {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    margin: 0 clamp(15px, 3vw, 40px); /* Responsive spacing */
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 6px;
    border-bottom: none;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 rgba(0, 255, 0, 0);
}

.bottom-nav-item:hover {
    color: #CEFF0C;
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
    transition: all 0.3s ease;
}

/* Add extra padding at the bottom to allow scrolling past the nav */
body::after {
    content: "";
    display: block;
    height: 50px; /* Space to scroll past the bottom nav */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.menu-active .overlay {
    opacity: 1;
    pointer-events: all;
}

/* Contest Banner Styles */
.contest-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, #CEFD0C, #FFC700, #CEFD0C);
    background-size: 200% 100%;
    animation: gradient-shift 3s ease infinite;
    color: #333;
    padding: 12px 20px;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

@keyframes gradient-shift {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

.contest-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.contest-banner-content span {
    font-size: 1.1rem;
}

.close-banner {
    position: absolute;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 0;
    line-height: 1;
}

/* Contest Modal Styles */
.contest-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.contest-modal.show {
    display: flex;
}

.contest-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.contest-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Subscribe page styles */
.subscribe-info {
    color: white;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

    h2 {
        font-size: 1.5rem;
    }
    
    .container {
        padding: 1rem 1.5rem;
        max-width: 100%;
    }
    
    .main-content {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }
    
    p, ul, ol {
        max-width: 100%;
    }
    
    .logo img {
        width: 300px;
    }
    
    .cta-button {
        width: 100%;
    }
    
    .form-cta-button {
        width: 180px;
        max-width: 90%;
    }
    
    .breadcrumb-nav {
        padding: 0.75rem 1rem;
    }
    
    .bottom-nav {
        padding: 12px 0;
        flex-wrap: wrap;
        bottom: 15px;
    }
    
    .bottom-nav-item {
        margin: 5px 8px;
        font-size: 13px;
        padding: 6px 10px;
    }
    
    .callout, .tldr {
        padding: 1.5rem;
        margin: 1.25rem 0 3rem;
        width: 100%;
    }
    
    .footnotes {
        margin-top: 2rem;
        padding-top: 1rem;
    }
    
    .footnotes li {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    p {
        line-height: 1.7;
    }
    
    li {
        line-height: 1.6;
    }
    
    .container, .main-content {
        padding: 1.5rem 1.5rem;
    }
    
    .bottom-nav {
        flex-direction: column;
        padding: 10px 0;
        bottom: 10px;
        width: 90%;
        margin: 0 auto;
    }
    
    .bottom-nav-item {
        margin: 3px 0;
        width: 100%;
        text-align: center;
        padding: 6px 0;
    }
    
    body::after {
        height: 180px; /* More space for column layout on mobile */
    }
    
    .footnotes {
        margin-top: 1.5rem;
        padding-top: 0.8rem;
    }
    
    .footnotes li {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: 0.4rem;
    }
    
    .footnotes a {
        word-break: break-all;
    }
}