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

       :root {
           --primary: #FFD700;
           --secondary: #8B0000;
           --dark: #1a1a2e;
           --light: #f4f4f4;
           --accent: #16213e;
       }

       body {
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
           color: var(--light);
           overflow-x: hidden;
       }

       /* Navigation */
       nav {
           position: fixed;
           top: 0;
           width: 100%;
           padding: 20px 50px;
           background: rgba(26, 26, 46, 0.95);
           backdrop-filter: blur(10px);
           z-index: 1000;
           display: flex;
           justify-content: space-between;
           align-items: center;
           border-bottom: 2px solid var(--primary);
       }

       .logo {
           font-size: 28px;
           font-weight: bold;
           color: var(--primary);
           text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
       }

       /* Toast Menu Button */
       .menu-toggle {
           display: flex;
           flex-direction: column;
           gap: 5px;
           cursor: pointer;
           z-index: 1001;
           background: none;
           border: none;
           padding: 10px;
       }

       .menu-toggle span {
           width: 30px;
           height: 3px;
           background: var(--primary);
           transition: all 0.3s;
           border-radius: 3px;
       }

       .menu-toggle.active span:nth-child(1) {
           transform: rotate(45deg) translate(5px, 5px);
       }

       .menu-toggle.active span:nth-child(2) {
           opacity: 0;
       }

       .menu-toggle.active span:nth-child(3) {
           transform: rotate(-45deg) translate(7px, -6px);
       }

       /* Toast Menu */
       .toast-menu {
           position: fixed;
           top: 0;
           right: -100%;
           width: 300px;
           height: 100vh;
           background: rgba(26, 26, 46, 0.98);
           backdrop-filter: blur(10px);
           z-index: 1000;
           padding: 100px 40px;
           transition: right 0.3s ease-in-out;
           border-left: 2px solid var(--primary);
           box-shadow: -5px 0 30px rgba(255, 215, 0, 0.3);
       }

       .toast-menu.active {
           right: 0;
       }

       .toast-menu ul {
           list-style: none;
       }

       .toast-menu li {
           margin-bottom: 30px;
       }

       .toast-menu a {
           color: var(--light);
           text-decoration: none;
           font-size: 24px;
           font-weight: 600;
           transition: color 0.3s;
           display: block;
           padding: 10px 0;
           border-bottom: 1px solid rgba(255, 215, 0, 0.2);
       }

       .toast-menu a:hover {
           color: var(--primary);
           padding-left: 10px;
       }

       .overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.7);
           z-index: 999;
           opacity: 0;
           visibility: hidden;
           transition: all 0.3s;
       }

       .overlay.active {
           opacity: 1;
           visibility: visible;
       }

       /* Hero Section */
       .hero {
           margin-top: 80px;
           padding: 100px 50px;
           display: flex;
           align-items: center;
           justify-content: space-between;
           max-width: 1400px;
           margin-left: auto;
           margin-right: auto;
           min-height: calc(100vh - 80px);
       }

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

       .hero h1 {
           font-size: 64px;
           margin-bottom: 20px;
           background: linear-gradient(45deg, var(--primary), #ffed4e);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
           animation: glow 2s ease-in-out infinite alternate;
       }

       @keyframes glow {
           from { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5)); }
           to { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
       }

       .hero p {
           font-size: 24px;
           margin-bottom: 30px;
           line-height: 1.6;
           color: #ccc;
       }

       .cta-buttons {
           display: flex;
           gap: 20px;
           margin-top: 40px;
       }

       .btn {
           padding: 15px 40px;
           border: none;
           border-radius: 50px;
           font-size: 18px;
           font-weight: bold;
           cursor: pointer;
           transition: all 0.3s;
           text-decoration: none;
           display: inline-block;
       }

       .btn-primary {
           background: linear-gradient(45deg, var(--primary), #ffed4e);
           color: var(--dark);
           box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
       }

       .btn-primary:hover {
           transform: translateY(-3px);
           box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
       }


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

       .btn-secondary:hover {
           background: var(--primary);
           color: var(--dark);
       }

       /* 3D Coin Animation */
       .coin-container {
           flex: 1;
           display: flex;
           justify-content: center;
           align-items: center;
           perspective: 1000px;
           position: relative;
       }

       .coin-wrapper {
           width: 400px;
           height: 400px;
           position: relative;
           transform-style: preserve-3d;
           animation: rotateCoin 8s linear infinite;
       }

       .coin-wrapper:hover {
           animation-play-state: paused;
           cursor: pointer;
       }

       @keyframes rotateCoin {
           0% { transform: rotateY(0deg); }
           100% { transform: rotateY(360deg); }
       }

       .coin-face {
           position: absolute;
           width: 100%;
           height: 100%;
           border-radius: 50%;
           backface-visibility: hidden;
           display: flex;
           align-items: center;
           justify-content: center;
           box-shadow: 0 0 50px rgba(255, 215, 0, 0.5),
                       inset 0 0 50px rgba(255, 215, 0, 0.2);
           border: 8px solid var(--primary);
       }

       .coin-front {
           background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
           transform: rotateY(0deg);
       }

       .coin-back {
           background: linear-gradient(135deg, #8B0000 0%, #DC143C 50%, #8B0000 100%);
           transform: rotateY(180deg);
       }

       .coin-image {
           width: 85%;
           height: 85%;
           border-radius: 50%;
           object-fit: cover;
           border: 4px solid rgba(255,255,255,0.3);
       }

       .coin-text {
           position: absolute;
           bottom: 40px;
           font-size: 24px;
           font-weight: bold;
           color: var(--dark);
           text-transform: uppercase;
           letter-spacing: 2px;
       }

       .coin-back .coin-text {
           color: #FFD700;
           text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
           font-size: 20px;
       }

       /* Floating particles */
       .particles {
           position: absolute;
           width: 100%;
           height: 100%;
           overflow: hidden;
           pointer-events: none;
       }

       .particle {
           position: absolute;
           width: 10px;
           height: 10px;
           background: var(--primary);
           border-radius: 50%;
           opacity: 0.3;
           animation: float 15s infinite;
       }

       @keyframes float {
           0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
           10% { opacity: 0.3; }
           90% { opacity: 0.3; }
           100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
       }

       /* Features Section */
       .features {
           padding: 100px 50px;
           background: rgba(255,255,255,0.02);
       }

       .container {
           max-width: 1200px;
           margin: 0 auto;
       }

       .section-title {
           text-align: center;
           font-size: 48px;
           margin-bottom: 60px;
           color: var(--primary);
       }

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

       .feature-card {
           background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(139,0,0,0.1));
           padding: 40px;
           border-radius: 20px;
           border: 2px solid rgba(255,215,0,0.3);
           transition: transform 0.3s, box-shadow 0.3s;
       }

       .feature-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 10px 30px rgba(255,215,0,0.3);
       }

       .feature-icon {
           font-size: 48px;
           margin-bottom: 20px;
       }

       .feature-card h3 {
           font-size: 24px;
           margin-bottom: 15px;
           color: var(--primary);
       }

       .feature-card p {
           line-height: 1.6;
           color: #aaa;
       }

       /* Stats Section */
       .stats {
           padding: 80px 50px;
           background: linear-gradient(135deg, var(--secondary), var(--dark));
           text-align: center;
       }

       .stats-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: 40px;
           max-width: 1000px;
           margin: 0 auto;
       }

       .stat-item h4 {
           font-size: 48px;
           color: var(--primary);
           margin-bottom: 10px;
       }

       .stat-item p {
           font-size: 18px;
           color: #ccc;
       }

       /* --- NUOVA ANIMAZIONE STATS --- */
       .stat-item {
           opacity: 0;
           transform: translateY(30px);
           transition: opacity 0.6s ease-out, transform 0.6s ease-out;
       }

       .stat-item.visible {
           opacity: 1;
           transform: translateY(0);
       }

       .stat-item.visible h4 {
           animation: textGlow 2s ease-in-out infinite alternate;
       }

       @keyframes textGlow {
           from { text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
           to { text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4); }
       }
       /* ------------------------------ */

       /* How it Works */
       .how-it-works {
           padding: 100px 50px;
       }

       .steps {
           display: flex;
           justify-content: space-around;
           max-width: 1200px;
           margin: 60px auto;
           gap: 30px;
       }

       .step {
           flex: 1;
           text-align: center;
           padding: 30px;
           position: relative;
       }

       .step-number {
           width: 80px;
           height: 80px;
           background: linear-gradient(135deg, var(--primary), var(--secondary));
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 36px;
           font-weight: bold;
           color: var(--dark);
           margin: 0 auto 20px;
           box-shadow: 0 4px 15px rgba(255,215,0,0.4);
       }

       .step h3 {
           font-size: 24px;
           margin-bottom: 15px;
           color: var(--primary);
       }

       /* Footer */
       footer {
           background: var(--dark);
           padding: 60px 50px 40px;
           text-align: center;
           border-top: 2px solid var(--primary);
           margin-top: 100px;
           position: relative;
       }

       footer .logo {
           margin-bottom: 30px;
           display: inline-block;
       }

       .social-links {
           display: flex;
           justify-content: center;
           gap: 20px;
           margin: 30px 0;
       }

       .social-links a {
           width: 50px;
           height: 50px;
           background: rgba(255,215,0,0.1);
           border: 2px solid var(--primary);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--primary);
           text-decoration: none;
           transition: all 0.3s;
           font-weight: bold;
       }

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

       footer p {
           color: #666;
           margin-top: 20px;
           line-height: 1.6;
       }

       .footer-tagline {
           font-style: italic;
           color: var(--primary);
           margin-top: 15px;
           font-size: 16px;
       }

       /* Responsive */
       @media (max-width: 968px) {
           .hero {
               flex-direction: column;
               text-align: center;
               padding: 50px 20px;
           }

           .hero h1 {
               font-size: 42px;
           }

           .coin-wrapper {
               width: 300px;
               height: 300px;
           }

           .coin-wrapper:hover {
               animation-play-state: paused;
           }

           .steps {
               flex-direction: column;
           }

           nav {
               padding: 15px 20px;
           }

           .nav-links {
               display: none;
           }

           .toast-menu {
               width: 100%;
               right: -100%;
           }
       }

       /* Glow effect for coin */
       .glow-ring {
           position: absolute;
           width: 450px;
           height: 450px;
           border-radius: 50%;
           border: 2px solid rgba(255,215,0,0.3);
           animation: pulse 2s ease-in-out infinite;
       }

       @keyframes pulse {
           0%, 100% { transform: scale(1); opacity: 0.5; }
           50% { transform: scale(1.1); opacity: 0.8; }
       }

       /* ============================================================
          PAGINE SECONDARIE: login / register / profile / dashboard
          ============================================================ */

       /* Layout comune a tutte le pagine secondarie */
       .page-container {
           min-height: 100vh;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           padding: 100px 20px 50px;
           gap: 40px;
       }

       /* ---------- Form di autenticazione (login + register) ---------- */
       .auth-box {
           background: rgba(26, 26, 46, 0.95);
           border: 2px solid var(--primary);
           border-radius: 20px;
           padding: 50px 40px;
           width: 100%;
           max-width: 450px;
           box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
       }

       .auth-box h1 {
           text-align: center;
           color: var(--primary);
           margin-bottom: 30px;
           font-size: 36px;
       }

       .auth-box form {
           display: flex;
           flex-direction: column;
           gap: 20px;
       }

       .auth-box input {
           padding: 15px;
           border: 2px solid rgba(255, 215, 0, 0.3);
           border-radius: 10px;
           background: rgba(0, 0, 0, 0.3);
           color: var(--light);
           font-size: 16px;
           transition: border-color 0.3s;
       }

       .auth-box input:focus {
           outline: none;
           border-color: var(--primary);
       }

       .auth-box button {
           padding: 15px;
           background: linear-gradient(45deg, var(--primary), #ffed4e);
           color: var(--dark);
           border: none;
           border-radius: 50px;
           font-size: 18px;
           font-weight: bold;
           cursor: pointer;
           transition: all 0.3s;
       }

       .auth-box button:hover {
           transform: translateY(-3px);
           box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
       }

       .auth-links {
           text-align: center;
           margin-top: 20px;
           color: #ccc;
       }

       .auth-links a {
           color: var(--primary);
           text-decoration: none;
           font-weight: 600;
       }

       .auth-links a:hover {
           text-decoration: underline;
       }

       /* ---------- Messaggi di feedback ---------- */
       .error-msg {
           background: rgba(139, 0, 0, 0.3);
           border: 1px solid var(--secondary);
           color: #ffcccc;
           padding: 12px;
           border-radius: 8px;
           text-align: center;
           margin-bottom: 20px;
       }

       .success-msg {
           background: rgba(0, 128, 0, 0.2);
           border: 1px solid #4CAF50;
           color: #aaffaa;
           padding: 12px;
           border-radius: 8px;
           text-align: center;
           margin-bottom: 20px;
       }

       /* ---------- Box dorato con riflesso (profile + dashboard) ---------- */
       .gold-box {
           background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(139, 0, 0, 0.2));
           border: 3px solid var(--primary);
           border-radius: 15px;
           padding: 40px;
           text-align: center;
           width: 100%;
           max-width: 700px;
           position: relative;
           overflow: hidden;
           box-shadow: 0 0 60px rgba(255, 215, 0, 0.4);
       }

       .gold-box::before {
           content: '';
           position: absolute;
           top: -50%;
           left: -50%;
           width: 200%;
           height: 200%;
           background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
           animation: shine 3s infinite;
       }

       @keyframes shine {
           0%   { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
           100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
       }

       .profile-text {
           color: var(--primary);
           font-size: 24px;
           font-style: italic;
           font-weight: 600;
           position: relative;
           z-index: 1;
           text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
       }

       .flag-value {
           color: var(--primary);
           font-size: 32px;
           font-weight: bold;
           font-family: 'Courier New', monospace;
           word-break: break-all;
           position: relative;
           z-index: 1;
           text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
       }

       /* ============================================================
          NAVBAR: auth buttons + user toast menu
          ============================================================ */

       .nav-right {
           display: flex;
           align-items: center;
           gap: 15px;
       }

       .nav-auth-btn {
           padding: 8px 20px;
           border-radius: 50px;
           font-size: 14px;
           font-weight: 600;
           text-decoration: none;
           transition: all 0.3s;
           cursor: pointer;
           border: none;
       }

       .nav-btn-login {
           background: transparent;
           color: var(--primary);
           border: 2px solid var(--primary);
       }

       .nav-btn-login:hover {
           background: var(--primary);
           color: var(--dark);
       }

       .nav-btn-register {
           background: linear-gradient(45deg, var(--primary), #ffed4e);
           color: var(--dark);
       }

       .nav-btn-register:hover {
           transform: translateY(-2px);
           box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
       }

       .nav-user-icon {
           width: 45px;
           height: 45px;
           border-radius: 50%;
           background: linear-gradient(45deg, var(--primary), #ffed4e);
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 22px;
           cursor: pointer;
           border: 2px solid var(--primary);
           transition: all 0.3s;
           z-index: 1001;
       }

       .nav-user-icon:hover {
           transform: scale(1.1);
           box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
       }

       /* User Toast Menu (gemello del .toast-menu originale) */
       .user-menu {
           position: fixed;
           top: 0;
           right: -100%;
           width: 300px;
           height: 100vh;
           background: rgba(26, 26, 46, 0.98);
           backdrop-filter: blur(10px);
           z-index: 1000;
           padding: 100px 40px;
           transition: right 0.3s ease-in-out;
           border-left: 2px solid var(--primary);
           box-shadow: -5px 0 30px rgba(255, 215, 0, 0.3);
       }

       .user-menu.active {
           right: 0;
       }

       .user-menu-header {
           color: var(--primary);
           font-size: 20px;
           font-weight: 600;
           margin-bottom: 30px;
           padding-bottom: 15px;
           border-bottom: 1px solid rgba(255, 215, 0, 0.3);
       }

       .user-menu ul {
           list-style: none;
       }

       .user-menu li {
           margin-bottom: 25px;
       }

       .user-menu a {
           color: var(--light);
           text-decoration: none;
           font-size: 22px;
           font-weight: 600;
           transition: all 0.3s;
           display: block;
           padding: 10px 0;
           border-bottom: 1px solid rgba(255, 215, 0, 0.2);
       }

       .user-menu a:hover {
           color: var(--primary);
           padding-left: 10px;
       }

       .user-menu a.logout-link {
           color: var(--secondary);
           border-color: rgba(139, 0, 0, 0.3);
       }

       .user-menu a.logout-link:hover {
           color: #ff6666;
       }

       /* ---------- Responsive aggiuntivo ---------- */
       @media (max-width: 968px) {
           .nav-auth-btn {
               padding: 6px 14px;
               font-size: 12px;
           }
           .nav-user-icon {
               width: 38px;
               height: 38px;
               font-size: 18px;
           }
           .user-menu {
               width: 100%;
           }
           .auth-box {
               padding: 35px 25px;
           }
           .auth-box h1 {
               font-size: 28px;
           }
           .gold-box {
               padding: 30px 20px;
           }
           .flag-value {
               font-size: 20px;
           }
           .profile-text {
               font-size: 18px;
           }
       }

       @media (max-width: 600px) {
           nav .logo {
               font-size: 18px;
           }
           .nav-right {
               gap: 8px;
           }
       }