:root {
    --primary: #4db6ac;
    --secondary: #5C6BC0;
    --dark: #1a2634;
    --darker: #101820;
    --light: #ecf0f1;
    --accent: #FF5252;
    --success: #81C784;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  body {
    background-color: var(--darker);
    color: var(--light);
    overflow-x: hidden;
  }
  
  .noise {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 1000;
  }
  
  .grid {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: linear-gradient(to right, rgba(42, 54, 68, 0.1) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(42, 54, 68, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 999;
  }
  
  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
  }
  
  header {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .logo-icon {
    width: 50px;
    height: 50px;
  }
  
  .logo-text {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
  }
  
  nav a {
    color: var(--light);
    text-decoration: none;
    position: relative;
    padding: 5px 0;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  nav a:hover {
    color: var(--primary);
  }
  nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0; left: 0;
    background-color: var(--primary);
    transition: width 0.3s ease;
  }
  nav a:hover::after {
    width: 100%;
  }
  
  .cta-button {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    color: var(--dark);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(77, 182, 172, 0.3);
  }
  .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(77, 182, 172, 0.5);
  }
  
  /* HERO */
  .hero {
    height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .hero-content {
    width: 50%;
    padding-right: 50px;
  }
  .hero-visual {
    width: 50%;
    height: 100%;
    position: relative;
  }
  h1 {
    font-size: 60px;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
  }
  h1 span {
    display: block;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero-subtitle {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 30px;
    color: rgba(236, 240, 241, 0.8);
  }
  .feature-list {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
  }
  .feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .feature-icon {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background-color: rgba(77, 182, 172, 0.2);
    color: var(--primary);
  }
  .cta-buttons {
    display: flex; gap: 20px;
  }
  .secondary-button {
    background: transparent;
    color: var(--light);
    border: 2px solid var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .secondary-button:hover {
    background-color: var(--primary);
    color: var(--dark);
  }
  
  .globe-container {
    position: absolute;
    width: 500px; height: 500px;
    top: 50%; right: 0;
    transform: translateY(-50%);
  }
  .globe {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
  }
  .globe-image {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0.92;
    box-shadow: 0 0 45px rgba(77, 182, 172, 0.24);
  }
  @keyframes rotate {
    0% {
      transform: rotateY(0) rotateX(15deg);
    }
    100% {
      transform: rotateY(360deg) rotateX(15deg);
    }
  }
  .trade-flow {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    transform-style: preserve-3d;
    z-index: 2;
    pointer-events: none;
  }
  .flow-1 { animation: flow1 8s ease-in-out infinite; }
  .flow-2 { animation: flow2 12s ease-in-out infinite; }
  .flow-3 { animation: flow3 10s ease-in-out infinite; }
  
  @keyframes flow1 {
    0%, 100% {
      transform: rotateY(0deg) rotateX(60deg) scale(1.05);
      opacity: 0.8;
    }
    50% {
      transform: rotateY(180deg) rotateX(60deg) scale(1.15);
      opacity: 0.5;
    }
  }
  @keyframes flow2 {
    0%, 100% {
      transform: rotateY(90deg) rotateX(-30deg) scale(1.1);
      opacity: 0.7;
    }
    50% {
      transform: rotateY(270deg) rotateX(-30deg) scale(1.2);
      opacity: 0.4;
    }
  }
  @keyframes flow3 {
    0%, 100% {
      transform: rotateY(45deg) rotateX(0deg) scale(1.05);
      opacity: 0.6;
    }
    50% {
      transform: rotateY(225deg) rotateX(0deg) scale(1.15);
      opacity: 0.3;
    }
  }
  .flow-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: flowLine 4s linear infinite;
    opacity: 0.3;
  }
  @keyframes flowLine {
    0% {
      width: 0; opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      width: 100%; opacity: 0;
    }
  }
  
  /* FEATURES SECTION */
  .features-section {
    padding: 100px 0;
    position: relative;
  }
  .section-title {
    text-align: center;
    margin-bottom: 60px;
  }
  .section-title h2 {
    font-size: 40px;
    margin-bottom: 15px;
  }
  .section-title p {
    font-size: 18px;
    color: rgba(236, 240, 241, 0.7);
    max-width: 600px;
    margin: 0 auto;
  }
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .feature-card {
    background-color: rgba(26, 38, 52, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(77, 182, 172, 0.2);
    border-radius: 15px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(77, 182, 172, 0.2);
  }
  .feature-card-icon {
    width: 60px; height: 60px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(45deg, rgba(77, 182, 172, 0.2), rgba(92, 107, 192, 0.2));
    border-radius: 12px;
  }
  .feature-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .feature-card p {
    color: rgba(236, 240, 241, 0.7);
    line-height: 1.6;
  }
  
  /* GAMEPLAY SECTION */
  .gameplay-section {
    padding: 100px 0;
    position: relative;
  }
  .gameplay-container {
    display: flex;
    gap: 50px;
    align-items: center;
  }
  .gameplay-content {
    width: 50%;
  }
  .gameplay-visual {
    width: 50%;
    position: relative;
  }
  .gameplay-image {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
  .gameplay-feature-list {
    margin-top: 30px;
  }
  .gameplay-feature-item {
    display: flex;
    margin-bottom: 20px;
  }
  .gameplay-feature-item-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    margin-right: 15px;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(77, 182, 172, 0.2);
    border-radius: 50%;
    color: var(--primary);
  }
  .gameplay-feature-item-content h4 {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .gameplay-feature-item-content p {
    color: rgba(236, 240, 241, 0.7);
    font-size: 15px;
    line-height: 1.5;
  }
  
  /* REVIEWS SECTION */
  .reviews-section {
    padding: 100px 0;
    background-color: rgba(26, 38, 52, 0.5);
    position: relative;
  }
  .reviews-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding: 20px 0;
    -ms-overflow-style: none; /* IE e Edge */
    scrollbar-width: none;    /* Firefox */
  }
  .reviews-container::-webkit-scrollbar {
    display: none;           /* Chrome, Safari, Opera */
  }
  .review-card {
    flex: 0 0 350px;
    background-color: rgba(16, 24, 32, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(77, 182, 172, 0.1);
  }
  .review-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .review-avatar {
    width: 50px; height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    background-color: var(--secondary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--light);
  }
  .review-author h4 {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .review-author p {
    font-size: 14px;
    color: rgba(236, 240, 241, 0.5);
  }
  .review-rating {
    display: flex;
    margin-bottom: 15px;
  }
  .star {
    color: #FFD700;
    margin-right: 3px;
  }
  .review-text {
    color: rgba(236, 240, 241, 0.8);
    line-height: 1.5;
  }
  
  /* NOVITÀ FUTURE */
  .future-section {
    padding: 100px 0;
    position: relative;
    text-align: center;
  }
  .future-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
  }
  .future-section p {
    font-size: 18px;
    color: rgba(236, 240, 241, 0.7);
    max-width: 800px;
    margin: 0 auto 40px;
  }
  .future-section ul {
    list-style: none;
    margin-top: 30px;
    text-align: left;
    display: inline-block;
    padding: 0;
  }
  .future-section li {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(236, 240, 241, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .future-section li svg {
    width: 20px; height: 20px;
    flex-shrink: 0;
    color: var(--primary);
  }
  
  /* CTA SECTION */
  .cta-section {
    padding: 100px 0;
    text-align: center;
    position: relative;
  }
  .cta-box {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(45deg, rgba(77, 182, 172, 0.1), rgba(92, 107, 192, 0.1));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px;
    border: 1px solid rgba(77, 182, 172, 0.2);
  }
  .cta-title {
    font-size: 36px;
    margin-bottom: 20px;
  }
  .cta-subtitle {
    font-size: 18px;
    color: rgba(236, 240, 241, 0.7);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* FOOTER */
  .footer {
    padding: 50px 0;
    border-top: 1px solid rgba(77, 182, 172, 0.2);
  }
  .footer-container {
    display: flex;
    justify-content: space-between;
  }
  .footer-logo {
    margin-bottom: 20px;
  }
  .footer-info p {
    color: rgba(236, 240, 241, 0.5);
    margin-bottom: 10px;
    font-size: 14px;
    max-width: 300px;
  }
  .footer-links h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .footer-links ul {
    list-style: none;
  }
  .footer-links li {
    margin-bottom: 10px;
  }
  .footer-links a {
    color: rgba(236, 240, 241, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .footer-links a:hover {
    color: var(--primary);
  }
  .footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(77, 182, 172, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-bottom p {
    color: rgba(236, 240, 241, 0.5);
    font-size: 14px;
  }
  .social-links {
    display: flex;
    gap: 15px;
  }
  .social-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background-color: rgba(77, 182, 172, 0.1);
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.3s ease;
  }
  .social-icon:hover {
    background-color: rgba(77, 182, 172, 0.3);
  }
  
  /* GLOW E PARTICELLE */
  .glow {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77, 182, 172, 0.2) 0%, rgba(77, 182, 172, 0) 70%);
    z-index: -1;
    animation: pulse 5s ease-in-out infinite;
  }
  .glow-1 {
    top: 10%; right: -300px;
  }
  .glow-2 {
    bottom: -300px; left: 10%;
  }
  @keyframes pulse {
    0%, 100% {
      transform: scale(1); opacity: 0.5;
    }
    50% {
      transform: scale(1.2); opacity: 0.7;
    }
  }
  .particles {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
  }
  .particle {
    position: absolute;
    width: 3px; height: 3px;
    background-color: var(--primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: float 20s linear infinite;
  }
  @keyframes float {
    0% {
      transform: translateY(0) translateX(0);
      opacity: 0;
    }
    10% {
      opacity: 0.5;
    }
    90% {
      opacity: 0.5;
    }
    100% {
      transform: translateY(-700px) translateX(100px);
      opacity: 0;
    }
  }
  
  /* RESPONSIVE */
  @media (max-width: 1024px) {
    .hero-content, .hero-visual {
      width: 100%;
      padding-right: 0;
    }
    .hero {
      flex-direction: column;
      height: auto;
      padding: 50px 0;
    }
    .globe-container {
      position: relative;
      transform: none;
      top: auto; right: auto;
      margin: 50px auto 0;
      width: 400px; height: 400px;
    }
    .features-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .gameplay-container {
      flex-direction: column;
    }
    .gameplay-content, .gameplay-visual {
      width: 100%;
    }
  }
  @media (max-width: 768px) {
    nav ul {
      display: none; /* Puoi sostituire con un hamburger menu */
    }
    .features-grid {
      grid-template-columns: 1fr;
    }
    .globe-container {
      width: 300px; height: 300px;
    }
    .footer-container {
      flex-direction: column;
      gap: 30px;
    }
    .cta-box {
      padding: 40px 20px;
    }
  }