/* Compleanno AI - 3D Fireworks Effect */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    --brand: #007c96;
    --brand-dark: #005b70;
    --brand-light: #00a0bd;
    --text: #f6fbff;
    --muted: rgba(255, 255, 255, 0.7);
    --panel: rgba(255, 255, 255, 0.12);
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #111;
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    place-items: center;
    perspective: 800px;
    position: relative;
}

body *:not(:empty) {
    transform-style: preserve-3d;
}

/* 3D Scene Container */
.scene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    animation: scene 120s infinite linear;
}

@keyframes scene {
    from { transform: rotateX(90deg) translateZ(-12em) rotateZ(0deg); }
    to { transform: rotateX(90deg) translateZ(-12em) rotateZ(360deg); }
}

.scene::before {
    content: '';
    position: absolute;
    inset: -50em;
    background-color: #223;
    background-image:
        radial-gradient(closest-side, transparent, #111),
        radial-gradient(circle at 0.4em 0.4em, transparent 0.1em, rgba(170, 170, 255, 0.2) 0.2em 0.3em, transparent 0.4em),
        radial-gradient(circle at 1.2em 1.2em, transparent 0.1em, rgba(170, 170, 255, 0.2) 0.2em 0.3em, transparent 0.4em);
    background-size: 100% 100%, 1.6em 1.6em, 1.6em 1.6em;
}

/* Launcher positioning - 10 launchers */
.launcher {
    position: absolute;
}

.launcher:nth-child(1) {
    --duration: 3.10s;
    --hue: 0;
    animation: f-position1 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position1 {
    0% { transform: translate(-20em, 10em); }
    10% { transform: translate(11em, 15em); }
    20% { transform: translate(-2em, -1em); }
    30% { transform: translate(7em, -14em); }
    40% { transform: translate(-15em, -19em); }
    50% { transform: translate(-10em, -3em); }
    60% { transform: translate(15em, -9em); }
    70% { transform: translate(16em, -13em); }
    80% { transform: translate(-16em, -11em); }
    90% { transform: translate(18em, 4em); }
}

.launcher:nth-child(2) {
    --duration: 3.33s;
    --hue: 36;
    animation: f-position2 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position2 {
    0% { transform: translate(-7em, 5em); }
    10% { transform: translate(2em, -6em); }
    20% { transform: translate(-16em, 3em); }
    30% { transform: translate(17em, 7em); }
    40% { transform: translate(-5em, -2em); }
    50% { transform: translate(-11em, 15em); }
    60% { transform: translate(-10em, 18em); }
    70% { transform: translate(-1em, 6em); }
    80% { transform: translate(-2em, -12em); }
    90% { transform: translate(19em, 1em); }
}

.launcher:nth-child(3) {
    --duration: 3.56s;
    --hue: 72;
    animation: f-position3 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position3 {
    0% { transform: translate(-19em, -20em); }
    10% { transform: translate(-13em, -2em); }
    20% { transform: translate(19em, -18em); }
    30% { transform: translate(-6em, 14em); }
    40% { transform: translate(-2em, 14em); }
    50% { transform: translate(8em, -17em); }
    60% { transform: translate(-5em, -16em); }
    70% { transform: translate(1em, -15em); }
    80% { transform: translate(16em, 8em); }
    90% { transform: translate(-2em, -13em); }
}

.launcher:nth-child(4) {
    --duration: 3.79s;
    --hue: 108;
    animation: f-position4 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position4 {
    0% { transform: translate(-3em, 18em); }
    10% { transform: translate(15em, -7em); }
    20% { transform: translate(-3em, 5em); }
    30% { transform: translate(-13em, -7em); }
    40% { transform: translate(-16em, -19em); }
    50% { transform: translate(6em, 7em); }
    60% { transform: translate(-14em, -2em); }
    70% { transform: translate(-6em, -4em); }
    80% { transform: translate(-12em, -10em); }
    90% { transform: translate(-17em, -18em); }
}

.launcher:nth-child(5) {
    --duration: 4.02s;
    --hue: 144;
    animation: f-position5 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position5 {
    0% { transform: translate(12em, -2em); }
    10% { transform: translate(1em, -5em); }
    20% { transform: translate(15em, 16em); }
    30% { transform: translate(1em, 16em); }
    40% { transform: translate(-18em, -14em); }
    50% { transform: translate(-14em, -5em); }
    60% { transform: translate(-3em, 9em); }
    70% { transform: translate(9em, 5em); }
    80% { transform: translate(-14em, -14em); }
    90% { transform: translate(4em, 6em); }
}

.launcher:nth-child(6) {
    --duration: 4.25s;
    --hue: 180;
    animation: f-position6 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position6 {
    0% { transform: translate(-9em, 2em); }
    10% { transform: translate(-10em, -19em); }
    20% { transform: translate(-19em, -12em); }
    30% { transform: translate(-14em, 8em); }
    40% { transform: translate(-18em, 19em); }
    50% { transform: translate(-14em, 13em); }
    60% { transform: translate(-13em, -17em); }
    70% { transform: translate(-1em, 8em); }
    80% { transform: translate(13em, 15em); }
    90% { transform: translate(-5em, -2em); }
}

.launcher:nth-child(7) {
    --duration: 4.48s;
    --hue: 216;
    animation: f-position7 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position7 {
    0% { transform: translate(12em, -12em); }
    10% { transform: translate(-13em, 12em); }
    20% { transform: translate(10em, -14em); }
    30% { transform: translate(12em, -6em); }
    40% { transform: translate(-1em, -6em); }
    50% { transform: translate(1em, 2em); }
    60% { transform: translate(-7em, -9em); }
    70% { transform: translate(-2em, -9em); }
    80% { transform: translate(-4em, -16em); }
    90% { transform: translate(11em, 6em); }
}

.launcher:nth-child(8) {
    --duration: 4.71s;
    --hue: 252;
    animation: f-position8 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position8 {
    0% { transform: translate(8em, -4em); }
    10% { transform: translate(4em, 17em); }
    20% { transform: translate(-9em, -4em); }
    30% { transform: translate(7em, -17em); }
    40% { transform: translate(11em, 5em); }
    50% { transform: translate(9em, -6em); }
    60% { transform: translate(13em, -2em); }
    70% { transform: translate(-8em, 17em); }
    80% { transform: translate(-9em, 9em); }
    90% { transform: translate(-19em, 6em); }
}

.launcher:nth-child(9) {
    --duration: 4.94s;
    --hue: 288;
    animation: f-position9 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position9 {
    0% { transform: translate(7em, -18em); }
    10% { transform: translate(14em, 0em); }
    20% { transform: translate(18em, -14em); }
    30% { transform: translate(4em, -18em); }
    40% { transform: translate(8em, -17em); }
    50% { transform: translate(-9em, 19em); }
    60% { transform: translate(6em, 3em); }
    70% { transform: translate(6em, 17em); }
    80% { transform: translate(-18em, -20em); }
    90% { transform: translate(-16em, 5em); }
}

.launcher:nth-child(10) {
    --duration: 5.17s;
    --hue: 324;
    animation: f-position10 calc(var(--duration) * 10) 0s step-end infinite;
}
@keyframes f-position10 {
    0% { transform: translate(-19em, -15em); }
    10% { transform: translate(-8em, 4em); }
    20% { transform: translate(6em, 3em); }
    30% { transform: translate(3em, -10em); }
    40% { transform: translate(15em, -5em); }
    50% { transform: translate(5em, -1em); }
    60% { transform: translate(14em, 2em); }
    70% { transform: translate(18em, -6em); }
    80% { transform: translate(-15em, -12em); }
    90% { transform: translate(-6em, -7em); }
}

/* Circle indicator before launch */
.launcher::before {
    content: '';
    position: absolute;
    inset: -1.5em;
    background-color: #000;
    border-radius: 50%;
    border: 1em solid hsl(var(--hue) 75% 75%);
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    animation: circle var(--duration) ease-out infinite;
}

@keyframes circle {
    0%, 100% { transform: scale(0); }
    5%, 25% { transform: scale(1); }
}

/* Container animation */
.container {
    position: absolute;
    animation: container var(--duration) infinite ease-out;
}

@keyframes container {
    0%, 4% { transform: translateZ(-1em); }
    18% { transform: translateZ(24em); }
    100% { transform: translateZ(10em); }
}

/* Main cube before explosion */
.mainCube {
    position: absolute;
    inset: -0.5em;
    animation: mainCube var(--duration) infinite ease-out;
}

@keyframes mainCube {
    0%, 4% { transform: rotate3d(0, 0, 0, 0); }
    20%, 100% { transform: rotate3d(1, 2, 0, 360deg); }
}

.mainCube > div {
    position: absolute;
    inset: 0;
    background-color: hsl(var(--hue) 75% 75%);
    box-shadow: 0 0 0.5em #000 inset;
    animation: mainCubeOpacity var(--duration) infinite step-end;
}

@keyframes mainCubeOpacity {
    0% { opacity: 1; }
    20%, 100% { opacity: 0; }
}

.mainCube > div:nth-child(1) { transform: translateZ(0.5em); }
.mainCube > div:nth-child(2) { transform: rotateY(90deg) translateZ(0.5em); }
.mainCube > div:nth-child(3) { transform: rotateY(180deg) translateZ(0.5em); }
.mainCube > div:nth-child(4) { transform: rotateY(270deg) translateZ(0.5em); }
.mainCube > div:nth-child(5) { transform: rotateX(90deg) translateZ(0.5em); }
.mainCube > div:nth-child(6) { transform: rotateX(270deg) translateZ(0.5em); }

/* Fireworks particles */
.fireworks {
    position: absolute;
    transform: translateZ(0em);
}

.fireworks > i {
    position: absolute;
    inset: -0.5em;
    background-color: hsl(var(--hue) 75% var(--light, 75%));
    animation: fireworks var(--duration) infinite step-end;
}

@keyframes fireworks {
    0% { transform: translate3d(0, 0, -28em); }
    20% { 
        transform: translate3d(0, 0, var(--init-tz)); 
        animation-timing-function: cubic-bezier(0,0,0,1);
    }
    100% { 
        transform:
            translate3d(var(--tx), var(--ty), var(--tz))
            rotateX(var(--rx)) rotateY(var(--ry))
            scale(0);
    }
}

/* 33 particle variations */
.fireworks > i:nth-child(1) { --init-tz: 8.0px; --tx: -25em; --ty: 8em; --tz: 13em; --rx: 556deg; --ry: 181deg; --light: 80%; }
.fireworks > i:nth-child(2) { --init-tz: 7.5px; --tx: 5em; --ty: -13em; --tz: 8em; --rx: 564deg; --ry: 695deg; --light: 79%; }
.fireworks > i:nth-child(3) { --init-tz: 7.0px; --tx: 1em; --ty: 16em; --tz: 20em; --rx: 254deg; --ry: 216deg; --light: 77%; }
.fireworks > i:nth-child(4) { --init-tz: 6.5px; --tx: -1em; --ty: -19em; --tz: 5em; --rx: 147deg; --ry: 236deg; --light: 78%; }
.fireworks > i:nth-child(5) { --init-tz: 6.0px; --tx: 8em; --ty: 21em; --tz: 20em; --rx: 129deg; --ry: 70deg; --light: 71%; }
.fireworks > i:nth-child(6) { --init-tz: 5.5px; --tx: -15em; --ty: -15em; --tz: 23em; --rx: 404deg; --ry: 171deg; --light: 63%; }
.fireworks > i:nth-child(7) { --init-tz: 5.0px; --tx: 0em; --ty: 18em; --tz: -5em; --rx: 380deg; --ry: 105deg; --light: 79%; }
.fireworks > i:nth-child(8) { --init-tz: 4.5px; --tx: 21em; --ty: 3em; --tz: 22em; --rx: 317deg; --ry: 61deg; --light: 82%; }
.fireworks > i:nth-child(9) { --init-tz: 4.0px; --tx: 5em; --ty: -25em; --tz: 13em; --rx: 668deg; --ry: 400deg; --light: 71%; }
.fireworks > i:nth-child(10) { --init-tz: 3.5px; --tx: 14em; --ty: -3em; --tz: 21em; --rx: 669deg; --ry: 72deg; --light: 80%; }
.fireworks > i:nth-child(11) { --init-tz: 3.0px; --tx: -8em; --ty: -14em; --tz: 14em; --rx: 182deg; --ry: 103deg; --light: 70%; }
.fireworks > i:nth-child(12) { --init-tz: 2.5px; --tx: 13em; --ty: 19em; --tz: 13em; --rx: 522deg; --ry: 306deg; --light: 79%; }
.fireworks > i:nth-child(13) { --init-tz: 2.0px; --tx: -18em; --ty: 10em; --tz: 7em; --rx: 122deg; --ry: 139deg; --light: 77%; }
.fireworks > i:nth-child(14) { --init-tz: 1.5px; --tx: 15em; --ty: 24em; --tz: 2em; --rx: 552deg; --ry: 56deg; --light: 75%; }
.fireworks > i:nth-child(15) { --init-tz: 1.0px; --tx: 15em; --ty: -17em; --tz: 13em; --rx: 65deg; --ry: 454deg; --light: 81%; }
.fireworks > i:nth-child(16) { --init-tz: 0.5px; --tx: 16em; --ty: -2em; --tz: 13em; --rx: 410deg; --ry: 571deg; --light: 75%; }
.fireworks > i:nth-child(17) { --init-tz: 0.0px; --tx: 6em; --ty: -15em; --tz: 12em; --rx: 561deg; --ry: 269deg; --light: 63%; }
.fireworks > i:nth-child(18) { --init-tz: -0.5px; --tx: -8em; --ty: 2em; --tz: 12em; --rx: 335deg; --ry: 260deg; --light: 60%; }
.fireworks > i:nth-child(19) { --init-tz: -1.0px; --tx: 4em; --ty: 21em; --tz: 13em; --rx: 146deg; --ry: 457deg; --light: 71%; }
.fireworks > i:nth-child(20) { --init-tz: -1.5px; --tx: 4em; --ty: -4em; --tz: 20em; --rx: 226deg; --ry: 448deg; --light: 67%; }
.fireworks > i:nth-child(21) { --init-tz: -2.0px; --tx: 13em; --ty: 4em; --tz: 21em; --rx: 259deg; --ry: 572deg; --light: 72%; }
.fireworks > i:nth-child(22) { --init-tz: -2.5px; --tx: -1em; --ty: -23em; --tz: 17em; --rx: 296deg; --ry: 433deg; --light: 84%; }
.fireworks > i:nth-child(23) { --init-tz: -3.0px; --tx: -15em; --ty: 4em; --tz: 22em; --rx: 708deg; --ry: 83deg; --light: 60%; }
.fireworks > i:nth-child(24) { --init-tz: -3.5px; --tx: -18em; --ty: -16em; --tz: -5em; --rx: 560deg; --ry: 407deg; --light: 63%; }
.fireworks > i:nth-child(25) { --init-tz: -4.0px; --tx: -2em; --ty: 5em; --tz: 9em; --rx: 159deg; --ry: 154deg; --light: 71%; }
.fireworks > i:nth-child(26) { --init-tz: -4.5px; --tx: 3em; --ty: -21em; --tz: 22em; --rx: 644deg; --ry: 220deg; --light: 83%; }
.fireworks > i:nth-child(27) { --init-tz: -5.0px; --tx: 4em; --ty: -7em; --tz: 5em; --rx: 420deg; --ry: 272deg; --light: 68%; }
.fireworks > i:nth-child(28) { --init-tz: -5.5px; --tx: -6em; --ty: -21em; --tz: 21em; --rx: 422deg; --ry: 611deg; --light: 80%; }
.fireworks > i:nth-child(29) { --init-tz: -6.0px; --tx: -9em; --ty: 16em; --tz: -4em; --rx: 695deg; --ry: 287deg; --light: 71%; }
.fireworks > i:nth-child(30) { --init-tz: -6.5px; --tx: 2em; --ty: 21em; --tz: 14em; --rx: 183deg; --ry: 295deg; --light: 84%; }
.fireworks > i:nth-child(31) { --init-tz: -7.0px; --tx: -1em; --ty: -17em; --tz: 3em; --rx: 670deg; --ry: 402deg; --light: 73%; }
.fireworks > i:nth-child(32) { --init-tz: -7.5px; --tx: 17em; --ty: 11em; --tz: 23em; --rx: 603deg; --ry: 154deg; --light: 77%; }
.fireworks > i:nth-child(33) { --init-tz: -8.0px; --tx: -15em; --ty: -12em; --tz: -1em; --rx: 453deg; --ry: 33deg; --light: 84%; }

/* App Content */
#app {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.page {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;
    text-align: center;
    gap: 20px;
}

.page.active { display: flex; }

#photoPage { justify-content: flex-start; gap: 16px; }

h1, h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; }

.page-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.page-subtitle {
    font-size: 1.25rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.hero-subtitle { font-size: 1.75rem; margin-bottom: 2rem; }

.main-button, .secondary-button {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.main-button {
    background: linear-gradient(135deg, var(--brand-light), var(--brand));
    color: white;
    box-shadow: 0 4px 15px rgba(0, 124, 150, 0.3);
}

.main-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 124, 150, 0.5);
}

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

.secondary-button {
    background: var(--panel);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.secondary-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.styles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.8rem;
    width: 100%;
    margin-bottom: 2rem;
}

.style-card {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.style-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.28);
}

.style-card.selected {
    border-color: var(--brand-light);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(255, 87, 160, 0.6), 0 0 40px rgba(255, 87, 160, 0.4), inset 0 0 20px rgba(255, 87, 160, 0.2);
    animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 87, 160, 0.6), 0 0 40px rgba(255, 87, 160, 0.4), inset 0 0 20px rgba(255, 87, 160, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 87, 160, 0.8), 0 0 60px rgba(255, 87, 160, 0.6), inset 0 0 30px rgba(255, 87, 160, 0.3); }
}

.style-preview {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(0, 124, 150, 0.3), rgba(0, 91, 112, 0.3));
    border-radius: 15px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    overflow: hidden;
}

.style-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.style-description {
    font-size: 0.95rem;
    color: var(--muted);
}

.navigation-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Email (Email-first flow) */
.email-card {
    width: 100%;
    max-width: 720px;
    background: var(--panel);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    display: grid;
    gap: 1.25rem;
}

.email-form {
    display: flex;
    gap: 1rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.email-input {
    flex: 1;
    min-width: min(520px, 100%);
    padding: 1rem 1.25rem;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text);
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.email-input:focus {
    outline: none;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 4px rgba(0, 160, 189, 0.25);
}

.email-input::placeholder {
    color: var(--muted);
}

.camera-section {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.camera-frame {
    background: var(--panel);
    border-radius: 30px;
    padding: 1.5rem;
}

.camera-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
}

video, #capturedImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legal-disclaimer {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.legal-link {
    background: none;
    border: none;
    color: var(--brand-light);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
}

.legal-separator {
    opacity: 0.5;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.loading-spinner {
    width: 80px;
    height: 80px;
    border: 8px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--brand-light);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.result-container {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.result-frame {
    background: var(--panel);
    border-radius: 30px;
    padding: 1.5rem;
}

.result-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
}

.result-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-box {
    background: white;
    padding: 1.5rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.qr-text {
    color: #333;
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
}

#qrcode {
    display: block;
}

.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    padding: 2rem;
    border-radius: 20px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    color: white;
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: white;
}

/* Checkout Modal (payment) */
.checkout-modal {
    max-width: 720px;
    width: 100%;
}

.checkout-title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 6px;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.checkout-subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 18px;
}

.packages-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0 10px;
}

@media (max-width: 640px) {
    .packages-container {
        grid-template-columns: 1fr;
    }
}

.package-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.package-card.package-best {
    border-color: rgba(0, 160, 189, 0.45);
    box-shadow: 0 18px 50px rgba(0, 160, 189, 0.18);
}

.package-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
    color: #081018;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.package-label {
    color: var(--text);
    font-weight: 700;
    margin-bottom: 10px;
}

.package-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 10px;
}

.price-euro {
    font-size: 44px;
    font-weight: 900;
    color: var(--brand-light);
}

.price-cents {
    font-size: 18px;
    color: var(--muted);
    font-weight: 800;
}

.package-description {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.package-save {
    color: var(--text);
    font-weight: 700;
}

.package-button {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.6px;
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
    color: #081018;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.package-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 160, 189, 0.25);
}

.package-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.checkout-info {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.free-tier-info {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0, 160, 189, 0.10);
    border: 1px dashed rgba(0, 160, 189, 0.45);
    color: var(--text);
    text-align: center;
}

@media (max-width: 768px) {
    .page-title { font-size: 2rem; }
    .page-subtitle { font-size: 1rem; }
    .hero-subtitle { font-size: 1.25rem; }
    .styles-grid { grid-template-columns: 1fr; }
}