* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

:root {
    --nero-profondo: #0a0a0f;
    --blu-notte: #0c0f2e;
    --bianco: #f7f7f7;
    --viola: #6F42C1;
    --blu: #4A63D9;
    --rosa: #D66FD6;
    --oro: #D9C89E;
    --rosso-pillola: #dc2626;
    --blu-pillola: #2563eb;
    --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html {
    background-color: #0a0a1a;
}

html,
body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent;
    color: var(--bianco);
    min-height: 100vh;
}

/* Gradiente fisso come sfondo - esteso per coprire overscroll */
body::before {
    content: '';
    position: fixed;
    top: -50vh;
    left: -50vw;
    width: 200vw;
    height: 200vh;
    background: linear-gradient(135deg, var(--nero-profondo) 0%, var(--blu-notte) 50%, #0a0a1a 100%);
    z-index: -2;
    pointer-events: none;
}

/* ===== STARFIELD ===== */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.star {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent);
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Planets */
.planet {
    position: absolute;
    border-radius: 50%;
    animation: floatPlanet linear infinite;
    z-index: 1;
}

@keyframes floatPlanet {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(5deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(15px) rotate(-5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Shooting Stars */
.shooting-star {
    position: absolute;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4), transparent);
    border-radius: 50%;
    animation: shootingStar 1s ease-out forwards;
    transform: rotate(-45deg);
    z-index: 2;
}

.shooting-star::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(255, 255, 255, 0.8);
}

@keyframes shootingStar {
    0% {
        opacity: 1;
        transform: rotate(-45deg) translateX(0);
    }

    100% {
        opacity: 0;
        transform: rotate(-45deg) translateX(400px);
    }
}

/* ===== LOBBY ===== */
.lobby {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30vh 2rem;
}

/* Top Logo - sopra il cerchio centrale */
.top-logo {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.top-logo-img {
    width: 120px;
    height: auto;
}

/* Controllo musica di sottofondo */
.music-control {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg,
            rgba(111, 66, 193, 0.2) 0%,
            rgba(214, 111, 214, 0.15) 100%);
    border: 1px solid rgba(111, 66, 193, 0.3);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    color: rgba(247, 247, 247, 0.8);
}

.music-control:hover {
    background: linear-gradient(135deg,
            rgba(111, 66, 193, 0.3) 0%,
            rgba(214, 111, 214, 0.25) 100%);
    border-color: rgba(111, 66, 193, 0.5);
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.4);
    transform: scale(1.1);
    color: rgba(247, 247, 247, 1);
}

.music-control:active {
    transform: scale(0.95);
}

.music-icon {
    transition: opacity 0.3s ease;
}

/* Tagline principale - su desktop va sotto le card */
.main-tagline {
    width: auto;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 15;
    margin: -1rem 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    order: 0;
    /* Appare per primo, sopra tutto */
}

.main-tagline.visible {
    animation: taglineFadeIn 1.5s ease-out 0s forwards;
}

.main-tagline h1 {
    font-size: clamp(0.65rem, 0.5rem + 0.45vw, 0.9rem);
    font-weight: 300;
    color: rgba(247, 247, 247, 0.6);
    letter-spacing: clamp(0.12rem, 0.08rem + 0.25vw, 0.2rem);
    text-transform: uppercase;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
    display: inline-block;
    line-height: 1.8;
}

@keyframes taglineFadeIn {
    0% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

/* Gruppo call to action + freccia */
.path-callout-group {
    --path-shift-x: 0px;
    position: relative;
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    order: 3;
    margin-top: 3rem;
    /* Appare dopo main-tagline, prima delle card */
    transform: translateX(var(--path-shift-x)) translateY(0);
}

.path-callout-group.visible {
    animation: pathCalloutIn 1s ease-out 0s forwards;
}

/* Richiamo "Scegli il tuo cammino" */
.path-callout {
    text-align: center;
    font-size: clamp(0.9rem, 0.75rem + 0.5vw, 1.1rem);
    font-weight: 700;
    letter-spacing: clamp(0.16rem, 0.1rem + 0.3vw, 0.28rem);
    color: rgba(247, 247, 247, 0.92);
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(111, 66, 193, 0.5);
    pointer-events: none;
}


@keyframes pathCalloutIn {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translateX(var(--path-shift-x)) translateY(12px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateX(var(--path-shift-x)) translateY(0);
        filter: blur(0);
    }
}

/* Indicatore freccia */
.scroll-indicator {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.indicator-circle {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 8px rgba(111, 66, 193, 0.4));
    animation: indicatorBounce 2s ease-in-out infinite;
}

@keyframes indicatorFadeIn {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@keyframes indicatorBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* Banner mobile violaceo */
.mobile-banner {
    display: none;
}

/* Container principale */
.lobby-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    max-width: 1400px;
    position: relative;
}

#cards-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2rem;
    order: 4;
    /* Cards appear after callout (3) and logo (1) */
    position: relative;
    z-index: 50;
}

/* ===== ANIMAZIONI INGRESSO COSMICHE ===== */

/* Big Bang iniziale - Logo - STATICO fino al click */
.sia-logo-container {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    cursor: pointer;
    position: relative;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    order: 1;
    /* Logo appare per primo */
}

/* Invito a cliccare sulla sfera */
.click-prompt {
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    animation: clickPromptFloat 2.5s ease-in-out infinite;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.sia-logo-container.exploding .click-prompt {
    opacity: 0;
    pointer-events: none;
}

.click-prompt-text {
    font-size: clamp(0.7rem, 0.55rem + 0.35vw, 0.95rem);
    font-weight: 600;
    letter-spacing: clamp(0.1rem, 0.08rem + 0.2vw, 0.15rem);
    color: rgba(247, 247, 247, 0.95);
    text-shadow: 0 0 20px rgba(111, 66, 193, 0.8),
        0 0 40px rgba(214, 111, 214, 0.6);
    white-space: nowrap;
}

@keyframes clickPromptFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Sfera di luce iniziale - visibile prima del click */
.sia-logo-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at center,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(217, 200, 158, 0.8) 20%,
            rgba(111, 66, 193, 0.6) 40%,
            rgba(111, 66, 193, 0.3) 60%,
            rgba(111, 66, 193, 0.1) 80%,
            transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    animation: sphereBreath 3s ease-in-out infinite;
    transition: opacity 0.5s ease;
}

.sia-logo-container:hover::before {
    animation: sphereBreath 1.5s ease-in-out infinite;
}

/* Logo nascosto inizialmente */
.sia-logo-animated {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.logo-rings {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.logo-aura {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Quando esplode: nasconde la sfera e mostra il logo */
.sia-logo-container.exploding::before {
    opacity: 0;
    animation: lightExplosion 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sia-logo-container.exploding .sia-logo-animated {
    opacity: 1;
    animation: cosmicBigBang 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.sia-logo-container.exploding .logo-rings {
    opacity: 1;
}

.sia-logo-container.exploding .logo-aura {
    opacity: 1;
}

@keyframes sphereBreath {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
        box-shadow: 0 0 60px rgba(111, 66, 193, 0.6),
            0 0 120px rgba(111, 66, 193, 0.4),
            0 0 180px rgba(111, 66, 193, 0.2);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
        box-shadow: 0 0 80px rgba(111, 66, 193, 0.8),
            0 0 160px rgba(111, 66, 193, 0.6),
            0 0 240px rgba(111, 66, 193, 0.3);
    }
}

/* Effetto di esplosione di luce (anello secondario) */
.sia-logo-container.exploding::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(217, 200, 158, 0.4), transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: lightExplosion 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


/* Card nascoste fino all'esplosione */
.choice-card.featured-card {
    opacity: 0;
    visibility: hidden;
}

.choice-card.choice-gold {
    opacity: 0;
    visibility: hidden;
}

.choice-card.choice-event.event-hidden {
    display: none;
}

/* Stili eventi con colori personalizzabili */
.choice-event {
    background: rgba(74, 99, 217, 0.1);
    border: 1px solid rgba(74, 99, 217, 0.3);
    box-shadow: 0 30px 60px rgba(74, 99, 217, 0.15);
    order: 1;
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 320px;
    align-self: stretch;
    margin-top: 0;
    transition: all 0.4s ease;
}

.choice-event:hover {
    background: rgba(74, 99, 217, 0.15);
    border-color: rgba(74, 99, 217, 0.6);
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(74, 99, 217, 0.25),
        0 0 100px rgba(74, 99, 217, 0.2);
}

/* Colori evento - Blu (default) */
.choice-event[data-color="blue"] {
    background: rgba(74, 99, 217, 0.1);
    border: 1px solid rgba(74, 99, 217, 0.3);
    box-shadow: 0 30px 60px rgba(74, 99, 217, 0.15);
}

.choice-event[data-color="blue"]:hover {
    background: rgba(74, 99, 217, 0.15);
    border-color: rgba(74, 99, 217, 0.6);
    box-shadow:
        0 30px 60px rgba(74, 99, 217, 0.25),
        0 0 100px rgba(74, 99, 217, 0.2);
}


.choice-event[data-color="blue"] .countdown-number {
    text-shadow:
        0 0 10px rgba(74, 99, 217, 0.8),
        0 0 20px rgba(74, 99, 217, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.choice-event[data-color="blue"] .badge-event {
    background: rgba(74, 99, 217, 0.2);
    border-color: rgba(74, 99, 217, 0.5);
}

.choice-event[data-color="blue"] .event-cta {
    background: linear-gradient(135deg, #4A63D9, #6F42C1);
    border: 1px solid rgba(111, 66, 193, 0.5);
}

/* Colori evento - Viola */
.choice-event[data-color="purple"] {
    background: rgba(111, 66, 193, 0.1);
    border: 1px solid rgba(111, 66, 193, 0.3);
    box-shadow: 0 30px 60px rgba(111, 66, 193, 0.15);
}

.choice-event[data-color="purple"]:hover {
    background: rgba(111, 66, 193, 0.15);
    border-color: rgba(111, 66, 193, 0.6);
    box-shadow:
        0 30px 60px rgba(111, 66, 193, 0.25),
        0 0 100px rgba(111, 66, 193, 0.2);
}


.choice-event[data-color="purple"] .countdown-number {
    text-shadow:
        0 0 10px rgba(111, 66, 193, 0.8),
        0 0 20px rgba(111, 66, 193, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.choice-event[data-color="purple"] .badge-event {
    background: rgba(111, 66, 193, 0.2);
    border-color: rgba(111, 66, 193, 0.5);
}

.choice-event[data-color="purple"] .event-cta {
    background: linear-gradient(135deg, #6F42C1, #D66FD6);
    border: 1px solid rgba(214, 111, 214, 0.5);
}

/* Colori evento - Oro */
.choice-event[data-color="gold"] {
    background: rgba(217, 200, 158, 0.08);
    border: 1px solid rgba(217, 200, 158, 0.3);
    box-shadow: 0 30px 60px rgba(217, 200, 158, 0.15);
}

.choice-event[data-color="gold"]:hover {
    background: rgba(217, 200, 158, 0.12);
    border-color: rgba(217, 200, 158, 0.6);
    box-shadow:
        0 30px 60px rgba(217, 200, 158, 0.25),
        0 0 100px rgba(217, 200, 158, 0.2);
}


.choice-event[data-color="gold"] .countdown-number {
    background: linear-gradient(180deg, #f4e4c1 0%, rgba(217, 200, 158, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
        0 0 10px rgba(217, 200, 158, 0.8),
        0 0 20px rgba(217, 200, 158, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.choice-event[data-color="gold"] .badge-event {
    background: rgba(217, 200, 158, 0.2);
    border-color: rgba(217, 200, 158, 0.5);
}

.choice-event[data-color="gold"] .event-cta {
    background: linear-gradient(135deg, #d9c89e, #b8a576);
    border: 1px solid rgba(217, 200, 158, 0.5);
}

/* Colori evento - Verde */
.choice-event[data-color="green"] {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 0 30px 60px rgba(34, 197, 94, 0.15);
}

.choice-event[data-color="green"]:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow:
        0 30px 60px rgba(34, 197, 94, 0.25),
        0 0 100px rgba(34, 197, 94, 0.2);
}


.choice-event[data-color="green"] .countdown-number {
    text-shadow:
        0 0 10px rgba(34, 197, 94, 0.8),
        0 0 20px rgba(34, 197, 94, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.choice-event[data-color="green"] .badge-event {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.choice-event[data-color="green"] .event-cta {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: 1px solid rgba(34, 197, 94, 0.5);
}

/* Colori evento - Rosso */
.choice-event[data-color="red"] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 30px 60px rgba(239, 68, 68, 0.15);
}

.choice-event[data-color="red"]:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow:
        0 30px 60px rgba(239, 68, 68, 0.25),
        0 0 100px rgba(239, 68, 68, 0.2);
}


.choice-event[data-color="red"] .countdown-number {
    text-shadow:
        0 0 10px rgba(239, 68, 68, 0.8),
        0 0 20px rgba(239, 68, 68, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

.choice-event[data-color="red"] .badge-event {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.choice-event[data-color="red"] .event-cta {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 1px solid rgba(239, 68, 68, 0.5);
}

/* Evidenziazione evento - riduce focus altre card */
.event-highlighted .choice-card:not(.choice-event) {
    opacity: 1;
    filter: none;
}

.event-highlighted .choice-card:not(.choice-event):hover {
    opacity: 1;
    filter: none;
}

/* Rimuove il bagliore dalle altre card quando l'evento è evidenziato */
.event-highlighted .choice-card:not(.choice-event)::before {
    opacity: 0 !important;
}

/* Bagliore evento evidenziato - Blu */
.event-highlighted .choice-event[data-color="blue"] {
    box-shadow:
        0 30px 60px rgba(74, 99, 217, 0.3),
        0 0 80px rgba(74, 99, 217, 0.4);
}

/* Bagliore evento evidenziato - Viola */
.event-highlighted .choice-event[data-color="purple"] {
    box-shadow:
        0 30px 60px rgba(111, 66, 193, 0.3),
        0 0 80px rgba(111, 66, 193, 0.4);
}

/* Bagliore evento evidenziato - Oro */
.event-highlighted .choice-event[data-color="gold"] {
    box-shadow:
        0 30px 60px rgba(217, 200, 158, 0.3),
        0 0 80px rgba(217, 200, 158, 0.4);
}

/* Bagliore evento evidenziato - Verde */
.event-highlighted .choice-event[data-color="green"] {
    box-shadow:
        0 30px 60px rgba(34, 197, 94, 0.3),
        0 0 80px rgba(34, 197, 94, 0.4);
}

/* Bagliore evento evidenziato - Rosso */
.event-highlighted .choice-event[data-color="red"] {
    box-shadow:
        0 30px 60px rgba(239, 68, 68, 0.3),
        0 0 80px rgba(239, 68, 68, 0.4);
}

.badge-event,
.badge-card {
    position: absolute;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 1rem;
    background: rgba(74, 99, 217, 0.2);
    color: #f7f7f7;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06rem;
    border: 1px solid rgba(74, 99, 217, 0.5);
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-left .badge-card,
.badge-left .badge-event {
    left: 1rem;
    transform: none;
}

.badge-right .badge-card,
.badge-right .badge-event {
    left: auto;
    right: 1rem;
    transform: none;
}

.choice-card.has-badge {
    padding-top: 3.2rem;
}

.choice-blue .badge-card {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.5);
}

.choice-purple .badge-card {
    background: rgba(111, 66, 193, 0.2);
    border-color: rgba(111, 66, 193, 0.5);
}

.choice-gold .badge-card {
    background: rgba(217, 200, 158, 0.2);
    border-color: rgba(217, 200, 158, 0.5);
}

.choice-red .badge-card {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Countdown separato e prominente */
.event-countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.5rem auto 1rem auto;
    padding: 0 0.5rem;
    width: 100%;
}

.countdown-label {
    font-size: clamp(0.5rem, 1vw, 0.65rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: rgba(247, 247, 247, 0.5);
    text-align: center;
}

.event-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.1rem, 0.5vw, 0.3rem);
    flex-wrap: nowrap;
}

.countdown-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: clamp(32px, 5vw, 42px);
}

.countdown-number {
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow:
        0 0 10px rgba(74, 99, 217, 0.8),
        0 0 20px rgba(74, 99, 217, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #fff 0%, rgba(247, 247, 247, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.countdown-unit {
    font-size: clamp(0.45rem, 0.8vw, 0.55rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    color: rgba(247, 247, 247, 0.45);
}

.countdown-separator {
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    font-weight: 300;
    color: rgba(247, 247, 247, 0.35);
    margin: 0 clamp(0.02rem, 0.3vw, 0.1rem);
    align-self: flex-start;
    padding-top: 0.15rem;
}

.event-title {
    margin-top: 0.4rem;
    margin-bottom: 0;
}

.event-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05rem;
    margin: 0.25rem 0 0.8rem 0;
}

.event-description {
    margin-bottom: 1.5rem;
}

.event-location,
.card-location {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(247, 247, 247, 0.8);
    font-size: 0.82rem;
    margin: 0 0 0.6rem 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.event-location:hover,
.card-location:hover {
    background: rgba(255, 255, 255, 0.1);
}

.event-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-bottom: 0.85rem;
}

.event-pills .pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(217, 200, 158, 0.12);
    border: 1px solid rgba(217, 200, 158, 0.3);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    letter-spacing: 0.01rem;
}

.event-cta {
    background: linear-gradient(135deg, #4A63D9, #6F42C1);
    border: 1px solid rgba(111, 66, 193, 0.5);
    color: #f7f7f7;
}

.event-cta-secondary {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: rgba(247, 247, 247, 0.7);
}

@media (max-width: 768px) {
    #cards-container {
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    #cards-container .choice-card {
        width: 100%;
        max-width: 100%;
    }

    .choice-card.choice-event {
        padding: 1.5rem 1.25rem;
        max-width: 100%;
        margin-top: 1rem;
    }

    .choice-card.has-badge {
        padding-top: 2.6rem;
    }

    .event-countdown-container {
        margin: 1.2rem 0 1.4rem 0;
        padding: 1rem 1.5rem 1.2rem 1.5rem;
        gap: 0.5rem;
    }

    .countdown-label {
        font-size: 0.6rem;
        letter-spacing: 0.12rem;
    }

    .event-countdown {
        gap: 0.25rem;
    }

    .countdown-segment {
        min-width: 40px;
        gap: 0.2rem;
    }

    .countdown-number {
        font-size: 1.15rem;
    }

    .countdown-unit {
        font-size: 0.55rem;
        letter-spacing: 0.04rem;
    }

    .countdown-separator {
        font-size: 1rem;
        margin: 0 0.05rem;
    }

    .event-title {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .event-subtitle {
        font-size: 0.9rem;
    }

    .event-location,
    .card-location {
        font-size: 0.9rem;
    }

    .event-description {
        font-size: 0.9rem;
    }

    .event-cta {
        width: 100%;
        text-align: center;
        display: inline-block;
        padding: 0.9rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* Ordine desktop delle card: evento, wellness, academy */
.choice-card.choice-event {
    order: 2;
}

.choice-card.featured-card {
    order: 3;
}

.choice-card.choice-gold {
    order: 4;
}

/* Card si materializzano durante l'esplosione cosmica */
.choice-card.materializing {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: cardFadeIn 0.8s ease-out both;
}

@media (min-width: 769px) {

    /* Logo centrato */
    .sia-logo-container {
        order: 1;
        margin: 0 auto;
        position: relative;
        left: auto;
        top: auto;
        transform: translate(0, 0);
        transition: none;
    }

    .sia-logo-container.logo-shift-left {
        transform: translate(0, 0);
        transition: none;
    }

    /* Card responsive per tablet/desktop */
    #cards-container {
        gap: 1.25rem;
    }

    .choice-card,
    .choice-event {
        min-width: 200px;
        max-width: 280px;
    }
}

/* Layout ottimizzato per 5 card su schermi grandi */
@media (min-width: 1200px) {
    #cards-container {
        max-width: 1800px;
        gap: 1.5rem;
    }

    .choice-card {
        min-width: 250px;
        max-width: 300px;
    }

    .choice-event {
        min-width: 250px;
        max-width: 300px;
    }
}

/* Layout per schermi molto grandi */
@media (min-width: 1600px) {
    #cards-container {
        max-width: 2000px;
        gap: 2rem;
    }

    .choice-card {
        min-width: 280px;
        max-width: 340px;
    }

    .choice-event {
        min-width: 280px;
        max-width: 340px;
    }
}

/* Keyframes Big Bang del logo */
@keyframes cosmicBigBang {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
        filter: brightness(10) blur(20px);
    }

    20% {
        opacity: 1;
        transform: scale(0.3) rotate(90deg);
        filter: brightness(8) blur(15px);
    }

    40% {
        opacity: 1;
        transform: scale(1.5) rotate(180deg);
        filter: brightness(5) blur(10px);
    }

    60% {
        opacity: 1;
        transform: scale(0.8) rotate(270deg);
        filter: brightness(3) blur(5px);
    }

    80% {
        opacity: 1;
        transform: scale(1.1) rotate(360deg);
        filter: brightness(1.5) blur(2px);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(360deg);
        filter: brightness(1) blur(0px);
    }
}

/* Esplosione di luce */
@keyframes lightExplosion {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(5);
        opacity: 0;
    }
}

/* Anello di energia */
@keyframes energyRing {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    70% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(6);
        opacity: 0;
    }
}

/* Materializzazione cosmica card sinistra */
@keyframes cosmicMaterializeLeft {
    0% {
        opacity: 0;
        visibility: visible;
        transform: scale(0.95);
        filter: brightness(3) blur(15px);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.02);
        filter: brightness(1.8) blur(5px);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        filter: brightness(1) blur(0px);
    }
}

/* Materializzazione cosmica card destra */
@keyframes cosmicMaterializeRight {
    0% {
        opacity: 0;
        visibility: visible;
        transform: scale(0.95);
        filter: brightness(3) blur(15px);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.02);
        filter: brightness(1.8) blur(5px);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        filter: brightness(1) blur(0px);
    }
}

/* Animazione dolce per apparizione card - effetto cosmico leggero */
@keyframes cardFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(8px) brightness(1.5);
    }

    60% {
        opacity: 0.8;
        transform: scale(1.01);
        filter: blur(2px) brightness(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

/* ===== CARDS CONTAINER ===== */
#cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
    gap: clamp(1rem, 2vw, 2rem);
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1rem;
    order: 4;
    /* Appare per ultimo, sotto tutto */
}

/* ===== CHOICE CARDS (Pillole) ===== */
.choice-card {
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 320px;
    padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 2rem);
    border-radius: 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
}

.choice-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Pillola Blu */
.choice-blue {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.choice-blue:hover {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.6);
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(37, 99, 235, 0.3),
        0 0 100px rgba(37, 99, 235, 0.2);
}

/* Pillola Viola */
.choice-purple {
    background: rgba(111, 66, 193, 0.08);
    border: 1px solid rgba(111, 66, 193, 0.25);
    opacity: 0.92;
    filter: saturate(0.92) brightness(0.98);
    border-radius: 18px;
    padding: 1.4rem 1.4rem;
    max-width: 280px;
    flex: 0 1 280px;
}

.choice-purple::before {
    border-radius: 18px;
}

/* SIA Academy - layout più compatto */
.choice-purple {
    padding: 1.6rem 1.6rem;
}

.choice-purple .card-title {
    font-size: 1.45rem;
    margin-bottom: 0.5rem;
}

.choice-purple .card-subtitle {
    font-size: 0.88rem;
    margin: 0.2rem 0 0.6rem 0;
}

.choice-purple .card-description {
    font-size: 0.85rem;
    margin-bottom: 0.7rem;
}

.choice-purple .card-proof {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.05rem;
    font-weight: 600;
    text-transform: none;
    margin: 0 0 1rem 0;
}

.choice-purple .card-cta-group {
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.choice-purple .choice-cta {
    padding: 0.65rem 1.4rem;
    font-size: 0.82rem;
}

.choice-purple:hover {
    background: rgba(111, 66, 193, 0.12);
    border-color: rgba(111, 66, 193, 0.45);
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 22px 45px rgba(111, 66, 193, 0.22),
        0 0 80px rgba(111, 66, 193, 0.16);
}

/* Pillola Rossa */
.choice-red {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.choice-red:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.6);
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(239, 68, 68, 0.3),
        0 0 100px rgba(239, 68, 68, 0.2);
}

/* Stella Oro/Viola */
.choice-gold {
    background: linear-gradient(135deg,
            rgba(217, 200, 158, 0.45) 0%,
            rgba(111, 66, 193, 0.22) 100%);
    border: 1px solid rgba(217, 200, 158, 0.55);
    box-shadow: inset 0 0 20px rgba(217, 200, 158, 0.15);
}

.choice-gold:hover {
    background: linear-gradient(135deg,
            rgba(217, 200, 158, 0.55) 0%,
            rgba(111, 66, 193, 0.28) 100%);
    border-color: rgba(217, 200, 158, 0.75);
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(217, 200, 158, 0.35),
        0 0 100px rgba(111, 66, 193, 0.2);
}

.choice-card.has-card-gradient {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--card-gradient-start) calc(var(--card-gradient-opacity, 0.1) * 100%), transparent),
            color-mix(in srgb, var(--card-gradient-end) calc(var(--card-gradient-opacity, 0.1) * 100%), transparent));
    border: 1px solid rgba(var(--card-gradient-rgb), 0.45);
}

.choice-card.has-card-gradient:hover {
    box-shadow:
        0 30px 60px rgba(var(--card-gradient-rgb), 0.25),
        0 0 100px rgba(var(--card-gradient-rgb), 0.2);
}

/* Riflesso stile lingotto d'oro */
.choice-card.shine-gold::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -140%;
    width: 70%;
    height: 160%;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 30%,
            rgba(217, 200, 158, 0.35) 50%,
            rgba(255, 255, 255, 0.12) 70%,
            transparent 100%);
    transform: skewX(-20deg);
    animation: goldShine 5.5s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.9;
}

@keyframes goldShine {
    0% {
        left: -140%;
    }

    55% {
        left: -140%;
    }

    100% {
        left: 140%;
    }
}

/* ===== COLORI PERSONALIZZATI (da config) ===== */
.choice-card.has-custom-color:hover {
    background: rgba(var(--custom-card-rgb, 100, 100, 100), 0.2) !important;
    border-color: rgba(var(--custom-card-rgb, 100, 100, 100), 0.7) !important;
    transform: translateY(-10px) scale(1.02);
}

.choice-card.has-custom-glow:hover {
    box-shadow:
        0 30px 60px rgba(var(--custom-glow-rgb, 100, 100, 100), 0.35),
        0 0 100px rgba(var(--custom-glow-rgb, 100, 100, 100), 0.25) !important;
}

.choice-card.has-custom-color.has-custom-glow:hover {
    box-shadow:
        0 30px 60px rgba(var(--custom-glow-rgb, 100, 100, 100), 0.35),
        0 0 100px rgba(var(--custom-glow-rgb, 100, 100, 100), 0.25) !important;
}

/* Spiritual Symbols */
.spiritual-symbol {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spiritual-symbol.emoji-icon {
    font-size: 3.1rem;
    line-height: 1;
}

.spiritual-symbol.massage-icon {
    width: 80px;
    height: 80px;
}

.massage-icon .pulse-circle {
    animation: massagePulse 4s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}

.massage-icon .rotating-hands {
    animation: massageRotate 20s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
}

.massage-icon .floating-leaf {
    animation: massageFloat 6s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}

.massage-icon .floating-leaf-2 {
    animation-delay: 1s;
}

.massage-icon .floating-leaf-3 {
    animation-delay: 2s;
}

.massage-icon .breathing-circle {
    animation: massageBreathe 8s infinite ease-in-out;
    transform-origin: center;
    transform-box: fill-box;
}

.massage-icon .energy-line {
    stroke-dasharray: 10;
    animation: massageDash 20s infinite linear;
}

@keyframes massagePulse {

    0%,
    100% {
        r: 30;
        opacity: 0.7;
    }

    50% {
        r: 35;
        opacity: 0.4;
    }
}

@keyframes massageRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes massageFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

@keyframes massageBreathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.6;
    }
}

@keyframes massageDash {
    0% {
        stroke-dashoffset: 200;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.lotus-svg,
.third-eye-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 15px currentColor);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.lotus {
    color: rgba(37, 99, 235, 0.6);
    animation: symbolFloat 4s ease-in-out infinite;
}

.spirit-star {
    color: rgba(217, 200, 158, 0.6);
    animation: symbolFloat 4s ease-in-out infinite 2s;
}

@keyframes symbolFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 15px currentColor);
    }

    50% {
        transform: translateY(-8px) scale(1.05);
        filter: drop-shadow(0 0 25px currentColor) drop-shadow(0 0 40px currentColor);
    }
}

.choice-card:hover .lotus-svg,
.choice-card:hover .star-svg {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 30px currentColor);
}

/* Lotus glow pulse */
.lotus::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
}

/* Spirit Star glow pulse */
.spirit-star::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(217, 200, 158, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite 1.5s;
}

.star-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 15px currentColor);
    transition: transform 0.3s ease, filter 0.3s ease;
    animation: starRotate 20s linear infinite;
}

@keyframes starRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.choice-card h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--bianco);
}

.card-title {
    display: inline-block;
}

.choice-card.has-title-gradient .card-title {
    background: linear-gradient(135deg, var(--title-gradient-start), var(--title-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Accent Color Overrides */
.choice-card.has-custom-accent {
    border-color: rgba(var(--card-accent-rgb), 0.4);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(var(--card-accent-rgb), 0.1);
}

.choice-card.has-custom-accent:hover {
    border-color: rgba(var(--card-accent-rgb), 0.7);
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(var(--card-accent-rgb), 0.25);
}

.choice-card.has-custom-accent::before {
    background: radial-gradient(circle at center, rgba(var(--card-accent-rgb), 0.15) 0%, transparent 70%);
}

.choice-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.card-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05rem;
    margin: 0.25rem 0 0.8rem 0;
}

.card-kicker {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14rem;
    text-transform: uppercase;
    color: rgba(247, 247, 247, 0.55);
    margin: 0.15rem 0 0.5rem 0;
}

.card-description {
    margin-bottom: 1rem;
}

.card-hype {
    font-size: 0.78rem;
    color: rgba(247, 247, 247, 0.75);
    margin: 0.4rem 0 0.8rem 0;
    letter-spacing: 0.04rem;
}

.card-bonus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.75), rgba(16, 185, 129, 0.22));
    border: 1px solid rgba(34, 197, 94, 0.55);
    color: rgba(220, 252, 231, 0.98);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    font-size: 0.68rem;
    margin: 0.12rem 0 0.85rem 0;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.25);
}

.choice-blue.layout-cta-cards .card-bonus {
    display: flex;
    justify-content: flex-start;
    width: fit-content;
    margin: -0.15rem auto 0.7rem 0;
}

.choice-blue.layout-cta-cards.has-badge {
    padding-top: 5rem;
}

.choice-blue.layout-cta-cards .badge-card {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.9), rgba(16, 185, 129, 0.55));
    border: 1px solid rgba(34, 197, 94, 0.6);
    color: rgba(220, 252, 231, 0.98);
    font-weight: 700;
    letter-spacing: 0.08rem;
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.25);
}

.card-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-bottom: 0.85rem;
}

.card-benefits .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(217, 200, 158, 0.12);
    border: 1px solid rgba(217, 200, 158, 0.28);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.7rem;
    letter-spacing: 0.01rem;
}

.card-benefits .pill::before {
    content: none;
}

.pill-dot {
    color: #fbbf24;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}

.card-proof {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 1rem 0;
    letter-spacing: 0.05rem;
}

/* Contrasti Academy (card viola) */
.choice-purple .card-title {
    font-size: 1.55rem;
    letter-spacing: 0.02rem;
}

.choice-purple .card-subtitle {
    color: rgba(216, 191, 255, 0.92);
    font-weight: 600;
    letter-spacing: 0.03rem;
    font-size: 0.9rem;
}

.choice-purple .card-description {
    color: rgba(226, 232, 240, 0.7);
    font-size: 0.88rem;
    line-height: 1.55;
}

.choice-purple .card-hype {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(111, 66, 193, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.45);
    color: rgba(237, 233, 254, 0.95);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 0.64rem;
}

.choice-purple .card-proof {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    letter-spacing: 0.05rem;
    text-transform: none;
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
}

.choice-cta {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-decoration: none;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

@keyframes energyFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes ctaGlow {

    0%,
    100% {
        box-shadow: 0 10px 30px rgba(217, 200, 158, 0.3);
    }

    50% {
        box-shadow: 0 15px 40px rgba(217, 200, 158, 0.5), 0 0 60px rgba(111, 66, 193, 0.3);
    }
}

@keyframes ctaShine {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

.choice-cta.cta-animated {
    background: linear-gradient(135deg, var(--oro) 0%, var(--viola) 50%, var(--oro) 100%) !important;
    background-size: 200% 200%;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(217, 200, 158, 0.3);
    animation: energyFlow 4s ease infinite, ctaGlow 2s ease-in-out infinite;
    overflow: hidden;
}

.choice-cta.cta-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: ctaShine 3s ease-in-out infinite;
}

.choice-cta.cta-animated:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 20px 50px rgba(217, 200, 158, 0.5);
    animation-play-state: paused;
}

.card-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 0.4rem;
    position: relative;
    z-index: 2;
}

.layout-cta-rect .card-cta-group {
    width: 100%;
    align-items: stretch;
    gap: 0.7rem;
}

.layout-cta-rect .choice-cta {
    width: 100%;
    border-radius: 12px;
    letter-spacing: 0.08rem;
}

.layout-cta-rect .choice-cta-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

.layout-cta-rect .choice-cta-secondary:hover {
    transform: translateY(-2px);
}

.layout-cta-rect .choice-cta:not(.choice-cta-secondary):hover {
    transform: translateY(-2px) scale(1.02);
}

.layout-cta-cards .card-cta-group {
    width: 100%;
    align-items: stretch;
    gap: 0.8rem;
    margin-top: 1rem;
}

.layout-cta-cards .choice-cta {
    width: 100%;
    border-radius: 16px;
    padding: 0.85rem 1.1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.2rem 0.8rem;
    text-transform: none;
    letter-spacing: 0.04rem;
    min-height: 74px;
}

.layout-cta-cards .choice-cta-secondary {
    background: linear-gradient(135deg, rgba(24, 34, 78, 0.95) 0%, rgba(18, 24, 56, 0.95) 100%);
    border: 1px solid rgba(79, 124, 255, 0.25);
    color: rgba(224, 235, 255, 0.92);
}

.layout-cta-cards .cta-card-emoji {
    font-size: 1.6rem;
    line-height: 1;
    grid-row: span 2;
    align-self: center;
}

.layout-cta-cards .cta-card-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.layout-cta-cards .cta-card-sub {
    font-size: 0.72rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
}

.layout-cta-cards .choice-cta:not(.choice-cta-secondary):hover,
.layout-cta-cards .choice-cta-secondary:hover {
    transform: translateY(-2px);
}

/* Tipografia e contrasti per card Classi Settimanali */
.choice-blue.layout-cta-cards .card-subtitle {
    color: rgba(147, 197, 253, 0.95);
    font-weight: 700;
    letter-spacing: 0.04rem;
}

.choice-blue.layout-cta-cards .card-description {
    color: rgba(219, 234, 254, 0.72);
    font-size: 0.9rem;
}

.choice-blue.layout-cta-cards .card-hype {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: rgba(224, 242, 254, 0.95);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    font-size: 0.68rem;
}

.choice-blue.layout-cta-cards .card-location {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.82rem;
}

.choice-blue.layout-cta-cards .card-proof {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    letter-spacing: 0.05rem;
    text-transform: none;
    font-size: 0.85rem;
    margin: 0 0 1rem 0;
}

/* Colori specifici per Yoga e Meditazione */
.choice-cta[data-cta-action="yoga-class"] {
    background: linear-gradient(135deg, #4891d5 0%, #845ad0 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.45) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(72, 145, 213, 0.35);
}

.choice-cta[data-cta-action="yoga-class"]:hover {
    background: linear-gradient(135deg, #56a0e0 0%, #8d67da 100%) !important;
    box-shadow: 0 12px 28px rgba(72, 145, 213, 0.45);
}

.choice-cta[data-cta-action="meditation-class"] {
    background: linear-gradient(135deg, #4891d5 0%, #845ad0 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.45) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(132, 90, 208, 0.35);
}

.choice-cta[data-cta-action="meditation-class"]:hover {
    background: linear-gradient(135deg, #56a0e0 0%, #8d67da 100%) !important;
    box-shadow: 0 12px 28px rgba(132, 90, 208, 0.45);
}

/* ===== MOBILE: Card Classi Settimanali ottimizzata ===== */
@media (max-width: 600px) {
    .layout-cta-cards .card-cta-group {
        gap: 0.6rem;
        margin-top: 0.8rem;
    }

    .layout-cta-cards .choice-cta {
        border-radius: 14px;
        padding: 0.7rem 0.9rem;
        min-height: 65px;
        gap: 0.15rem 0.6rem;
    }

    .layout-cta-cards .cta-card-emoji {
        font-size: 1.4rem;
    }

    .layout-cta-cards .cta-card-title {
        font-size: 0.88rem;
    }

    .layout-cta-cards .cta-card-sub {
        font-size: 0.65rem;
        letter-spacing: 0.06rem;
    }

    /* Card compatta su mobile */
    .choice-blue.layout-cta-cards {
        padding: 1.3rem 1rem !important;
    }

    .choice-blue.layout-cta-cards.has-badge {
        padding: 4.2rem 1rem 1.3rem !important;
    }

    .choice-blue.layout-cta-cards h2 {
        font-size: 1.25rem;
        margin-bottom: 0.4rem;
    }

    .choice-blue.layout-cta-cards .card-subtitle {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }

    .choice-blue.layout-cta-cards p {
        font-size: 0.82rem;
        margin-bottom: 0.5rem;
    }

    .choice-blue.layout-cta-cards .card-reviews {
        font-size: 0.7rem;
        margin-bottom: 0.4rem;
    }

    .choice-blue.layout-cta-cards .card-location {
        font-size: 0.72rem;
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.5rem;
    }

    .choice-blue.layout-cta-cards .hype-text {
        font-size: 0.7rem;
        padding: 0.35rem 0.7rem;
        margin-bottom: 0.5rem;
    }
}

/* Gerarchia più pulita per Classi Settimanali */
.choice-blue.layout-cta-cards .card-title {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
}

.choice-blue.layout-cta-cards .card-subtitle {
    font-size: 0.95rem;
    margin: 0.25rem 0 0.8rem 0;
}

.choice-blue.layout-cta-cards .card-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.choice-blue.layout-cta-cards .card-location {
    font-size: 0.82rem;
    margin: 0 0 0.6rem 0;
}

.choice-blue.layout-cta-cards .card-proof {
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    letter-spacing: 0.05rem;
    text-transform: none;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.choice-blue.layout-cta-cards .card-bonus--proof {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: rgba(255, 236, 179, 0.95);
    font-size: 0.6rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    font-weight: 600;
    margin: -0.25rem auto 0.7rem 0;
}

.choice-blue.layout-cta-cards .card-cta-group {
    gap: 0.6rem;
    margin-top: 0.3rem;
}

@media (max-width: 400px) {
    .layout-cta-cards .choice-cta {
        padding: 0.6rem 0.8rem;
        min-height: 58px;
        border-radius: 12px;
    }

    .layout-cta-cards .cta-card-emoji {
        font-size: 1.2rem;
    }

    .layout-cta-cards .cta-card-title {
        font-size: 0.8rem;
    }

    .layout-cta-cards .cta-card-sub {
        font-size: 0.6rem;
    }

    .choice-blue.layout-cta-cards {
        padding: 1.1rem 0.9rem !important;
    }

    .choice-blue.layout-cta-cards.has-badge {
        padding: 5.5rem 0.9rem 1.1rem !important;
    }

    .choice-blue.layout-cta-cards h2 {
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }
}

.choice-cta-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(247, 247, 247, 0.82);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12rem;
    padding: 0.45rem 1.2rem;
    opacity: 0.85;
    box-shadow: none;
    text-decoration: none;
}

.choice-blue .choice-cta-secondary {
    border-color: rgba(37, 99, 235, 0.6);
    color: rgba(220, 235, 255, 0.95);
}

.choice-purple .choice-cta-secondary {
    border-color: rgba(111, 66, 193, 0.6);
    color: rgba(237, 229, 255, 0.95);
}

.choice-gold .choice-cta-secondary {
    border-color: rgba(217, 200, 158, 0.6);
    color: rgba(255, 248, 229, 0.95);
}

.choice-green .choice-cta-secondary {
    border-color: rgba(16, 185, 129, 0.55);
    color: rgba(220, 255, 241, 0.95);
}

.choice-red .choice-cta-secondary {
    border-color: rgba(239, 68, 68, 0.6);
    color: rgba(255, 230, 230, 0.95);
}

.choice-cta-secondary:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    opacity: 1;
}

.choice-card.has-secondary-cta .choice-cta {
    padding: 0.75rem 1.7rem;
    font-size: 0.88rem;
}

.choice-blue .choice-cta:not(.choice-cta-secondary) {
    background: linear-gradient(135deg, var(--blu-pillola), #1d4ed8);
    color: white;
}

.choice-purple .choice-cta:not(.choice-cta-secondary) {
    background: linear-gradient(135deg, #6F42C1, #D66FD6);
    color: white;
}

.choice-red .choice-cta:not(.choice-cta-secondary) {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.choice-gold .choice-cta:not(.choice-cta-secondary) {
    background: linear-gradient(135deg, var(--oro), var(--viola));
    color: white;
}

.choice-green .choice-cta:not(.choice-cta-secondary) {
    background: linear-gradient(135deg, #10b981, #16a34a);
    color: white;
}

/* CTA Fenice - Wellness Lab */
.cta-phoenix {
    background: linear-gradient(135deg, #f97316, #fbbf24, #f97316) !important;
    background-size: 200% 200%;
    color: #1a1a2e !important;
    font-weight: 700;
    animation: phoenixCtaGlow 3s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
    line-height: 1;
    padding: 1rem 2rem;
}

.cta-phoenix strong {
    display: block;
    font-size: 1.1rem;
    letter-spacing: 0.12rem;
    margin-bottom: 0.2rem;
}

.cta-phoenix small {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02rem;
    color: #000;
}

.cta-phoenix:hover {
    box-shadow: 0 12px 35px rgba(249, 115, 22, 0.6), 0 0 50px rgba(251, 191, 36, 0.3);
}

@keyframes phoenixCtaGlow {

    0%,
    100% {
        background-position: 0% 50%;
        box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0 10px 30px rgba(251, 191, 36, 0.5), 0 0 40px rgba(249, 115, 22, 0.3);
    }
}

.choice-cta:not(.choice-cta-secondary):hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Badge Coming Soon */
.badge-coming-soon {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0.4rem 0.8rem;
    background: linear-gradient(135deg, var(--viola), var(--rosa));
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    border-radius: 20px;
    z-index: 10;
    overflow: hidden;
}

.badge-coming-soon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Badge Disponibile - Wellness Lab */
.badge-available {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, #f97316, #fbbf24);
    color: #000;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    border-radius: 25px;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

.badge-available::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(249, 115, 22, 0.5);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(249, 115, 22, 0.7);
    }
}

/* ===== FEATURED CARD - WELLNESS LAB ===== */
.featured-card {
    transform: scale(1.02);
    border-color: rgba(217, 200, 158, 0.4) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    animation: none;
}

.featured-card::before {
    display: none;
}

.featured-card:hover {
    transform: scale(1.03);
    box-shadow:
        0 20px 60px rgba(217, 200, 158, 0.35),
        0 0 60px rgba(217, 200, 158, 0.25);
    border-color: rgba(217, 200, 158, 0.55) !important;
}

.event-active .featured-card {
    animation: none !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
    transform: scale(1.02);
}

.event-active .featured-card::before {
    display: none !important;
}

.event-active .featured-card:hover {
    transform: scale(1.03);
    box-shadow:
        0 20px 60px rgba(217, 200, 158, 0.35),
        0 0 60px rgba(217, 200, 158, 0.25) !important;
    border-color: rgba(217, 200, 158, 0.55) !important;
}

@keyframes featuredPulse {

    0%,
    100% {
        box-shadow:
            0 20px 60px rgba(217, 200, 158, 0.3),
            0 0 80px rgba(217, 200, 158, 0.15);
    }

    50% {
        box-shadow:
            0 25px 80px rgba(217, 200, 158, 0.4),
            0 0 100px rgba(111, 66, 193, 0.2);
    }
}

@keyframes auraPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }
}

/* ===== PHOENIX COSMIC ANIMATIONS ===== */
.cosmic-nebula {
    animation: nebulaPulse 6s ease-in-out infinite;
}

.phoenix-ring-1 {
    animation: ringRotate 15s linear infinite;
    transform-origin: center;
}

.phoenix-ring-2 {
    animation: ringRotate 12s linear infinite reverse;
    transform-origin: center;
}

.phoenix-glow {
    animation: glowPulse 3s ease-in-out infinite;
}

.phoenix-body {
    animation: phoenixBreathe 3s ease-in-out infinite;
    transform-origin: bottom center;
}

.phoenix-wing-left {
    animation: wingFlutter 2.5s ease-in-out infinite;
    transform-origin: right center;
}

.phoenix-wing-right {
    animation: wingFlutter 2.5s ease-in-out infinite reverse;
    transform-origin: left center;
}

.phoenix-crest {
    animation: crestFlicker 1.5s ease-in-out infinite;
}

.outer-flame {
    animation: flameWave 2s ease-in-out infinite;
    transform-origin: bottom center;
}

.third-eye {
    animation: thirdEyePulse 2s ease-in-out infinite;
}

.head-aura {
    animation: headAuraGlow 2.5s ease-in-out infinite;
}

.feather-glow {
    animation: featherTwinkle 1.8s ease-in-out infinite;
}

.star-particle {
    animation: starFloat 3s ease-in-out infinite;
}

.star-particle:nth-child(odd) {
    animation-delay: 0.3s;
}

.star-particle:nth-child(even) {
    animation-delay: 0.7s;
}

@keyframes nebulaPulse {

    0%,
    100% {
        opacity: 0.12;
        transform: scale(1);
    }

    50% {
        opacity: 0.2;
        transform: scale(1.02);
    }
}

@keyframes ringRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.35;
        transform: scale(1.05);
    }
}

@keyframes phoenixBreathe {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 0.95;
    }

    50% {
        transform: scaleY(1.03);
        opacity: 1;
    }
}

@keyframes wingFlutter {

    0%,
    100% {
        transform: rotate(0deg) scaleX(1);
    }

    50% {
        transform: rotate(-4deg) scaleX(1.08);
    }
}

@keyframes crestFlicker {

    0%,
    100% {
        opacity: 0.95;
        transform: scaleY(1);
    }

    25% {
        opacity: 1;
        transform: scaleY(1.15);
    }

    75% {
        opacity: 0.85;
        transform: scaleY(0.95);
    }
}

@keyframes flameWave {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

@keyframes thirdEyePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

@keyframes headAuraGlow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes featherTwinkle {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

@keyframes starFloat {

    0%,
    100% {
        opacity: 0.6;
        transform: translateY(0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px) scale(1.2);
    }
}

/* ===== CROWN COSMIC ANIMATIONS ===== */
.crown-nebula {
    animation: nebulaPulse 7s ease-in-out infinite;
}

.crown-ring-1 {
    animation: crownRingFloat 10s ease-in-out infinite;
}

.crown-ring-2 {
    animation: crownRingFloat 8s ease-in-out infinite reverse;
}

.crown-aura {
    animation: crownAuraPulse 4s ease-in-out infinite;
}

.crown-base-glow {
    animation: baseGlow 3s ease-in-out infinite;
}

.crown-ray {
    animation: rayShine 2s ease-in-out infinite;
}

.gem-aura {
    animation: gemAuraPulse 2.5s ease-in-out infinite;
}

.crown-star {
    animation: crownStarTwinkle 2s ease-in-out infinite;
}

.crown-particle {
    animation: particleDrift 4s ease-in-out infinite;
}

.crown-particle:nth-child(odd) {
    animation-delay: 0.5s;
}

.crown-particle:nth-child(even) {
    animation-delay: 1s;
}

@keyframes crownRingFloat {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.02);
    }
}

@keyframes crownAuraPulse {

    0%,
    100% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes baseGlow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes rayShine {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes gemAuraPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.15);
    }
}

@keyframes crownStarTwinkle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}

@keyframes particleDrift {

    0%,
    100% {
        opacity: 0.5;
        transform: translateY(0);
    }

    50% {
        opacity: 0.9;
        transform: translateY(-5px);
    }
}

/* Corona cosmica - Academy */
.spirit-crown .crown-svg {
    filter: drop-shadow(0 0 15px rgba(217, 200, 158, 0.3));
    opacity: 0.7;
}

.choice-gold.choice-card {
    opacity: 1;
    transform: none;
}

.choice-gold.choice-card:hover {
    opacity: 1;
    transform: none;
}

/* ===== SIA LOGO ANIMATED ===== */
.sia-logo-container {
    position: relative;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sia-logo-animated {
    position: relative;
    width: 280px;
    height: 280px;
    z-index: 10;
}

.sia-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 30px rgba(111, 66, 193, 0.5));
}

/* Testo SIA */
.sia-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(32px, 4.5vw, 42px);
    font-weight: 800;
    letter-spacing: clamp(5px, 0.9vw, 8px);
    animation: textGlow 3s ease-in-out infinite;
}

/* Sottotitolo SIA (SISTEMA INTERATTIVO ARMONICO) */
.sia-subtitle {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(8px, 1.2vw, 12px);
    font-weight: 600;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    opacity: 0.9;
}

/* Tagline dentro SVG (più piccolo e distaccato) */
.sia-tagline {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(5px, 0.9vw, 8px);
    font-weight: 400;
    letter-spacing: clamp(0.6px, 0.25vw, 1px);
    opacity: 0.65;
    text-transform: uppercase;
}

@keyframes textGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(217, 200, 158, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 25px rgba(217, 200, 158, 0.9)) drop-shadow(0 0 50px rgba(111, 66, 193, 0.6));
    }
}

/* Fiore della Vita */
.flower-of-life {
    animation: flowerRotate 60s linear infinite;
    transform-origin: 100px 100px;
}

@keyframes flowerRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ===== SIA HANDS LOGO ANIMATIONS ===== */
.sia-hands-logo {
    overflow: visible;
}

/* Aura cosmica pulsante */
.logo-cosmic-aura {
    animation: cosmicAuraBreathe 4s ease-in-out infinite;
}

@keyframes cosmicAuraBreathe {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Arcobaleno luminoso */
.rainbow-arc {
    filter: drop-shadow(0 0 3px currentColor);
}

.rainbow-pink {
    animation: rainbowGlow 3s ease-in-out infinite;
}

.rainbow-tan {
    animation: rainbowGlow 3s ease-in-out infinite 0.3s;
}

.rainbow-green {
    animation: rainbowGlow 3s ease-in-out infinite 0.6s;
}

.rainbow-blue {
    animation: rainbowGlow 3s ease-in-out infinite 0.9s;
}

@keyframes rainbowGlow {

    0%,
    100% {
        opacity: 0.85;
        filter: drop-shadow(0 0 3px currentColor);
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 15px currentColor);
    }
}

/* Mani con leggero movimento */
.hand-left {
    animation: handBreathLeft 4s ease-in-out infinite;
    transform-origin: 100px 160px;
}

.hand-right {
    animation: handBreathRight 4s ease-in-out infinite;
    transform-origin: 100px 160px;
}

@keyframes handBreathLeft {

    0%,
    100% {
        transform: rotate(0deg) translateX(0);
    }

    50% {
        transform: rotate(-1deg) translateX(-2px);
    }
}

@keyframes handBreathRight {

    0%,
    100% {
        transform: rotate(0deg) translateX(0);
    }

    50% {
        transform: rotate(1deg) translateX(2px);
    }
}

/* Sfera cosmica pulsante */
.sphere-main {
    animation: spherePulse 3s ease-in-out infinite;
}

.sphere-ring {
    animation: sphereRingRotate 8s linear infinite;
    transform-origin: 100px 115px;
}

@keyframes spherePulse {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(107, 155, 209, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(107, 155, 209, 0.8)) drop-shadow(0 0 25px rgba(111, 66, 193, 0.5));
    }
}

@keyframes sphereRingRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Stella interna brillante */
.star-burst line {
    animation: starBurstGlow 2s ease-in-out infinite;
}

.star-center {
    animation: starCenterPulse 1.5s ease-in-out infinite;
}

@keyframes starBurstGlow {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

@keyframes starCenterPulse {

    0%,
    100% {
        r: 4;
        filter: drop-shadow(0 0 3px #fff);
    }

    50% {
        r: 5;
        filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fef3c7);
    }
}

/* Goccia che cade e risale */
.water-drop {
    animation: dropFloat 3s ease-in-out infinite;
}

@keyframes dropFloat {

    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(5px);
        opacity: 0.8;
    }
}

.drop-main {
    animation: dropShine 2s ease-in-out infinite;
}

@keyframes dropShine {

    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(74, 99, 217, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(74, 99, 217, 0.8));
    }
}

/* Particelle cosmiche fluttuanti */
.logo-particle {
    animation: logoParticleFloat 4s ease-in-out infinite;
}

.logo-particle:nth-child(1) {
    animation-delay: 0s;
}

.logo-particle:nth-child(2) {
    animation-delay: 0.5s;
}

.logo-particle:nth-child(3) {
    animation-delay: 1s;
}

.logo-particle:nth-child(4) {
    animation-delay: 1.5s;
}

.logo-particle:nth-child(5) {
    animation-delay: 2s;
}

.logo-particle:nth-child(6) {
    animation-delay: 2.5s;
}

@keyframes logoParticleFloat {

    0%,
    100% {
        opacity: 0.5;
        transform: translateY(0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-8px) scale(1.3);
    }
}

/* Punti di energia */
.energy-point {
    animation: energyPulse 2s ease-in-out infinite;
}

@keyframes energyPulse {

    0%,
    100% {
        r: 3;
        opacity: 0.7;
    }

    50% {
        r: 4.5;
        opacity: 1;
    }
}

/* Audio prompt */
.audio-prompt {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
}

.audio-prompt__btn {
    border: 1px solid rgba(217, 200, 158, 0.6);
    background: rgba(17, 24, 39, 0.82);
    color: #f7f7f7;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.05rem;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(217, 200, 158, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(6px);
}

.audio-prompt__btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 25px rgba(217, 200, 158, 0.35);
}

/* WhatsApp widget — Cosmic Bubbles */
.whatsapp-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2200;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.whatsapp-widget.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Bottone WhatsApp — Pianeta verde */
.whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 35% 30%, #5aeea0, #25D366 40%, #1a9e4a 70%, #0a5e2a 100%);
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(37, 211, 102, 0.3),
        0 0 40px rgba(37, 211, 102, 0.1),
        inset -8px -8px 18px rgba(0, 0, 0, 0.45),
        inset 2px 2px 6px rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: planetFloat 6s ease-in-out infinite, planetGlow 3s ease-in-out infinite;
    border: none;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    overflow: hidden;
}

/* Atmosfera del pianeta */
.whatsapp-button::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 60%, rgba(90, 238, 160, 0.06) 100%);
    pointer-events: none;
}

.whatsapp-button:hover {
    transform: scale(1.12);
    box-shadow:
        0 0 30px rgba(37, 211, 102, 0.45),
        0 0 60px rgba(37, 211, 102, 0.15),
        inset -8px -8px 18px rgba(0, 0, 0, 0.45),
        inset 2px 2px 6px rgba(255, 255, 255, 0.1);
}

.whatsapp-icon {
    width: 28px;
    height: 28px;
    fill: rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

@keyframes planetFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes planetGlow {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(37, 211, 102, 0.3),
            0 0 40px rgba(37, 211, 102, 0.1),
            inset -8px -8px 18px rgba(0, 0, 0, 0.45),
            inset 2px 2px 6px rgba(255, 255, 255, 0.08);
    }

    50% {
        box-shadow:
            0 0 28px rgba(37, 211, 102, 0.4),
            0 0 55px rgba(37, 211, 102, 0.12),
            0 0 0 5px rgba(37, 211, 102, 0.04),
            inset -8px -8px 18px rgba(0, 0, 0, 0.45),
            inset 2px 2px 6px rgba(255, 255, 255, 0.1);
    }
}

/* Container nuvolette */
.wa-bubbles-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.whatsapp-widget.open .wa-bubbles-container {
    opacity: 1;
    visibility: visible;
}

/* Singola nuvoletta */
.wa-bubble {
    position: relative;
    background: rgba(10, 10, 30, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(111, 66, 193, 0.2);
    border-radius: 18px 18px 4px 18px;
    padding: 12px 16px;
    max-width: 280px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(111, 66, 193, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    animation: none;
}

.whatsapp-widget.open .wa-bubble {
    animation: bubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(0.08s * var(--bubble-index, 0));
}

.wa-bubble:hover {
    background: rgba(15, 15, 40, 0.92);
    transform: translateX(-3px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(111, 66, 193, 0.15);
    color: #fff;
}

/* Header bubble */
.wa-bubble-header {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.2);
    cursor: default;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.95);
}

.wa-bubble-header:hover {
    background: rgba(37, 211, 102, 0.12);
    transform: none;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(37, 211, 102, 0.1);
}

/* Coda della nuvoletta — solo l'ultima */
.wa-bubble-tail {
    position: absolute;
    bottom: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: inherit;
    border: inherit;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    display: none;
}

.wa-bubbles-container>.wa-bubble:last-child .wa-bubble-tail {
    display: block;
}

.wa-bubble-text {
    display: block;
}

@keyframes bubbleIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.92);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .whatsapp-button {
        width: 50px;
        height: 50px;
    }

    .whatsapp-icon {
        width: 26px;
        height: 26px;
    }

    .wa-bubble {
        max-width: 260px;
        font-size: 12px;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    .wa-bubble {
        max-width: calc(100vw - 80px);
    }
}

/* Banner classi settimanali */
.weekly-classes-modal {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 12, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 3200;
}

.weekly-classes-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.weekly-classes-card {
    position: relative;
    width: 100%;
    max-width: 950px;
    padding: 2rem 2.5rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(10, 18, 32, 0.96) 0%, rgba(8, 30, 36, 0.96) 100%);
    border: 1px solid rgba(88, 155, 255, 0.35);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
    color: #f7f7f7;
}

.weekly-classes-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.weekly-classes-close:hover {
    transform: rotate(90deg) scale(1.05);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.weekly-classes-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: rgba(219, 234, 254, 0.95);
    margin-bottom: 1rem;
}

.weekly-classes-card h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.6rem;
    font-weight: 700;
}

.weekly-classes-card p {
    margin: 0;
    color: rgba(247, 247, 247, 0.78);
    line-height: 1.6;
}

.weekly-classes-calendar {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
}

.weekly-classes-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: rgba(219, 234, 254, 0.95);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.05rem;
    background: rgba(59, 130, 246, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.weekly-classes-fallback:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.35);
}

/* ===== MINI FUNNEL CLASSI - LAYOUT 2 COLONNE ===== */
.class-funnel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* Colonna sinistra */
.class-funnel__left {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.class-funnel__header {
    text-align: left;
}

.class-funnel__emoji {
    font-size: 2.5rem;
    margin-bottom: 0.3rem;
}

.class-funnel h3 {
    background: linear-gradient(135deg, #f7f7f7 0%, #D9C89E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.8rem;
    margin: 0;
}

.class-funnel__subtitle {
    margin: 0.3rem 0 0 0;
    font-size: 1rem;
    color: rgba(217, 200, 158, 0.85);
    font-style: italic;
}

.class-funnel__desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(247, 247, 247, 0.8);
}

.class-funnel__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem;
}

.class-funnel__benefits li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: rgba(247, 247, 247, 0.75);
}

.class-funnel__benefits .benefit-icon {
    color: #2dd4bf;
    font-weight: bold;
    font-size: 0.9rem;
}

.class-funnel__teacher {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.class-funnel__teacher strong {
    color: #f7f7f7;
    font-size: 0.95rem;
}

.class-funnel__teacher span {
    color: rgba(247, 247, 247, 0.5);
    font-size: 0.85rem;
}

.class-funnel__photo {
    margin-top: 0.6rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.class-funnel__photo img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Colonna destra */
.class-funnel__right {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.class-funnel__schedule-box {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.class-funnel__schedule-box .schedule-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: rgba(217, 200, 158, 0.8);
    margin-bottom: 0.5rem;
}

.class-funnel__schedule {
    display: flex;
    gap: 0.5rem;
}

.class-funnel__day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.class-funnel__day .day-name {
    font-weight: 700;
    color: #f7f7f7;
    font-size: 0.95rem;
}

.class-funnel__day .day-time {
    color: rgba(219, 234, 254, 0.7);
    font-size: 0.8rem;
}

.class-funnel__schedule-note {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: rgba(217, 200, 158, 0.6);
    font-style: italic;
    text-align: center;
}

.class-funnel__location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.class-funnel__location:hover {
    background: rgba(255, 255, 255, 0.1);
}

.class-funnel__location .location-icon {
    font-size: 1rem;
}

.class-funnel__location .location-text {
    font-size: 0.85rem;
    color: rgba(247, 247, 247, 0.8);
}

.class-funnel__exclusive-box {
    background: linear-gradient(135deg, rgba(217, 200, 158, 0.1) 0%, rgba(111, 66, 193, 0.15) 100%);
    border-radius: 12px;
    padding: 0.8rem;
    border: 1px solid rgba(217, 200, 158, 0.25);
    text-align: center;
}

.class-funnel__exclusive-box .exclusive-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: linear-gradient(135deg, #D9C89E 0%, #b8a67d 100%);
    color: #0a0a0f;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
    border-radius: 999px;
    margin-bottom: 0.4rem;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(217, 200, 158, 0.4);
    }

    50% {
        box-shadow: 0 0 12px 2px rgba(217, 200, 158, 0.25);
    }
}

.class-funnel__exclusive-box p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(247, 247, 247, 0.7);
    line-height: 1.4;
}

/* Price - Offerta Irresistibile */
.class-funnel__price-box {
    text-align: center;
    margin-bottom: 0.5rem;
}

.class-funnel__price-box .price-label {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
    animation: label-pulse 1.5s ease-in-out infinite;
}

@keyframes label-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.class-funnel__price-box .price-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
    margin-bottom: 0.3rem;
}

.class-funnel__price-box .price-currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: #D9C89E;
}

.class-funnel__price-box .price-value {
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #D9C89E 0%, #f7f7f7 50%, #D9C89E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.class-funnel__price-box .price-period {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(247, 247, 247, 0.7);
}

.class-funnel__price-box .price-lessons {
    font-size: 0.9rem;
    font-weight: 600;
    color: #D9C89E;
    margin-top: 0.3rem;
}

.class-funnel__price-box .price-trial {
    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.15) 100%);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #22c55e;
    display: inline-block;
    animation: trial-pulse 2s ease-in-out infinite;
}

@keyframes trial-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3);
    }

    50% {
        box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.2);
    }
}

/* Price colori Yoga */
.weekly-classes-card--yoga .class-funnel__price-box .price-currency,
.weekly-classes-card--yoga .class-funnel__price-box .price-value {
    background: linear-gradient(135deg, #2dd4bf 0%, #f7f7f7 50%, #2dd4bf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Price colori Meditazione */
.weekly-classes-card--meditation .class-funnel__price-box .price-currency,
.weekly-classes-card--meditation .class-funnel__price-box .price-value {
    background: linear-gradient(135deg, #a78bfa 0%, #f7f7f7 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.class-funnel__button {
    width: 100%;
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, #6F42C1 0%, #4A63D9 100%);
    border: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    text-decoration: none;
    text-align: center;
    border-radius: 999px;
    transition: all 0.3s ease;
    animation: button-glow 2.5s ease-in-out infinite;
}

.class-funnel__button:hover {
    transform: translateY(-2px);
}

@keyframes button-glow {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
    }

    50% {
        box-shadow: 0 4px 25px rgba(111, 66, 193, 0.5);
    }
}

/* Varianti colore Yoga */
.weekly-classes-card--yoga {
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(135deg,
            rgba(8, 12, 20, 0.98) 0%,
            rgba(22, 32, 58, 0.98) 45%,
            rgba(28, 22, 52, 0.98) 100%);
}

.weekly-classes-card--yoga .class-funnel__button {
    background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
    animation: yoga-glow 2.5s ease-in-out infinite;
}

.weekly-classes-card--yoga .class-funnel__benefits .benefit-icon {
    color: #2dd4bf;
}

.weekly-classes-card--yoga .class-funnel__exclusive-box {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.1) 0%, rgba(13, 148, 136, 0.15) 100%);
    border-color: rgba(45, 212, 191, 0.25);
}

.weekly-classes-card--yoga .exclusive-badge {
    background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
}

@keyframes yoga-glow {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(45, 212, 191, 0.3);
    }

    50% {
        box-shadow: 0 4px 25px rgba(45, 212, 191, 0.5);
    }
}

/* Varianti colore Meditazione */
.weekly-classes-card--meditation {
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(135deg,
            rgba(8, 12, 20, 0.98) 0%,
            rgba(22, 32, 58, 0.98) 45%,
            rgba(28, 22, 52, 0.98) 100%);
}

.weekly-classes-card--meditation .class-funnel__button {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    animation: meditation-glow 2.5s ease-in-out infinite;
}

.weekly-classes-card--meditation .class-funnel__benefits .benefit-icon {
    color: #a78bfa;
}

.weekly-classes-card--meditation .class-funnel__exclusive-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.15) 100%);
    border-color: rgba(139, 92, 246, 0.25);
}

.weekly-classes-card--meditation .exclusive-badge {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

@keyframes meditation-glow {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    }

    50% {
        box-shadow: 0 4px 25px rgba(139, 92, 246, 0.5);
    }
}

/* ===== BOOKING MODAL - PRENOTAZIONE CHIAMATA ===== */
.booking-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
}

.booking-modal.active {
    opacity: 1;
    visibility: visible;
}

.booking-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(10, 18, 32, 0.98) 0%, rgba(15, 12, 25, 0.98) 100%);
    border: 1px solid rgba(217, 200, 158, 0.3);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(217, 200, 158, 0.1);
    color: #f7f7f7;
}

.booking-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: rotate(90deg);
}

.booking-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.booking-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #D9C89E 0%, #f7f7f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.5rem 0;
}

.booking-header p {
    color: rgba(247, 247, 247, 0.7);
    font-size: 0.95rem;
    margin: 0;
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.booking-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(217, 200, 158, 0.9);
}

.booking-field label .required {
    color: #ef4444;
}

.booking-field input,
.booking-field textarea {
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #f7f7f7;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.booking-field input:focus,
.booking-field textarea:focus {
    outline: none;
    border-color: rgba(217, 200, 158, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(217, 200, 158, 0.1);
}

.booking-field input::placeholder,
.booking-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.booking-field textarea {
    min-height: 80px;
    resize: vertical;
}

/* Date/Time Picker */
.booking-datetime {
    margin: 0.5rem 0;
}

.booking-datetime-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(217, 200, 158, 0.9);
    margin-bottom: 0.8rem;
    display: block;
}

.booking-date-picker {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 200, 158, 0.3) transparent;
}

.booking-date-picker::-webkit-scrollbar {
    height: 4px;
}

.booking-date-picker::-webkit-scrollbar-thumb {
    background: rgba(217, 200, 158, 0.3);
    border-radius: 4px;
}

.booking-date-btn {
    flex-shrink: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(247, 247, 247, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-width: 70px;
}

.booking-date-btn:hover {
    border-color: rgba(217, 200, 158, 0.4);
    background: rgba(217, 200, 158, 0.1);
}

.booking-date-btn.selected {
    border-color: rgba(217, 200, 158, 0.6);
    background: rgba(217, 200, 158, 0.15);
    color: #D9C89E;
}

.booking-date-btn .date-day {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.booking-date-btn .date-num {
    font-size: 1.1rem;
    font-weight: 700;
}

.booking-date-btn .date-month {
    font-size: 0.65rem;
    opacity: 0.6;
}

.booking-time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
}

.booking-time-btn {
    padding: 0.6rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(247, 247, 247, 0.8);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.booking-time-btn:hover:not(:disabled) {
    border-color: rgba(217, 200, 158, 0.4);
    background: rgba(217, 200, 158, 0.1);
}

.booking-time-btn.selected {
    border-color: rgba(217, 200, 158, 0.6);
    background: rgba(217, 200, 158, 0.2);
    color: #D9C89E;
    font-weight: 600;
}

.booking-time-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.booking-no-slots {
    text-align: center;
    padding: 1rem;
    color: rgba(247, 247, 247, 0.5);
    font-size: 0.85rem;
}

/* Consensi */
.booking-consents {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.booking-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #D9C89E;
    cursor: pointer;
}

.booking-consent label {
    font-size: 0.8rem;
    color: rgba(247, 247, 247, 0.75);
    cursor: pointer;
    line-height: 1.4;
}

.booking-consent label a {
    color: #D9C89E;
    text-decoration: underline;
}

.booking-marketing-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.4rem;
    margin-left: 1.5rem;
}

.booking-marketing-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.booking-marketing-option input {
    width: 16px;
    height: 16px;
    accent-color: #D9C89E;
}

.booking-marketing-option label {
    font-size: 0.78rem;
}

/* Submit */
.booking-submit {
    width: 100%;
    padding: 1rem 1.5rem;
    margin-top: 1rem;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #D9C89E 0%, #b8a67d 100%);
    color: #0a0a0f;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.booking-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(217, 200, 158, 0.3);
}

.booking-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.booking-submit.loading {
    position: relative;
    color: transparent;
}

.booking-submit.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(10, 10, 15, 0.3);
    border-top-color: #0a0a0f;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Success/Error states */
.booking-message {
    text-align: center;
    padding: 2rem 1rem;
}

.booking-message h3 {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
}

.booking-message p {
    color: rgba(247, 247, 247, 0.7);
    font-size: 0.95rem;
}

.booking-message.success h3 {
    color: #22c55e;
}

.booking-message.error h3 {
    color: #ef4444;
}

.booking-message-btn {
    margin-top: 1.5rem;
    padding: 0.8rem 2rem;
    border-radius: 10px;
    border: 1px solid rgba(217, 200, 158, 0.4);
    background: transparent;
    color: #D9C89E;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.booking-message-btn:hover {
    background: rgba(217, 200, 158, 0.1);
}

/* Booking Modal Mobile */
@media (max-width: 600px) {
    .booking-card {
        padding: 1.5rem 1rem;
        max-height: 95vh;
    }

    .booking-header h2 {
        font-size: 1.3rem;
    }

    .booking-header p {
        font-size: 0.85rem;
    }

    .booking-field input,
    .booking-field textarea {
        padding: 0.7rem 0.9rem;
        font-size: 0.9rem;
    }

    .booking-date-btn {
        padding: 0.5rem 0.6rem;
        min-width: 60px;
    }

    .booking-date-btn .date-num {
        font-size: 1rem;
    }

    .booking-time-slots {
        grid-template-columns: repeat(3, 1fr);
    }

    .booking-marketing-options {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* MOBILE - Layout verticale compatto, tutto in una schermata */
@media (max-width: 600px) {
    .weekly-classes-modal {
        padding: 0.5rem;
    }

    .weekly-classes-card {
        max-width: 100%;
        padding: 1rem;
        border-radius: 16px;
    }

    .class-funnel__grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .class-funnel__emoji {
        font-size: 1.5rem;
    }

    .class-funnel h3 {
        font-size: 1.1rem;
    }

    .class-funnel__subtitle {
        font-size: 0.7rem;
    }

    .class-funnel__desc {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .class-funnel__benefits {
        gap: 0.15rem;
    }

    .class-funnel__benefits li {
        font-size: 0.65rem;
    }

    .class-funnel__teacher {
        padding-top: 0.3rem;
    }

    .class-funnel__teacher strong {
        font-size: 0.72rem;
    }

    .class-funnel__teacher span {
        font-size: 0.62rem;
    }

    .class-funnel__schedule-box,
    .class-funnel__exclusive-box {
        padding: 0.5rem;
    }

    .class-funnel__schedule-box .schedule-label {
        font-size: 0.6rem;
        margin-bottom: 0.3rem;
    }

    .class-funnel__day {
        padding: 0.3rem;
    }

    .class-funnel__day .day-name {
        font-size: 0.68rem;
    }

    .class-funnel__day .day-time {
        font-size: 0.58rem;
    }

    .class-funnel__schedule-note {
        font-size: 0.55rem;
    }

    .class-funnel__exclusive-box .exclusive-badge {
        font-size: 0.55rem;
        padding: 0.2rem 0.5rem;
    }

    .class-funnel__exclusive-box p {
        font-size: 0.62rem;
    }

    .class-funnel__price-box .price-label {
        font-size: 0.5rem;
        padding: 0.15rem 0.5rem;
    }

    .class-funnel__price-box .price-currency {
        font-size: 0.9rem;
    }

    .class-funnel__price-box .price-value {
        font-size: 1.5rem;
    }

    .class-funnel__price-box .price-period {
        font-size: 0.6rem;
    }

    .class-funnel__price-box .price-benefit {
        font-size: 0.5rem;
    }

    .class-funnel__price-box .price-lessons {
        font-size: 0.6rem;
    }

    .class-funnel__price-box .price-trial {
        font-size: 0.55rem;
        padding: 0.2rem 0.4rem;
        margin-top: 0.3rem;
    }

    .class-funnel__button {
        padding: 0.6rem 0.8rem;
        font-size: 0.72rem;
    }

    .weekly-classes-close {
        width: 28px;
        height: 28px;
        top: 0.5rem;
        right: 0.5rem;
        font-size: 1.2rem;
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    .class-funnel__benefits {
        grid-template-columns: 1fr;
    }

    .class-funnel h3 {
        font-size: 1rem;
    }

    .class-funnel__desc {
        font-size: 0.68rem;
    }
}

@media (max-width: 768px) {
    .audio-prompt {
        top: auto !important;
        right: auto !important;
        left: 1rem !important;
        bottom: 80px !important;
        /* Alzato per evitare sovrapposizione con WhatsApp */
        transform: none !important;
    }
}

/* Admin overlay */
.admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.admin-overlay.hidden {
    display: none;
}

.admin-modal {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(217, 200, 158, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    color: #f7f7f7;
}

.admin-modal h3 {
    margin: 0 0 1rem 0;
    letter-spacing: 0.05rem;
}

.admin-modal label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: rgba(247, 247, 247, 0.85);
}

.admin-modal label.inline {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-modal input,
.admin-modal textarea {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(217, 200, 158, 0.25);
    background: rgba(255, 255, 255, 0.02);
    color: #f7f7f7;
}

.admin-modal textarea {
    resize: vertical;
}

.admin-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5rem;
}

.admin-btn {
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(217, 200, 158, 0.15);
    color: #f7f7f7;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-btn.primary {
    background: linear-gradient(135deg, #4A63D9, #6F42C1);
    border-color: rgba(111, 66, 193, 0.4);
}

.admin-btn.danger {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
}

.admin-btn.ghost {
    background: transparent;
    border-color: rgba(217, 200, 158, 0.3);
}

.admin-btn:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 15px rgba(217, 200, 158, 0.2);
}

.admin-error {
    color: #f87171;
    min-height: 1.1rem;
    margin-top: 0.3rem;
    font-size: 0.85rem;
}

.admin-hint {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: rgba(247, 247, 247, 0.6);
}

/* Pannello admin card - modal più largo */
.admin-modal-wide {
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(217, 200, 158, 0.2);
}

.admin-header h3 {
    margin: 0;
}

/* Lista card nel pannello */
.cards-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.card-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(217, 200, 158, 0.2);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.card-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(217, 200, 158, 0.3);
}

.card-drag-handle {
    cursor: grab;
    color: rgba(247, 247, 247, 0.5);
    font-size: 1.2rem;
    user-select: none;
}

.card-drag-handle:active {
    cursor: grabbing;
}

.card-list-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.card-list-title {
    font-weight: 600;
    color: #f7f7f7;
    font-size: 1rem;
}

.card-list-meta {
    font-size: 0.8rem;
    color: rgba(247, 247, 247, 0.6);
}

.card-list-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.card-list-status.enabled {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.card-list-status.disabled {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.card-list-actions {
    display: flex;
    gap: 0.5rem;
}

.card-list-actions .admin-btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
}

/* Editor card - stili aggiuntivi */
.pill-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pill-group label {
    margin-bottom: 0.25rem;
}

.pill-group input {
    margin-top: 0;
}

/* Responsive per pannelli admin */
@media (max-width: 768px) {
    .admin-modal-wide {
        max-width: 95%;
        max-height: 90vh;
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .card-list-item {
        flex-wrap: wrap;
    }

    .card-list-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Anelli orbitali */
.logo-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid;
    animation: ringRotate linear infinite;
}

.ring-1 {
    width: 320px;
    height: 320px;
    border-color: rgba(111, 66, 193, 0.3);
    animation-duration: 20s;
}

.ring-2 {
    width: 340px;
    height: 340px;
    border-color: rgba(214, 111, 214, 0.2);
    animation-duration: 30s;
    animation-direction: reverse;
}

.ring-3 {
    width: 360px;
    height: 360px;
    border-color: rgba(74, 99, 217, 0.15);
    animation-duration: 40s;
}

@keyframes ringRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Aura del logo */
.logo-aura {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
            transparent 30%,
            rgba(111, 66, 193, 0.12) 45%,
            rgba(111, 66, 193, 0.08) 60%,
            rgba(214, 111, 214, 0.05) 75%,
            rgba(214, 111, 214, 0.02) 85%,
            transparent 100%);
    animation: logoAuraPulse 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

@keyframes logoAuraPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Particelle del logo */
.logo-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.logo-particles::before,
.logo-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(217, 200, 158, 0.8);
    border-radius: 50%;
    animation: logoParticle 8s ease-in-out infinite;
}

.logo-particles::before {
    top: 10%;
    left: 50%;
}

.logo-particles::after {
    bottom: 10%;
    right: 30%;
    animation-delay: 4s;
    background: rgba(214, 111, 214, 0.8);
}

@keyframes logoParticle {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }

    25% {
        transform: translateY(-30px) translateX(20px) scale(1.5);
        opacity: 1;
    }

    50% {
        transform: translateY(0) translateX(40px) scale(1);
        opacity: 0.5;
    }

    75% {
        transform: translateY(30px) translateX(20px) scale(1.5);
        opacity: 1;
    }
}

/* Hover effect sul logo */
.sia-logo-container:hover .sia-svg {
    filter: drop-shadow(0 0 50px rgba(111, 66, 193, 0.8)) drop-shadow(0 0 80px rgba(214, 111, 214, 0.5));
}

.sia-logo-container:hover .flower-of-life {
    animation-duration: 20s;
}

.sia-logo-container:hover .logo-aura {
    animation-duration: 2s;
}

/* Sottotitolo sotto il logo */
.logo-subtitle {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: rgba(217, 200, 158, 0.8);
    letter-spacing: 0.25rem;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
}

/* Footer */
.lobby-footer {
    position: absolute;
    bottom: 2rem;
    text-align: center;
}

.lobby-footer p {
    color: rgba(217, 200, 158, 0.5);
    font-size: 0.85rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .lobby-container {
        flex-direction: column;
        gap: 2rem;
    }

    .sia-logo-container {
        order: -1;
        width: 280px;
        height: 280px;
    }

    .sia-logo-animated {
        width: 220px;
        height: 220px;
    }

    .ring-1 {
        width: 260px;
        height: 260px;
    }

    .ring-2 {
        width: 280px;
        height: 280px;
    }

    .ring-3 {
        width: 300px;
        height: 300px;
    }

    .choice-card {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {

    /* Bottone musica mobile */
    .music-control {
        top: auto;
        bottom: 2.5rem;
        right: 1.5rem;
        width: 45px;
        height: 45px;
    }

    html,
    body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
    }

    .lobby {
        height: auto;
        min-height: 100vh;
        justify-content: flex-start;
        padding: 2rem 1rem;
    }

    .lobby-title {
        font-size: 2.5rem;
    }

    .lobby-subtitle {
        font-size: 0.9rem;
    }

    /* TAGLINE VISIBILE SU MOBILE - appare dopo il logo, posizionata sopra a tutto */
    .main-tagline {
        display: block !important;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        opacity: 0;
        visibility: hidden;
        order: -2;
        margin-bottom: 1.5rem;
        justify-content: center;
        text-align: center;
        gap: 0.4rem;
    }

    .main-tagline.visible {
        animation: mobileFadeIn 1s ease-out 0s both !important;
    }

    .main-tagline h1 {
        font-size: 0.65rem;
        line-height: 1.6;
        letter-spacing: 0.15rem;
    }

    .path-callout-group {
        position: relative;
        top: auto;
        order: 0;
        margin: 1rem 0 0 0;
        flex: 0 0 100%;
    }

    .path-callout {
        font-size: 0.95rem;
        letter-spacing: 0.2rem;
    }

    /* Banner mobile violaceo - NASCOSTO */
    .mobile-banner {
        display: none !important;
    }

    /* Logo SIA - parte dal centro, poi si sposta verso l'alto al click */
    .sia-logo-container {
        width: 320px;
        height: 320px;
        margin: 0 auto 2.5rem;
        padding: 0;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        order: -1;
        opacity: 1;
        transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 100;
    }

    /* Prompt mobile */
    .click-prompt {
        top: -100px;
    }

    .click-prompt-text {
        font-size: 0.75rem;
        letter-spacing: 0.12rem;
    }

    .sia-logo-container::before {
        width: 180px;
        height: 180px;
    }

    /* Quando esplode, si sposta verso l'alto mantenendo il centro orizzontale */
    .sia-logo-container.exploding {
        top: 2rem;
        transform: translate(-50%, 0);
    }

    /* Dopo la transizione, torna a position relative per il layout normale */
    .sia-logo-container.settled {
        position: relative;
        top: auto;
        left: auto;
        transform: translate(0, 0);
        transition: none;
    }

    .sia-logo-container.exploding .sia-logo-animated {
        animation: mobileBigBangReveal 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .sia-logo-animated {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }

    .logo-aura {
        inset: -25px;
        opacity: 0.7;
    }

    .sia-text {
        font-size: 48px;
        letter-spacing: 7px;
    }

    .sia-subtitle {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .sia-tagline {
        font-size: 7px;
        letter-spacing: 1px;
    }

    /* Card appaiono dopo che il logo si sposta */
    .choice-card.featured-card {
        opacity: 0;
        visibility: hidden;
        order: 2;
    }

    .choice-card.choice-gold {
        opacity: 0;
        visibility: hidden;
        order: 3;
    }

    .choice-event {
        order: 1 !important;
        max-width: 100%;
        margin-top: 1.5rem;
    }

    .choice-card.materializing {
        animation: cardFadeIn 0.8s ease-out both !important;
    }

    .ring-1 {
        width: 230px;
        height: 230px;
    }

    .ring-2 {
        width: 250px;
        height: 250px;
    }

    .ring-3 {
        width: 270px;
        height: 270px;
    }

    .choice-card {
        padding: 2rem 1.5rem;
    }

    .choice-purple {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .choice-card h2 {
        font-size: 1.4rem;
    }

    .choice-card p {
        text-align: center;
        font-size: 0.9rem;
    }

    .cta-phoenix {
        padding: 1rem 1.5rem;
        width: 100%;
        text-align: center;
    }

    .cta-phoenix strong {
        font-size: 1rem;
        margin-bottom: 0.15rem;
    }

    .cta-phoenix small {
        font-size: 0.7rem;
    }

    .spiritual-symbol {
        width: 70px;
        height: 70px;
    }

    /* Keyframes per animazione mobile - Big Bang che rivela il logo */
    @keyframes mobileBigBangReveal {
        0% {
            opacity: 0;
            transform: scale(0) rotate(0deg);
            filter: brightness(10) blur(20px);
        }

        20% {
            opacity: 1;
            transform: scale(0.3) rotate(90deg);
            filter: brightness(8) blur(15px);
        }

        40% {
            opacity: 1;
            transform: scale(1.5) rotate(180deg);
            filter: brightness(5) blur(10px);
        }

        60% {
            opacity: 1;
            transform: scale(0.8) rotate(270deg);
            filter: brightness(3) blur(5px);
        }

        80% {
            opacity: 1;
            transform: scale(1.1) rotate(360deg);
            filter: brightness(1.5) blur(2px);
        }

        100% {
            opacity: 1;
            transform: scale(1) rotate(360deg);
            filter: brightness(1) blur(0px);
        }
    }

    @keyframes mobileFadeIn {
        0% {
            opacity: 0;
            visibility: visible;
            transform: scale(0.95);
            filter: brightness(2) blur(10px);
        }

        100% {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            filter: brightness(1) blur(0px);
        }
    }

    @keyframes mobileBannerFadeIn {
        0% {
            opacity: 0;
            transform: translateY(-10px);
        }

        100% {
            opacity: 0.85;
            transform: translateY(0);
        }
    }

    @keyframes mobileTaglineAppear {
        0% {
            opacity: 0;
            transform: translateY(-30px) scale(0.9);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}


.logo-caption {
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    letter-spacing: 0.18rem;
    color: rgba(247, 247, 247, 0.8);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

@media (min-width: 1100px) {
    .sia-logo-container.exploding .logo-caption {
        opacity: 1;
    }
}

.logo-caption h1 {
    font-size: clamp(0.65rem, 0.5rem + 0.45vw, 0.9rem);
    font-weight: 300;
    letter-spacing: clamp(0.12rem, 0.08rem + 0.25vw, 0.2rem);
    color: rgba(247, 247, 247, 0.6);
    text-align: center;
    text-transform: uppercase;
    line-height: 1.8;
}

@media (min-width: 1100px) {
    .main-tagline {
        display: none !important;
    }
}

/* ===== FOOTER MINIMAL ===== */
.site-footer {
    position: relative;
    /* Change from fixed to relative to flow after content */
    margin-top: 4rem;
    /* Increased margin for better spacing */
    width: 100%;
    text-align: center;
    padding: 2rem 0;
    background: transparent;
    /* Removed gradient background */
    z-index: 100;
    opacity: 0;
    display: none;
    /* Changed from visibility: hidden to display: none */
    transition: opacity 0.5s ease;
    order: 6;
    /* After editorial content (5) */
}

.site-footer.visible {
    display: block;
    opacity: 1;
}

.site-footer a {
    color: rgba(247, 247, 247, 0.35);
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: rgba(217, 200, 158, 0.7);
}

/* ===== EDITORIAL CONTENT ===== */
.editorial-content {
    width: 100%;
    max-width: 1000px;
    /* Più stretto per leggibilità */
    margin: 4rem auto 0;
    display: none;
    /* Was flex, changed to none to fit layout */
    flex-direction: column;
    gap: 8rem;
    /* Spazio ampio tra le sezioni */
    padding-bottom: 6rem;
    position: relative;
    z-index: 10;
    opacity: 0;
    transition: opacity 1s ease-out;
    order: 5;
    /* After cards (4) */
}

.editorial-content.visible {
    display: flex;
    opacity: 1;
}

.editorial-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.editorial-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.content-wrapper {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.reverse-layout .content-wrapper {
    flex-direction: row-reverse;
}

.text-column {
    flex: 1;
}

.image-column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Typography */
.editorial-title {
    font-family: 'Cinzel', 'Inter', serif;
    /* Se Cinzel non c'è, fallback */
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    color: var(--bianco);
    margin-bottom: 1.5rem;
    letter-spacing: 0.1rem;
    background: linear-gradient(90deg, #fff, #D9C89E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.editorial-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--viola), var(--oro));
    margin-bottom: 2rem;
    border-radius: 2px;
}

.editorial-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(247, 247, 247, 0.85);
    margin-bottom: 1.5rem;
    font-weight: 300;
    text-align: justify;
}

.editorial-text strong {
    color: var(--oro);
    font-weight: 600;
}

/* Images & Placeholders */
.editorial-image-placeholder {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1/1;
    /* Quadrato o cerchio */
    border-radius: 20px;
    /* Soft square */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.editorial-image-placeholder:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(111, 66, 193, 0.2);
}

.founder-glow {
    border-radius: 50% 50% 50% 0;
    /* Forma organica */
}

/* Symbols inside placeholders */
.symbol-container {
    width: 60%;
    height: 60%;
    opacity: 0.8;
    animation: floatSymbol 6s ease-in-out infinite;
}

.mystic-symbol {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(217, 200, 158, 0.5));
}

.placeholder-initials {
    font-size: 5rem;
    font-family: serif;
    color: rgba(217, 200, 158, 0.3);
    border: 2px solid rgba(217, 200, 158, 0.3);
    padding: 2rem;
    border-radius: 50%;
}

@keyframes floatSymbol {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .editorial-content {
        gap: 5rem;
        margin-top: 2rem;
        padding-bottom: 4rem;
    }

    .content-wrapper {
        flex-direction: column !important;
        /* Stack vertically always on mobile */
        gap: 2rem;
        text-align: center;
    }

    .editorial-text {
        text-align: center;
        /* Center text on mobile for better flow */
        font-size: 1rem;
    }

    .editorial-divider {
        margin: 0 auto 2rem;
        /* Center divider */
    }

    .editorial-image-placeholder {
        max-width: 300px;
    }

    /* Adjust footer position for flow */
    .site-footer {
        position: relative !important;
        background: transparent !important;
        padding-top: 2rem;
    }
}

/* Override footer for desktop flow too if needed */
.site-footer {
    position: relative;
    /* Change from fixed to relative to flow after content */
    margin-top: 2rem;
    opacity: 1 !important;
    /* Always visible if relative */
    visibility: visible !important;
}

/* ===== Immagini editoriali reali ===== */
.editorial-image-placeholder.logo-tile {
    background: rgba(255, 255, 255, 0.94);
}

.editorial-image-placeholder .editorial-logo {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.editorial-image-placeholder .editorial-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* AI Act (Reg. UE 2024/1689, art. 50): dicitura su immagini generate con IA */
.ai-badge {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 3;
    background: rgba(9, 9, 15, 0.6);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    pointer-events: none;
}

.site-footer .ai-note {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.6;
}

/* ===== CTA disabilitata (Work In Progress) ===== */
.choice-cta.cta-disabled {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: none !important;
    pointer-events: none;
    cursor: not-allowed;
}

/* ===== SUN TRANSITION (portata dalla lobby Talithakum) ===== */
#sunTransition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

#sunTransition.is-active {
    pointer-events: auto;
    animation: stAppear 0.4s ease forwards;
}

@keyframes stAppear {
    to { opacity: 1; }
}

.st-sky {
    position: absolute;
    inset: 0;
    /* verticale esatta della landing Quarantena: notte → viola → magenta →
       rosa → corallo → malva → mare verde-acqua → blu profondo */
    background: linear-gradient(180deg,
            #050713 0%,
            #141431 10%,
            #3b265f 22%,
            #9d5794 36%,
            #df4d74 48%,
            #f0603c 58%,
            #b6436c 64%,
            #26706f 72%,
            #184358 84%,
            #090d29 100%);
}

.st-horizon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: radial-gradient(ellipse 140% 100% at 50% 100%,
            rgba(240, 96, 60, 0.95) 0%,
            rgba(223, 77, 116, 0.55) 30%,
            rgba(157, 87, 148, 0.22) 60%,
            transparent 80%);
    transform-origin: bottom center;
    opacity: 0;
}

.is-active .st-horizon {
    animation: stHorizon 1.5s 0.15s cubic-bezier(0.2, 0, 0.3, 1) forwards;
}

@keyframes stHorizon {
    0% { opacity: 0; transform: scaleY(0.2); }
    100% { opacity: 1; transform: scaleY(1); }
}

.st-sun {
    position: absolute;
    left: 50%;
    bottom: -130px;
    transform: translateX(-50%);
    width: 110px;
    height: 110px;
    opacity: 0;
}

.is-active .st-sun {
    animation: stSunRise 1.6s 0.25s cubic-bezier(0.15, 0, 0.35, 1) forwards;
}

@keyframes stSunRise {
    0% { opacity: 0; bottom: -130px; }
    12% { opacity: 1; }
    100% { opacity: 1; bottom: 46%; }
}

.st-orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,
            #fffaff 0%, #fff5ae 20%, #ffcc68 45%, #f0713f 80%);
    box-shadow:
        0 0 60px #ffd35f,
        0 0 140px rgba(255, 204, 104, 0.75),
        0 0 280px rgba(244, 116, 88, 0.50),
        0 0 500px rgba(209, 70, 119, 0.30);
    z-index: 2;
}

.st-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 1px;
    opacity: 0;
    z-index: 1;
}

.st-rays::before {
    content: '';
    position: absolute;
    width: 360vmax;
    height: 360vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg,
            transparent 0deg, rgba(255, 213, 95, 0.06) 4deg, transparent 8deg,
            transparent 22deg, rgba(255, 213, 95, 0.05) 26deg, transparent 30deg,
            transparent 44deg, rgba(255, 213, 95, 0.06) 48deg, transparent 52deg,
            transparent 66deg, rgba(255, 213, 95, 0.04) 70deg, transparent 74deg,
            transparent 88deg, rgba(255, 213, 95, 0.06) 92deg, transparent 96deg,
            transparent 110deg, rgba(255, 213, 95, 0.05) 114deg, transparent 118deg,
            transparent 132deg, rgba(255, 213, 95, 0.06) 136deg, transparent 140deg,
            transparent 154deg, rgba(255, 213, 95, 0.04) 158deg, transparent 162deg,
            transparent 176deg, rgba(255, 213, 95, 0.06) 180deg, transparent 184deg,
            transparent 198deg, rgba(255, 213, 95, 0.05) 202deg, transparent 206deg,
            transparent 220deg, rgba(255, 213, 95, 0.06) 224deg, transparent 228deg,
            transparent 242deg, rgba(255, 213, 95, 0.04) 246deg, transparent 250deg,
            transparent 264deg, rgba(255, 213, 95, 0.06) 268deg, transparent 272deg,
            transparent 286deg, rgba(255, 213, 95, 0.05) 290deg, transparent 294deg,
            transparent 308deg, rgba(255, 213, 95, 0.06) 312deg, transparent 316deg,
            transparent 330deg, rgba(255, 213, 95, 0.04) 334deg, transparent 338deg,
            transparent 352deg, rgba(255, 213, 95, 0.06) 356deg, transparent 360deg);
    border-radius: 50%;
    animation: stRaysRotate 12s linear infinite;
}

.is-active .st-rays {
    animation: stRaysAppear 0.8s 1.3s ease forwards;
}

@keyframes stRaysAppear {
    to { opacity: 1; }
}

@keyframes stRaysRotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.st-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 70% at 50% 55%,
            rgba(255, 245, 174, 0.80),
            rgba(244, 116, 88, 0.38) 40%,
            transparent 70%);
    opacity: 0;
}

.is-active .st-flash {
    animation: stFlash 0.7s 1.5s ease-in forwards;
}

@keyframes stFlash {
    0% { opacity: 0; }
    60% { opacity: 0.9; }
    100% { opacity: 1; }
}