/* ===== FONTS ===== */

/* 400 - devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/poppins-400-devanagari.woff2') format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* 400 - latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* 400 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 500 - devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/poppins-500-devanagari.woff2') format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* 500 - latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/poppins-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* 500 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/poppins-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 600 - devanagari */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/poppins-600-devanagari.woff2') format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* 600 - latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* 600 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== DESIGN TOKENS ===== */
:root {
    /*
     * Base unit: 8px
     * Type scale: 1.25 ratio
     * Everything derives from these
     */

    /* Spacing - multiples of 8 */
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 48px;
    --s6: 64px;
    --s7: 96px;

    /* Type scale - 1.25 ratio */
    --t-sm: 0.875rem;   /* 14px */
    --t-base: 1rem;      /* 16px */
    --t-lg: 1.125rem;    /* 18px */
    --t-xl: 1.25rem;     /* 20px */
    --t-2xl: 1.5rem;     /* 24px */
    --t-3xl: 2rem;       /* 32px */
    --t-4xl: 2.75rem;    /* 44px */

    /* Colors - intentional hierarchy */
    --ink: #18181b;           /* Highest contrast - headlines */
    --ink-secondary: #52525b; /* 60% visual weight - body */
    --ink-muted: #a1a1aa;     /* 40% weight - tertiary */
    --surface: #ffffff;
    --surface-raised: #fafafa;
    --line: #e4e4e7;
    --accent: #4f46e5;
    --accent-glow: rgba(79, 70, 229, 0.15);

    /* Status colors (promotion page) */
    --green: #16a34a;
    --red: #dc2626;

    /* Radius */
    --r: 8px;
    --r-lg: 12px;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--ink-secondary);
    background: var(--surface);
    line-height: 1.6;
}

/* ===== LAYOUT ===== */
/* Max-width 1040px = 13 x 80px units, clean division */
.container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 var(--s3);
}

/* ===== HEADER ===== */
/* Height 64px = 8 x 8px, sits on grid */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--s6);
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(228,228,231,0.5);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.logo-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.nav {
    display: flex;
    gap: var(--s4);
}

.nav a {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-secondary);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
}

.nav a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transition: width 0.2s;
}

.nav a:hover {
    color: var(--ink);
}

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

/* Mobile menu button - hidden on desktop */
.menu-btn {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--ink-secondary);
    transition: color 0.2s ease;
}

.menu-btn:hover {
    color: var(--ink);
}

.menu-btn svg line {
    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
    transform-origin: center;
}

.menu-btn.open svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-btn.open svg line:nth-child(2) {
    opacity: 0;
}

.menu-btn.open svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile dropdown menu - hidden by default */
.mobile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow:
        0 4px 6px rgba(0,0,0,0.04),
        0 10px 24px rgba(0,0,0,0.1);
    min-width: 140px;
    padding: 6px;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.mobile-menu a {
    display: block;
    padding: 10px 14px;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-secondary);
    text-decoration: none;
    border-radius: var(--r);
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.mobile-menu a:hover {
    background: var(--surface-raised);
    color: var(--ink);
}

.mobile-menu a:active {
    background: var(--line);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--line);
    margin: 6px 0;
}

.mobile-menu .lang-switcher {
    padding: 0;
}

.mobile-menu .lang-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-secondary);
    border-radius: var(--r);
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.mobile-menu .lang-switcher-btn:hover {
    background: var(--surface-raised);
    color: var(--ink);
}

.mobile-menu .lang-switcher-btn:active {
    background: var(--line);
}

.mobile-menu .lang-switcher-menu {
    left: 0;
    right: auto;
    min-width: 120px;
}

/* Footer lang-switcher opens upward */
.footer .lang-switcher-menu {
    top: auto;
    bottom: calc(100% + 12px);
    transform-origin: bottom right;
}

.footer .lang-switcher.open .lang-switcher-menu {
    transform: translateY(0) scale(1);
}

.footer .lang-switcher-btn {
    color: var(--ink-muted);
}

.footer .lang-switcher-btn:hover {
    color: var(--ink-secondary);
}

/* ===== HERO ===== */
/*
 * Top padding: 96px - enough breathing room from header
 * Bottom padding: 64px - leads into screenshot
 * Text max-width: 600px - optimal line length for readability
 */
.hero {
    padding: var(--s7) 0 var(--s6);
}

.hero-content {
    max-width: 600px;
}

/* Headline: largest text, tightest line-height, highest contrast */
.hero h1 {
    font-size: var(--t-4xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: var(--s3);
}

/* Subtext: lighter weight, more line-height for reading */
.hero p {
    font-size: var(--t-lg);
    line-height: 1.6;
    color: var(--ink-secondary);
    margin-bottom: var(--s4);
}

.hero-buttons {
    display: flex;
    gap: var(--s2);
}

/* ===== BUTTONS ===== */
/* Height 48px = 6 x 8px, comfortable touch target */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--s5);
    padding: 0 var(--s3);
    font-size: var(--t-sm);
    font-weight: 500;
    border-radius: var(--r);
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #6366f1 100%);
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px var(--accent-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 8px 24px var(--accent-glow);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,0.04);
}

.btn-secondary:hover {
    background: var(--surface-raised);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px rgba(0,0,0,0.08);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* ===== SCREENSHOT ===== */
/*
 * Padding 48px bottom - same as hero bottom, creates rhythm
 * Frame padding 12px - thin, doesn't distract from image
 */
.screenshot-section {
    padding: 0 0 var(--s5);
}

.screenshot-wrapper {
    background: linear-gradient(145deg, #fafafa 0%, #f0f0f0 100%);
    border-radius: var(--r-lg);
    padding: var(--s2);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 16px rgba(0,0,0,0.06),
        0 16px 48px rgba(0,0,0,0.08);
}

.screenshot-mobile {
    display: none;
}

.screenshot {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Chinese decorative frame - only visible during Lunar New Year */
.chinese-frame {
    position: relative;
}

.chinese-frame::before {
    content: '';
    position: absolute;
    inset: -12px;
    border: 2px solid #D4A84B;
    border-radius: 4px;
    pointer-events: none;
    display: none;
}

.lunar-new-year .chinese-frame::before {
    display: block;
}

.frame-corner {
    display: none;
}

.lunar-new-year .frame-corner {
    display: block;
}

.frame-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 1;
}

.frame-corner svg {
    width: 100%;
    height: 100%;
}

.frame-corner-tl { top: -24px; left: -24px; }
.frame-corner-tr { top: -24px; right: -24px; transform: scaleX(-1); }
.frame-corner-bl { bottom: -24px; left: -24px; transform: scaleY(-1); }
.frame-corner-br { bottom: -24px; right: -24px; transform: scale(-1, -1); }

@media (max-width: 640px) {
    .chinese-frame {
        width: fit-content;
        margin: 0 auto;
    }
    .chinese-frame::before {
        inset: -8px;
    }
    .frame-corner {
        width: 40px;
        height: 40px;
    }
    .frame-corner-tl { top: -16px; left: -16px; }
    .frame-corner-tr { top: -16px; right: -16px; }
    .frame-corner-bl { bottom: -16px; left: -16px; }
    .frame-corner-br { bottom: -16px; right: -16px; }
}

/* ===== FEATURES ===== */
/*
 * Vertical padding 96px - major section break
 * Grid gap 24px - enough separation, not too sparse
 * Card padding 24px - matches grid gap, creates harmony
 */
.features {
    padding: var(--s7) 0;
    background: var(--surface-raised);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.features h2 {
    font-size: var(--t-2xl);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s5);
    letter-spacing: -0.02em;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
}

/* Simple Chinese frame for features - only visible during Lunar New Year */
.simple-chinese-frame {
    position: relative;
}

.lunar-new-year .simple-chinese-frame {
    padding: 20px;
}

.simple-frame-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    pointer-events: none;
    display: none;
}

.lunar-new-year .simple-frame-corner {
    display: block;
}

.simple-frame-corner::before,
.simple-frame-corner::after {
    content: '';
    position: absolute;
    background: #D4A84B;
}

.simple-frame-corner::before {
    width: 20px;
    height: 2px;
}

.simple-frame-corner::after {
    width: 2px;
    height: 20px;
}

.simple-frame-corner-tl { top: 0; left: 0; }
.simple-frame-corner-tl::before { top: 0; left: 0; }
.simple-frame-corner-tl::after { top: 0; left: 0; }

.simple-frame-corner-tr { top: 0; right: 0; }
.simple-frame-corner-tr::before { top: 0; right: 0; }
.simple-frame-corner-tr::after { top: 0; right: 0; }

.simple-frame-corner-bl { bottom: 0; left: 0; }
.simple-frame-corner-bl::before { bottom: 0; left: 0; }
.simple-frame-corner-bl::after { bottom: 0; left: 0; }

.simple-frame-corner-br { bottom: 0; right: 0; }
.simple-frame-corner-br::before { bottom: 0; right: 0; }
.simple-frame-corner-br::after { bottom: 0; right: 0; }

.simple-frame-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #D4A84B;
    border-radius: 50%;
}

.simple-frame-corner-tl .simple-frame-dot { top: -2px; left: -2px; }
.simple-frame-corner-tr .simple-frame-dot { top: -2px; right: -2px; }
.simple-frame-corner-bl .simple-frame-dot { bottom: -2px; left: -2px; }
.simple-frame-corner-br .simple-frame-dot { bottom: -2px; right: -2px; }

@media (max-width: 640px) {
    .simple-chinese-frame {
        padding: 12px;
    }
    .simple-frame-corner {
        width: 20px;
        height: 20px;
    }
    .simple-frame-corner::before {
        width: 14px;
    }
    .simple-frame-corner::after {
        height: 14px;
    }
    .simple-frame-dot {
        width: 4px;
        height: 4px;
    }
}

.feature-card {
    background: var(--surface);
    padding: var(--s3);
    border-radius: var(--r);
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(79,70,229,0.08), 0 8px 24px rgba(0,0,0,0.06);
    border-color: rgba(79,70,229,0.2);
}

.feature-card h3 {
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s1);
}

.feature-card p {
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--ink-secondary);
}

/* ===== HOW IT WORKS ===== */
.how-it-works {
    padding: var(--s7) 0;
}

.how-it-works h2 {
    font-size: var(--t-2xl);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s5);
    letter-spacing: -0.02em;
}

.video-steps {
    display: flex;
    flex-direction: column;
    gap: var(--s7);
}

.video-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: box-shadow 0.2s;
}

.video-step:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.video-step:nth-child(even) .video-step-video {
    order: 2;
}

.video-step:nth-child(even) .video-step-text {
    order: 1;
}

.video-step-video {
    background: linear-gradient(145deg, #fafafa 0%, #f0f0f0 100%);
    border-radius: var(--r);
    padding: 6px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.06);
}

.video-step-video video {
    width: 100%;
    display: block;
    border-radius: 6px;
}

.video-step-text {
    padding: var(--s2) 0;
}

.video-step-number {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink-muted);
    margin-bottom: var(--s1);
}

.video-step-text h3 {
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s1);
}

.video-step-text p {
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--ink-secondary);
}

/* ===== CTA ===== */
/*
 * Gradient subtle - just enough to separate from content above
 * Extra vertical padding - gives importance to final ask
 */
.cta-section {
    padding: var(--s7) 0;
    background: linear-gradient(180deg, var(--surface) 0%, rgba(79,70,229,0.08) 100%);
    text-align: center;
}

.cta-section h2 {
    font-size: var(--t-3xl);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s2);
    letter-spacing: -0.02em;
}

.cta-section p {
    font-size: var(--t-base);
    color: var(--ink-secondary);
    margin-bottom: var(--s4);
}

/* ===== FOOTER ===== */
/* Minimal - shouldn't compete with CTA */
.footer {
    padding: var(--s5) 0;
    border-top: 1px solid var(--line);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.footer-links {
    display: flex;
    gap: var(--s3);
}

.footer-links a {
    font-size: var(--t-sm);
    color: var(--ink-muted);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--ink-secondary);
}

.footer-copy {
    font-size: var(--t-sm);
    color: var(--ink-muted);
}

.discord-link {
    color: var(--ink-muted);
    transition: color 0.2s, transform 0.2s;
}

.discord-link:hover {
    color: #5865F2;
    transform: scale(1.1);
}

/* ===== CHRISTMAS SNOW ===== */
.snowflake {
    position: fixed;
    top: -10px;
    color: #a8d4f0;
    font-size: 1.5rem;
    text-shadow: 0 0 3px rgba(100,150,200,0.5);
    pointer-events: none;
    z-index: 99;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(var(--fall-distance, 100vh)) rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .snowflake {
        display: none;
    }
}

@media (max-width: 640px) {
    .snowflake {
        font-size: 0.9rem !important;
    }
}
/* ===== END CHRISTMAS SNOW ===== */

/* ===== LUNAR NEW YEAR THEME ===== */
.lunar-new-year {
    /* Background: oscillating waves, more red-dominant */
    --lunar-bg: linear-gradient(
        180deg,
        #4A0A12 0%,
        #6B0F1A 8%,
        #8B1E2F 15%,
        #A52A3C 25%,
        #C24538 32%,
        #A52A3C 40%,
        #8B1E2F 50%,
        #A52A3C 58%,
        #C24538 65%,
        #D4634A 75%,
        #C24538 82%,
        #D4634A 88%,
        #E8925A 94%,
        #F4C472 100%
    );

    /* Gold colors - warm amber-gold to match design */
    --lunar-gold: #E8B830;
    --lunar-gold-light: #F5D062;
    --lunar-gold-deep: #C9942A;

    /* Text colors */
    --lunar-text-primary: #FFFFFF;
    --lunar-text-secondary: rgba(255, 255, 255, 0.85);
    --lunar-text-muted: rgba(255, 255, 255, 0.6);
}

.lunar-new-year body,
body.lunar-new-year {
    background: var(--lunar-bg);
    color: var(--lunar-text-secondary);
}

/* Header - transparent */
.lunar-new-year .header {
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    transition: background 0.3s ease;
}

.lunar-new-year .header.scrolled {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Logo - white text */
.lunar-new-year .logo {
    color: var(--lunar-text-primary);
}

/* Nav links */
.lunar-new-year .nav a {
    color: var(--lunar-text-secondary);
}

.lunar-new-year .nav a:hover {
    color: var(--lunar-text-primary);
}

.lunar-new-year .nav a::after {
    background: var(--lunar-gold);
}

/* Mobile menu */
.lunar-new-year .menu-btn {
    color: var(--lunar-text-secondary);
}

.lunar-new-year .menu-btn:hover {
    color: var(--lunar-text-primary);
}

.lunar-new-year .mobile-menu {
    background: rgba(107, 15, 26, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.lunar-new-year .mobile-menu a {
    color: var(--lunar-text-secondary);
}

.lunar-new-year .mobile-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--lunar-text-primary);
}

/* Hero - golden title */
.lunar-new-year .hero h1 {
    color: #FFD54F;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lunar-new-year .hero p {
    color: var(--lunar-text-secondary);
}

/* Buttons */
.lunar-new-year .btn-primary {
    background: linear-gradient(135deg, var(--lunar-gold-deep) 0%, var(--lunar-gold) 50%, var(--lunar-gold-light) 100%);
    color: #4A1A1A;
    box-shadow: 0 2px 8px rgba(218, 165, 32, 0.4);
}

.lunar-new-year .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.5);
}

.lunar-new-year .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--lunar-text-primary);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.lunar-new-year .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Screenshot section */
.lunar-new-year .screenshot-wrapper {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 215, 0, 0.2);
}

/* Features section */
.lunar-new-year .features {
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lunar-new-year .features h2 {
    color: var(--lunar-gold);
}

.lunar-new-year .feature-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.lunar-new-year .feature-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.lunar-new-year .feature-card h3 {
    color: var(--lunar-text-primary);
}

.lunar-new-year .feature-card p {
    color: var(--lunar-text-secondary);
}

/* How it works */
.lunar-new-year .how-it-works {
    position: relative;
}

.lunar-new-year .how-it-works h2 {
    color: var(--lunar-gold);
}

.lunar-new-year .video-step {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.lunar-new-year .video-step:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.lunar-new-year .video-step-video {
    background: rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lunar-new-year .video-step-number {
    color: var(--lunar-gold);
}

.lunar-new-year .video-step-text h3 {
    color: var(--lunar-text-primary);
}

.lunar-new-year .video-step-text p {
    color: var(--lunar-text-secondary);
}

/* Lunar how-it-works floating decorations */
.lunar-hiw-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.lunar-hiw-decor .chinese-cloud {
    position: absolute;
    opacity: 0.12;
}

.lunar-hiw-cloud-1 { left: -3%; top: 10%; width: 180px; animation: cloudFloat 14s ease-in-out infinite; }
.lunar-hiw-cloud-2 { right: -3%; top: 35%; width: 200px; animation: cloudFloatFlipped 16s ease-in-out infinite; }
.lunar-hiw-cloud-3 { left: 5%; top: 60%; width: 150px; animation: cloudFloat 18s ease-in-out infinite; }
.lunar-hiw-cloud-4 { right: 5%; top: 80%; width: 170px; animation: cloudFloatFlipped 13s ease-in-out infinite; }

.lunar-new-year .how-it-works .video-steps,
.lunar-new-year .how-it-works h2 {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .lunar-hiw-cloud-3, .lunar-hiw-cloud-4 { display: none; }
}

@media (max-width: 640px) {
    .lunar-hiw-cloud-1 { width: 130px; }
    .lunar-hiw-cloud-2 { width: 140px; }
}

/* CTA section - darker text for yellow background */
.lunar-new-year .cta-section {
    background: transparent;
}

.lunar-new-year .cta-section h2 {
    color: #5C1A1A;
}

.lunar-new-year .cta-section p {
    color: #6B2D2D;
}

.lunar-new-year .cta-section .btn-primary {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Footer - darker text for yellow background */
.lunar-new-year .footer {
    border-top-color: rgba(100, 50, 50, 0.2);
}

.lunar-new-year .footer-links a {
    color: #7A3D3D;
}

.lunar-new-year .footer-links a:hover {
    color: #5C1A1A;
}

.lunar-new-year .footer-copy {
    color: #7A3D3D;
}

.lunar-new-year .discord-link {
    color: #7A3D3D;
}

.lunar-new-year .discord-link:hover {
    color: #5865F2;
}
/* Lunar background decorations container */
.lunar-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.lunar-trees {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lunar-tree {
    position: absolute;
    top: -40px;
    height: auto;
    max-height: 650px;
    width: auto;
    max-width: 50%;
    opacity: 0.7;
}

.lunar-tree-left {
    left: 0;
    transform: scaleX(-1);
}

.lunar-tree-right {
    right: 0;
}

@media (max-width: 900px) {
    .lunar-tree {
        max-height: 450px;
        max-width: 45%;
    }
}

@media (max-width: 640px) {
    .lunar-tree {
        top: 0;
        max-height: 320px;
        max-width: 55%;
    }
}

/* Lanterns */
.lunar-lanterns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 700px;
    pointer-events: none;
}

.lantern {
    position: absolute;
    top: -300px;
    height: 560px;
    width: auto;
    opacity: 0.85;
    animation: lanternGlow 3s ease-in-out infinite;
}

.lantern-1 { left: 10%; top: -280px; height: 510px; animation-delay: 0s; }
.lantern-2 { left: 28%; top: -270px; height: 430px; animation-delay: 0.5s; }
.lantern-3 { left: 50%; top: -260px; height: 580px; transform: translateX(-50%); animation-delay: 1s; }
.lantern-4 { right: 28%; top: -310px; height: 460px; animation-delay: 0.8s; }
.lantern-5 { right: 10%; top: -290px; height: 500px; animation-delay: 0.3s; }

@keyframes lanternGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 200, 50, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 200, 50, 0.5));
    }
}

@media (max-width: 900px) {
    .lantern { height: 400px; }
    .lantern-2, .lantern-4 { display: none; }
    .lantern-1 { left: 8%; height: 380px; }
    .lantern-3 { height: 450px; }
    .lantern-5 { right: 8%; height: 380px; }
}

@media (max-width: 640px) {
    .lantern { height: 320px; top: -240px; }
    .lantern-1 { left: 5%; height: 300px; top: -160px; }
    .lantern-3 { height: 350px; top: -250px; }
    .lantern-5 { right: 5%; height: 300px; top: -170px; }
}

@media (prefers-reduced-motion: reduce) {
    .lantern {
        animation: none;
    }
}

/* Lunar sparks/particles */
.lunar-spark {
    position: fixed;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 215, 100, 1) 0%, rgba(255, 180, 50, 0.8) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 50;
    animation: sparkFloat linear infinite;
}

@keyframes sparkFloat {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-150px) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lunar-spark {
        display: none;
    }
}

/* Chinese clouds */
.lunar-clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.chinese-cloud {
    position: absolute;
    opacity: 0.2;
    animation: cloudFloat 12s ease-in-out infinite;
}

@keyframes cloudFloat {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-4px, -8px);
    }
    50% {
        transform: translate(-8px, 0);
    }
    75% {
        transform: translate(-4px, 8px);
    }
}

@keyframes cloudFloatFlipped {
    0%, 100% {
        transform: scaleX(-1) translate(0, 0);
    }
    25% {
        transform: scaleX(-1) translate(-4px, -8px);
    }
    50% {
        transform: scaleX(-1) translate(-8px, 0);
    }
    75% {
        transform: scaleX(-1) translate(-4px, 8px);
    }
}

.cloud-1 { left: -5%; top: 5%; width: 200px; opacity: 0.15; animation-duration: 12s; }
.cloud-2 { right: -5%; top: 25%; width: 280px; animation: cloudFloatFlipped 14s ease-in-out infinite; }
.cloud-3 { left: 10%; top: 55%; width: 200px; opacity: 0.15; animation-duration: 15s; }
.cloud-4 { right: 8%; top: 60%; width: 220px; opacity: 0.15; animation: cloudFloatFlipped 13s ease-in-out infinite; }
.cloud-5 { left: 30%; top: 75%; width: 180px; opacity: 0.1; animation-duration: 16s; }
.cloud-6 { right: 25%; top: 80%; width: 160px; opacity: 0.1; animation: cloudFloatFlipped 15s ease-in-out infinite; }

@media (max-width: 900px) {
    .cloud-1 { width: 220px; top: 12%; }
    .cloud-2 { width: 200px; top: 20%; }
    .cloud-3, .cloud-4 { width: 160px; }
    .cloud-5, .cloud-6 { display: none; }
}

@media (max-width: 640px) {
    .cloud-1 { width: 160px; left: -5%; top: 85%; }
    .cloud-2 { width: 150px; right: -10%; top: 18%; }
    .cloud-3, .cloud-4 { width: 120px; opacity: 0.3; }
}
/* ===== END LUNAR NEW YEAR THEME ===== */

/* ===== VALENTINE'S DAY THEME ===== */
.valentines-day {
    /* Horizontal gradient: light pink left → cream right */
    --valentine-bg: linear-gradient(
        90deg,
        #f8d8e0 0%,
        #f4e4d1 100%
    );

    /* Soft pink colors */
    --valentine-pink: #e8a0b0;
    --valentine-pink-light: #f8d8e0;
    --valentine-pink-deep: #d4899a;

    /* Text colors */
    --valentine-text-primary: #5D3A3A;
    --valentine-text-secondary: #6B4444;
    --valentine-text-muted: #8B6B6B;
}

.valentines-day body,
body.valentines-day {
    background: var(--valentine-bg);
    color: var(--valentine-text-secondary);
}

/* Header - transparent with blur */
.valentines-day .header {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(194, 120, 120, 0.2);
}

/* Logo */
.valentines-day .logo {
    color: var(--valentine-text-primary);
}

/* Nav links */
.valentines-day .nav a {
    color: var(--valentine-text-secondary);
}

.valentines-day .nav a:hover {
    color: var(--valentine-text-primary);
}

.valentines-day .nav a::after {
    background: var(--valentine-pink);
}

/* Mobile menu */
.valentines-day .menu-btn {
    color: var(--valentine-text-secondary);
}

.valentines-day .menu-btn:hover {
    color: var(--valentine-text-primary);
}

.valentines-day .mobile-menu {
    background: rgba(253, 246, 243, 0.95);
    border-color: rgba(194, 120, 120, 0.2);
}

.valentines-day .mobile-menu a {
    color: var(--valentine-text-secondary);
}

.valentines-day .mobile-menu a:hover {
    background: rgba(194, 120, 120, 0.1);
    color: var(--valentine-text-primary);
}

/* Hero */
.valentines-day .hero h1 {
    color: #681629;
}

.valentines-day .hero p {
    color: var(--valentine-text-secondary);
}

/* Buttons */
.valentines-day .btn-primary {
    background: linear-gradient(90deg, #c43763 0%, #a6294e 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(166, 41, 78, 0.4);
}

.valentines-day .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(166, 41, 78, 0.5);
}

.valentines-day .btn-secondary {
    background: rgba(255, 255, 255, 0.6);
    color: var(--valentine-text-primary);
    box-shadow: inset 0 0 0 1px rgba(194, 120, 120, 0.3);
}

.valentines-day .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(194, 120, 120, 0.5);
}

/* Screenshot section */
.valentines-day .screenshot-wrapper {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(194, 120, 120, 0.2);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(194, 120, 120, 0.1);
}

/* Features section */
.valentines-day .features {
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(194, 120, 120, 0.1);
    border-bottom: 1px solid rgba(194, 120, 120, 0.1);
}

.valentines-day .features h2 {
    color: var(--valentine-text-primary);
}

.valentines-day .feature-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(194, 120, 120, 0.15);
}

.valentines-day .feature-card:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(194, 120, 120, 0.3);
    box-shadow: 0 4px 16px rgba(194, 120, 120, 0.15);
}

.valentines-day .feature-card h3 {
    color: var(--valentine-text-primary);
}

.valentines-day .feature-card p {
    color: var(--valentine-text-secondary);
}

/* How it works */
.valentines-day .how-it-works h2 {
    color: var(--valentine-text-primary);
}

.valentines-day .video-step-text h3 {
    color: var(--valentine-text-primary);
}

.valentines-day .video-step-text p {
    color: var(--valentine-text-secondary);
}

/* CTA section */
.valentines-day .cta-section {
    background: transparent;
}

.valentines-day .cta-section h2 {
    color: var(--valentine-text-primary);
}

.valentines-day .cta-section p {
    color: var(--valentine-text-secondary);
}

/* Footer */
.valentines-day .footer {
    border-top-color: rgba(194, 120, 120, 0.15);
}

.valentines-day .footer-links a {
    color: var(--valentine-text-muted);
}

.valentines-day .footer-links a:hover {
    color: var(--valentine-text-primary);
}

.valentines-day .footer-copy {
    color: var(--valentine-text-muted);
}

.valentines-day .discord-link {
    color: var(--valentine-text-muted);
}

.valentines-day .discord-link:hover {
    color: #5865F2;
}

/* Valentine's Cupid - top right corner */
.valentine-cupid {
    position: absolute;
    top: 80px;
    right: 20px;
    width: 100px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.85;
    display: none;
    transform: scaleX(-1) rotate(45deg);
}

.valentines-day .valentine-cupid {
    display: block;
}

@media (max-width: 1200px) {
    .valentine-cupid {
        width: 65px;
        right: 30px;
    }
}

@media (max-width: 900px) {
    .valentine-cupid {
        top: 60px;
        right: 10px;
        width: 45px;
        transform: scaleX(-1) rotate(45deg);
    }
}

@media (max-width: 640px) {
    .valentine-cupid {
        top: 55px;
        right: 5px;
        width: 40px;
    }
}
/* ===== END VALENTINE'S DAY THEME ===== */

/* ===== ST. PATRICK'S DAY THEME ===== */
.st-patricks-day {
    /* Warm cream/gold background */
    --stpat-bg: linear-gradient(
        135deg,
        #faf6e9 0%,
        #f5f0dc 50%,
        #faf6e9 100%
    );

    /* Green colors */
    --stpat-green: #1e7d3a;
    --stpat-green-light: #2e9e4e;
    --stpat-green-dark: #145528;

    /* Gold colors */
    --stpat-gold: #d4a012;
    --stpat-gold-light: #f0c030;
    --stpat-gold-dark: #b8860b;

    /* Text colors */
    --stpat-text-primary: #145528;
    --stpat-text-secondary: #2d5a3a;
    --stpat-text-muted: #5a7d62;
}

.st-patricks-day body,
body.st-patricks-day {
    background: var(--stpat-bg);
    color: var(--stpat-text-secondary);
}

/* Header */
.st-patricks-day .header {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(30, 125, 58, 0.15);
}

/* Logo */
.st-patricks-day .logo {
    color: var(--stpat-text-primary);
}

/* Nav links */
.st-patricks-day .nav a {
    color: var(--stpat-text-secondary);
}

.st-patricks-day .nav a:hover {
    color: var(--stpat-text-primary);
}

.st-patricks-day .nav a::after {
    background: var(--stpat-green);
}

/* Mobile menu */
.st-patricks-day .menu-btn {
    color: var(--stpat-text-secondary);
}

.st-patricks-day .menu-btn:hover {
    color: var(--stpat-text-primary);
}

.st-patricks-day .mobile-menu {
    background: rgba(250, 246, 233, 0.95);
    border-color: rgba(30, 125, 58, 0.2);
}

.st-patricks-day .mobile-menu a {
    color: var(--stpat-text-secondary);
}

.st-patricks-day .mobile-menu a:hover {
    background: rgba(30, 125, 58, 0.1);
    color: var(--stpat-text-primary);
}

/* Hero */
.st-patricks-day .hero h1 {
    color: var(--stpat-text-primary);
}

.st-patricks-day .hero p {
    color: var(--stpat-text-secondary);
}

/* Buttons */
.st-patricks-day .btn-primary {
    background: linear-gradient(135deg, var(--stpat-gold-dark) 0%, var(--stpat-gold) 50%, var(--stpat-gold-light) 100%);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(212, 160, 18, 0.4);
}

.st-patricks-day .btn-primary:hover {
    box-shadow: 0 4px 16px rgba(212, 160, 18, 0.5);
}

.st-patricks-day .btn-secondary {
    background: rgba(255, 255, 255, 0.6);
    color: var(--stpat-text-primary);
    box-shadow: inset 0 0 0 1px rgba(30, 125, 58, 0.3);
}

.st-patricks-day .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 0 1px rgba(30, 125, 58, 0.5);
}

/* Screenshot section */
.st-patricks-day .screenshot-wrapper {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(30, 125, 58, 0.2);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(30, 125, 58, 0.1);
}

/* Features section */
.st-patricks-day .features {
    background: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(30, 125, 58, 0.1);
    border-bottom: 1px solid rgba(30, 125, 58, 0.1);
}

.st-patricks-day .features h2 {
    color: var(--stpat-text-primary);
}

.st-patricks-day .feature-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(30, 125, 58, 0.15);
}

.st-patricks-day .feature-card:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(30, 125, 58, 0.3);
    box-shadow: 0 4px 16px rgba(30, 125, 58, 0.15);
}

.st-patricks-day .feature-card h3 {
    color: var(--stpat-text-primary);
}

.st-patricks-day .feature-card p {
    color: var(--stpat-text-secondary);
}

/* How it works */
.st-patricks-day .how-it-works h2 {
    color: var(--stpat-text-primary);
}

.st-patricks-day .video-step-text h3 {
    color: var(--stpat-text-primary);
}

.st-patricks-day .video-step-text p {
    color: var(--stpat-text-secondary);
}

/* CTA section */
.st-patricks-day .cta-section {
    background: transparent;
}

.st-patricks-day .cta-section h2 {
    color: var(--stpat-text-primary);
}

.st-patricks-day .cta-section p {
    color: var(--stpat-text-secondary);
}

/* Footer */
.st-patricks-day .footer {
    border-top-color: rgba(30, 125, 58, 0.15);
}

.st-patricks-day .footer-links a {
    color: var(--stpat-text-muted);
}

.st-patricks-day .footer-links a:hover {
    color: var(--stpat-text-primary);
}

.st-patricks-day .footer-copy {
    color: var(--stpat-text-muted);
}

.st-patricks-day .discord-link {
    color: var(--stpat-text-muted);
}

.st-patricks-day .discord-link:hover {
    color: #5865F2;
}

/* St. Patrick's Day background shamrocks */
.stpat-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 700px;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    display: none;
}

.st-patricks-day .stpat-bg-decor {
    display: block;
}

.stpat-shamrock {
    position: absolute;
    pointer-events: none;
    animation: shamrockFloat 8s ease-in-out infinite;
}

@keyframes shamrockFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(5px, -8px) rotate(5deg);
    }
    50% {
        transform: translate(0, -4px) rotate(0deg);
    }
    75% {
        transform: translate(-5px, -8px) rotate(-5deg);
    }
}

.stpat-shamrock-1 { left: 5%; top: 8%; width: 60px; opacity: 0.4; animation-delay: 0s; }
.stpat-shamrock-2 { right: 8%; top: 5%; width: 45px; opacity: 0.35; animation-delay: 1s; }
.stpat-shamrock-3 { left: 12%; top: 45%; width: 35px; opacity: 0.28; animation-delay: 2s; }
.stpat-shamrock-4 { right: 5%; top: 40%; width: 50px; opacity: 0.35; animation-delay: 1.5s; }
.stpat-shamrock-5 { left: 25%; top: 70%; width: 40px; opacity: 0.22; animation-delay: 0.5s; }
.stpat-shamrock-6 { right: 20%; top: 65%; width: 30px; opacity: 0.18; animation-delay: 2.5s; }

@media (max-width: 900px) {
    .stpat-shamrock-1 { width: 50px; left: 3%; }
    .stpat-shamrock-2 { width: 40px; right: 5%; }
    .stpat-shamrock-3, .stpat-shamrock-4 { width: 35px; }
    .stpat-shamrock-5, .stpat-shamrock-6 { display: none; }
}

@media (max-width: 640px) {
    .stpat-shamrock-1 { width: 35px; top: 12%; opacity: 0.35; }
    .stpat-shamrock-2 { width: 30px; top: 8%; }
    .stpat-shamrock-3 { width: 25px; left: 5%; top: 55%; }
    .stpat-shamrock-4 { width: 30px; right: 3%; top: 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .stpat-shamrock {
        animation: none;
    }
}

/* St. Patrick's Day screenshot frame shamrocks */
.stpat-frame-shamrock {
    position: absolute;
    width: 35px;
    height: auto;
    pointer-events: none;
    z-index: 2;
    display: none;
}

.st-patricks-day .stpat-frame-shamrock {
    display: block;
}

.stpat-frame-shamrock-tl { top: -12px; left: -12px; transform: rotate(-15deg); }
.stpat-frame-shamrock-tr { top: -12px; right: -12px; transform: rotate(15deg); }
.stpat-frame-shamrock-bl { bottom: -12px; left: -12px; transform: rotate(-30deg); }
.stpat-frame-shamrock-br { bottom: -12px; right: -12px; transform: rotate(30deg); }

@media (max-width: 640px) {
    .stpat-frame-shamrock {
        width: 25px;
    }
    .stpat-frame-shamrock-tl { top: -8px; left: -8px; }
    .stpat-frame-shamrock-tr { top: -8px; right: -8px; }
    .stpat-frame-shamrock-bl { bottom: -8px; left: -8px; }
    .stpat-frame-shamrock-br { bottom: -8px; right: -8px; }
}
/* ===== END ST. PATRICK'S DAY THEME ===== */

/* ===== RTL SUPPORT ===== */
[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .header .container {
    flex-direction: row-reverse;
}

[dir="rtl"] .nav {
    flex-direction: row-reverse;
}

[dir="rtl"] .logo {
    flex-direction: row-reverse;
}

[dir="rtl"] .hero-content {
    text-align: right;
    margin-left: auto;
}

[dir="rtl"] .hero-buttons {
    justify-content: flex-start;
}

[dir="rtl"] .footer-inner {
    flex-direction: row-reverse;
}

[dir="rtl"] .footer-left {
    flex-direction: row-reverse;
}

[dir="rtl"] .footer-links {
    flex-direction: row-reverse;
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher {
    position: relative;
}

.lang-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--t-sm);
    font-weight: 500;
    font-family: inherit;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: color 0.2s;
    position: relative;
}

.lang-globe {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nav .lang-switcher-btn .lang-text {
    display: none;
}

.nav .lang-switcher-btn::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transition: width 0.2s;
}

.lang-switcher-btn:hover {
    color: var(--ink);
}

.nav .lang-switcher-btn:hover::after {
    width: 100%;
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow:
        0 4px 6px rgba(0,0,0,0.04),
        0 10px 24px rgba(0,0,0,0.1);
    min-width: 140px;
    padding: 6px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
    max-height: 320px;
    overflow-y: auto;
}

.lang-switcher.open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.lang-switcher-menu button,
.lang-switcher-menu a {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: var(--t-sm);
    font-family: inherit;
    color: var(--ink-secondary);
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--r);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.lang-switcher-menu button:hover,
.lang-switcher-menu a:hover {
    background: var(--surface-raised);
    color: var(--ink);
}

.lang-switcher-menu button.active,
.lang-switcher-menu a.active {
    background: var(--accent-glow);
    color: var(--accent);
}

[dir="rtl"] .lang-switcher-menu {
    text-align: right;
}


/* Lunar New Year theme overrides */
.lunar-new-year .lang-switcher-btn {
    color: var(--lunar-text-secondary);
}

.lunar-new-year .lang-switcher-btn:hover {
    color: var(--lunar-text-primary);
}

.lunar-new-year .lang-switcher-menu {
    background: rgba(107, 15, 26, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.lunar-new-year .lang-switcher-menu button,
.lunar-new-year .lang-switcher-menu a {
    color: var(--lunar-text-secondary);
}

.lunar-new-year .lang-switcher-menu button:hover,
.lunar-new-year .lang-switcher-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--lunar-text-primary);
}

.lunar-new-year .lang-switcher-menu button.active,
.lunar-new-year .lang-switcher-menu a.active {
    background: rgba(255, 215, 0, 0.2);
    color: var(--lunar-gold);
}

.lunar-new-year .footer .lang-switcher-menu {
    background: rgba(255, 250, 240, 0.98);
    border-color: rgba(100, 50, 50, 0.2);
}

.lunar-new-year .footer .lang-switcher-menu button,
.lunar-new-year .footer .lang-switcher-menu a {
    color: #7A3D3D;
}

.lunar-new-year .footer .lang-switcher-menu button:hover,
.lunar-new-year .footer .lang-switcher-menu a:hover {
    background: rgba(100, 50, 50, 0.1);
    color: #5C1A1A;
}

.lunar-new-year .footer .lang-switcher-menu button.active,
.lunar-new-year .footer .lang-switcher-menu a.active {
    background: rgba(79, 70, 229, 0.1);
    color: var(--accent);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }

    /* Header - compact on mobile */
    .header {
        height: 48px;
    }

    .header .container {
        position: relative;
    }

    .logo {
        font-size: 1.125rem;
        gap: 6px;
    }

    .logo-icon {
        width: 22px;
        height: 22px;
    }

    .nav {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    /* Hero */
    .hero {
        padding: 80px 0 48px;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 1.75rem;
        margin-bottom: 32px;
    }

    .hero p {
        display: none;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        height: 48px;
    }

    /* Screenshot - show mobile version */
    .screenshot-section {
        padding: 0 0 40px;
    }

    .screenshot-desktop {
        display: none;
    }

    .screenshot-mobile {
        display: block;
        max-width: 280px;
        margin: 0 auto;
    }

    /* Features */
    .features {
        padding: 40px 0;
    }

    .features h2 {
        font-size: 1.25rem;
        margin-bottom: 24px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card {
        padding: 16px;
    }

    .feature-card h3 {
        font-size: 0.95rem;
    }

    .feature-card p {
        font-size: 0.85rem;
    }

    /* How it works */
    .how-it-works {
        padding: 40px 0;
    }

    .how-it-works h2 {
        font-size: 1.25rem;
        margin-bottom: 24px;
    }

    .video-steps {
        gap: 24px;
    }

    .video-step {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .video-step:nth-child(even) .video-step-video {
        order: 0;
    }

    .video-step:nth-child(even) .video-step-text {
        order: 0;
    }

    .video-step-text h3 {
        font-size: 1rem;
    }

    .video-step-text p {
        font-size: 0.9rem;
    }

    /* CTA */
    .cta-section {
        padding: 40px 0;
    }

    .cta-section h2 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .cta-section p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    /* Footer */
    .footer {
        padding: 24px 0;
    }

    .footer-inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-left {
        flex-direction: column;
        gap: 12px;
    }

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

    .footer-links a,
    .footer-copy {
        font-size: 0.8rem;
    }
}

/* ===== SECONDARY PAGES (About, Support, Promotion) ===== */
/*
 * These styles support about.html, support.html, and promotion-policy.html.
 * Pages use body classes (.about-page, .support-page, .promotion-page)
 * to scope conflicting styles.
 */

/* --- Shared page content (about & support) --- */
.page-content {
    padding: var(--s7) 0;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.page-content h1 {
    font-size: var(--t-4xl);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: var(--s3);
}

.page-content h2 {
    font-size: var(--t-2xl);
    font-weight: 600;
    color: var(--ink);
    margin-top: var(--s6);
    margin-bottom: var(--s3);
    letter-spacing: -0.02em;
}

.page-content h3 {
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s1);
}

.page-content p {
    margin-bottom: var(--s2);
}

.page-content a {
    color: var(--accent);
    text-decoration: none;
}

.page-content a:hover {
    text-decoration: underline;
}

.page-content ol, .page-content ul {
    margin-bottom: var(--s3);
    padding-left: var(--s3);
}

.page-content li {
    margin-bottom: var(--s1);
}

/* --- About page --- */
.about-page .content-wrapper {
    max-width: 680px;
    margin: 0;
}

.about-page .page-content h1 {
    margin-bottom: var(--s4);
}

.about-page .page-content p {
    font-size: var(--t-lg);
    line-height: 1.75;
    color: var(--ink-secondary);
    margin-bottom: var(--s3);
}

.cta-card {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    padding: var(--s5);
    border-radius: var(--r-lg);
    margin-top: var(--s6);
}

.cta-card h2 {
    font-size: var(--t-xl);
    margin-top: 0;
    margin-bottom: var(--s1);
}

.cta-card p {
    font-size: var(--t-base);
    margin-bottom: var(--s3);
}

.cta-card .btn {
    background: linear-gradient(135deg, var(--accent) 0%, #6366f1 100%);
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px var(--accent-glow);
}

.cta-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 8px 24px var(--accent-glow);
}

.cta-card .btn:active {
    transform: translateY(0);
}

/* --- Support page --- */
.support-page .page-content > .container > .content-wrapper > p:first-of-type {
    font-size: var(--t-lg);
    margin-bottom: var(--s5);
}

.support-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
    margin: var(--s5) 0;
}

.support-option {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    padding: var(--s3);
    border-radius: var(--r);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.support-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(79,70,229,0.08), 0 8px 24px rgba(0,0,0,0.06);
    border-color: rgba(79,70,229,0.2);
}

.support-option h3 {
    margin-bottom: var(--s1);
}

.support-option p {
    font-size: var(--t-sm);
    margin-bottom: var(--s2);
}

/* FAQ */
.faq-section {
    margin-top: var(--s6);
}

.faq-item {
    border-bottom: 1px solid var(--line);
    padding: var(--s3) 0;
}

.faq-question {
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question::after {
    content: '+';
    font-size: var(--t-xl);
    color: var(--ink-muted);
}

.faq-item.active .faq-question::after {
    content: '-';
}

.faq-answer {
    display: none;
    padding-top: var(--s2);
}

.faq-item.active .faq-answer {
    display: block;
}

/* Troubleshooting */
.troubleshooting {
    margin-top: var(--s6);
}

.troubleshooting-item {
    margin-bottom: var(--s4);
}

.troubleshooting-item h3 {
    margin-bottom: var(--s2);
}

/* Contact */
.contact-section {
    margin-top: var(--s6);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
    margin-top: var(--s3);
}

.support-page .footer {
    margin-top: var(--s7);
}

/* --- Promotion page --- */
.promotion-page .container {
    max-width: 720px;
}

.promotion-page .header .container {
    max-width: 1040px;
}

.promotion-page .page-content {
    padding: var(--s6) 0 var(--s7);
}

.promotion-page h1 {
    font-size: var(--t-3xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: var(--s2);
}

.subtitle {
    font-size: var(--t-lg);
    color: var(--ink-secondary);
    margin-bottom: var(--s5);
}

/* Summary box */
.summary {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s3);
    margin-bottom: var(--s5);
}

.summary h2 {
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s2);
}

.summary ol {
    margin: 0;
    padding-left: var(--s3);
}

.summary li {
    margin-bottom: var(--s1);
}

/* Sections */
.section {
    margin-bottom: var(--s5);
}

.section h2 {
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s3);
    letter-spacing: -0.01em;
}

.section p {
    margin-bottom: var(--s2);
}

/* Cards grid */
.cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s2);
}

.card {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s2);
}

.card h3 {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.card p {
    font-size: var(--t-sm);
    margin: 0;
    color: var(--ink-secondary);
}

/* Two-column lists */
.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s2) var(--s4);
}

.section ul {
    padding-left: var(--s3);
}

.section li {
    margin-bottom: var(--s1);
}

/* Accept/Reject boxes */
.accept-box, .reject-box {
    border-radius: var(--r);
    padding: var(--s3);
    margin-bottom: var(--s2);
}

.accept-box {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
}

.accept-box h3 {
    color: var(--accent);
    font-size: var(--t-base);
    font-weight: 600;
    margin-bottom: var(--s2);
}

.reject-box {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-muted);
}

.reject-box h3 {
    color: var(--ink);
    font-size: var(--t-base);
    font-weight: 600;
    margin-bottom: var(--s2);
}

.accept-box ul, .reject-box ul {
    margin: 0;
    padding-left: var(--s3);
}

.accept-box li, .reject-box li {
    margin-bottom: 4px;
    font-size: var(--t-sm);
}

/* Contact box */
.contact-box {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s3);
    text-align: center;
}

.contact-box p {
    margin-bottom: var(--s1);
}

.contact-box a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.contact-box a:hover {
    text-decoration: underline;
}

.promotion-page .footer-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 var(--s3);
}

/* --- Secondary pages RTL --- */
[dir="rtl"] .content-wrapper {
    text-align: right;
}

[dir="rtl"] .page-content ol, [dir="rtl"] .page-content ul {
    padding-left: 0;
    padding-right: var(--s3);
}

[dir="rtl"] .faq-question {
    flex-direction: row-reverse;
}

[dir="rtl"] .promotion-page .container {
    text-align: right;
}

[dir="rtl"] .summary ol, [dir="rtl"] .section ul {
    padding-left: 0;
    padding-right: var(--s3);
}

[dir="rtl"] .accept-box, [dir="rtl"] .reject-box {
    border-left: none;
    border-right: 3px solid;
}

[dir="rtl"] .accept-box {
    border-right-color: var(--accent);
}

[dir="rtl"] .reject-box {
    border-right-color: var(--ink-muted);
}

/* --- Secondary pages responsive --- */
@media (max-width: 900px) {
    .support-options {
        grid-template-columns: 1fr;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    /* Shared about/support mobile */
    .page-content {
        padding: 56px 0 40px;
    }

    .page-content h1 {
        font-size: 1.75rem;
        margin-bottom: 20px;
    }

    .page-content h2 {
        font-size: 1.25rem;
        margin-top: 40px;
    }

    /* About mobile */
    .about-page .page-content p {
        font-size: 0.95rem;
    }

    .cta-card {
        padding: 28px;
    }

    /* Promotion mobile */
    .promotion-page .header {
        display: none;
    }

    .promotion-page .page-content {
        padding: var(--s5) 0;
    }

    .promotion-page h1 {
        font-size: var(--t-2xl);
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .two-columns {
        grid-template-columns: 1fr;
    }

    .promotion-page .footer-inner {
        flex-direction: column;
        gap: var(--s2);
        text-align: center;
    }
}