@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --color-bg-dark: #0A0712;
  --color-bg-dark-sec: #120E22;
  --color-bg-light: #F8FAFC;
  --color-bg-light-sec: #F1F5F9;
  --color-accent: #C1FF00; /* Fluorescent Yellow/Green */
  --color-accent-hover: #a3d600;
  --color-cyan: #38BDF8;
  --color-text-dark: #0F172A;
  --color-text-dark-muted: #475569;
  --color-text-light: #F8FAFC;
  --color-text-light-muted: #94A3B8;
  --font-headings: 'Barlow', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Base Styles */
html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  letter-spacing: -0.02em;
}

.font-mono {
  font-family: var(--font-mono) !important;
}

/* Rich, Deep Purple/Violet and Blue Gradient Mesh */
.bg-mesh {
  background-color: #07051A;
  background-image:
    radial-gradient(at 8% 15%, rgba(109, 40, 217, 0.38) 0px, transparent 55%),   /* Vivid Purple */
    radial-gradient(at 92% 8%,  rgba(67, 56, 202, 0.30) 0px, transparent 50%),   /* Deep Indigo */
    radial-gradient(at 55% 88%, rgba(56, 189, 248, 0.10) 0px, transparent 50%),  /* Soft Cyan */
    radial-gradient(at 75% 55%, rgba(139, 92, 246, 0.18) 0px, transparent 45%);  /* Mid Violet */
  background-attachment: fixed;
}

/* Watermark Grid Lines Overlay */
.bg-grid-watermark {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
}

/* Liquid Glass Card Refraction style */
.glass-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 30px -10px rgba(0, 0, 0, 0.5);
  border-radius: 1.5rem;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(193, 255, 0, 0.2);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 20px 40px -15px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

/* Glass Card Light Mode overrides */
.glass-card-light {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 30px -10px rgba(0, 0, 0, 0.05);
  border-radius: 1.5rem;
}

/* Infinite Logo Marquee */
.marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}

.marquee-content {
  display: flex;
  gap: 4rem;
  animation: marquee 25s linear infinite;
  min-width: 100%;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
}
::-webkit-scrollbar-thumb {
  background: #2D2742;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Custom Button Hover effect */
.btn-primary {
  background-color: var(--color-accent);
  color: #000;
  font-family: var(--font-headings);
  font-weight: 600;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: scale(1.03);
}
.btn-primary:active {
  transform: scale(0.97);
}

/* Subtle Shimmer Effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-bg {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
}

/* Nav — flush bar, trasparente → solid on scroll */
#site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
#site-header.header-solid {
  background: rgba(11, 8, 19, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Dot Grid Pattern — decorativo per sezioni scure */
.bg-dot-grid {
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Vivid Violet Section Background */
.bg-violet-section {
  background: linear-gradient(135deg, #312E81 0%, #5B21B6 50%, #6D28D9 100%);
}

/* Precise Counters Layout Styling based on User's Image */
.user-counters-strip {
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  color: #0F172A;
}

.user-counter-col {
  text-align: center;
  padding: 2.5rem 1rem;
  border-right: 1px solid #E2E8F0;
  transition: background-color 0.3s ease;
}

.user-counter-col:last-child {
  border-right: none;
}

.user-counter-col:nth-child(even) {
  background-color: #F8FAFC;
}

.user-counter-col:hover {
  background-color: #F1F5F9;
}

.user-counter-number {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: #0B0813;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
}

.user-counter-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: #1E293B;
  text-transform: none;
  letter-spacing: -0.01em;
}