/* Import Public Sans font */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap');

/* Animations */
@keyframes pulseBlue {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 74, 173, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 74, 173, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 74, 173, 0);
    }
}

/* Reset and base styling */
html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Public Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: #1e1e1e;
    background-color: white;
    line-height: 1.6;
    overflow-x: hidden;
    margin-bottom: 0;
}

/* Primary accent color - Modern design system */
:root {
    /* Primary colors - vibrant blue like Creator wizard */
    --primary-color: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-glow: rgba(37, 99, 235, 0.12);
    --primary-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);

    /* Success/accent colors */
    --success-color: #10b981;
    --success-light: #d1fae5;
    --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);

    /* Orange accent for popular */
    --accent-orange: #ff6b35;
    --accent-orange-light: #fff4e5;

    /* Text colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;

    /* Backgrounds */
    --background-light: #f9fafb;
    --background-white: #ffffff;

    /* Borders */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;

    /* Modern shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 15px rgba(37, 99, 235, 0.25);
    --shadow-primary-lg: 0 8px 25px rgba(37, 99, 235, 0.35);

    /* Border radius - larger, more modern */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Public Sans', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

    a:hover {
        color: var(--primary-light);
        text-decoration: none;
    }

/* Buttons - Modern design with gradients and micro-interactions */
.btn-primary, .defaultButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--primary-gradient);
    color: white;
    font-weight: 600;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-bounce);
    text-align: center;
    box-shadow: var(--shadow-primary);
    position: relative;
    overflow: hidden;
}

    .btn-primary::before, .defaultButton::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn-primary:active::before, .defaultButton:active::before {
        width: 300px;
        height: 300px;
    }

    .btn-primary i, .defaultButton i {
        font-size: 0.9em;
    }

    .btn-primary:hover, .defaultButton:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: var(--shadow-primary-lg);
        color: white;
    }

    .btn-primary:active, .defaultButton:active {
        transform: translateY(0) scale(0.98);
        box-shadow: var(--shadow-primary);
    }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: white;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-bounce);
    text-align: center;
}

    .btn-secondary i {
        font-size: 0.9em;
    }

    .btn-secondary:hover {
        background-color: var(--background-light);
        border-color: var(--text-secondary);
        color: var(--text-primary);
        transform: translateY(-2px);
    }

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

/* Large button variant */
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    border-radius: var(--radius-lg);
}

/* Promotional Banner */
.promo-banner {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: white;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.promo-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.promo-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.promo-badge i {
    font-size: 0.7rem;
}

.promo-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    flex-wrap: wrap;
    justify-content: center;
}

.promo-highlight {
    font-weight: 700;
    color: #4fc3f7;
}

.promo-thanks {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    font-style: italic;
}

.promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    color: #1a1a2e;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.promo-cta:hover {
    background: #4fc3f7;
    color: white;
    transform: translateX(3px);
}

.promo-cta i {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.promo-cta:hover i {
    transform: translateX(3px);
}

/* Adjust header position for promo banner */
body:has(.promo-banner) .main-header {
    top: 44px;
}

body:has(.promo-banner) .content-wrapper {
    padding-top: 124px; /* 80px for header + 44px for promo banner */
}

@media (max-width: 768px) {
    .promo-banner {
        padding: 8px 12px;
    }

    .promo-banner-content {
        gap: 10px;
    }

    .promo-badge {
        padding: 3px 10px;
        font-size: 0.65rem;
    }

    .promo-text {
        font-size: 0.78rem;
        text-align: center;
    }

    .promo-thanks {
        display: none;
    }

    .promo-cta {
        padding: 5px 12px;
        font-size: 0.75rem;
    }

    body:has(.promo-banner) .main-header {
        top: 38px;
    }

    body:has(.promo-banner) .content-wrapper {
        padding-top: 118px; /* 80px for header + 38px for promo banner */
    }
}

@media (max-width: 480px) {
    .promo-badge span {
        display: none;
    }

    .promo-badge {
        padding: 6px;
        border-radius: 50%;
    }

    .promo-badge i {
        font-size: 0.8rem;
    }
}

/* Header styles - Modern, clean design */
.main-header {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.875rem 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all var(--transition-smooth);
    border-bottom: 1px solid transparent;
}

    .main-header.sticky {
        padding: 0.625rem 0;
        border-bottom-color: var(--border-color);
        box-shadow: var(--shadow-sm);
    }

.header-container {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    transition: transform var(--transition-base);
}

.logo-link:hover {
    transform: scale(1.02);
}

.header-logo {
    height: 42px;
    transition: all var(--transition-smooth);
}

.main-header.sticky .header-logo {
    height: 36px;
}

@media (max-width: 768px) {
    .header-logo {
        height: 32px;
    }

    .main-header.sticky .header-logo {
        height: 28px;
    }
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.login-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: transparent;
    color: var(--text-secondary);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    font-size: 0.8125rem;
    font-weight: 500;
}

    .login-button i {
        font-size: 0.75rem;
    }

    .login-button:hover {
        color: var(--primary-color);
        border-color: var(--primary-color);
        background-color: var(--primary-glow);
    }

.pricing-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--primary-gradient);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    transition: all var(--transition-bounce);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--shadow-primary);
}

    .pricing-button i {
        font-size: 0.75rem;
    }

    .pricing-button:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: var(--shadow-primary-lg);
        color: white;
    }

/* Content wrapper */
.content-wrapper {
    padding-top: 80px; /* Space for fixed header */
}

/* Section container */
.section-container {
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0.5rem 0;
}

/* Hero section */
.hero-section {
    padding: 2rem 0;
    position: relative;
}

.hero-content {
    text-align: center;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.hero-subtitle {
    font-size: 1.125rem;
    max-width: 700px;
    margin: 0 auto 2rem;
    color: var(--text-secondary);
}

.hero-image {
    margin-bottom: 2.5rem;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.cta-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
    color: var(--primary-color);
    padding: 0.625rem 1.125rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(37, 99, 235, 0.2);
    transition: all var(--transition-base);
}

.cta-badge:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.cta-badge i {
    font-size: 1rem;
    color: var(--primary-light);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Features section */
.features-section {
    padding: 0.25rem 0;
    background-color: white;
}

/* Benefits section */
.benefits-section {
    padding: 1.25rem 0;
    background-color: white;
}

/* Testimonials section */
.testimonials-section {
    padding: 0.25rem 0;
    background-color: white;
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -0.625rem;
        left: 50%;
        transform: translateX(-50%);
        width: 48px;
        height: 4px;
        background: var(--primary-gradient);
        border-radius: var(--radius-full);
    }

.testimonials-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.testimonial-card {
    background-color: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--border-color);
    position: relative;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-sm);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(37, 99, 235, 0.2);
}

.quote-icon {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
    transition: all var(--transition-base);
}

.testimonial-card:hover .quote-icon {
    opacity: 0.8;
    transform: scale(1.1);
}

.testimonial-text {
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    position: relative;
    line-height: 1.6;
    font-size: 0.95rem;
}

.testimonial-author {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.author-name {
    font-weight: 600;
    margin-bottom: 0.125rem;
    color: var(--text-primary);
}

.author-business {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* CTA Section - Modern gradient with glass effect */
.cta-section {
    background: var(--primary-gradient);
    color: white;
    padding: 4rem 1.5rem;
    text-align: center;
    border-radius: var(--radius-xl);
    margin: 4rem 1.5rem;
    box-shadow: var(--shadow-primary-lg);
    position: relative;
    overflow: hidden;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
            radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 40%);
        z-index: 0;
    }

    .cta-section::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
        animation: cta-pulse 15s ease-in-out infinite;
        z-index: 0;
    }

@keyframes cta-pulse {
    0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.3; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 0.1; }
}

.cta-section .section-container {
    position: relative;
    z-index: 1;
}

.cta-section h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.cta-section p {
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.cta-section .cta-badges {
    margin-bottom: 1.5rem;
}

.cta-section .cta-badge {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cta-section .cta-badge:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.cta-section .cta-badge i {
    color: rgba(255, 255, 255, 0.9);
}

.cta-section .btn-primary {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

    .cta-section .btn-primary:hover {
        background: rgba(255, 255, 255, 0.95);
        color: var(--primary-dark);
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

/* Forms */
.form-floating {
    position: relative;
    margin-bottom: 1.5rem;
}

    .form-floating input {
        height: calc(3.5rem + 2px);
        line-height: 1.25;
        padding: 1rem 0.75rem;
        font-size: 1rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
        background-color: var(--background-white);
        width: 100%;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .form-floating label {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1rem 0.75rem;
        overflow: hidden;
        text-align: start;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
        border: 1px solid transparent;
        transform-origin: 0 0;
        transition: opacity .1s ease-in-out, transform .1s ease-in-out;
        color: var(--text-secondary);
        z-index: 1;
    }

    .form-floating input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.25rem var(--primary-glow);
        outline: 0;
    }

        .form-floating input:focus ~ label,
        .form-floating input:not(:placeholder-shown) ~ label {
            opacity: .65;
            transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
            background-color: white;
            padding: 0 0.5rem;
            margin-left: 0.5rem;
            height: auto;
        }

/* Footer Styles */
.site-footer {
    background-color: white;
    padding: 4rem 0 2rem;
    color: var(--text-primary);
}

.footer-container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.footer-logo {
    margin-bottom: 2rem;
    text-align: center;
}

    .footer-logo img {
        height: 40px;
        margin-bottom: 1rem;
    }

.footer-links {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

.footer-col h3 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-col ul li {
        margin-bottom: 0.75rem;
    }

        .footer-col ul li a {
            color: var(--text-secondary);
            transition: color 0.2s;
        }

            .footer-col ul li a:hover {
                color: var(--primary-color);
            }

.social-links {
    display: flex;
    gap: 1rem;
}

    .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--primary-glow);
        color: var(--primary-color);
        transition: all 0.3s ease;
    }

        .social-links a:hover {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-2px);
        }

/* Media queries */
@media (min-width: 768px) {
    .testimonials-container {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .hero-title {
        font-size: 3rem;
    }

    .cta-buttons {
        gap: 1.5rem;
    }

    .footer-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-logo {
        width: 25%;
        text-align: left;
        margin-bottom: 0;
    }

    .footer-links {
        width: 70%;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .footer-logo {
        width: 20%;
    }

    .footer-links {
        width: 75%;
    }
}

@media (max-width: 767px) {
    .cta-badges {
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
    }

    .cta-badge {
        flex: 1;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        justify-content: center;
    }

    .cta-badge i {
        font-size: 1rem;
        margin-right: 0.4rem;
    }

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

    .btn-primary, .btn-secondary {
        width: 100%;
    }

    .footer-logo {
        margin-bottom: 2.5rem;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .cta-badges {
        gap: 0.3rem;
    }

    .cta-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
    }

    .cta-badge i {
        font-size: 0.9rem;
        margin-right: 0.3rem;
    }

    .cta-badge span {
        font-size: 0.7rem;
    }
}

/* Trial ended alert styles */
.trial-ended-alert {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
}

.trial-ended-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.trial-ended-content i {
    margin-right: 0.5rem;
}

.trial-ended-alert .btn {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .trial-ended-content {
        flex-direction: column;
        text-align: center;
    }

    .trial-ended-alert .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ==========================================================================
   Modern Animations and Micro-interactions
   Only for IndexHome and Pricing pages - NOT for Creator wizard
   ========================================================================== */

/* Fade-in animation for page elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply animations only to specific home/pricing page elements */
.content-wrapper > .hero-section,
.content-wrapper > .features-section,
.content-wrapper > .benefits-section,
.content-wrapper > .testimonials-section {
    animation: fadeInUp 0.6s ease-out forwards;
}

.content-wrapper .hero-content {
    animation: fadeInScale 0.5s ease-out 0.1s forwards;
}

/* Testimonials stagger - only for home page */
.content-wrapper .testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.content-wrapper .testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.content-wrapper .testimonial-card:nth-child(3) { animation-delay: 0.3s; }

.content-wrapper .testimonial-card {
    opacity: 0;
    animation: fadeInUp 0.5s ease-out forwards;
}

/* Focus states - only for non-wizard inputs */
.content-wrapper input:focus,
.content-wrapper textarea:focus,
.content-wrapper select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Interactive link underline effect */
.footer-col ul li a {
    position: relative;
}

.footer-col ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-gradient);
    transition: width var(--transition-smooth);
}

.footer-col ul li a:hover::after {
    width: 100%;
}

/* Social links hover animation */
.social-links a {
    transition: all var(--transition-bounce);
}

.social-links a:hover {
    background: var(--primary-gradient);
    color: white;
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-primary);
}

/* Smooth image loading - only for home page */
.content-wrapper .responsive-image {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.content-wrapper .responsive-image:hover {
    transform: scale(1.01);
}

/* Card shine effect on hover - only for pricing page */
.pricing-plans-section .pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.pricing-plans-section .pricing-card:hover::before {
    left: 100%;
}

/* Testimonial card shine - only for home page */
.content-wrapper .testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.content-wrapper .testimonial-card:hover::before {
    left: 100%;
}

/* ============================================================================
   LPV2 — modern dark hero with mint accent (Linear / Loops / Vercel-inspired)
   English landing only (stampstampapp.com). Scoped under .lpv2 / .lpv2-header
   so the Polish landing page is untouched.
   ============================================================================ */

.lpv2,
.lpv2-header {
    --lpv2-bg-dark:        #0a0a0c;
    --lpv2-bg-darker:      #050507;
    --lpv2-surface:        #14141a;
    --lpv2-text:           #f5f5f7;
    --lpv2-text-soft:      #a1a1aa;
    --lpv2-text-mute:      #71717a;
    --lpv2-rule:           rgba(255, 255, 255, 0.08);
    --lpv2-rule-soft:      rgba(255, 255, 255, 0.04);

    --lpv2-mint:           #3eea99;
    --lpv2-mint-bright:    #4ff5a8;
    --lpv2-mint-deep:      #16a34a;
    --lpv2-mint-glow:      rgba(62, 234, 153, 0.18);

    --lpv2-pass-deep:      #2a1810;
    --lpv2-pass-warm:      #6b3318;
    --lpv2-pass-amber:     #c97a3e;
    --lpv2-pass-cream:     #f5ebd6;

    --lpv2-light-bg:       #ffffff;
    --lpv2-light-bg-soft:  #fafafa;
    --lpv2-light-text:     #0a0a0c;
    --lpv2-light-text-soft:#52525b;
    --lpv2-light-text-mute:#71717a;
    --lpv2-light-rule:     #e4e4e7;

    --lpv2-display:        'Geist', -apple-system, system-ui, 'Segoe UI', sans-serif;
    --lpv2-body:           'Geist', 'Public Sans', -apple-system, system-ui, sans-serif;
}

body:has(.lpv2),
body:has(.lpv2-header) {
    background: var(--lpv2-bg-dark);
    color: var(--lpv2-text);
}

body:has(.lpv2) .site-footer {
    background: var(--lpv2-light-bg);
    color: var(--lpv2-light-text);
    border-top: 1px solid var(--lpv2-light-rule);
}

.lpv2 {
    font-family: var(--lpv2-body);
    color: var(--lpv2-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
    padding-top: 0;
    overflow: hidden;
}

.lpv2-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .lpv2-container { padding: 0 40px; }
}

/* ===== HEADER ============================================================ */
.lpv2-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: background 220ms ease, padding 220ms ease, border-color 220ms ease;
    background: rgba(10, 10, 12, 0);
    border-bottom: 1px solid transparent;
}

.lpv2-header.is-stuck {
    background: rgba(10, 10, 12, 0.78);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    padding: 11px 0;
    border-bottom-color: var(--lpv2-rule);
}

.lpv2-header__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .lpv2-header__inner { padding: 0 40px; }
}

.lpv2-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.lpv2-header__brand img {
    height: 30px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: opacity 220ms ease;
}

.lpv2-header__brand:hover img { opacity: 1; }

.lpv2-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lpv2-header__link {
    color: var(--lpv2-text-soft);
    font-family: var(--lpv2-body);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease;
    letter-spacing: -0.005em;
}

.lpv2-header__link:hover {
    color: var(--lpv2-text);
    background: rgba(255, 255, 255, 0.05);
}

.lpv2-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lpv2-mint);
    color: #0a0a0c;
    font-family: var(--lpv2-body);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
    box-shadow: 0 2px 12px rgba(62, 234, 153, 0.32);
    margin-left: 6px;
    letter-spacing: -0.005em;
}

.lpv2-header__cta svg { width: 14px; height: 14px; transition: transform 220ms ease; }

.lpv2-header__cta:hover {
    background: var(--lpv2-mint-bright);
    color: #0a0a0c;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(62, 234, 153, 0.5);
}

.lpv2-header__cta:hover svg { transform: translateX(3px); }

@media (max-width: 640px) {
    .lpv2-header__link { display: none; }
}

/* ===== EYEBROW =========================================================== */
.lpv2-eyebrow {
    display: inline-block;
    color: var(--lpv2-text-mute);
    font-family: var(--lpv2-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

/* ===== HERO ============================================================== */
.lpv2-hero {
    position: relative;
    padding: 104px 0 48px;
    background: var(--lpv2-bg-dark);
    overflow: hidden;
    text-align: center;
}

@media (min-width: 768px) {
    .lpv2-hero { padding: 144px 0 80px; }
}

.lpv2-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
    mask-image: radial-gradient(ellipse 95% 80% at 50% 0%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 0%, black 30%, transparent 75%);
    z-index: 0;
}

.lpv2-hero__glow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.lpv2-hero__glow--top {
    top: -240px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 760px;
    background: radial-gradient(ellipse at center, var(--lpv2-mint-glow) 0%, transparent 60%);
    filter: blur(80px);
    opacity: 0.55;
    max-width: 130vw;
}

.lpv2-hero__glow--side {
    top: 30%;
    right: -250px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(62, 234, 153, 0.14) 0%, transparent 60%);
    filter: blur(80px);
    opacity: 0.6;
}

/* Constellation of tiny mint sparkles — "lots of small things" dopamine */
.lpv2-hero__sparkles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 85%);
            mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 85%);
}

.lpv2-hero__sparkles circle {
    animation: lpv2Twinkle 4.5s ease-in-out infinite;
    opacity: 0.2;
    transform-origin: center;
    transform-box: fill-box;
}

/* Stagger via prime nth-child multipliers for organic rhythm */
.lpv2-hero__sparkles circle:nth-child(2n)  { animation-delay: 0.3s; animation-duration: 5.2s; }
.lpv2-hero__sparkles circle:nth-child(3n)  { animation-delay: 0.8s; animation-duration: 6s; }
.lpv2-hero__sparkles circle:nth-child(5n)  { animation-delay: 1.4s; animation-duration: 4.2s; }
.lpv2-hero__sparkles circle:nth-child(7n)  { animation-delay: 2.1s; animation-duration: 5.8s; }
.lpv2-hero__sparkles circle:nth-child(11n) { animation-delay: 0.6s; animation-duration: 7s; }
.lpv2-hero__sparkles circle:nth-child(13n) { animation-delay: 1.9s; animation-duration: 4.8s; }
.lpv2-hero__sparkles circle:nth-child(17n) { animation-delay: 2.7s; animation-duration: 6.5s; }
.lpv2-hero__sparkles circle:nth-child(19n) { animation-delay: 1.1s; animation-duration: 5.5s; }
.lpv2-hero__sparkles circle:nth-child(23n) { animation-delay: 3.2s; animation-duration: 4.5s; }

.lpv2-hero__sparkles-big circle {
    animation: lpv2Glow 6s ease-in-out infinite;
    opacity: 0.45;
    filter: drop-shadow(0 0 6px rgba(62, 234, 153, 0.5));
}

.lpv2-hero__sparkles-big circle:nth-child(2n) { animation-delay: 1.2s; animation-duration: 7s; }
.lpv2-hero__sparkles-big circle:nth-child(3n) { animation-delay: 2.4s; animation-duration: 5.5s; }

@keyframes lpv2Twinkle {
    0%, 100% { opacity: 0.12; transform: scale(0.85); }
    50%      { opacity: 0.55; transform: scale(1.15); }
}

@keyframes lpv2Glow {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.75; }
}

.lpv2-hero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hero badge */
.lpv2-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: var(--lpv2-text-soft);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
    margin-bottom: 32px;
    letter-spacing: -0.005em;
}

.lpv2-hero__badge:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--lpv2-text);
}

.lpv2-hero__badge-pulse {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(62, 234, 153, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.lpv2-hero__badge-pulse::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lpv2-mint);
    box-shadow: 0 0 8px var(--lpv2-mint);
    animation: lpv2Pulse 2.2s ease-in-out infinite;
}

@keyframes lpv2Pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(62, 234, 153, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(62, 234, 153, 0); }
}

.lpv2-hero__badge svg { width: 11px; height: 11px; opacity: 0.5; }

/* Hero title */
.lpv2-hero__title {
    font-family: var(--lpv2-display);
    font-size: clamp(40px, 7.2vw, 92px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--lpv2-text);
    margin: 0 0 24px;
    max-width: 900px;
    text-align: center;
    text-wrap: balance;
}

.lpv2-hero__title-mint {
    background: linear-gradient(180deg, #5cf7b0 0%, var(--lpv2-mint) 50%, #2dd478 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    font-weight: 700;
    /* Background-clip:text uses the element's padding-box as the gradient
       area. With no padding the box matches font-size, but italic glyphs
       (descender of "y" in "actually", of "p" in "keep") extend beyond it
       and render with transparent fill = page bg. Vertical padding on inline
       elements doesn't affect line-height, so this fix is layout-invisible.
       box-decoration-break:clone is critical: this span wraps "actually keep"
       across two lines, and the default `slice` mode would only put bottom
       padding on the LAST fragment ("keep") — leaving "actually"'s "y"
       descender clipped. `clone` gives every line fragment full padding. */
    padding: 0.15em 13px 0px;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}

.lpv2-hero__lede {
    font-size: 17px;
    line-height: 1.55;
    color: var(--lpv2-text-soft);
    max-width: 580px;
    margin: 0 0 36px;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .lpv2-hero__lede { font-size: 18px; }
}

/* Hero CTA */
.lpv2-hero__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.lpv2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lpv2-mint);
    color: #0a0a0c;
    font-family: var(--lpv2-body);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
    border: none;
    cursor: pointer;
    letter-spacing: -0.005em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 8px 32px rgba(62, 234, 153, 0.45);
}

.lpv2-btn-primary svg { width: 14px; height: 14px; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }

.lpv2-btn-primary:hover {
    background: var(--lpv2-mint-bright);
    color: #0a0a0c;
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 14px 44px rgba(62, 234, 153, 0.6);
}

.lpv2-btn-primary:hover svg { transform: translateX(4px); }

.lpv2-btn-primary--xl {
    padding: 16px 28px;
    font-size: 16px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 12px 48px rgba(62, 234, 153, 0.55);
}

.lpv2-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lpv2-text-soft);
    font-family: var(--lpv2-body);
    font-size: 15px;
    font-weight: 500;
    padding: 13px 16px;
    text-decoration: none;
    transition: color 180ms ease, gap 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 999px;
    letter-spacing: -0.005em;
}

.lpv2-btn-text svg { width: 14px; height: 14px; transition: transform 220ms ease; }

.lpv2-btn-text:hover {
    color: var(--lpv2-text);
    gap: 8px;
}

.lpv2-btn-text:hover svg { transform: translateX(3px); }

.lpv2-hero__micro {
    margin: 24px 0 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--lpv2-text-soft);
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.lpv2-hero__micro-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lpv2-mint);
    box-shadow: 0 0 10px rgba(62, 234, 153, 0.7);
    flex-shrink: 0;
    display: inline-block;
}

@media (min-width: 768px) {
    .lpv2-hero__micro { font-size: 17px; gap: 16px; }
    .lpv2-hero__micro-dot { width: 6px; height: 6px; }
}

/* Hero stage with phone */
.lpv2-hero__stage {
    position: relative;
    margin: 64px auto 0;
    width: 100%;
    max-width: 360px;
    display: flex;
    justify-content: center;
}

.lpv2-hero__phone-glow {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: 480px;
    max-width: 140%;
    background: radial-gradient(circle, var(--lpv2-mint-glow) 0%, transparent 55%);
    filter: blur(70px);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}

/* iPhone — shortened aspect + bottom mask-fade so the customizer panels
   sit close to the pass card on every viewport (no long empty phone tail
   on desktop). Mask hides only the phone background; the customizer
   overlay (z-index above) stays visible to draw cursor + panels. */
.lpv2-phone {
    position: relative;
    width: 320px;
    aspect-ratio: 320 / 520;
    background: linear-gradient(160deg, #2a2a30 0%, #0a0a0c 100%);
    border-radius: 48px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 60px 120px -36px rgba(0, 0, 0, 0.7),
        0 30px 60px -16px rgba(62, 234, 153, 0.12);
    padding: 12px;
    box-sizing: border-box;
    z-index: 2;
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 74%, transparent 100%);
            mask-image: linear-gradient(180deg, black 0%, black 74%, transparent 100%);
}

.lpv2-phone__notch {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 28px;
    background: #050507;
    border-radius: 999px;
    z-index: 3;
}

.lpv2-phone__screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #15151a 0%, #0a0a0c 100%);
    border-radius: 36px;
    overflow: hidden;
    z-index: 1;
}

.lpv2-phone__statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 26px 6px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}

.lpv2-phone__icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lpv2-phone__icons svg { display: block; }

/* Phone app title — alternating Apple/Google Wallet via vertical slide.
   Parent uses position:relative + overflow:hidden as the clip viewport;
   stack is absolutely positioned and translateY-animated. Each item is
   exactly 32px tall to match the slide step. */
.lpv2-phone__app-title {
    position: relative;
    height: 32px;
    overflow: hidden;
    margin: 6px 0 14px;
}

.lpv2-phone__app-title-stack {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: lpv2WalletSwap 7s cubic-bezier(0.7, 0, 0.25, 1) infinite;
    will-change: transform;
}

.lpv2-phone__app-title-item {
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--lpv2-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: white;
    white-space: nowrap;
    line-height: 1;
}

.lpv2-phone__app-title-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    color: white;
}

@keyframes lpv2WalletSwap {
    0%, 42%   { transform: translateY(0); }
    50%, 92%  { transform: translateY(-32px); }
    100%      { transform: translateY(-64px); }
}

/* Wallet pass on phone — color vars allow GSAP-driven brand morphing */
.lpv2-pass {
    --pass-c1: #2a1810;
    --pass-c2: #6b3318;
    --pass-c3: #c97a3e;
    margin: 0 14px;
    background: linear-gradient(160deg, var(--pass-c1) 0%, var(--pass-c2) 55%, var(--pass-c3) 100%);
    color: var(--lpv2-pass-cream);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 12px 28px -4px rgba(0, 0, 0, 0.6),
        0 4px 10px -4px rgba(0, 0, 0, 0.4),
        0 0 0 0.5px rgba(255, 255, 255, 0.1);
    padding: 14px 14px 0;
    position: relative;
    /* CRITICAL for the GSAP height tween: border-box so JS measurements
       (offsetHeight) match what we write to style.height. Without this,
       content-box would treat the locked height as content-only and the
       padding (14px top) gets ADDED on top → card visibly snaps +14px
       at the start of every height animation. */
    box-sizing: border-box;
}

.lpv2-pass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.18), transparent 50%);
    pointer-events: none;
}

.lpv2-pass > * { position: relative; z-index: 1; }

/* Brand-keyed repeating texture overlay — coffee beans on Coffee, croissants
   on Bakery, sushi rolls on Sushi, sparkles on Beauty. Subtle cream icons
   on the brand gradient give each card real character without competing
   with the foreground content. Pattern URL is set per data-brand attribute. */
.lpv2-pass::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pass-pattern, none);
    background-size: 90px 90px;
    background-repeat: repeat;
    pointer-events: none;
}

.lpv2-pass[data-brand="oe"] {
    --pass-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'><g fill='%23f5ebd6' fill-opacity='0.09'><ellipse cx='22' cy='25' rx='5' ry='8' transform='rotate(-25 22 25)'/><ellipse cx='62' cy='48' rx='5' ry='8' transform='rotate(20 62 48)'/><ellipse cx='38' cy='75' rx='5' ry='8' transform='rotate(-10 38 75)'/></g><g fill='none' stroke='%23f5ebd6' stroke-opacity='0.16' stroke-width='1.2' stroke-linecap='round'><path d='M21 18 Q 23 25 21 32' transform='rotate(-25 22 25)'/><path d='M61 41 Q 63 48 61 55' transform='rotate(20 62 48)'/><path d='M37 68 Q 39 75 37 82' transform='rotate(-10 38 75)'/></g></svg>");
}

.lpv2-pass[data-brand="zb"] {
    --pass-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'><g fill='%23f5ebd6' fill-opacity='0.1'><path d='M5 28 Q 5 14 17 10 Q 29 14 29 28 L 26 32 L 23 26 L 20 32 L 17 26 L 14 32 L 11 26 L 8 32 Z' transform='rotate(-10 17 22)'/><path d='M50 70 Q 50 56 62 52 Q 74 56 74 70 L 71 74 L 68 68 L 65 74 L 62 68 L 59 74 L 56 68 L 53 74 Z' transform='rotate(15 62 64)'/></g></svg>");
}

.lpv2-pass[data-brand="sh"] {
    --pass-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'><g fill='none' stroke='%23f5ebd6' stroke-opacity='0.13' stroke-width='2'><circle cx='22' cy='25' r='8'/><circle cx='65' cy='50' r='8'/><circle cx='38' cy='76' r='7'/></g><g fill='%23f5ebd6' fill-opacity='0.13'><circle cx='22' cy='25' r='2.5'/><circle cx='65' cy='50' r='2.5'/><circle cx='38' cy='76' r='2.2'/></g></svg>");
}

.lpv2-pass[data-brand="kk"] {
    --pass-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90' fill='%23f5ebd6' fill-opacity='0.11'><path d='M22 18 L 24 24 L 30 26 L 24 28 L 22 34 L 20 28 L 14 26 L 20 24 Z'/><path d='M65 35 L 67 41 L 73 43 L 67 45 L 65 51 L 63 45 L 57 43 L 63 41 Z'/><path d='M40 65 L 42 71 L 48 73 L 42 75 L 40 81 L 38 75 L 32 73 L 38 71 Z'/><path d='M75 75 L 76 79 L 80 80 L 76 81 L 75 85 L 74 81 L 70 80 L 74 79 Z'/></svg>");
}

.lpv2-pass__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
}

.lpv2-pass__brand {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lpv2-pass__logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(245, 235, 214, 0.95);
    color: var(--lpv2-pass-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lpv2-display);
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.lpv2-pass__store {
    font-family: var(--lpv2-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--lpv2-pass-cream);
    white-space: nowrap;
}

.lpv2-pass__member-block {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.lpv2-pass__member {
    font-family: var(--lpv2-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--lpv2-pass-cream);
}

.lpv2-pass__primary {
    padding: 0 0 14px;
}

.lpv2-pass__label {
    display: block;
    font-family: var(--lpv2-display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.7;
    line-height: 1;
    margin-bottom: 6px;
}

.lpv2-pass__stamps {
    display: grid;
    /* Default 7 stamps — larger, more readable than 10. Animation grows
       count to 10 during the customizer demo, demonstrating the stepper. */
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 6px;
}

.lpv2-pass__stamps[data-count="8"]  { grid-template-columns: repeat(8, 1fr); }
.lpv2-pass__stamps[data-count="9"]  { grid-template-columns: repeat(9, 1fr); }
.lpv2-pass__stamps[data-count="10"] { grid-template-columns: repeat(10, 1fr); }

.lpv2-pass__stamps span {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed rgba(245, 235, 214, 0.4);
}

/* Extra slots (8th, 9th, 10th) — hidden by default, GSAP pop-in/out
   animates them as count crosses each threshold. */
.lpv2-pass__stamps-extra {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
}

.lpv2-pass__stamps span.filled {
    background: var(--lpv2-pass-cream);
    border-color: var(--lpv2-pass-cream);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Brand-specific icon inside filled stamps — silhouette of the same motif
   as the brand's pattern overlay (coffee bean, croissant, sushi roll, sparkle).
   Uses background-image w/ inline SVG (data URI). Color encoded in the SVG
   matches the brand's deep color (--pass-c1) so the icon reads on cream bg. */
.lpv2-pass__stamps span.filled::after {
    content: '';
    position: absolute;
    inset: 18%;
    background-image: var(--stamp-icon, none);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Default OE = coffee bean (dark brown) */
.lpv2-pass[data-brand="oe"] {
    --stamp-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='12' cy='12' rx='5' ry='8' fill='%232a1810'/></svg>");
}
/* ZB Bakery = croissant silhouette (dark brown-yellow) */
.lpv2-pass[data-brand="zb"] {
    --stamp-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 14 Q 3 5 12 4 Q 21 5 21 14 L 18 17 L 15 13 L 12 17 L 9 13 L 6 17 Z' fill='%233a2810'/></svg>");
}
/* SH Sushi = roll (dark burgundy) */
.lpv2-pass[data-brand="sh"] {
    --stamp-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='7' fill='none' stroke='%233a0a14' stroke-width='2.5'/><circle cx='12' cy='12' r='2.8' fill='%233a0a14'/></svg>");
}
/* KK Beauty = sparkle (dark plum) */
.lpv2-pass[data-brand="kk"] {
    --stamp-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L 14 10 L 22 12 L 14 14 L 12 22 L 10 14 L 2 12 L 10 10 Z' fill='%233a0a2e'/></svg>");
}

.lpv2-pass__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border-top: 1px solid rgba(245, 235, 214, 0.18);
    padding: 12px 0 14px;
    /* Left grid cell explicitly anchored to start; right cell overrides
       below. Without this, .lpv2-hero's center-aligned text propagates
       and STAMPS / "9 of 10" floats in the middle of its column. */
    text-align: left;
    align-items: start;
}

.lpv2-pass__right { text-align: right; }

.lpv2-pass__value {
    font-family: var(--lpv2-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lpv2-pass__qr-area {
    background: var(--lpv2-pass-cream);
    color: var(--lpv2-pass-deep);
    margin: 0 -14px;
    padding: 14px;
    display: flex;
    justify-content: center;
}

.lpv2-pass__qr {
    width: 96px;
    height: 96px;
    border-radius: 4px;
    display: block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Floating chips around phone */
.lpv2-hero__chip {
    position: absolute;
    z-index: 5;
    background: rgba(20, 20, 24, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 7px 12px 7px 8px;
    font-family: var(--lpv2-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lpv2-text);
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 14px 32px -8px rgba(0, 0, 0, 0.65);
    white-space: nowrap;
}

.lpv2-hero__chip-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lpv2-mint);
    box-shadow: 0 0 12px rgba(62, 234, 153, 0.5);
    flex-shrink: 0;
    position: relative;
}

.lpv2-hero__chip-dot::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0a0a0c;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.lpv2-hero__chip svg {
    width: 14px;
    height: 14px;
    color: var(--lpv2-mint);
    margin-left: 2px;
}

.lpv2-hero__chip--top {
    top: 8%;
    right: -50px;
    animation: lpv2Float 6.5s ease-in-out infinite;
}

.lpv2-hero__chip--bottom {
    bottom: 10%;
    left: -60px;
    animation: lpv2Float 7.5s ease-in-out 1.2s infinite;
}

@keyframes lpv2Float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@media (max-width: 640px) {
    .lpv2-hero__stage { max-width: 280px; }
    .lpv2-phone { width: 280px; }
    .lpv2-hero__chip--top { right: -16px; top: 4%; }
    /* Lift bottom chip clear of the customizer panel — at desktop bottom:10%
       the chip overlapped "PICK A BRAND" panel since the shorter mobile
       phone (320/520) compresses everything vertically. */
    .lpv2-hero__chip--bottom { left: -16px; bottom: 22%; }
}

/* ===== CUSTOMIZER OVERLAY — GSAP-driven design tool demo ================= */
.lpv2-customizer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}

/* Mobile: compact customizer pieces for the narrower 280px stage.
   (Phone aspect + mask-fade now live in the default .lpv2-phone rule
   so desktop benefits from the same short, cleanly-faded chassis.) */
@media (max-width: 767px) {
    /* Compact customizer for narrow stage */
    .lpv2-customizer__cursor { width: 22px; height: 22px; margin-left: -5px; margin-top: -3px; }
    .lpv2-customizer__panel  { padding: 10px 12px 9px; border-radius: 14px; }
    .lpv2-customizer__label  { font-size: 8.5px; margin-bottom: 7px; letter-spacing: 0.1em; }
    .lpv2-customizer__chips,
    .lpv2-customizer__choices { gap: 4px; }
    .lpv2-customizer__brand,
    .lpv2-customizer__choice  { padding: 5px 9px 5px 6px; font-size: 10.5px; gap: 4px; }
    .lpv2-customizer__brand-dot { width: 11px; height: 11px; }
    .lpv2-customizer__brand-dot svg { width: 6px; height: 6px; }
    .lpv2-customizer__slider  { width: 160px; height: 18px; }
    .lpv2-customizer__slider-thumb { width: 18px; height: 18px; margin-top: -9px; }
    .lpv2-customizer__slider-track { height: 5px; }
    .lpv2-customizer__step-btn   { width: 26px; height: 26px; font-size: 14px; }
    .lpv2-customizer__step-value { font-size: 20px; min-width: 30px; }
    .lpv2-customizer__stepper    { gap: 10px; }
    .lpv2-customizer__click      { width: 26px; height: 26px; margin-left: -13px; margin-top: -13px; }
}

.lpv2-customizer__cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    /* Shift so the arrow tip (≈ 5.5,3 in the SVG path) sits at cursor.x/y. */
    margin-left: -6px;
    margin-top: -3px;
    z-index: 8;
    pointer-events: none;
    /* Hidden until GSAP fades in — prevents pre-init flash. */
    opacity: 0;
    /* Force own GPU layer with a flat 3D transform — keeps cursor on its own
       compositor layer through every x/y tween, no flicker on iOS Safari. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.lpv2-customizer__cursor svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.lpv2-customizer__click {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
    background: rgba(62, 234, 153, 0.32);
    border: 2px solid var(--lpv2-mint);
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
}

.lpv2-customizer__panel {
    position: absolute;
    bottom: -14px;
    left: 50%;
    background: rgba(14, 14, 18, 0.92);
    /* saturate(160%) REMOVED — historyczny iOS Safari bug z saturate w
       backdrop-filter, GPU layer może nie commitować w stable state.
       Bg opacity 0.85 → 0.92 żeby panel był wystarczająco solid bez
       saturation boost. Blur zostaje. */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 14px 16px 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 48px -16px rgba(0, 0, 0, 0.55),
        0 12px 24px -12px rgba(62, 234, 153, 0.3);
    opacity: 0;
    /* X-centering is owned SOLELY by left:50% + GSAP xPercent:-50.
       NEVER put translateX(-50%) here: getComputedStyle resolves the % to
       pixels in the matrix, GSAP captures that as `x` on first read, then the
       JS xPercent:-50 stacks ON TOP → the panel translates a FULL width left
       instead of half, and the (widest) brand panel lands half off-screen.
       Keep this transform X-free; only Y-offset + scale live in CSS. */
    transform: translateY(30px) scale(0.94);
    /* will-change removed — known iOS Safari bug where the GPU layer for the
       panel doesn't refresh its children, leaving the panel background visible
       (frosted bg) but the label/stepper/chips inside it invisible. GSAP
       handles will-change automatically via auto-promotion. */
    z-index: 5;
}

.lpv2-customizer__label {
    display: block;
    font-family: var(--lpv2-body);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--lpv2-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
    text-align: center;
}

/* Brand chips */
.lpv2-customizer__chips {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lpv2-customizer__brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px 6px 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--lpv2-text);
    font-family: var(--lpv2-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    /* transform REMOVED z transition — kolidowało z GSAP transformem
       panel parenta podczas entry tweenu (xPercent + scale). Class swap
       teraz instant, transform pop bez animacji. Bg + border-color zostają. */
    transition: background 240ms ease, border-color 240ms ease;
    line-height: 1;
}

.lpv2-customizer__brand.is-active {
    background: rgba(62, 234, 153, 0.16);
    border-color: var(--lpv2-mint);
    color: var(--lpv2-mint-bright);
    transform: scale(1.06);
}

.lpv2-customizer__brand-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    flex-shrink: 0;
    /* Center the brand-specific SVG icon inside the colored dot. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.lpv2-customizer__brand-dot svg {
    width: 8px;
    height: 8px;
    display: block;
}

/* Color slider */
.lpv2-customizer__panel--color { padding-bottom: 14px; }

.lpv2-customizer__slider {
    position: relative;
    width: 200px;
    height: 22px;
    display: flex;
    align-items: center;
}

.lpv2-customizer__slider-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 7px;
    background: linear-gradient(90deg,
        #c97a3e 0%,
        #fbbf24 18%,
        #84cc16 36%,
        #22d3ee 54%,
        #6366f1 72%,
        #f472b6 90%);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}

.lpv2-customizer__slider-thumb {
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 22px;
    /* Center vertically via margin-top instead of transform: translateY(-50%).
       GSAP applies inline transform: translate3d(x, 0, 0) for drag, and would
       have to parse + preserve the CSS translateY(-50%). When GSAP's parser
       didn't catch the percent-based Y, thumb would briefly snap to top:50%
       (no offset) = visible flicker on iOS Safari. Margin keeps Y centering
       outside transform space, so GSAP's transform never collides. */
    margin-top: -11px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0,0,0,0.1) inset;
    border: 2px solid #14141a;
    z-index: 1;
}

/* Stepper */
.lpv2-customizer__stepper {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.lpv2-customizer__step-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-family: var(--lpv2-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* transform REMOVED z transition (same reason jak brand chip). */
    transition: background 200ms ease, border-color 200ms ease;
    user-select: none;
}

.lpv2-customizer__step-btn.is-pressed {
    background: var(--lpv2-mint);
    border-color: var(--lpv2-mint);
    color: #0a0a0c;
    transform: scale(0.88);
    box-shadow: 0 0 16px rgba(62, 234, 153, 0.6);
}

.lpv2-customizer__step-value {
    font-family: var(--lpv2-display);
    font-size: 24px;
    font-weight: 800;
    color: white;
    min-width: 36px;
    text-align: center;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Reward chips */
.lpv2-customizer__choices {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lpv2-customizer__choice {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--lpv2-text);
    font-family: var(--lpv2-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    /* transform REMOVED z transition (same reason jak brand chip). */
    transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
    line-height: 1;
    white-space: nowrap;
}

.lpv2-customizer__choice.is-active {
    background: rgba(62, 234, 153, 0.16);
    border-color: var(--lpv2-mint);
    color: var(--lpv2-mint-bright);
    transform: scale(1.06);
}

/* Hero wallets BLOCK — big, dopamine-forward Add to Wallet buttons */
.lpv2-wallets-block {
    margin-top: 80px;
    padding-top: 56px;
    border-top: 1px solid var(--lpv2-rule);
    width: 100%;
    max-width: 760px;
    text-align: center;
    position: relative;
}

.lpv2-wallets-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lpv2-mint), transparent);
    box-shadow: 0 0 12px var(--lpv2-mint-glow);
    opacity: 0.6;
}

.lpv2-wallets-block__title {
    font-family: var(--lpv2-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--lpv2-text);
    margin: 0 0 12px;
}

.lpv2-wallets-block__sub {
    font-size: 15px;
    color: var(--lpv2-text-soft);
    max-width: 480px;
    margin: 0 auto 40px;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.lpv2-wallets-block__row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.lpv2-walletbtn {
    flex: 1 1 260px;
    max-width: 320px;
    min-width: 260px;
    background: linear-gradient(180deg, #1a1a1f 0%, #0a0a0c 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px 24px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--lpv2-text);
    text-decoration: none;
    cursor: default;
    position: relative;
    overflow: hidden;
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 240ms ease, box-shadow 320ms ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 12px 32px -12px rgba(0, 0, 0, 0.55);
}

.lpv2-walletbtn::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 40%, transparent 60%, rgba(255, 255, 255, 0.06));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* Per-wallet glow underneath */
.lpv2-walletbtn::after {
    content: '';
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60px;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.45;
    transition: opacity 320ms ease, height 320ms ease;
    pointer-events: none;
    z-index: -1;
}

.lpv2-walletbtn--apple::after {
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.4), transparent 70%);
}

.lpv2-walletbtn--google::after {
    background: radial-gradient(ellipse, rgba(66, 133, 244, 0.28) 0%, rgba(234, 67, 53, 0.18) 50%, transparent 70%);
    opacity: 0.7;
}

.lpv2-walletbtn:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 20px 48px -16px rgba(0, 0, 0, 0.7);
}

.lpv2-walletbtn:hover::after {
    opacity: 0.7;
    height: 80px;
}

.lpv2-walletbtn__glyph {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lpv2-text);
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.lpv2-walletbtn--google .lpv2-walletbtn__glyph {
    background: #ffffff;
    border-color: #ffffff;
}

.lpv2-walletbtn__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    text-align: left;
    flex: 1;
}

.lpv2-walletbtn__line1 {
    font-family: var(--lpv2-body);
    font-size: 11px;
    font-weight: 500;
    color: var(--lpv2-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 5px;
}

.lpv2-walletbtn__line2 {
    font-family: var(--lpv2-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--lpv2-text);
    letter-spacing: -0.02em;
}

.lpv2-wallets-block__foot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--lpv2-text-mute);
    letter-spacing: -0.005em;
}

.lpv2-wallets-block__foot span:first-child {
    color: var(--lpv2-mint);
    font-size: 8px;
    line-height: 1;
    animation: lpv2Pulse 2s ease-in-out infinite;
    display: inline-block;
}

@media (max-width: 640px) {
    .lpv2-wallets-block { margin-top: 56px; padding-top: 40px; }
    .lpv2-wallets-block__sub { margin-bottom: 28px; }
    .lpv2-walletbtn { flex: 1 1 100%; max-width: 100%; min-width: 0; padding: 18px 20px; }
    .lpv2-walletbtn__glyph { width: 40px; height: 40px; }
    .lpv2-walletbtn__line2 { font-size: 17px; }
}

/* ===== TRUST STRIP — infinite alternating marquees ====================== */
.lpv2-trust {
    background: var(--lpv2-bg-dark);
    padding: 40px 0 48px;
    border-top: 1px solid var(--lpv2-rule);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .lpv2-trust { padding: 64px 0 80px; }
}

.lpv2-trust__head {
    text-align: center;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .lpv2-trust__head { margin-bottom: 44px; }
}

.lpv2-trust__lead {
    font-family: var(--lpv2-display);
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    color: var(--lpv2-text);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 8px;
}

.lpv2-trust__sub {
    font-size: 14px;
    color: var(--lpv2-text-mute);
    margin: 0;
    letter-spacing: -0.005em;
    line-height: 1.5;
}

.lpv2-marquee {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

@media (min-width: 768px) {
    .lpv2-marquee { gap: 12px; }
}

.lpv2-marquee__row {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.lpv2-marquee__track {
    display: inline-flex;
    flex-shrink: 0;
    gap: 10px;
    padding-right: 10px;
    width: max-content;
    will-change: transform;
}

@media (min-width: 768px) {
    .lpv2-marquee__track { gap: 12px; padding-right: 12px; }
}

.lpv2-marquee__track--ltr {
    animation: lpv2MarqueeLeft 75s linear infinite;
}

.lpv2-marquee__row:nth-child(2) .lpv2-marquee__track--rtl {
    animation: lpv2MarqueeRight 62s linear infinite;
}

.lpv2-marquee__row:nth-child(3) .lpv2-marquee__track--ltr {
    animation: lpv2MarqueeLeft 88s linear infinite;
}

.lpv2-marquee__track:hover { animation-play-state: paused; }

@keyframes lpv2MarqueeLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes lpv2MarqueeRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.lpv2-marquee__track > span {
    flex-shrink: 0;
    color: var(--lpv2-text-soft);
    font-family: var(--lpv2-body);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border: 1px solid var(--lpv2-rule);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    letter-spacing: -0.005em;
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
    white-space: nowrap;
    line-height: 1.2;
}

.lpv2-marquee__track > span:hover {
    color: var(--lpv2-text);
    background: rgba(62, 234, 153, 0.1);
    border-color: rgba(62, 234, 153, 0.4);
}

@media (min-width: 768px) {
    .lpv2-marquee__track > span { font-size: 15px; padding: 9px 18px; }
}

/* ===== H2 (light sections) =============================================== */
.lpv2-h2 {
    font-family: var(--lpv2-display);
    font-size: clamp(36px, 5.5vw, 64px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--lpv2-light-text);
    margin: 0 0 18px;
    text-wrap: balance;
}

/* ===== HERO WAVY RIBBON — dense small icons traveling along a sine wave ===
   Uses CSS offset-path. Each icon has its own animation-delay so they spread
   evenly along the path, creating a continuous flowing ribbon. */
.lpv2-hero__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2400px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    /* fade out at horizontal edges so the loop feels seamless */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.lpv2-hero__ribbon-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 13px;
    height: 13px;
    color: var(--lpv2-mint);
    opacity: 0.32;
    /* Wavy S-curve path threading across the hero — 5 humps */
    offset-path: path('M -200 460 C 100 240, 300 680, 600 460 S 1000 240, 1200 460 S 1600 680, 1800 460 S 2200 240, 2400 460 S 2800 680, 3000 460');
    offset-rotate: 0deg;
    animation: lpv2RibbonFlow 55s linear infinite;
    will-change: offset-distance;
}

@keyframes lpv2RibbonFlow {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
}

/* Variation via prime-nth-child for organic density */
.lpv2-hero__ribbon-icon:nth-child(2n) {
    width: 10px;
    height: 10px;
    opacity: 0.22;
}

.lpv2-hero__ribbon-icon:nth-child(3n) {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

.lpv2-hero__ribbon-icon:nth-child(5n) {
    color: rgba(245, 245, 247, 0.55);
    opacity: 0.32;
}

.lpv2-hero__ribbon-icon:nth-child(7n) {
    width: 8px;
    height: 8px;
    opacity: 0.5;
}

.lpv2-hero__ribbon-icon:nth-child(11n) {
    color: var(--lpv2-mint-bright);
    opacity: 0.7;
    filter: drop-shadow(0 0 6px rgba(62, 234, 153, 0.55));
}

.lpv2-hero__ribbon-icon:nth-child(13n) {
    color: rgba(245, 245, 247, 0.4);
    width: 14px;
    height: 14px;
}

/* Mobile: keep ribbon full-width but tighter wave amplitude */
@media (max-width: 768px) {
    .lpv2-hero__ribbon { width: 1800px; }
    .lpv2-hero__ribbon-icon {
        offset-path: path('M -150 380 C 60 240, 220 520, 420 380 S 720 240, 900 380 S 1200 520, 1380 380 S 1680 240, 1860 380 S 2160 520, 2340 380');
        width: 11px;
        height: 11px;
    }
    .lpv2-hero__ribbon-icon:nth-child(2n) { width: 9px; height: 9px; }
    .lpv2-hero__ribbon-icon:nth-child(3n) { width: 13px; height: 13px; }
    .lpv2-hero__ribbon-icon:nth-child(7n) { width: 7px; height: 7px; }
}

/* ===== NO-APP MANIFESTO (light) ========================================== */
.lpv2-noapp {
    background: var(--lpv2-light-bg);
    color: var(--lpv2-light-text);
    padding: 56px 0 72px;
}

@media (min-width: 768px) {
    .lpv2-noapp { padding: 110px 0; }
}

.lpv2-noapp__head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 36px;
}

@media (min-width: 768px) {
    .lpv2-noapp__head { margin-bottom: 48px; }
}

/* ===== HOT BONUS CARD — animated, dopaminergic SEO/Maps boost callout ===== */
.lpv2-bonus {
    position: relative;
    background: linear-gradient(160deg, #0a0a0c 0%, #0f1d18 65%, #143424 100%);
    border-radius: 22px;
    padding: 24px 24px 22px;
    color: white;
    overflow: hidden;
    margin: 0 auto 48px;
    max-width: 820px;
    border: 1px solid rgba(62, 234, 153, 0.3);
    box-shadow:
        0 24px 56px -22px rgba(15, 23, 42, 0.3),
        0 12px 32px -16px rgba(62, 234, 153, 0.4);
    isolation: isolate;
    /* scroll-fly-in initial state */
    opacity: 0;
    transform: translateY(48px) scale(0.96);
    transition:
        opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 800ms ease;
}

.lpv2-bonus.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow:
        0 28px 60px -16px rgba(15, 23, 42, 0.32),
        0 18px 52px -12px rgba(62, 234, 153, 0.55);
}

@media (min-width: 768px) {
    .lpv2-bonus { padding: 30px 34px 28px; margin-bottom: 64px; }
}

/* Mint glow corner */
.lpv2-bonus::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -180px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--lpv2-mint-glow) 0%, transparent 65%);
    filter: blur(50px);
    pointer-events: none;
    opacity: 0.85;
    z-index: -1;
}

/* Animated shine sweep across the card */
.lpv2-bonus__shine {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg, transparent 30%, rgba(62, 234, 153, 0.12) 50%, transparent 70%);
    pointer-events: none;
    animation: lpv2BonusShine 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes lpv2BonusShine {
    0%, 70% { transform: translateX(0); }
    100%    { transform: translateX(400%); }
}

.lpv2-bonus > *:not(.lpv2-bonus__shine) { position: relative; z-index: 1; }

.lpv2-bonus__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Flame badge — warm orange/yellow, animated flame icon (custom, not generic) */
.lpv2-bonus__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 9px;
    background: linear-gradient(120deg, rgba(234, 88, 12, 0.18), rgba(252, 211, 77, 0.08));
    border: 1px solid rgba(251, 146, 60, 0.45);
    border-radius: 999px;
    color: #fde68a;
    font-family: var(--lpv2-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: relative;
    isolation: isolate;
}

/* Soft warm halo around badge */
.lpv2-bonus__badge::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    background: radial-gradient(ellipse 70% 100% at 18% 50%, rgba(249, 115, 22, 0.32), transparent 70%);
    filter: blur(8px);
    z-index: -1;
    opacity: 0.85;
    pointer-events: none;
}

.lpv2-bonus__flame {
    width: 14px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform-origin: center bottom;
    animation: lpv2FlameDance 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.7));
}

.lpv2-bonus__flame svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lpv2-bonus__flame-outer {
    transform-origin: 12px 22px;
    animation: lpv2FlameWiggle 1.3s ease-in-out infinite;
}

.lpv2-bonus__flame-inner {
    transform-origin: 12px 20px;
    animation: lpv2FlameWiggle 0.9s ease-in-out -0.4s infinite;
}

@keyframes lpv2FlameDance {
    0%, 100% { transform: scale(1) skewX(-1.5deg); filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.7)); }
    25%      { transform: scale(1.06) skewX(2deg); }
    50%      { transform: scale(0.96) skewX(-1deg); filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.85)); }
    75%      { transform: scale(1.04) skewX(2.5deg); }
}

@keyframes lpv2FlameWiggle {
    0%, 100% { transform: scaleY(1) skewX(0); }
    33%      { transform: scaleY(1.08) skewX(3deg); }
    66%      { transform: scaleY(0.94) skewX(-2deg); }
}

.lpv2-bonus__free {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    text-align: right;
}

.lpv2-bonus__free-label {
    font-family: var(--lpv2-body);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--lpv2-text-mute);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.lpv2-bonus__free-value {
    font-family: var(--lpv2-display);
    font-style: italic;
    font-size: 30px;
    font-weight: 800;
    background: linear-gradient(180deg, #5cf7b0 0%, var(--lpv2-mint) 50%, #2dd478 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.025em;
    line-height: 1;
}

.lpv2-bonus__title {
    font-family: var(--lpv2-display);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: white;
    margin: 0 0 10px;
}

.lpv2-bonus__title em {
    font-style: italic;
    background: linear-gradient(180deg, #5cf7b0 0%, var(--lpv2-mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

.lpv2-bonus__sub {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--lpv2-text-soft);
    margin: 0 0 20px;
    max-width: 660px;
    letter-spacing: -0.005em;
}

.lpv2-bonus__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lpv2-bonus__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px 7px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-family: var(--lpv2-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--lpv2-text);
    letter-spacing: -0.005em;
    transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
    line-height: 1;
}

.lpv2-bonus__chip:hover {
    background: rgba(62, 234, 153, 0.12);
    border-color: rgba(62, 234, 153, 0.4);
    transform: translateY(-1px);
}

.lpv2-bonus__chip svg {
    width: 14px;
    height: 14px;
    color: var(--lpv2-mint);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .lpv2-bonus { padding: 20px 20px 26px; margin-bottom: 36px; border-radius: 18px; }
    .lpv2-bonus__head { margin-bottom: 14px; }
    .lpv2-bonus__free-value { font-size: 24px; }
    .lpv2-bonus__title { font-size: 18px; }
    .lpv2-bonus__sub { font-size: 13.5px; margin-bottom: 16px; }
    .lpv2-bonus__chip { font-size: 12px; padding: 6px 11px 6px 9px; }
}

.lpv2-noapp .lpv2-eyebrow {
    color: var(--lpv2-light-text-mute);
}

.lpv2-noapp__title {
    font-size: clamp(56px, 11vw, 156px);
    line-height: 0.94;
    letter-spacing: -0.05em;
    color: var(--lpv2-light-text);
    margin: 0;
}

.lpv2-noapp__sub {
    font-family: var(--lpv2-display);
    font-style: italic;
    font-size: clamp(22px, 3vw, 36px);
    color: var(--lpv2-light-text-soft);
    margin: 18px 0 0;
    letter-spacing: -0.015em;
}

.lpv2-noapp__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    text-align: left;
    max-width: 1080px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .lpv2-noapp__grid {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 72px;
        align-items: start;
    }
}

.lpv2-noapp__copy p {
    font-size: 17px;
    line-height: 1.62;
    color: var(--lpv2-light-text-soft);
    margin: 0 0 22px;
}

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

.lpv2-noapp__copy strong {
    color: var(--lpv2-light-text);
    font-weight: 700;
}

.lpv2-noapp__copy em {
    font-family: var(--lpv2-display);
    font-style: italic;
    color: var(--lpv2-mint-deep);
    font-weight: 500;
}

/* Compare block */
.lpv2-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    background: var(--lpv2-light-bg-soft);
    border: 1px solid var(--lpv2-light-rule);
    border-radius: 18px;
    padding: 8px;
}

@media (min-width: 640px) {
    .lpv2-compare {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 0;
    }
}

.lpv2-compare__col {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lpv2-compare__col--them {
    border-bottom: 1px solid var(--lpv2-light-rule);
}

@media (min-width: 640px) {
    .lpv2-compare__col--them {
        border-bottom: none;
        border-right: 1px solid var(--lpv2-light-rule);
    }
}

.lpv2-compare__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lpv2-compare__chip {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lpv2-compare__col--them .lpv2-compare__chip {
    background: rgba(0, 0, 0, 0.06);
    color: var(--lpv2-light-text-soft);
}

.lpv2-compare__col--us .lpv2-compare__chip {
    background: var(--lpv2-mint);
    color: #052b14;
}

.lpv2-compare__time {
    font-family: var(--lpv2-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--lpv2-light-text);
    letter-spacing: -0.01em;
}

.lpv2-compare__col--them .lpv2-compare__time { color: var(--lpv2-light-text-mute); }

.lpv2-compare ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.lpv2-compare li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--lpv2-light-text-soft);
}

.lpv2-compare li span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.lpv2-compare__col--them li {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.2);
    color: var(--lpv2-light-text-mute);
}

.lpv2-compare__col--them li span {
    background: rgba(0, 0, 0, 0.06);
    color: var(--lpv2-light-text-mute);
    text-decoration: none;
}

.lpv2-compare__col--us li span {
    background: var(--lpv2-mint);
    color: #052b14;
}

/* ===== SECTION HEAD ====================================================== */
.lpv2-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}

.lpv2-section-head--left {
    text-align: left;
    max-width: 720px;
    margin: 0 0 32px;
}

@media (min-width: 768px) {
    .lpv2-section-head { margin-bottom: 64px; }
    .lpv2-section-head--left { margin-bottom: 48px; }
}

.lpv2-section-head .lpv2-eyebrow {
    color: var(--lpv2-light-text-mute);
}

.lpv2-section-head__sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--lpv2-light-text-soft);
    max-width: 580px;
    margin: 0 auto;
}

.lpv2-section-head--left .lpv2-section-head__sub { margin-left: 0; }

/* ===== FEATURES BENTO ==================================================== */
.lpv2-features {
    background: var(--lpv2-light-bg-soft);
    color: var(--lpv2-light-text);
    padding: 56px 0 64px;
    border-top: 1px solid var(--lpv2-light-rule);
}

@media (min-width: 768px) {
    .lpv2-features { padding: 110px 0; }
}

.lpv2-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 700px) {
    .lpv2-bento {
        grid-template-columns: repeat(3, 1fr);
        /* Cards in same row stretch to common height (default stretch) for a
           clean rectangular grid. Min row 220 keeps visual cards compact and
           icon cards from being stretched too tall. */
        grid-auto-rows: minmax(220px, auto);
    }
    .lpv2-bento__card--lg {
        grid-column: span 2;
        grid-row: span 1;
    }
    .lpv2-bento__card--wide {
        grid-column: span 2;
    }
    /* Icon-only cards: stack icon → title → body and CENTER vertically inside
       the stretched card. Content sits in the visual middle, no orphan space
       at top or bottom — feels intentional rather than half-empty. */
    .lpv2-bento__card:not(.lpv2-bento__card--lg):not(.lpv2-bento__card--wide) {
        justify-content: center;
    }
}

.lpv2-bento__card {
    background: var(--lpv2-light-bg);
    border: 1px solid var(--lpv2-light-rule);
    border-radius: 18px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lpv2-bento__card:hover {
    border-color: rgba(62, 234, 153, 0.6);
    box-shadow: 0 18px 48px -20px var(--lpv2-mint-glow);
    transform: translateY(-3px);
}

.lpv2-bento__index {
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: var(--lpv2-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--lpv2-light-text-mute);
    letter-spacing: 0;
}

.lpv2-bento__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--lpv2-mint) 0%, var(--lpv2-mint-deep) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #052b14;
    /* Compact gap to title — was margin-bottom: auto which pushed title to
       card bottom and left dead space under the icon. Card now collapses
       to natural content height. */
    margin-bottom: 22px;
    box-shadow: 0 6px 16px -4px rgba(62, 234, 153, 0.4);
    flex-shrink: 0;
}

.lpv2-bento__icon svg { width: 22px; height: 22px; }

.lpv2-bento__visual {
    margin: -28px -28px 24px;
    padding: 18px;
    background: linear-gradient(160deg, var(--lpv2-bg-dark) 0%, #143324 100%);
    /* border-box so 'height' is the actual visible visual size — without it
       the height is content-only and the 18px padding adds 36px on top,
       making visual cards much taller than icon cards in the same row.
       150 keeps cards ~270 total, icon cards stretch only ~80 to match. */
    box-sizing: border-box;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--lpv2-light-rule);
}

.lpv2-bento__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(62, 234, 153, 0.18), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(62, 234, 153, 0.08), transparent 50%);
    pointer-events: none;
}

.lpv2-bento__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.lpv2-bento__brand-preview {
    /* CSS vars allow GSAP brand-cycling timeline to interpolate gradient stops */
    --preview-c1: var(--lpv2-pass-deep);
    --preview-c2: var(--lpv2-pass-warm);
    --preview-c3: var(--lpv2-pass-amber);
    position: relative;
    /* Sized to fit inside the new 150px visual (with 18px padding = 114px
       inner area). Aspect ~1.8 stays close to the original wallet-card look. */
    width: 200px;
    height: 110px;
    background: linear-gradient(160deg, var(--preview-c1) 0%, var(--preview-c2) 50%, var(--preview-c3) 100%);
    border-radius: 14px;
    box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.lpv2-bento__brand-preview-dot {
    position: absolute;
    bottom: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--lpv2-pass-cream);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.lpv2-bento__brand-preview-logo {
    position: absolute;
    top: 14px;
    left: 14px;
    color: var(--lpv2-pass-cream);
    font-family: var(--lpv2-display);
    font-style: italic;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    display: inline-block;
    transform-origin: left top;
}

/* Notification dot for the Push card — pulses periodically */
.lpv2-bento__icon { position: relative; }

.lpv2-bento__notif-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px var(--lpv2-mint), 0 0 8px rgba(239, 68, 68, 0.6);
    opacity: 0;
}

/* "LIVE" indicator dot for the Stats card */
.lpv2-bento__live-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px var(--lpv2-mint), 0 0 10px rgba(34, 197, 94, 0.7);
}

/* Stats bars — bottoms aligned at viewBox y=21, scale grows from common baseline */
.lpv2-bento__bar {
    transform-origin: 50% 100%;
    transform-box: fill-box;
}

/* Lightning spark — flashes white briefly with the bolt */
.lpv2-bento__spark {
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9), transparent 60%);
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}

/* Shield check mark draws on reveal */
.lpv2-bento__shield-check {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
}

.lpv2-bento__visual--rewards {
    background: linear-gradient(160deg, var(--lpv2-bg-dark) 0%, #1a3826 100%);
}

.lpv2-bento__reward-row {
    display: flex;
    gap: 14px;
    align-items: center;
    z-index: 1;
}

.lpv2-bento__reward-row span {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--lpv2-display);
    font-size: 18px;
    font-weight: 700;
    position: relative;
    flex-shrink: 0;
}

.lpv2-bento__reward-row span small {
    font-size: 10px;
    margin-left: 1px;
    color: var(--lpv2-mint);
}

.lpv2-bento__reward-arrow {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 16px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
}

.lpv2-bento__reward-row span.gold {
    background: var(--lpv2-mint);
    border-color: var(--lpv2-mint);
    color: #052b14;
    box-shadow: 0 0 32px rgba(62, 234, 153, 0.5);
}

.lpv2-bento__reward-row span.gold small { color: #052b14; }

.lpv2-bento__title {
    font-family: var(--lpv2-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--lpv2-light-text);
    margin: 0 0 8px;
    letter-spacing: -0.018em;
    line-height: 1.18;
}

.lpv2-bento__card--lg .lpv2-bento__title { font-size: 26px; }

.lpv2-bento__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--lpv2-light-text-soft);
    margin: 0;
    letter-spacing: -0.005em;
}

.lpv2-bento__body em {
    font-family: var(--lpv2-display);
    font-style: italic;
    color: var(--lpv2-mint-deep);
    font-weight: 500;
}

/* Bento card without visual: icon at top, content flows naturally */
.lpv2-bento__card:not(.lpv2-bento__card--lg):not(.lpv2-bento__card--wide) .lpv2-bento__icon {
    margin-bottom: 28px;
}

.lpv2-bento__card:not(.lpv2-bento__card--lg):not(.lpv2-bento__card--wide) .lpv2-bento__title {
    margin-top: auto;
}

/* ===== HOW IT WORKS ====================================================== */
.lpv2-how {
    background: var(--lpv2-light-bg);
    color: var(--lpv2-light-text);
    padding: 56px 0 64px;
    border-top: 1px solid var(--lpv2-light-rule);
}

@media (min-width: 768px) {
    .lpv2-how { padding: 110px 0; }
}

.lpv2-how__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    /* Tighter mobile gap — 20px stacked vertically with 32px card padding
       on each side felt like 84px of breathing between content blocks. */
    gap: 12px;
}

@media (min-width: 768px) {
    .lpv2-how__steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.lpv2-how__step {
    background: var(--lpv2-light-bg-soft);
    border: 1px solid var(--lpv2-light-rule);
    border-radius: 18px;
    padding: 32px;
    position: relative;
    transition: border-color 320ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease;
}

@media (max-width: 767px) {
    .lpv2-how__step { padding: 22px 22px 24px; }
    .lpv2-how__num  { margin-bottom: 18px; }
}

.lpv2-how__step:hover {
    border-color: rgba(62, 234, 153, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 18px 48px -20px var(--lpv2-mint-glow);
}

.lpv2-how__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lpv2-bg-dark);
    color: var(--lpv2-mint);
    font-family: var(--lpv2-display);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 28px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lpv2-how__step h3 {
    font-family: var(--lpv2-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--lpv2-light-text);
    margin: 0 0 10px;
    letter-spacing: -0.018em;
    line-height: 1.18;
}

.lpv2-how__step p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--lpv2-light-text-soft);
    margin: 0;
    letter-spacing: -0.005em;
}

/* ===== TESTIMONIALS ====================================================== */
.lpv2-quotes {
    background: var(--lpv2-light-bg-soft);
    color: var(--lpv2-light-text);
    padding: 56px 0 64px;
    border-top: 1px solid var(--lpv2-light-rule);
}

@media (min-width: 768px) {
    .lpv2-quotes { padding: 110px 0; }
}

.lpv2-quotes__grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Same mobile-tighter logic as how-it-works — 20 + 30+30 = 80px
       perceived breathing between quotes; 12 keeps cards reading as
       one section instead of as orphans. */
    gap: 12px;
}

@media (min-width: 768px) {
    .lpv2-quotes__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.lpv2-quote {
    background: var(--lpv2-light-bg);
    border: 1px solid var(--lpv2-light-rule);
    border-radius: 18px;
    padding: 30px;
    margin: 0;
    transition: border-color 320ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease;
}

.lpv2-quote:hover {
    border-color: rgba(62, 234, 153, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 18px 48px -20px var(--lpv2-mint-glow);
}

@media (max-width: 767px) {
    .lpv2-quote { padding: 22px 22px 20px; }
    .lpv2-quote blockquote { font-size: 16.5px; margin-bottom: 18px; }
    .lpv2-quote figcaption { padding-top: 14px; }
}

.lpv2-quote__stars {
    color: #f5b820;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 0 18px;
    line-height: 1;
}

.lpv2-quote blockquote {
    font-family: var(--lpv2-display);
    font-size: 18px;
    line-height: 1.45;
    color: var(--lpv2-light-text);
    margin: 0 0 24px;
    letter-spacing: -0.012em;
}

.lpv2-quote figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--lpv2-light-rule);
}

.lpv2-quote figcaption img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.lpv2-quote__name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lpv2-light-text);
    letter-spacing: -0.005em;
}

.lpv2-quote__shop {
    display: block;
    font-size: 13.5px;
    color: var(--lpv2-light-text-soft);
}

/* ===== FINAL CTA (dark, big mint glow) =================================== */
.lpv2-final {
    background: var(--lpv2-bg-dark);
    color: var(--lpv2-text);
    padding: 64px 0 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .lpv2-final { padding: 130px 0 120px; }
}

.lpv2-final__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center bottom;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 100%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 100%, black 30%, transparent 75%);
    z-index: 0;
}

.lpv2-final__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, var(--lpv2-mint-glow) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(62, 234, 153, 0.08) 0%, transparent 60%);
    z-index: 0;
}

.lpv2-final__inner {
    text-align: center;
    z-index: 1;
}

.lpv2-final__title {
    font-family: var(--lpv2-display);
    font-size: clamp(40px, 7vw, 88px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--lpv2-text);
    margin: 0 0 24px;
    text-wrap: balance;
}

.lpv2-final__sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--lpv2-text-soft);
    max-width: 540px;
    margin: 0 auto 36px;
    letter-spacing: -0.005em;
}

.lpv2-final__micro {
    font-size: 16px;
    font-weight: 500;
    color: var(--lpv2-text-soft);
    letter-spacing: -0.005em;
    margin: 24px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .lpv2-final__micro { font-size: 17px; gap: 16px; }
}

/* ===== ENTRANCE ANIMATIONS =============================================== */
@keyframes lpv2FadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lpv2-hero__copy > * { opacity: 0; animation: lpv2FadeUp 720ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.lpv2-hero__copy > *:nth-child(1) { animation-delay: 80ms; }
.lpv2-hero__copy > *:nth-child(2) { animation-delay: 160ms; }
.lpv2-hero__copy > *:nth-child(3) { animation-delay: 240ms; }
.lpv2-hero__copy > *:nth-child(4) { animation-delay: 320ms; }
.lpv2-hero__copy > *:nth-child(5) { animation-delay: 400ms; }
.lpv2-hero__copy > *:nth-child(6) { animation-delay: 480ms; }
.lpv2-hero__copy > *:nth-child(7) { animation-delay: 560ms; }