/**
 * ELO Landing Page - Stile Dark Theme
 * Basato su UGO con colore accento #519ef3
 */

/* Import Google Fonts - Noto Sans Mono */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;400;500;600;700;800&display=swap');

/* CSS Variables - Dark Theme ELO */
:root {
    --dark-bg: #0a0a0a;
    --dark-card: #1f1f1f;
    --dark-text: #ffffff;
    --dark-text-muted: rgba(255, 255, 255, 0.6);
    --elo-primary: #519ef3;
    --elo-secondary: #3b82f6;
    --elo-gradient: linear-gradient(135deg, #519ef3, #3b82f6);
    --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
    --color-error: #ef4444;
    --color-success: #10b981;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --border-radius: 8px;
    --border-radius-lg: 12px;
}

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

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* Scroll snap globale (attivato dallo script quando lo step scroll è abilitato) */
html.step-scroll-enabled {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

@media (max-width: 768px) {
    html.step-scroll-enabled.step-scroll-not-hero {
        overscroll-behavior-y: none;
        overscroll-behavior: contain;
    }
}

body {
    font-family: 'Noto Sans Mono', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, monospace, sans-serif;
    background: var(--dark-bg);
    color: var(--dark-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.6;
    min-height: 100vh;
}

.main-content {
    min-height: calc(100vh - 200px);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Header */
.site-header {
    background: var(--dark-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-sm) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-dark);
}

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

.site-logo {
    display: inline-block;
    transition: all 0.2s ease;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: all 0.2s ease;
}

.site-logo:hover .logo-img {
    opacity: 0.9;
    transform: scale(1.05);
}

.main-nav {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.main-nav a {
    color: var(--dark-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
    padding: 8px 16px;
    border-radius: var(--border-radius);
}

.main-nav a:hover {
    color: var(--elo-primary);
    background: rgba(81, 158, 243, 0.1);
}

/* Hero Section */
.hero {
    background: #000000;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hero-video {
    position: absolute;
    left: 50%;
    margin-top: 800px;
    transform: translate(-50%, -50%);
    width: 650px;
    height: auto;
    object-fit: contain;
    z-index: 0;
    opacity: 0.8;
}



.hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 var(--spacing-sm);
}

.hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    margin-top: 120px;
    line-height: 1.2;
    color: var(--dark-text);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.hero .subtitle {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-md);
    color: var(--dark-text-muted);
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.highlight {
    background: rgba(81, 158, 243, 0.1);
    border: 1px solid var(--elo-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    display: inline-block;
    margin: var(--spacing-sm) 0;
    font-weight: 600;
    color: var(--dark-text);
    text-align: center;
}

.highlight strong {
    color: var(--elo-primary);
}

.hero .cta-group {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 500px;
    position: relative;
    z-index: 1;
}

/* Hero: video centrato nella sezione, hero-bottom-row a 100px dal bottom */
.hero.hero-with-form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0 0 100px 0;
    text-align: left;
    background: #000;
    overflow: hidden;
}
.hero-with-form .hero-video-wrap {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-sm);
    position: relative;
    z-index: 1;
    min-height: 0;
}
.hero-with-form .hero-video {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
}
.hero-badge {
    flex: 0 0 auto;
    width: 100%;
    padding: var(--spacing-md) 0 0;
    position: relative;
    z-index: 2;
}
.hero-badge-inner {
    max-width: 1100px;
    padding: 0 var(--spacing-sm);
}
.hero-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
    margin-top: 500px;
}
.hero-form-wrap .form-card {
    width: 100%;
}

/* Tablet landscape: stesso layout desktop, componenti ridotti in proporzione per stare in schermata */
@media (orientation: landscape) and (min-width: 769px) and (max-width: 1200px) {
.hero-video {
    margin-top: 400px;
}

    .hero.hero-with-form {
        padding: 0 0 60px 0;
    }
    .hero-with-form .hero-video-wrap {
        flex: 0 1 auto;
        max-height: 38vh;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    .hero-with-form .hero-video {
        max-width: 380px;
        max-height: 38vh;
    }
    .hero-badge {
        padding: var(--spacing-sm) 0 0;
    }
    .hero-badge-inner {
        max-width: 1000px;
        padding: 0 var(--spacing-sm);
    }
    .hero-bottom-row {
        gap: var(--spacing-md);
        margin-top: 200px;
    }
    .hero-left h1 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-xs);
    }
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-sm);
    }
    .hero-benefits li {
        font-size: 0.9rem;
        padding-left: 1.25rem;
        margin-bottom: 0.25rem;
    }
    .hero-form-wrap .form-card {
        padding: var(--spacing-sm);
    }
    .hero-form-wrap .form-title {
        font-size: 1.1rem;
    }
    .hero-form-wrap .form-subtitle {
        font-size: 0.8rem;
    }
    .hero-form-wrap .form-group input,
    .hero-form-wrap .form-group label {
        font-size: 0.85rem;
    }
    .hero-form-wrap .btn {
        padding: 8px var(--spacing-sm);
        font-size: 0.9rem;
    }
}

/* Tablet portrait: stesso layout della landscape (da modificare manualmente) */
@media (orientation: portrait) and (min-width: 769px) and (max-width: 1200px) {
    .hero.hero-with-form {
        padding: 0 0 60px 0;
    }
    .hero-with-form .hero-video-wrap {
        flex: 0 1 auto;
        max-height: 38vh;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    .hero-with-form .hero-video {
        max-width: 380px;
        max-height: 38vh;
    }
    .hero-badge {
        padding: var(--spacing-sm) 0 0;
    }
    .hero-badge-inner {
        max-width: 1000px;
        padding: 0 var(--spacing-sm);
    }
    .hero-bottom-row {
        gap: var(--spacing-md);
        margin-top: 500px;
    }
    .hero-left h1 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-xs);
    }
    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-sm);
    }
    .hero-benefits li {
        font-size: 0.9rem;
        padding-left: 1.25rem;
        margin-bottom: 0.25rem;
    }
    .hero-form-wrap .form-card {
        padding: var(--spacing-sm);
    }
    .hero-form-wrap .form-title {
        font-size: 1.1rem;
    }
    .hero-form-wrap .form-subtitle {
        font-size: 0.8rem;
    }
    .hero-form-wrap .form-group input,
    .hero-form-wrap .form-group label {
        font-size: 0.85rem;
    }
    .hero-form-wrap .btn {
        padding: 8px var(--spacing-sm);
        font-size: 0.9rem;
    }
}

/* Smartphone portrait: hero con video 10px dal top, sotto hero-left, sotto form; elementi ridimensionati */
@media (max-width: 768px) and (orientation: portrait) {
    .hero.hero-with-form {
        padding: 10px 10px 20px;
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .hero-with-form .hero-video-wrap {
        order: 1;
        flex: 0 0 auto;
        padding: 0 0 var(--spacing-xs);
        min-height: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .hero-with-form .hero-video {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
        margin-top: 50px;
    }
    .hero-badge {
        order: 2;
        flex: 1 1 auto;
        padding: var(--spacing-xs) 0 0;
    }
    .hero-badge-inner {
        padding: 0;
        max-width: 100%;
    }
    .hero-bottom-row {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        margin-top: 0;
    }
    .hero-left {
        order: 1;
        margin-top: 80px;
    }
    .hero-left h1 {
        font-size: 18px !important;
        margin-bottom: 10px;
    }
    .hero-subtitle {
        display: none;
    }
    .hero-benefits {
        margin-top: 0;
        margin-bottom: var(--spacing-sm);
    }
    .hero-benefits li {
        font-size: 0.8rem;
        padding-left: 1rem;
        margin-bottom: 0.2rem;
    }
    .hero-form-wrap {
        order: 2;
    }
    .hero-form-wrap .form-card {
        padding: var(--spacing-xs) var(--spacing-sm);
        margin-top: -30px;
    }
    .hero-form-wrap .form-title {
        font-size: 1rem;
    }
    .hero-form-wrap .form-subtitle {
        font-size: 0.75rem;
    }
    .hero-form-wrap .form-group input,
    .hero-form-wrap .form-group label {
        font-size: 0.8rem;
    }
    .hero-form-wrap .btn {
        padding: 6px var(--spacing-sm);
        font-size: 0.85rem;
    }
}

.hero-left h1 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
}
.hero-subtitle {
    font-size: 1.125rem;
    color: var(--dark-text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}
.hero-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
}
.hero-benefits li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--spacing-xs);
    color: var(--dark-text);
}
.hero-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--elo-primary);
    border-radius: 50%;
}
.form-card {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-dark);
}
.form-card .form-title {
    margin-top: 0;
}
.form-fields-simple {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.form-fields-simple .form-group-full {
    margin-bottom: 0;
}
.btn-block {
    width: 100%;
}

/* Esempio di landing - 2 card */
.esempi-landing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}
.esempi-landing-card {
    display: block;
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.esempi-landing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-dark);
}
.esempi-landing-card-inner {
    padding: var(--spacing-sm);
    position: relative;
}
.esempi-landing-card-inner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
}
.esempi-landing-label {
    display: block;
    font-weight: 600;
    color: var(--elo-primary);
    margin-bottom: var(--spacing-xs);
}

/* Esempio concreto - 2 screenshot affiancati (desktop) / carousel (mobile) */
.esempio-concreto-wrap {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.esempio-concreto-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #00d4ff;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.esempio-concreto-arrow svg {
    width: 100%;
    height: 100%;
}
.esempio-concreto-arrow-prev {
    left: 0.5rem;
}
.esempio-concreto-arrow-next {
    right: 0.5rem;
}
@keyframes esempio-concreto-arrow-blink {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}
.esempio-concreto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}
.esempio-concreto-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
}

/* Per chi è - 2 blocchi */
.per-chi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}
.card-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}
.card-bullets li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: var(--spacing-xs);
}
.card-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--elo-primary);
    font-weight: 700;
}

/* Footer essenziale */
.footer-essential {
    text-align: center;
    padding: var(--spacing-md) 0;
}
.footer-essential p {
    margin: 0.5rem 0;
}
.footer-essential a {
    color: var(--dark-text-muted);
    text-decoration: none;
}
.footer-essential a:hover {
    color: var(--elo-primary);
}

/* Mobile: hero video più compatto, form centrata */
@media (max-width: 768px) {
    .hero-with-form .hero-video-wrap {
        padding: var(--spacing-sm);
    }
    .hero-with-form .hero-video {
        max-width: 280px;
    }
    .hero-with-form {
        min-height: auto;
    }
    .hero-left h1 {
        font-size: 1.75rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .esempi-landing-grid,
    .per-chi-grid {
        grid-template-columns: 1fr;
    }
    /* Esempio concreto: carousel orizzontale su mobile (2 img swipe) */
    #esempio-concreto-section .esempio-concreto-grid {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-md);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--spacing-sm);
        margin-left: calc(-1 * var(--spacing-sm));
        margin-right: calc(-1 * var(--spacing-sm));
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        scroll-padding-inline: var(--spacing-sm);
    }
    #esempio-concreto-section .esempio-concreto-grid > div {
        flex: 0 0 85%;
        min-width: 85%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    #esempio-concreto-section .esempio-concreto-grid img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--border-radius);
    }
    /* Frecce carousel: visibili solo su mobile, cyano; visibilità in base alla slide + blink lento */
    #esempio-concreto-section .esempio-concreto-arrow {
        display: flex;
    }
    #esempio-concreto-section .esempio-concreto-wrap.show-next-arrow .esempio-concreto-arrow-next {
        opacity: 1;
        animation: esempio-concreto-arrow-blink 2.2s ease-in-out infinite;
    }
    #esempio-concreto-section .esempio-concreto-wrap.show-prev-arrow .esempio-concreto-arrow-prev {
        opacity: 1;
        animation: esempio-concreto-arrow-blink 2.2s ease-in-out infinite;
    }
}

/* Desktop: Hero CTA (Iscriviti Gratis alla Waitlist) 150px dal margine bottom */
@media (min-width: 769px) {
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .hero .container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .hero .cta-group {
        margin-top: 650px;
        padding-bottom: 150px;
        margin-bottom: auto;
    }

    #per-chi-e-section > .container,
    #esempi-template-section > .container,
    #come-funziona-section > .container,
    #faq-section > .container {
        justify-content: center;
    }

    /* Per chi è: contenuto più grande su desktop */
    #per-chi-e-section .grid-3 {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--spacing-lg);
    }
    #per-chi-e-section .card {
        padding: var(--spacing-lg);
    }
    #per-chi-e-section .card-title {
        font-size: 1.5rem;
    }
    #per-chi-e-section .card p {
        font-size: 1rem;
    }
    #per-chi-e-section .card li {
        font-size: 0.95rem;
    }
    #per-chi-e-section .section-subtitle {
        font-size: 1.25rem;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
    white-space: nowrap;
}

.btn-primary {
    background: var(--elo-gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.3);
}

.btn-primary:hover {
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(81, 158, 243, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--dark-text);
    border: 2px solid var(--elo-primary);
}

.btn-secondary:hover {
    background: rgba(81, 158, 243, 0.1);
    border-color: var(--elo-secondary);
    color: var(--elo-primary);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Sections */
.section {
    padding: var(--spacing-xl) 0;
}

/* Sezioni usate per lo scroll a step */
.scroll-step-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    position: relative;
}

/* Contenuti sezioni non-hero: allineati in alto così lo snap mostra il titolo */
.scroll-step-section:not(.hero) > .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--spacing-md);
}

/* Quando lo scroll a step è attivo, mostra solo la sezione corrente */
html.step-scroll-enabled .scroll-step-section {
    display: none;
}

html.step-scroll-enabled .scroll-step-section.active {
    display: block;
}

/* Per chi è: sfondo con overlay */
#per-chi-e-section {
    background-image: url('../img/per_chi.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#per-chi-e-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
    pointer-events: none;
}

#per-chi-e-section > .container {
    position: relative;
    z-index: 1;
}

/* Titolo responsive: desktop vs mobile */
.desktop-only { display: inline; }
.mobile-only { display: none; }
@media (max-width: 768px) {
    .desktop-only { display: none; }
    .mobile-only { display: inline; }
}

/* Sezioni founder split solo mobile: nascoste di default */
.founder-mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    html.step-scroll-enabled .founder-mobile-only.active {
        display: block !important;
    }
    html.step-scroll-enabled #founder-section {
        display: none !important;
    }
    /* Sezioni centrate in verticale, contenuto intero visibile, niente scroll interno */
    html.step-scroll-enabled .scroll-step-section {
        overflow-y: hidden;
        overflow-x: hidden;
    }
    html.step-scroll-enabled .scroll-step-section > .container {
        overflow-y: hidden;
        overflow-x: hidden;
        justify-content: flex-start;
        padding-top: 10px;
    }
    html.step-scroll-enabled #per-chi-e-section > .container {
        padding-top: 100px;
    }
    html.step-scroll-enabled #founder-form-section .founder-mobile-form-container {
        padding-top: 0;
        margin-top: -50px;
    }
    /* Come funziona: su mobile nasconde il badge (mostrato in sezione separata) */
    #come-funziona-section .include-highlights {
        display: none !important;
    }
    html.step-scroll-enabled #come-funziona-section > .container {
        margin-top: -20px;
    }
    /* Ultima sezione: titolo/CTA in alto, footer in basso, tutto in 100vh */
    html.step-scroll-enabled #pronto-a-partire-section {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh;
    }
    html.step-scroll-enabled #pronto-a-partire-section .site-footer {
        flex-shrink: 0;
        margin-top: 0;
        padding: var(--spacing-sm) 0;
    }
    /* Footer solo nell'ultima sezione (mobile): quando attiva, layout flex e scroll per raggiungere il footer */
    html.step-scroll-enabled .scroll-step-section.has-footer.active {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    html.step-scroll-enabled .scroll-step-section.has-footer.active > .container {
        flex: 0 0 auto;
        overflow: visible;
    }
    html.step-scroll-enabled .scroll-step-section.has-footer .site-footer {
        flex-shrink: 0;
        margin-top: auto;
        padding: var(--spacing-md) 0;
    }
    /* Step 1: badge + testo in una schermata, ridimensionati */
    .founder-mobile-intro-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-sm);
    }
    .founder-mobile-badge .founder-badge-content {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .founder-mobile-badge .founder-badge-title {
        font-size: 0.95rem;
    }
    .founder-mobile-badge .founder-badge-counter .number {
        font-size: 1.25rem;
    }
    .founder-mobile-explanation {
        font-size: 0.9rem;
        margin: 0;
    }
    .founder-mobile-explanation p {
        margin-bottom: var(--spacing-sm) !important;
        font-size: 0.9rem !important;
    }
    /* Step 2: form in una schermata, tutto visibile senza scroll interno */
    .founder-mobile-form-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        padding: var(--spacing-xs);
    }
    .founder-mobile-form-container .form-section {
        padding: var(--spacing-sm);
        overflow: visible;
    }
    .founder-mobile-form-container .form-title {
        font-size: 1rem;
        margin-bottom: var(--spacing-xs);
    }
    .founder-mobile-form-container .form-subtitle {
        font-size: 0.75rem;
        margin-bottom: var(--spacing-sm);
    }
    .founder-mobile-form-container .form-fields-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 6px;
    }
    .founder-mobile-form-container .form-group {
        margin-bottom: 4px;
    }
    .founder-mobile-form-container .form-group label {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }
    .founder-mobile-form-container .form-group input,
    .founder-mobile-form-container .form-group select,
    .founder-mobile-form-container .form-group textarea {
        min-height: 32px;
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    .founder-mobile-form-container .form-group textarea {
        min-height: 44px;
    }
    .founder-mobile-form-container .form-group-full {
        grid-column: 1 / -1;
    }
    .founder-mobile-form-container .checkbox-group {
        font-size: 0.75rem;
    }
    .founder-mobile-form-container .btn {
        margin-top: 6px;
        padding: 8px var(--spacing-sm);
        font-size: 0.85rem;
    }
}

/* Target rivelati dalle particelle */
.reveal-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-target.revealed {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    color: var(--dark-text);
    letter-spacing: -0.02em;
    position: relative; /* Per ancorare le particelle */
    z-index: 1; /* Assicura che il testo sia sopra le particelle */
}

.section-subtitle {
    text-align: center;
    color: var(--dark-text-muted);
    margin-bottom: var(--spacing-lg);
    font-size: 1.125rem;
    font-weight: 400;
}

/* Grid */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

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

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Cards */
.card {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    border-color: var(--elo-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(81, 158, 243, 0.2);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    background: rgba(81, 158, 243, 0.1);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--dark-text);
}

.card ul {
    list-style: none;
    padding-left: 0;
}

.card li {
    padding: var(--spacing-xs) 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--dark-text-muted);
    font-size: 14px;
}

.card li {
    padding-left: 2rem;
}

.card li:before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7071 4.70711C15.0976 4.31658 15.0976 3.68342 14.7071 3.29289C14.3166 2.90237 13.6834 2.90237 13.2929 3.29289L6.5 10.0858L4.70711 8.29289C4.31658 7.90237 3.68342 7.90237 3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L5.79289 12.2071C6.18342 12.5976 6.81658 12.5976 7.20711 12.2071L14.7071 4.70711Z' fill='%23519ef3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Template flip cards (Esempi Template) */
.template-flip-card {
    perspective: 1000px;
    cursor: pointer;
    aspect-ratio: 1080 / 1920;
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}
.template-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.template-flip-front,
.template-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
}
.template-flip-front {
    z-index: 1;
}
.template-flip-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.template-flip-back {
    transform: rotateY(180deg);
    background: var(--dark-card);
    padding: var(--spacing-md);
    justify-content: center;
    align-items: center;
}
.template-flip-back > * {
    width: 95%;
    max-width: 95%;
}
.template-flip-back .card-title {
    margin-bottom: var(--spacing-sm);
}
.template-flip-back ul {
    list-style: none;
    padding-left: 0;
}
.template-flip-back li {
    padding: var(--spacing-xs) 0;
    padding-left: 2rem;
    position: relative;
    color: var(--dark-text-muted);
    font-size: 14px;
}
.template-flip-back li:before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7071 4.70711C15.0976 4.31658 15.0976 3.68342 14.7071 3.29289C14.3166 2.90237 13.6834 2.90237 13.2929 3.29289L6.5 10.0858L4.70711 8.29289C4.31658 7.90237 3.68342 7.90237 3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L5.79289 12.2071C6.18342 12.5976 6.81658 12.5976 7.20711 12.2071L14.7071 4.70711Z' fill='%23519ef3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media (min-width: 769px) {
    .template-flip-card:hover .template-flip-inner {
        transform: rotateY(180deg);
    }
    /* Come funziona: contenuto alzato di 60px verso il top su desktop */
    html.step-scroll-enabled #come-funziona-section > .container {
        margin-top: -60px;
    }
    /* Badge Cosa include su desktop: niente spazio vuoto sopra "Tutto incluso" */
    #come-funziona-section .include-highlights {
        justify-content: flex-start;
        min-height: auto;
    }
}

/* Mobile + Tablet portrait: flip su tap, layout compatto retro card */
@media (max-width: 1024px) {
    .template-flip-card.flipped .template-flip-inner {
        transform: rotateY(180deg);
    }
    .template-flip-back {
        padding: 8px var(--spacing-md) var(--spacing-md);
        justify-content: flex-start;
    }
    .template-flip-back .card-title {
        margin-bottom: 6px;
    }
    .template-flip-back li {
        padding: 2px 0;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding-left: 0;
    }
    .template-flip-back li:before {
        flex-shrink: 0;
        position: static;
        width: 18px;
        height: 18px;
        margin-top: 0.1em;
    }
    /* Esempi Template: carousel orizzontale anche su tablet portrait */
    #esempi-template-section .grid-3 {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-md);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--spacing-sm);
        margin-left: calc(-1 * var(--spacing-sm));
        margin-right: calc(-1 * var(--spacing-sm));
        padding-left: 12.5%;
        padding-right: 12.5%;
        scroll-padding-inline: 12.5%;
    }
    #esempi-template-section .grid-3 .template-flip-card {
        flex: 0 0 75%;
        min-width: 200px;
        aspect-ratio: 1080 / 1920;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    #esempi-template-section .template-flip-back .card-title {
        font-size: 1rem;
    }
    #esempi-template-section .template-flip-back li {
        font-size: 0.8rem;
    }
}

/* Hint tap: doppio pulse + scritta TAP (cyan) - parte bassa badge */
.template-flip-card.template-hint-active .template-flip-front::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}
.template-tap-hint {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.template-tap-hint.visible {
    opacity: 1;
    visibility: visible;
}
.template-tap-hint .tap-hint-pulse {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #00d4ff;
    box-shadow:
        0 0 8px rgba(0, 212, 255, 0.6),
        0 0 16px rgba(0, 212, 255, 0.4);
    animation: tap-hint-pulse-then-zoom 6s ease-in-out infinite;
}
.template-tap-hint .tap-hint-text {
    font-size: 1rem;
    font-weight: 600;
    color: #00d4ff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
    letter-spacing: 0.1em;
    opacity: 0.68;
}
@keyframes tap-hint-pulse-then-zoom {
    /* Prima: doppio pulse (0-33%) */
    0%, 8% { transform: scale(0.4); opacity: 0; }
    15% { transform: scale(1); opacity: 0.6; }
    22% { transform: scale(1.1); opacity: 0.3; }
    28% { transform: scale(0.4); opacity: 0; }
    33% { transform: scale(0.4); opacity: 0; }
    40% { transform: scale(1); opacity: 0.6; }
    47% { transform: scale(1.1); opacity: 0.3; }
    /* Poi: zoom in/out lento (50-100%) */
    50% { transform: scale(1); opacity: 0.5; }
    65% { transform: scale(1.06); opacity: 0.5; }
    80% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    .template-tap-hint {
        display: none !important;
    }
}

/* Steps */
.steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}

.step {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    transition: all 0.3s ease;
}

.step:hover {
    border-color: var(--elo-primary);
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.1);
}

.step-number {
    background: var(--elo-gradient);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.3);
}

.step-content h3 {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xs);
    color: var(--dark-text);
    font-weight: 600;
}

.step-content p {
    color: var(--dark-text-muted);
    font-size: 14px;
}

/* Include highlights (Tutto incluso) - badge grigio, bordo verde */
.include-highlights {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    min-height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--dark-card);
    border: 2px solid var(--color-success);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.include-highlights-title {
    margin-bottom: var(--spacing-sm);
    color: var(--dark-text);
    font-weight: 600;
    font-size: 1.35rem;
}
.include-highlights ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
}
.include-highlights li {
    padding: var(--spacing-xs) 0;
    color: var(--dark-text-muted);
    font-size: 1rem;
}

/* Include/Exclude (legacy - exclude-box non più usato) */
.include-exclude {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.include-box, .exclude-box {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-lg);
    border: 1px solid;
}

.include-box {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--color-success);
}

.exclude-box {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--color-error);
}

.include-box h3, .exclude-box h3 {
    margin-bottom: var(--spacing-sm);
    color: var(--dark-text);
    font-weight: 600;
}

.include-box ul, .exclude-box ul {
    list-style: none;
    padding-left: 0;
}

.include-box li, .exclude-box li {
    padding: var(--spacing-xs) 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--dark-text-muted);
    font-size: 14px;
}

.include-box li:before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7071 4.70711C15.0976 4.31658 15.0976 3.68342 14.7071 3.29289C14.3166 2.90237 13.6834 2.90237 13.2929 3.29289L6.5 10.0858L4.70711 8.29289C4.31658 7.90237 3.68342 7.90237 3.29289 8.29289C2.90237 8.68342 2.90237 9.31658 3.29289 9.70711L5.79289 12.2071C6.18342 12.5976 6.81658 12.5976 7.20711 12.2071L14.7071 4.70711Z' fill='%2310b981'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.exclude-box li:before {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.7071 4.29289C14.0976 4.68342 14.0976 5.31658 13.7071 5.70711L10.4142 9L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L9 10.4142L5.70711 13.7071C5.31658 14.0976 4.68342 14.0976 4.29289 13.7071C3.90237 13.3166 3.90237 12.6834 4.29289 12.2929L7.58579 9L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L9 7.58579L12.2929 4.29289C12.6834 3.90237 13.3166 3.90237 13.7071 4.29289Z' fill='%23ef4444'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* FAQ */
.faq {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--elo-primary);
}

.faq-question {
    padding: var(--spacing-md);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(81, 158, 243, 0.05);
    transition: background 0.2s ease;
    color: var(--dark-text);
}

.faq-question:hover {
    background: rgba(81, 158, 243, 0.1);
}

.faq-answer {
    padding: 0 var(--spacing-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--dark-text-muted);
    font-size: 14px;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: var(--spacing-md);
}

.faq-toggle {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

/* Slot Counter */
.slot-counter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}

.slot-cta {
    margin-top: var(--spacing-sm);
    width: 100%;
    text-align: center;
}

.slot-cta .btn {
    width: 100%;
    max-width: 400px;
}

.slot-counter {
    background: var(--dark-card);
    border: 2px solid var(--elo-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    text-align: center;
    width: 100%;
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.2);
}

.slot-counter .number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--elo-primary);
    display: block;
    line-height: 1;
}

.slot-counter .label {
    color: var(--dark-text-muted);
    font-size: 1.125rem;
    margin-top: var(--spacing-xs);
}

/* Slot Counter Ridotto */
.slot-counter-small {
    padding: var(--spacing-sm);
    max-width: 300px;
}

.slot-counter-small .number {
    font-size: 2rem;
}

.slot-counter-small .label {
    font-size: 1rem;
}

.slot-cta {
    margin-top: var(--spacing-md);
    width: 100%;
    text-align: center;
}

.slot-cta .btn {
    width: 100%;
    max-width: 400px;
}

/* CTA Group nella sezione Slot Counter - Desktop orizzontale come hero */
.slot-cta-group {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.slot-cta-group .btn {
    flex: 0 1 auto;
    min-width: auto;
    width: auto;
    max-width: none;
}

@media (max-width: 768px) {
    .slot-cta-group {
        flex-direction: column;
    }
    
    .slot-cta-group .btn {
        width: 100%;
        max-width: 400px;
    }
}

/* Forms - Stile UGO/ELO */
.form-section {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-lg) 0;
    box-shadow: var(--shadow-dark);
}

/* Glassmorphism effect per form */
.form-glass {
    background: rgba(31, 31, 31, 0.6) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(81, 158, 243, 0.2) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(81, 158, 243, 0.1) !important;
}

/* Fallback per browser senza backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .form-glass {
        background: rgba(31, 31, 31, 0.95) !important;
    }
}

/* Stato iniziale nascosto per form morph */
.form-morph-target {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
}

@media (max-width: 768px) {
    .form-morph-target {
        transition: opacity 0.45s ease-out, transform 0.45s ease-out, filter 0.45s ease-out;
    }
}

.form-morph-target.revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Layer per particelle morph */
#form-morph-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

#form-morph-layer.active {
    pointer-events: auto;
}

/* Particelle morph individuali */
.morph-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #519ef3;
    box-shadow: 
        0 0 4px rgba(81, 158, 243, 1),
        0 0 8px rgba(81, 158, 243, 0.8),
        0 0 16px rgba(81, 158, 243, 0.5);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

.morph-particle.animating {
    opacity: 1;
}

.morph-particle.fading {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Layer particellare per le altre sezioni (card/badge/FAQ/CTA) */
.section-particles-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

/* Particelle morph per sezioni (riusano stile simile al form) */
.section-morph-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #519ef3;
    box-shadow:
        0 0 4px rgba(81, 158, 243, 1),
        0 0 8px rgba(81, 158, 243, 0.8),
        0 0 16px rgba(81, 158, 243, 0.5);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

/* Particelle per rigagnolo FAQ */
.faq-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #519ef3;
    box-shadow:
        0 0 3px rgba(81, 158, 243, 0.9),
        0 0 6px rgba(81, 158, 243, 0.6);
    opacity: 0;
    will-change: transform, opacity;
}

/* Layer per outline finale CTA */
.final-outline-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Bordo ciano finale quando il bordo è stato rivelato */
#pronto-a-partire-section.final-outline-revealed {
    border: 1px solid var(--elo-primary);
}

/* Rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .form-morph-target {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        transition: none;
    }
    
    .morph-particle {
        display: none;
    }
    
    #form-morph-layer {
        display: none;
    }
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-text);
    font-size: 14px;
}

.form-group label .required {
    color: var(--color-error);
    margin-left: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 12px;
    background: transparent;
    border: 1px solid var(--elo-primary);
    border-radius: var(--border-radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--dark-text);
    transition: all 0.2s ease;
    min-height: 48px;
    box-sizing: border-box;
}

.form-group select {
    background-color: var(--dark-card);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--dark-text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--elo-secondary);
    box-shadow: 0 0 0 3px rgba(81, 158, 243, 0.2);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-color: var(--dark-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    border-color: var(--elo-primary);
    color: var(--dark-text);
}

.form-group select option {
    background-color: var(--dark-card);
    color: var(--dark-text);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
    padding: 12px;
}

.form-group .checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.form-group .checkbox-group input[type="checkbox"] {
    width: auto;
    margin-top: 0.25rem;
    accent-color: var(--elo-primary);
    cursor: pointer;
}

.form-group .checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.form-group .checkbox-group a {
    color: var(--elo-primary);
    text-decoration: none;
}

.form-group .checkbox-group a:hover {
    text-decoration: underline;
}

.form-group .error {
    color: var(--color-error);
    font-size: 0.875rem;
    margin-top: var(--spacing-xs);
}

/* Alert Messages */
.alert {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    font-size: 14px;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

/* Footer */
.site-footer {
    background: var(--dark-card);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--dark-text-muted);
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-xl);
}

.site-footer .footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.site-footer .footer-col {
    text-align: left;
}

.site-footer .footer-social {
    text-align: right;
}

.site-footer .footer-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: var(--spacing-sm);
}

.site-footer .footer-col p {
    margin: 0 0 var(--spacing-xs);
    font-size: 0.9rem;
}

.site-footer .footer-social-icons {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.site-footer .footer-social-icons a {
    display: inline-block;
    transition: opacity 0.2s ease;
}

.site-footer .footer-social-icons a:hover {
    opacity: 0.8;
}

.site-footer .footer-social-icons img {
    display: block;
    width: 32px;
    height: 32px;
}

.site-footer a {
    color: var(--elo-primary);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .site-footer .footer-columns {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .site-footer .footer-col,
    .site-footer .footer-social {
        text-align: center;
    }
    .site-footer .footer-social-icons {
        justify-content: center;
    }
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--dark-text);
}

.admin-table th {
    background: rgba(81, 158, 243, 0.1);
    font-weight: 600;
    color: var(--dark-text);
}

.admin-table tr:hover {
    background: rgba(81, 158, 243, 0.05);
}

.admin-filters {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.admin-filters form {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-filters .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        height: 100vh;
        padding: 0;
    }
    .hero.hero-with-form {
        height: auto;
        min-height: auto;
    }
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero .subtitle {
        font-size: 1rem;
    }
    
    /* Video logo centrato perfettamente, nessun overflow laterale */
    .hero-video {
        width: 100%;
        max-width: 100vw;
        height: auto;
        object-fit: contain;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* CTA alzato di 80px verso l'alto (margin-top ridotto di 80px) */
    .hero .cta-group {
        margin-top: 420px;
    }
    
    .section-title {
        font-size: 1.25rem;
    }
    
    .cta-group {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .header-content {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .step {
        flex-direction: column;
        text-align: center;
    }
    
    .step-number {
        margin: 0 auto;
    }
    
    .admin-table {
        font-size: 0.875rem;
    }
    
    .admin-table th,
    .admin-table td {
        padding: var(--spacing-xs);
    }
    
    .form-section {
        padding: var(--spacing-md);
    }
    
    /* Per Chi È: un badge per volta, carousel verticale (mobile) */
    #per-chi-e-section .grid-3 {
        display: block;
        overflow: hidden;
        height: 45vh;
        min-height: 200px;
    }
    #per-chi-e-section .per-chi-e-track {
        display: flex;
        flex-direction: column;
        height: 300%;
        transition: transform 0.35s ease-out;
    }
    #per-chi-e-section .per-chi-e-track .card {
        flex: 0 0 33.333%;
        min-height: 0;
        padding: var(--spacing-sm);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #per-chi-e-section .card-title {
        font-size: 0.95rem;
        margin-bottom: var(--spacing-xs);
    }
    #per-chi-e-section .card p {
        font-size: 0.85rem;
        margin: 0;
    }
    #per-chi-e-section .card ul {
        margin: 0;
    }
    #per-chi-e-section .card li {
        font-size: 0.75rem;
        padding: 2px 0 2px 1.25rem;
    }
    #per-chi-e-section .section-subtitle {
        margin-bottom: var(--spacing-sm);
        font-size: 0.9rem;
    }
    
    /* Esempi Template: slide centrata, peek sx/dx, slideshow orizzontale + flip su tap (mobile) */
    #esempi-template-section .grid-3 {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-md);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--spacing-sm);
        margin-left: calc(-1 * var(--spacing-sm));
        margin-right: calc(-1 * var(--spacing-sm));
        padding-left: 12.5%;
        padding-right: 12.5%;
        scroll-padding-inline: 12.5%;
    }
    #esempi-template-section .grid-3 .template-flip-card {
        flex: 0 0 75%;
        min-width: 200px;
        aspect-ratio: 1080 / 1920;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    #esempi-template-section .template-flip-back .card-title {
        font-size: 1rem;
    }
    #esempi-template-section .template-flip-back li {
        font-size: 0.8rem;
    }
    
    /* Come Funziona: ridurre 3 badge in una schermata */
    #come-funziona-section .steps {
        gap: var(--spacing-sm);
        max-width: 100%;
    }
    #come-funziona-section .step {
        padding: var(--spacing-sm) var(--spacing-md);
        flex-direction: row;
        text-align: left;
    }
    #come-funziona-section .step-number {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.95rem;
        margin: 0;
        flex-shrink: 0;
    }
    #come-funziona-section .step-content {
        flex: 1;
        min-width: 0;
    }
    #come-funziona-section .step-content h3 {
        font-size: 1rem;
    }
    #come-funziona-section .step-content p {
        font-size: 0.8rem;
    }
    /* Come funziona: badge collassabili su mobile */
    #come-funziona-section .step {
        cursor: pointer;
    }
    #come-funziona-section .step-content p {
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding-top: 0;
        transition: max-height 0.3s ease;
    }
    #come-funziona-section .step.expanded .step-content p {
        max-height: 300px;
        padding-top: var(--spacing-xs);
    }
    #come-funziona-section .step-content h3 {
        position: relative;
        padding-right: 1.5rem;
    }
    #come-funziona-section .step-content h3::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--dark-text-muted);
        transition: transform 0.25s ease;
    }
    #come-funziona-section .step.expanded .step-content h3::after {
        transform: translateY(-50%) rotate(180deg);
    }
    
    /* Cosa include (mobile): badge centrato, distanze ridotte per visibilità completa */
    #cosa-include-section {
        padding-top: var(--spacing-xs);
        padding-bottom: var(--spacing-xs);
    }
    #cosa-include-section .section-title {
        margin-bottom: var(--spacing-xs);
    }
    html.step-scroll-enabled #cosa-include-section > .container,
    .cosa-include-mobile-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        min-height: 100vh;
        padding-top: var(--spacing-sm);
    }
    #cosa-include-section .include-highlights-mobile {
        margin-top: var(--spacing-xs);
    }
    .include-highlights-mobile {
        width: 100%;
        max-width: 360px;
        min-height: 65vh;
        padding: var(--spacing-md);
    }
    #cosa-include-section .include-highlights-mobile li {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-xs);
    }
    
    .section {
        padding: var(--spacing-md) 0;
    }
    
    .form-section {
        padding: var(--spacing-md);
    }
    
    .hero {
        height: 100vh;
        padding: 0;
    }
    .hero.hero-with-form {
        height: auto;
        min-height: auto;
    }
    .hero h1 {
        font-size: 1.75rem;
    }
    .hero .highlight {
        font-size: 0.875rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .hero .cta-group {
        flex-direction: column;
        width: 100%;
        margin-top: 380px;
    }
    
    .hero .cta-group .btn {
        width: 100%;
    }
    
    /* Video centrato, nessun overflow */
    .hero-video {
        width: 100%;
        max-width: 100vw;
        object-fit: contain;
    }
}

/* ===== SCROLL ANIMATIONS - Stile Antigravity ===== */

/* Elementi nascosti di default */
.scroll-fade-in,
.scroll-slide-up,
.scroll-slide-left,
.scroll-slide-right,
.scroll-scale {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Fade In */
.scroll-fade-in {
    transform: translateY(30px);
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Up */
.scroll-slide-up {
    transform: translateY(50px);
}

.scroll-slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Left */
.scroll-slide-left {
    transform: translateX(-50px);
}

.scroll-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Right */
.scroll-slide-right {
    transform: translateX(50px);
}

.scroll-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale */
.scroll-scale {
    transform: scale(0.9);
}

.scroll-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Delay per animazioni stagger */
.scroll-delay-1 { transition-delay: 0.1s; }
.scroll-delay-2 { transition-delay: 0.2s; }
.scroll-delay-3 { transition-delay: 0.3s; }
.scroll-delay-4 { transition-delay: 0.4s; }
.scroll-delay-5 { transition-delay: 0.5s; }

/* Disabilita animazioni su dispositivi con preferenza reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade-in,
    .scroll-slide-up,
    .scroll-slide-left,
    .scroll-slide-right,
    .scroll-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== GLOW PARTICLES ANIMATION - Puntini Cyano ELO ===== */

/* Particelle ancorate ai titoli delle sezioni */
.floating-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
    z-index: -1; /* Dietro ai titoli */
    background: #519ef3;
    box-shadow: 0 0 3px rgba(81, 158, 243, 0.8);
    will-change: transform, opacity;
}

/* Fade in quando appaiono */
.floating-particles.fade-in {
    animation: particlesFadeIn 0.3s ease-out forwards;
}

/* Visibile */
.floating-particles.visible {
    opacity: 1;
}

/* Fade out quando scompaiono */
.floating-particles.fade-out {
    animation: particlesFadeOut 0.3s ease-out forwards;
}

/* Durante l'esplosione */
.floating-particles.exploding {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* Animazioni fade */
@keyframes particlesFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes particlesFadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Compatibilità con elemento singolo (se ancora presente) */
#floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
    z-index: 9999;
    background: #519ef3;
    box-shadow: 0 0 3px rgba(81, 158, 243, 0.8);
    will-change: transform, opacity;
    display: none; /* Nascondi elemento singolo, usiamo .floating-particles */
}

/* Particelle esplosive individuali */
.explosion-particle {
    position: fixed;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #519ef3;
    box-shadow: 
        0 0 3px rgba(81, 158, 243, 1),
        0 0 6px rgba(81, 158, 243, 0.8),
        0 0 12px rgba(81, 158, 243, 0.4);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    animation: explodeParticle var(--duration, 800ms) ease-out forwards;
    opacity: 1;
    will-change: transform, opacity;
}

@keyframes explodeParticle {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 1;
    }
    30% {
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--delta-x, 0px), var(--delta-y, 0px)) scale(0.2);
        opacity: 0;
    }
}

/* Elementi con particelle luminose (per compatibilità) */
.glow-particles {
    position: relative;
    overflow: visible;
}

/* Container per le particelle - ancorate ai titoli */
.floating-particles::before,
.floating-particles::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    opacity: inherit;
    transform-origin: center;
    background: #519ef3;
    box-shadow: 0 0 3px rgba(81, 158, 243, 0.8);
}

/* Container per le particelle - elemento singolo (compatibilità) */
#floating-particles::before,
#floating-particles::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    opacity: inherit;
    transform-origin: center;
    background: #519ef3;
    box-shadow: 0 0 3px rgba(81, 158, 243, 0.8);
}

/* Container per le particelle (per compatibilità con elementi statici) */
.glow-particles::before,
.glow-particles::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    transform-origin: center;
    background: #519ef3;
    box-shadow: 0 0 4px rgba(81, 158, 243, 0.8);
}

/* Particelle esterne - ruotano in senso orario (ancorate ai titoli) - dimensioni ridotte */
.floating-particles::before {
    box-shadow: 
        /* Cerchio esterno - 16 particelle principali - dimensioni ridotte */
        0 -45px 0 0.5px #519ef3, 0 -45px 0 0 rgba(81, 158, 243, 0.9),
        31.82px -31.82px 0 0.5px rgba(81, 158, 243, 0.95), 31.82px -31.82px 0 0 rgba(81, 158, 243, 0.85),
        45px 0 0 0.5px rgba(81, 158, 243, 0.9), 45px 0 0 0 rgba(81, 158, 243, 0.8),
        31.82px 31.82px 0 0.5px rgba(81, 158, 243, 0.85), 31.82px 31.82px 0 0 rgba(81, 158, 243, 0.75),
        0 45px 0 0.5px rgba(81, 158, 243, 0.8), 0 45px 0 0 rgba(81, 158, 243, 0.7),
        -31.82px 31.82px 0 0.5px rgba(81, 158, 243, 0.75), -31.82px 31.82px 0 0 rgba(81, 158, 243, 0.65),
        -45px 0 0 0.5px rgba(81, 158, 243, 0.7), -45px 0 0 0 rgba(81, 158, 243, 0.6),
        -31.82px -31.82px 0 0.5px rgba(81, 158, 243, 0.65), -31.82px -31.82px 0 0 rgba(81, 158, 243, 0.55),
        /* Cerchio intermedio - 12 particelle - dimensioni ridotte */
        0 -34px 0 0.5px rgba(81, 158, 243, 0.9), 0 -34px 0 0 rgba(81, 158, 243, 0.8),
        29.24px -16.88px 0 0.5px rgba(81, 158, 243, 0.85), 29.24px -16.88px 0 0 rgba(81, 158, 243, 0.75),
        29.24px 16.88px 0 0.5px rgba(81, 158, 243, 0.8), 29.24px 16.88px 0 0 rgba(81, 158, 243, 0.7),
        0 34px 0 0.5px rgba(81, 158, 243, 0.75), 0 34px 0 0 rgba(81, 158, 243, 0.65),
        -29.24px 16.88px 0 0.5px rgba(81, 158, 243, 0.7), -29.24px 16.88px 0 0 rgba(81, 158, 243, 0.6),
        -29.24px -16.88px 0 0.5px rgba(81, 158, 243, 0.65), -29.24px -16.88px 0 0 rgba(81, 158, 243, 0.55),
        /* Particelle aggiuntive per densità - dimensioni ridotte */
        22.5px -22.5px 0 0.5px rgba(81, 158, 243, 0.7), 22.5px -22.5px 0 0 rgba(81, 158, 243, 0.6),
        -22.5px 22.5px 0 0.5px rgba(81, 158, 243, 0.65), -22.5px 22.5px 0 0 rgba(81, 158, 243, 0.55),
        22.5px 22.5px 0 0.5px rgba(81, 158, 243, 0.6), 22.5px 22.5px 0 0 rgba(81, 158, 243, 0.5),
        -22.5px -22.5px 0 0.5px rgba(81, 158, 243, 0.55), -22.5px -22.5px 0 0 rgba(81, 158, 243, 0.45),
        /* Particelle più piccole sparse - dimensioni ridotte */
        0 -26px 0 0.3px rgba(81, 158, 243, 0.5), 0 -26px 0 0 rgba(81, 158, 243, 0.4),
        18.38px -18.38px 0 0.3px rgba(81, 158, 243, 0.45), 18.38px -18.38px 0 0 rgba(81, 158, 243, 0.35),
        26px 0 0 0.3px rgba(81, 158, 243, 0.4), 26px 0 0 0 rgba(81, 158, 243, 0.3),
        18.38px 18.38px 0 0.3px rgba(81, 158, 243, 0.35), 18.38px 18.38px 0 0 rgba(81, 158, 243, 0.25),
        0 26px 0 0.3px rgba(81, 158, 243, 0.3), 0 26px 0 0 rgba(81, 158, 243, 0.2),
        -18.38px 18.38px 0 0.3px rgba(81, 158, 243, 0.25), -18.38px 18.38px 0 0 rgba(81, 158, 243, 0.15),
        -26px 0 0 0.3px rgba(81, 158, 243, 0.2), -26px 0 0 0 rgba(81, 158, 243, 0.1),
        -18.38px -18.38px 0 0.3px rgba(81, 158, 243, 0.15), -18.38px -18.38px 0 0 rgba(81, 158, 243, 0.1);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesOuter 12s linear infinite;
    z-index: -2; /* Ancora più dietro */
    filter: blur(0.2px);
}

/* Particelle esterne - ruotano in senso orario (elemento singolo - compatibilità) */
#floating-particles::before {
    box-shadow: 
        /* Cerchio esterno - 16 particelle principali - dimensioni ridotte */
        0 -45px 0 0.5px #519ef3, 0 -45px 0 0 rgba(81, 158, 243, 0.9),
        31.82px -31.82px 0 0.5px rgba(81, 158, 243, 0.95), 31.82px -31.82px 0 0 rgba(81, 158, 243, 0.85),
        45px 0 0 0.5px rgba(81, 158, 243, 0.9), 45px 0 0 0 rgba(81, 158, 243, 0.8),
        31.82px 31.82px 0 0.5px rgba(81, 158, 243, 0.85), 31.82px 31.82px 0 0 rgba(81, 158, 243, 0.75),
        0 45px 0 0.5px rgba(81, 158, 243, 0.8), 0 45px 0 0 rgba(81, 158, 243, 0.7),
        -31.82px 31.82px 0 0.5px rgba(81, 158, 243, 0.75), -31.82px 31.82px 0 0 rgba(81, 158, 243, 0.65),
        -45px 0 0 0.5px rgba(81, 158, 243, 0.7), -45px 0 0 0 rgba(81, 158, 243, 0.6),
        -31.82px -31.82px 0 0.5px rgba(81, 158, 243, 0.65), -31.82px -31.82px 0 0 rgba(81, 158, 243, 0.55),
        /* Cerchio intermedio - 12 particelle - dimensioni ridotte */
        0 -34px 0 0.5px rgba(81, 158, 243, 0.9), 0 -34px 0 0 rgba(81, 158, 243, 0.8),
        29.24px -16.88px 0 0.5px rgba(81, 158, 243, 0.85), 29.24px -16.88px 0 0 rgba(81, 158, 243, 0.75),
        29.24px 16.88px 0 0.5px rgba(81, 158, 243, 0.8), 29.24px 16.88px 0 0 rgba(81, 158, 243, 0.7),
        0 34px 0 0.5px rgba(81, 158, 243, 0.75), 0 34px 0 0 rgba(81, 158, 243, 0.65),
        -29.24px 16.88px 0 0.5px rgba(81, 158, 243, 0.7), -29.24px 16.88px 0 0 rgba(81, 158, 243, 0.6),
        -29.24px -16.88px 0 0.5px rgba(81, 158, 243, 0.65), -29.24px -16.88px 0 0 rgba(81, 158, 243, 0.55),
        /* Particelle aggiuntive per densità - dimensioni ridotte */
        22.5px -22.5px 0 0.5px rgba(81, 158, 243, 0.7), 22.5px -22.5px 0 0 rgba(81, 158, 243, 0.6),
        -22.5px 22.5px 0 0.5px rgba(81, 158, 243, 0.65), -22.5px 22.5px 0 0 rgba(81, 158, 243, 0.55),
        22.5px 22.5px 0 0.5px rgba(81, 158, 243, 0.6), 22.5px 22.5px 0 0 rgba(81, 158, 243, 0.5),
        -22.5px -22.5px 0 0.5px rgba(81, 158, 243, 0.55), -22.5px -22.5px 0 0 rgba(81, 158, 243, 0.45),
        /* Particelle più piccole sparse - dimensioni ridotte */
        0 -26px 0 0.3px rgba(81, 158, 243, 0.5), 0 -26px 0 0 rgba(81, 158, 243, 0.4),
        18.38px -18.38px 0 0.3px rgba(81, 158, 243, 0.45), 18.38px -18.38px 0 0 rgba(81, 158, 243, 0.35),
        26px 0 0 0.3px rgba(81, 158, 243, 0.4), 26px 0 0 0 rgba(81, 158, 243, 0.3),
        18.38px 18.38px 0 0.3px rgba(81, 158, 243, 0.35), 18.38px 18.38px 0 0 rgba(81, 158, 243, 0.25),
        0 26px 0 0.3px rgba(81, 158, 243, 0.3), 0 26px 0 0 rgba(81, 158, 243, 0.2),
        -18.38px 18.38px 0 0.3px rgba(81, 158, 243, 0.25), -18.38px 18.38px 0 0 rgba(81, 158, 243, 0.15),
        -26px 0 0 0.3px rgba(81, 158, 243, 0.2), -26px 0 0 0 rgba(81, 158, 243, 0.1),
        -18.38px -18.38px 0 0.3px rgba(81, 158, 243, 0.15), -18.38px -18.38px 0 0 rgba(81, 158, 243, 0.1);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesOuter 12s linear infinite;
    z-index: -1;
    filter: blur(0.2px);
}

/* Particelle esterne - ruotano in senso orario (per compatibilità) */
.glow-particles::before {
    box-shadow: 
        /* Cerchio esterno - 16 particelle principali */
        0 -60px 0 1px #519ef3, 0 -60px 0 0 rgba(81, 158, 243, 0.9),
        42.43px -42.43px 0 1px rgba(81, 158, 243, 0.95), 42.43px -42.43px 0 0 rgba(81, 158, 243, 0.85),
        60px 0 0 1px rgba(81, 158, 243, 0.9), 60px 0 0 0 rgba(81, 158, 243, 0.8),
        42.43px 42.43px 0 1px rgba(81, 158, 243, 0.85), 42.43px 42.43px 0 0 rgba(81, 158, 243, 0.75),
        0 60px 0 1px rgba(81, 158, 243, 0.8), 0 60px 0 0 rgba(81, 158, 243, 0.7),
        -42.43px 42.43px 0 1px rgba(81, 158, 243, 0.75), -42.43px 42.43px 0 0 rgba(81, 158, 243, 0.65),
        -60px 0 0 1px rgba(81, 158, 243, 0.7), -60px 0 0 0 rgba(81, 158, 243, 0.6),
        -42.43px -42.43px 0 1px rgba(81, 158, 243, 0.65), -42.43px -42.43px 0 0 rgba(81, 158, 243, 0.55),
        /* Cerchio intermedio - 12 particelle */
        0 -45px 0 1px rgba(81, 158, 243, 0.9), 0 -45px 0 0 rgba(81, 158, 243, 0.8),
        38.97px -22.5px 0 1px rgba(81, 158, 243, 0.85), 38.97px -22.5px 0 0 rgba(81, 158, 243, 0.75),
        38.97px 22.5px 0 1px rgba(81, 158, 243, 0.8), 38.97px 22.5px 0 0 rgba(81, 158, 243, 0.7),
        0 45px 0 1px rgba(81, 158, 243, 0.75), 0 45px 0 0 rgba(81, 158, 243, 0.65),
        -38.97px 22.5px 0 1px rgba(81, 158, 243, 0.7), -38.97px 22.5px 0 0 rgba(81, 158, 243, 0.6),
        -38.97px -22.5px 0 1px rgba(81, 158, 243, 0.65), -38.97px -22.5px 0 0 rgba(81, 158, 243, 0.55),
        /* Particelle aggiuntive per densità */
        30px -30px 0 1px rgba(81, 158, 243, 0.7), 30px -30px 0 0 rgba(81, 158, 243, 0.6),
        -30px 30px 0 1px rgba(81, 158, 243, 0.65), -30px 30px 0 0 rgba(81, 158, 243, 0.55),
        30px 30px 0 1px rgba(81, 158, 243, 0.6), 30px 30px 0 0 rgba(81, 158, 243, 0.5),
        -30px -30px 0 1px rgba(81, 158, 243, 0.55), -30px -30px 0 0 rgba(81, 158, 243, 0.45),
        /* Particelle più piccole sparse */
        0 -35px 0 0.5px rgba(81, 158, 243, 0.5), 0 -35px 0 0 rgba(81, 158, 243, 0.4),
        24.75px -24.75px 0 0.5px rgba(81, 158, 243, 0.45), 24.75px -24.75px 0 0 rgba(81, 158, 243, 0.35),
        35px 0 0 0.5px rgba(81, 158, 243, 0.4), 35px 0 0 0 rgba(81, 158, 243, 0.3),
        24.75px 24.75px 0 0.5px rgba(81, 158, 243, 0.35), 24.75px 24.75px 0 0 rgba(81, 158, 243, 0.25),
        0 35px 0 0.5px rgba(81, 158, 243, 0.3), 0 35px 0 0 rgba(81, 158, 243, 0.2),
        -24.75px 24.75px 0 0.5px rgba(81, 158, 243, 0.25), -24.75px 24.75px 0 0 rgba(81, 158, 243, 0.15),
        -35px 0 0 0.5px rgba(81, 158, 243, 0.2), -35px 0 0 0 rgba(81, 158, 243, 0.1),
        -24.75px -24.75px 0 0.5px rgba(81, 158, 243, 0.15), -24.75px -24.75px 0 0 rgba(81, 158, 243, 0.1);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesOuter 12s linear infinite;
    z-index: -1;
    filter: blur(0.3px);
}

/* Particelle interne - ruotano in senso antiorario (ancorate ai titoli) - dimensioni ridotte */
.floating-particles::after {
    box-shadow: 
        /* Cerchio interno - 8 particelle - dimensioni ridotte */
        0 -30px 0 0.5px rgba(81, 158, 243, 0.85), 0 -30px 0 0 rgba(81, 158, 243, 0.75),
        21.21px -21.21px 0 0.5px rgba(81, 158, 243, 0.8), 21.21px -21.21px 0 0 rgba(81, 158, 243, 0.7),
        30px 0 0 0.5px rgba(81, 158, 243, 0.75), 30px 0 0 0 rgba(81, 158, 243, 0.65),
        21.21px 21.21px 0 0.5px rgba(81, 158, 243, 0.7), 21.21px 21.21px 0 0 rgba(81, 158, 243, 0.6),
        0 30px 0 0.5px rgba(81, 158, 243, 0.65), 0 30px 0 0 rgba(81, 158, 243, 0.55),
        -21.21px 21.21px 0 0.5px rgba(81, 158, 243, 0.6), -21.21px 21.21px 0 0 rgba(81, 158, 243, 0.5),
        -30px 0 0 0.5px rgba(81, 158, 243, 0.55), -30px 0 0 0 rgba(81, 158, 243, 0.45),
        -21.21px -21.21px 0 0.5px rgba(81, 158, 243, 0.5), -21.21px -21.21px 0 0 rgba(81, 158, 243, 0.4),
        /* Particelle intermedie - dimensioni ridotte */
        0 -19px 0 0.3px rgba(81, 158, 243, 0.65), 0 -19px 0 0 rgba(81, 158, 243, 0.55),
        13.26px -13.26px 0 0.3px rgba(81, 158, 243, 0.6), 13.26px -13.26px 0 0 rgba(81, 158, 243, 0.5),
        19px 0 0 0.3px rgba(81, 158, 243, 0.55), 19px 0 0 0 rgba(81, 158, 243, 0.45),
        13.26px 13.26px 0 0.3px rgba(81, 158, 243, 0.5), 13.26px 13.26px 0 0 rgba(81, 158, 243, 0.4),
        0 19px 0 0.3px rgba(81, 158, 243, 0.45), 0 19px 0 0 rgba(81, 158, 243, 0.35),
        -13.26px 13.26px 0 0.3px rgba(81, 158, 243, 0.4), -13.26px 13.26px 0 0 rgba(81, 158, 243, 0.3),
        -19px 0 0 0.3px rgba(81, 158, 243, 0.35), -19px 0 0 0 rgba(81, 158, 243, 0.25),
        -13.26px -13.26px 0 0.3px rgba(81, 158, 243, 0.3), -13.26px -13.26px 0 0 rgba(81, 158, 243, 0.2);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesInner 10s linear infinite reverse;
    z-index: -2; /* Ancora più dietro */
    filter: blur(0.15px);
}

/* Particelle interne - ruotano in senso antiorario (elemento singolo - compatibilità) */
#floating-particles::after {
    box-shadow: 
        /* Cerchio interno - 8 particelle - dimensioni ridotte */
        0 -30px 0 0.5px rgba(81, 158, 243, 0.85), 0 -30px 0 0 rgba(81, 158, 243, 0.75),
        21.21px -21.21px 0 0.5px rgba(81, 158, 243, 0.8), 21.21px -21.21px 0 0 rgba(81, 158, 243, 0.7),
        30px 0 0 0.5px rgba(81, 158, 243, 0.75), 30px 0 0 0 rgba(81, 158, 243, 0.65),
        21.21px 21.21px 0 0.5px rgba(81, 158, 243, 0.7), 21.21px 21.21px 0 0 rgba(81, 158, 243, 0.6),
        0 30px 0 0.5px rgba(81, 158, 243, 0.65), 0 30px 0 0 rgba(81, 158, 243, 0.55),
        -21.21px 21.21px 0 0.5px rgba(81, 158, 243, 0.6), -21.21px 21.21px 0 0 rgba(81, 158, 243, 0.5),
        -30px 0 0 0.5px rgba(81, 158, 243, 0.55), -30px 0 0 0 rgba(81, 158, 243, 0.45),
        -21.21px -21.21px 0 0.5px rgba(81, 158, 243, 0.5), -21.21px -21.21px 0 0 rgba(81, 158, 243, 0.4),
        /* Particelle intermedie - dimensioni ridotte */
        0 -19px 0 0.3px rgba(81, 158, 243, 0.65), 0 -19px 0 0 rgba(81, 158, 243, 0.55),
        13.26px -13.26px 0 0.3px rgba(81, 158, 243, 0.6), 13.26px -13.26px 0 0 rgba(81, 158, 243, 0.5),
        19px 0 0 0.3px rgba(81, 158, 243, 0.55), 19px 0 0 0 rgba(81, 158, 243, 0.45),
        13.26px 13.26px 0 0.3px rgba(81, 158, 243, 0.5), 13.26px 13.26px 0 0 rgba(81, 158, 243, 0.4),
        0 19px 0 0.3px rgba(81, 158, 243, 0.45), 0 19px 0 0 rgba(81, 158, 243, 0.35),
        -13.26px 13.26px 0 0.3px rgba(81, 158, 243, 0.4), -13.26px 13.26px 0 0 rgba(81, 158, 243, 0.3),
        -19px 0 0 0.3px rgba(81, 158, 243, 0.35), -19px 0 0 0 rgba(81, 158, 243, 0.25),
        -13.26px -13.26px 0 0.3px rgba(81, 158, 243, 0.3), -13.26px -13.26px 0 0 rgba(81, 158, 243, 0.2);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesInner 10s linear infinite reverse;
    z-index: -1;
    filter: blur(0.15px);
}

/* Particelle interne - ruotano in senso antiorario (per compatibilità) */
.glow-particles::after {
    box-shadow: 
        /* Cerchio interno - 8 particelle */
        0 -40px 0 1px rgba(81, 158, 243, 0.85), 0 -40px 0 0 rgba(81, 158, 243, 0.75),
        28.28px -28.28px 0 1px rgba(81, 158, 243, 0.8), 28.28px -28.28px 0 0 rgba(81, 158, 243, 0.7),
        40px 0 0 1px rgba(81, 158, 243, 0.75), 40px 0 0 0 rgba(81, 158, 243, 0.65),
        28.28px 28.28px 0 1px rgba(81, 158, 243, 0.7), 28.28px 28.28px 0 0 rgba(81, 158, 243, 0.6),
        0 40px 0 1px rgba(81, 158, 243, 0.65), 0 40px 0 0 rgba(81, 158, 243, 0.55),
        -28.28px 28.28px 0 1px rgba(81, 158, 243, 0.6), -28.28px 28.28px 0 0 rgba(81, 158, 243, 0.5),
        -40px 0 0 1px rgba(81, 158, 243, 0.55), -40px 0 0 0 rgba(81, 158, 243, 0.45),
        -28.28px -28.28px 0 1px rgba(81, 158, 243, 0.5), -28.28px -28.28px 0 0 rgba(81, 158, 243, 0.4),
        /* Particelle intermedie */
        0 -25px 0 0.5px rgba(81, 158, 243, 0.65), 0 -25px 0 0 rgba(81, 158, 243, 0.55),
        17.68px -17.68px 0 0.5px rgba(81, 158, 243, 0.6), 17.68px -17.68px 0 0 rgba(81, 158, 243, 0.5),
        25px 0 0 0.5px rgba(81, 158, 243, 0.55), 25px 0 0 0 rgba(81, 158, 243, 0.45),
        17.68px 17.68px 0 0.5px rgba(81, 158, 243, 0.5), 17.68px 17.68px 0 0 rgba(81, 158, 243, 0.4),
        0 25px 0 0.5px rgba(81, 158, 243, 0.45), 0 25px 0 0 rgba(81, 158, 243, 0.35),
        -17.68px 17.68px 0 0.5px rgba(81, 158, 243, 0.4), -17.68px 17.68px 0 0 rgba(81, 158, 243, 0.3),
        -25px 0 0 0.5px rgba(81, 158, 243, 0.35), -25px 0 0 0 rgba(81, 158, 243, 0.25),
        -17.68px -17.68px 0 0.5px rgba(81, 158, 243, 0.3), -17.68px -17.68px 0 0 rgba(81, 158, 243, 0.2);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotateParticlesInner 10s linear infinite reverse;
    z-index: -1;
    filter: blur(0.2px);
}

/* Attiva le particelle fluttuanti quando visibili */
#floating-particles.visible {
    opacity: 1;
}

#floating-particles:not(.visible) {
    opacity: 0;
}

/* Attiva le particelle quando l'elemento è visibile e nello scroll (per compatibilità) */
.glow-particles.visible::before,
.glow-particles.visible::after {
    opacity: 0.6;
    transition: opacity 0.8s ease-out;
}

/* Particelle completamente visibili quando l'elemento è ben centrato (per compatibilità) */
.glow-particles.particles-visible::before,
.glow-particles.particles-visible::after {
    opacity: 1;
}

/* Nascondi le particelle quando l'elemento esce dal viewport (per compatibilità) */
.glow-particles:not(.visible)::before,
.glow-particles:not(.visible)::after {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* Animazione rotazione particelle esterne */
@keyframes rotateParticlesOuter {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Animazione rotazione particelle interne */
@keyframes rotateParticlesInner {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* Disabilita animazioni particelle su dispositivi con preferenza reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .glow-particles::before,
    .glow-particles::after {
        animation: none;
        opacity: 0;
    }
}

/* Founder Section - Layout a due colonne */
.founder-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

/* Badge unificato: Highlight + Slot Counter */
.founder-badge {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.founder-badge-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--dark-card);
    border: 2px solid var(--elo-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: 0 4px 12px rgba(81, 158, 243, 0.2);
}

.founder-badge-title {
    color: var(--dark-text);
    font-size: 1.1rem;
    font-weight: 600;
}

.founder-badge-counter {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-left: var(--spacing-md);
    border-left: 1px solid rgba(81, 158, 243, 0.3);
}

.founder-badge-counter .number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--elo-primary);
    line-height: 1;
}

.founder-badge-counter .label {
    color: var(--dark-text-muted);
    font-size: 0.9rem;
}

.founder-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.founder-explanation-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.founder-explanation {
    line-height: 1.7;
    color: var(--dark-text);
    text-align: left;
}

.founder-explanation p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
}

.founder-form-col {
    position: sticky;
    top: var(--spacing-md);
}

/* Form Tabs */
.form-tabs-wrapper {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-dark);
}

.form-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--dark-bg);
}

.form-tab {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--dark-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
}

.form-tab:hover {
    color: var(--dark-text);
    background: rgba(81, 158, 243, 0.05);
}

.form-tab.active {
    color: var(--elo-primary);
    border-bottom-color: var(--elo-primary);
    background: var(--dark-card);
}

.form-tab-content {
    position: relative;
}

.tab-pane {
    display: none;
    padding: var(--spacing-md);
}

.tab-pane.active {
    display: block;
}

.form-tab-content .form-section {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.form-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: var(--spacing-xs);
}

.form-subtitle {
    font-size: 0.85rem;
    color: var(--dark-text-muted);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

/* Form Fields Grid - 2 colonne */
.form-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.form-group {
    margin-bottom: 0;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group-spacer {
    min-height: 62px;
    pointer-events: none;
}

.form-group label {
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 10px;
    font-size: 0.9rem;
    min-height: 38px;
}

.form-group select {
    background-color: var(--dark-card);
    border-color: var(--elo-primary);
    color: var(--dark-text);
}

.form-group select option {
    background-color: var(--dark-card);
    color: var(--dark-text);
}

.form-group textarea {
    min-height: 60px;
    resize: vertical;
}

.checkbox-group {
    font-size: 0.85rem;
}

.btn {
    padding: 10px var(--spacing-md);
    font-size: 0.9rem;
    margin-top: var(--spacing-sm);
}

/* Responsive */
@media (max-width: 968px) {
    .founder-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .founder-form-col {
        position: static;
    }
    
    .founder-explanation {
        text-align: center;
    }
    
    .founder-badge-content {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .founder-badge-counter {
        border-left: none;
        border-top: 1px solid rgba(81, 158, 243, 0.3);
        padding-left: 0;
        padding-top: var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    .form-tabs {
        flex-direction: column;
    }
    
    .form-tab {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-right: none;
    }
    
    .form-tab.active {
        border-bottom-color: rgba(255, 255, 255, 0.1);
        border-left: 2px solid var(--elo-primary);
    }
    
    .tab-pane {
        padding: var(--spacing-sm);
    }
    
    .form-fields-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .form-group-full {
        grid-column: 1;
    }
}

/* Indice step laterale - pallini che indicano la posizione nella pagina */
.step-index {
    display: none;
    position: fixed;
    right: 62px;
    opacity: 1;
    transition: opacity 0.25s ease;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    pointer-events: auto;
}
html.step-scroll-enabled .step-index {
    display: flex;
}
.step-index-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dark-text-muted);
    opacity: 0.35;
    transition: opacity 0.2s;
    cursor: pointer;
}
.step-index-dot:hover {
    opacity: 0.6;
}
.step-index-dot.active {
    background: var(--elo-primary);
    opacity: 1;
}
.step-index.step-index-dimmed {
    opacity: 0.18;
    transition: opacity 0.25s ease;
}
@media (max-width: 768px) {
    .step-index {
        right: 6px;
        gap: 4px;
    }
    .step-index-dot {
        width: 6px;
        height: 6px;
        opacity: 0.25;
    }
    .step-index-dot:hover {
        opacity: 0.5;
    }
    .step-index-dot.active {
        opacity: 1;
    }
    /* Zoom leggero su step index al cambio sezione (solo smartphone) */
    .step-index-zoom {
        animation: step-index-zoom-pulse 0.4s ease-out;
    }
}
@keyframes step-index-zoom-pulse {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.25); }
    100% { transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .step-index-zoom {
        animation: none !important;
    }
}

/* Scroll indicator - freccia blink per incentivare scroll (visibile solo con step-scroll) */
.scroll-indicator {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    pointer-events: none;
}

html.step-scroll-enabled .scroll-indicator {
    display: block;
}

@media (max-width: 768px) {
    html.step-scroll-enabled .scroll-indicator {
        display: none;
    }
}

.scroll-indicator-arrow {
    display: none;
    color: var(--elo-primary);
    animation: scroll-indicator-blink 1.5s ease-in-out infinite;
}

.scroll-indicator-arrow.visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes scroll-indicator-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

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

/* Smartphone: leggero movimento sezione per indicare scroll */
@media (max-width: 768px) {
    .scroll-step-section.scroll-hint-nudge {
        animation: scroll-hint-nudge 0.5s ease-out;
    }
    .scroll-step-section.scroll-hint-nudge-double {
        animation: scroll-hint-nudge-double 0.6s ease-out;
    }
}

@keyframes scroll-hint-nudge {
    0% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

@keyframes scroll-hint-nudge-double {
    0% { transform: translateY(0); }
    25% { transform: translateY(-6px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .scroll-step-section.scroll-hint-nudge,
    .scroll-step-section.scroll-hint-nudge-double {
        animation: none;
    }
}

/* Cookie Banner - GDPR compliant, ELO colors */
.cookie-banner {
    position: fixed;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    max-width: 360px;
    padding: var(--spacing-sm);
    background: var(--dark-card);
    border: 1px solid var(--elo-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    font-size: 0.9rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.cookie-banner.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.cookie-banner #cookie-title {
    margin: 0 0 var(--spacing-xs);
    color: var(--dark-text);
}
.cookie-banner #cookie-title a {
    color: var(--elo-primary);
    text-decoration: none;
}
.cookie-banner #cookie-title a:hover {
    text-decoration: underline;
}
.cookie-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}
.cookie-choices label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    color: var(--dark-text-muted);
}
.cookie-choices input[type="checkbox"] {
    accent-color: var(--elo-primary);
    cursor: pointer;
}
.cookie-choices input[type="checkbox"]:disabled {
    cursor: default;
}
.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}
.btn-cookie {
    flex: 1;
    min-width: 80px;
    padding: 8px var(--spacing-sm);
    font-size: 0.85rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: inherit;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: var(--dark-text);
}
.btn-cookie:hover {
    border-color: var(--elo-primary);
    color: var(--elo-primary);
}
.btn-cookie.btn-accept {
    background: var(--elo-gradient);
    color: white;
    border-color: transparent;
}
.btn-cookie.btn-accept:hover {
    opacity: 0.95;
    color: white;
}
.btn-cookie.btn-reject,
.btn-cookie.btn-save {
    border: 1px solid var(--elo-primary);
    color: var(--elo-primary);
}
.btn-cookie.btn-reject:hover,
.btn-cookie.btn-save:hover {
    background: rgba(81, 158, 243, 0.1);
}

@media (max-width: 480px) {
    .cookie-banner {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        max-width: none;
    }
}