/* Sportium Pay Design System 2026 - Fintech Premium */



:root {

    /* Color Palette */

    --color-primary: #d81a23;

    /* Sportium Pay Red */

    --color-primary-light: #f03e47;

    --color-accent: #1A202C;

    /* Black */

    --color-accent-hover: #000000;

    --color-secondary: #000000;

    /* Black */

    --color-bg-light: #F8F9FA;

    --color-bg-white: #FFFFFF;

    --color-text-main: #000000;

    --color-text-muted: #4A5568;

    --color-border: #E2E8F0;

    --color-success: #28a745;

    --color-warning: #ffc107;

    --color-error: #dc3545;



    /* Dark Mode Colors - Adjusted */

    --color-bg-dark: #0f172a;

    --color-bg-card-dark: #1e293b;

    --color-text-dark-main: #f1f5f9;

    --color-text-dark-muted: #94a3b8;

    --color-border-dark: #334155;



    /* Typography - Updated to Montserrat */

    --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;

    --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;



    --text-xs: 0.75rem;

    --text-sm: 0.875rem;

    --text-base: 1rem;

    --text-lg: 1.125rem;

    --text-xl: 1.25rem;

    --text-2xl: 1.5rem;

    --text-3xl: 1.875rem;

    --text-4xl: 2.25rem;

    --text-5xl: 3rem;

    --text-6xl: 3.75rem;



    /* Spacing */

    --spacing-xs: 0.25rem;

    --spacing-sm: 0.5rem;

    --spacing-md: 1rem;

    --spacing-lg: 1.5rem;

    --spacing-xl: 2rem;

    --spacing-2xl: 3rem;

    --spacing-3xl: 4rem;

    --spacing-section: 7rem;



    /* Shadows & Effects */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --glass-bg: rgba(255, 255, 255, 0.1);

    --glass-border: rgba(255, 255, 255, 0.2);

    --glass-blur: blur(12px);

    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);



    /* Animation */

    --transition-fast: 150ms ease-in-out;

    --transition-normal: 300ms ease-in-out;

    --transition-slow: 500ms ease-in-out;

}



/* ============================================

   ANIMATIONS

   ============================================ */

@keyframes float {

    0% { transform: translateY(0px); }

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

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

}



@keyframes glow {

    0% { box-shadow: 0 0 5px rgba(216, 26, 35, 0.2); }

    50% { box-shadow: 0 0 20px rgba(216, 26, 35, 0.6); }

    100% { box-shadow: 0 0 5px rgba(216, 26, 35, 0.2); }

}



@keyframes blob {

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

    33% { transform: translate(30px, -50px) scale(1.1); }

    66% { transform: translate(-20px, 20px) scale(0.9); }

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

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeInLeft {

    from {

        opacity: 0;

        transform: translateX(-40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeInRight {

    from {

        opacity: 0;

        transform: translateX(40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeInScale {

    from {

        opacity: 0;

        transform: scale(0.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes slideInBottom {

    from {

        opacity: 0;

        transform: translateY(60px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes shimmer {

    0% { background-position: -200% 0; }

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

}



@keyframes gradientShift {

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

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

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

}



@keyframes pulseGlow {

    0% {

        transform: translate(-50%, -50%) scale(0.8);

        opacity: 0.5;

    }

    100% {

        transform: translate(-50%, -50%) scale(1.2);

        opacity: 1;

    }

}



@keyframes floatPOS {

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

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

}



@keyframes floatBadge {

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

    100% { transform: translateY(-10px) scale(1.05); }

}



@keyframes pulseDot {

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

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

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

}



@keyframes countUp {

    from { opacity: 0; transform: translateY(10px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes revealLine {

    from { width: 0; }

    to { width: 60px; }

}



@keyframes bounceIn {

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

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

    70% { transform: scale(0.95); }

    100% { transform: scale(1); }

}



@keyframes morphBlob {

    0% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }

    25% { border-radius: 75% 25% 50% 50% / 55% 45% 55% 45%; }

    50% { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; }

    75% { border-radius: 30% 70% 55% 45% / 40% 60% 40% 60%; }

    100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }

}



/* ============================================

   GLASS UTILITIES

   ============================================ */

.glass {

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);

    -webkit-backdrop-filter: var(--glass-blur);

    border: 1px solid var(--glass-border);

    box-shadow: var(--glass-shadow);

}



.glass-card {

    background: rgba(255, 255, 255, 0.7);

    backdrop-filter: blur(16px) saturate(180%);

    -webkit-backdrop-filter: blur(16px) saturate(180%);

    border: 1px solid rgba(209, 213, 219, 0.3);

    border-radius: 16px;

    padding: var(--spacing-lg);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

}



[data-theme="dark"] .glass-card {

    background: rgba(15, 23, 42, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.05);

}



.glass-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

}



.text-gradient {

    background: linear-gradient(135deg, var(--color-primary) 0%, #1A202C 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.blob {

    position: absolute;

    filter: blur(80px);

    z-index: -1;

    opacity: 0.6;

    animation: blob 10s infinite alternate;

}



[data-theme="dark"] .blob {

    opacity: 0.4;

}



/* ============================================

   DARK MODE OVERRIDES

   ============================================ */

[data-theme="dark"] {

    --color-bg-light: var(--color-bg-dark);

    --color-bg-white: var(--color-bg-card-dark);

    --color-text-main: var(--color-text-dark-main);

    --color-text-muted: var(--color-text-dark-muted);

    --color-border: var(--color-border-dark);

    --glass-bg: rgba(15, 23, 42, 0.7);

    --glass-border: rgba(255, 255, 255, 0.05);

}



[data-theme="dark"] .text-accent {

    color: var(--color-text-dark-main) !important;

}



/* ============================================

   RESET & BASE STYLES

   ============================================ */

*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: var(--font-body);

    background-color: var(--color-bg-light);

    color: var(--color-text-main);

    line-height: 1.65;

    overflow-x: hidden;

    transition: background-color var(--transition-normal), color var(--transition-normal);

}



h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: var(--spacing-sm);

    color: var(--color-text-main);

    letter-spacing: -0.015em;

}



h1 { font-size: var(--text-5xl); letter-spacing: -0.02em; }

h2 { font-size: var(--text-4xl); letter-spacing: -0.01em; }

h3 { font-size: var(--text-3xl); }

h4 { font-size: var(--text-2xl); }



p { margin-bottom: var(--spacing-md); }



a {

    text-decoration: none;

    color: inherit;

    transition: color var(--transition-fast);

}



ul { list-style: none; }



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a:focus-visible,

button:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible,

summary:focus-visible {

    outline: 3px solid rgba(216, 26, 35, 0.28);

    outline-offset: 3px;

    border-radius: 10px;

}



::selection {

    background: rgba(216, 26, 35, 0.18);

    color: var(--color-text-main);

}



/* ============================================

   UTILITY CLASSES

   ============================================ */

.container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 var(--spacing-md);

}



.section {

    padding: var(--spacing-section) 0;

}



.text-center { text-align: center; }

.p-0 { padding: 0 !important; }

.p-sm { padding: var(--spacing-sm); }

.p-md { padding: var(--spacing-md); }

.p-lg { padding: var(--spacing-lg); }

.p-xl { padding: var(--spacing-xl); }

.text-primary { color: var(--color-primary); }

.text-accent { color: var(--color-accent); }

.text-muted { color: var(--color-text-muted); }

.flex { display: flex; }

.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }

.items-start { align-items: flex-start; }

.justify-between { justify-content: space-between; }

.justify-center { justify-content: center; }

.gap-xs { gap: var(--spacing-xs); }

.gap-sm { gap: var(--spacing-sm); }

.gap-md { gap: var(--spacing-md); }

.gap-lg { gap: var(--spacing-lg); }

.gap-xl { gap: var(--spacing-xl); }

.relative { position: relative; }



.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



.grid { display: grid; }

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

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

.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }



.text-sm { font-size: var(--text-sm); }

.text-lg { font-size: var(--text-lg); }

.text-xl { font-size: var(--text-xl); }

.text-white { color: white; }

.h-100 { height: 100%; }



/* ============================================

   COMPONENTS - BUTTONS

   ============================================ */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.85rem 1.75rem;

    border-radius: 0.5rem;

    font-weight: 600;

    font-size: var(--text-base);

    transition: all var(--transition-normal);

    cursor: pointer;

    border: none;

    letter-spacing: 0.01em;

    white-space: nowrap;

    position: relative;

    overflow: hidden;

}



.btn::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);

    background-size: 200% 100%;

    opacity: 0;

    transition: opacity 0.3s;

}



.btn:hover::after {

    opacity: 1;

    animation: shimmer 0.8s ease-out;

}



.btn-primary {

    background-color: var(--color-primary);

    color: white;

}



[data-theme="dark"] .btn-primary {

    background-color: var(--color-primary);

    color: white;

}



.btn-primary:hover {

    background-color: var(--color-primary-light);

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(216, 26, 35, 0.3);

}



[data-theme="dark"] .btn-primary:hover {

    background-color: var(--color-primary-light);

    box-shadow: 0 10px 25px rgba(216, 26, 35, 0.4);

}



.btn-secondary {

    background-color: transparent;

    border: 2px solid var(--color-primary);

    color: var(--color-primary);

}



[data-theme="dark"] .btn-secondary {

    border-color: rgba(255, 255, 255, 0.4);

    color: var(--color-text-dark-main);

}



.btn-secondary:hover {

    background-color: var(--color-primary);

    color: white;

    border-color: var(--color-primary);

    transform: translateY(-2px);

}



[data-theme="dark"] .btn-secondary:hover {

    background-color: var(--color-primary);

    border-color: var(--color-primary);

    color: white;

}



.btn-accent {

    background-color: var(--color-accent);

    color: white;

}



[data-theme="dark"] .btn-accent {

    background-color: rgba(255, 255, 255, 0.1);

    color: var(--color-text-dark-main);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.btn-accent:hover {

    background-color: var(--color-accent-hover);

    color: white;

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}



[data-theme="dark"] .btn-accent:hover {

    background-color: rgba(255, 255, 255, 0.2);

}



/* ============================================

   LAYOUT - HEADER & NAVIGATION

   ============================================ */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    padding: var(--spacing-md) 0;

    transition: all var(--transition-normal);

    background: transparent;

}



.logo {

    flex-shrink: 0;

}



/* Logo Sportium Pay (wordmark orizzontale ~10.5:1, dimensionato in larghezza) */
.logo img,
.mobile-nav-header img {
    width: 250px;
    height: auto;
}

@media (max-width: 480px) {
    .logo img,
    .mobile-nav-header img {
        width: 190px;
    }
}



.header.scrolled {

    padding: var(--spacing-sm) 0;

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow: var(--shadow-md);

    border-bottom: 1px solid rgba(209, 213, 219, 0.3);

}



[data-theme="dark"] .header.scrolled {

    background: rgba(15, 23, 42, 0.85);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



/* Inverted Header for Dark Hero Backgrounds in Light Mode */

[data-theme="light"] .header.header-inverted:not(.scrolled) .nav-link {

    color: white;

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .nav-link.active {

    color: var(--color-primary-light);

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .logo-light {

    display: none !important;

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .logo-dark {

    display: block !important;

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .btn-secondary {

    color: white;

    border-color: rgba(255, 255, 255, 0.7);

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .btn-secondary:hover {

    background-color: white;

    color: var(--color-accent);

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .btn-secondary i {

    color: white;

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .btn-secondary:hover i {

    color: var(--color-accent);

}



.desktop-nav {

    display: block;

}



.desktop-nav ul {

    display: flex;

    gap: var(--spacing-sm);

    align-items: center;

    margin: 0;

    padding: 0;

    list-style: none;

    background: rgba(255, 255, 255, 0.5);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    padding: 0.5rem 1rem;

    border-radius: 99px;

    border: 1px solid rgba(255, 255, 255, 0.5);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

}



[data-theme="dark"] .desktop-nav ul {

    background: rgba(15, 23, 42, 0.5);

    border-color: rgba(255, 255, 255, 0.05);

}



.header-inverted:not(.scrolled) .desktop-nav ul {

    background: transparent;

    border-color: transparent;

    box-shadow: none;

}



.nav-link {

    font-weight: 500;

    font-size: var(--text-base);

    color: var(--color-text-main);

    padding: 0.5rem 1rem;

    position: relative;

    border-radius: 99px;

    transition: all var(--transition-normal);

    z-index: 1;

    white-space: nowrap;

}



.nav-link::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: 99px;

    background: var(--color-primary);

    opacity: 0;

    transform: scale(0.9);

    transition: all var(--transition-normal);

    z-index: -1;

}



.nav-link:hover {

    color: white !important;

}



.nav-link:hover::before {

    opacity: 1;

    transform: scale(1);

}



.nav-link.active {

    color: white !important;

    background: var(--color-primary);

}



/* Inverted Header adjustments for nav items */

[data-theme="light"] .header.header-inverted:not(.scrolled) .nav-link:hover {

    color: var(--color-primary) !important;

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .nav-link:hover::before {

    background: white;

}



[data-theme="light"] .header.header-inverted:not(.scrolled) .nav-link.active {

    color: var(--color-primary) !important;

    background: white;

}



/* ============================================

   WOW EFFECT - SMART POS PRO

   ============================================ */

.pos-container {

    perspective: 1000px;

    position: relative;

    width: 100%;

    max-width: 500px;

    margin: 0 auto;

}



.pos-glow {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 80%;

    height: 80%;

    background: radial-gradient(circle, rgba(216, 26, 35, 0.4) 0%, rgba(216, 26, 35, 0) 70%);

    border-radius: 50%;

    filter: blur(40px);

    z-index: 0;

    animation: pulseGlow 4s ease-in-out infinite alternate;

}



.pos-image-wrapper {

    position: relative;

    z-index: 1;

    transform-style: preserve-3d;

    transition: transform 0.3s ease-out;

    animation: floatPOS 6s ease-in-out infinite;

}



.pos-image-wrapper:hover {

    transform: rotateY(5deg) rotateX(5deg) scale(1.02);

}



.pos-badge {

    position: absolute;

    z-index: 2;

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 12px;

    padding: 0.75rem 1rem;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--color-text-main);

}



[data-theme="dark"] .pos-badge {

    background: rgba(15, 23, 42, 0.9);

    border-color: rgba(255, 255, 255, 0.1);

}



.badge-tr {

    top: 10%;

    right: -15%;

    animation: floatBadge 4s ease-in-out infinite alternate;

    animation-delay: 1s;

}



.badge-bl {

    bottom: 15%;

    left: -10%;

    animation: floatBadge 5s ease-in-out infinite alternate-reverse;

}



.pulsing-dot {

    width: 8px;

    height: 8px;

    background-color: var(--color-success);

    border-radius: 50%;

    animation: pulseDot 2s infinite;

}



/* ============================================

   DROPDOWN MENU

   ============================================ */

.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    min-width: 220px;

    box-shadow: var(--shadow-xl);

    border-radius: 12px;

    padding: var(--spacing-sm);

    z-index: 100;

    top: 100%;

    left: 50%;

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

    opacity: 0;

    transition: all var(--transition-normal);

    border: 1px solid rgba(0, 0, 0, 0.05);

}



[data-theme="dark"] .dropdown-content {

    background: rgba(15, 23, 42, 0.95);

    border-color: rgba(255, 255, 255, 0.05);

}



.dropdown-content a {

    color: var(--color-text-main);

    padding: 0.75rem 1rem;

    text-decoration: none;

    display: block;

    font-weight: 500;

    border-radius: 8px;

    transition: all var(--transition-fast);

}



.dropdown-content a:hover {

    background-color: rgba(216, 26, 35, 0.1);

    color: var(--color-primary);

    transform: translateX(4px);

}



.dropdown:hover .dropdown-content {

    display: block;

    opacity: 1;

    transform: translateX(-50%) translateY(0);

}



/* ============================================

   MOBILE MENU

   ============================================ */

#mobile-menu-btn {

    display: none;

}



#mobile-nav {

    position: fixed;

    inset: 0;

    background: var(--color-bg-light);

    z-index: 1001;

    transform: translateX(100%);

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    padding: 0 var(--spacing-xl);

    display: flex;

    flex-direction: column;

    gap: var(--spacing-md);

    overflow-y: auto;

}



#mobile-nav.active {

    transform: translateX(0) !important;

}



/* Mobile nav close button */

.mobile-nav-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: var(--spacing-lg) 0;

    border-bottom: 1px solid var(--color-border);

    margin-bottom: var(--spacing-md);

}



.mobile-nav-close {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: 1px solid var(--color-border);

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 1.2rem;

    color: var(--color-text-main);

    transition: all var(--transition-fast);

}



.mobile-nav-close:hover {

    background: var(--color-primary);

    color: white;

    border-color: var(--color-primary);

}



.mobile-nav-link {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

    padding: var(--spacing-md) var(--spacing-sm);

    font-size: var(--text-xl);

    font-weight: 500;

    color: var(--color-text-main);

    border-radius: 12px;

    transition: all var(--transition-fast);

    text-decoration: none;

}



.mobile-nav-link:hover {

    background: rgba(216, 26, 35, 0.05);

    color: var(--color-primary);

    padding-left: var(--spacing-md);

}



.mobile-nav-link.active {

    color: var(--color-primary);

    font-weight: 700;

}



.mobile-nav-link i {

    width: 24px;

    text-align: center;

    font-size: 1rem;

    opacity: 0.6;

}



.mobile-nav-sub {

    padding-left: var(--spacing-xl);

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

}



.mobile-nav-sub a {

    padding: var(--spacing-sm) var(--spacing-md);

    font-size: var(--text-lg);

    color: var(--color-text-muted);

    border-radius: 8px;

    transition: all var(--transition-fast);

    text-decoration: none;

    display: block;

}



.mobile-nav-sub a:hover,

.mobile-nav-sub a.active {

    color: var(--color-primary);

    background: rgba(216, 26, 35, 0.05);

}



.mobile-nav-cta {

    margin-top: auto;

    padding: var(--spacing-lg) 0;

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

}



/* ============================================

   CARDS & COMPONENTS

   ============================================ */

.card {

    background-color: var(--color-bg-white);

    border-radius: 1rem;

    padding: var(--spacing-lg);

    border: 1px solid var(--color-border);

    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);

}



.card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);

    border-color: rgba(216, 26, 35, 0.3);

}



[data-theme="dark"] .card:hover {

    border-color: rgba(216, 26, 35, 0.4);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



.badge {

    display: inline-block;

    padding: 0.25rem 0.75rem;

    border-radius: 9999px;

    font-size: var(--text-xs);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.badge-primary {

    background-color: rgba(10, 30, 60, 0.1);

    color: var(--color-primary);

}



[data-theme="dark"] .badge-primary {

    background-color: rgba(216, 26, 35, 0.15);

    color: #f87171;

}



/* ============================================

   ANIMATION UTILITIES

   ============================================ */

.fade-in-up {

    animation: fadeInUp 0.8s ease-out forwards;

    opacity: 0;

    transform: translateY(20px);

}



.fade-in-left {

    animation: fadeInLeft 0.8s ease-out forwards;

}



.fade-in-right {

    animation: fadeInRight 0.8s ease-out forwards;

}



.fade-in-scale {

    animation: fadeInScale 0.6s ease-out forwards;

}



.slide-in-bottom {

    animation: slideInBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



/* Stagger animation delays */

.delay-100 { animation-delay: 100ms; }

.delay-200 { animation-delay: 200ms; }

.delay-300 { animation-delay: 300ms; }

.delay-400 { animation-delay: 400ms; }

.delay-500 { animation-delay: 500ms; }

.delay-600 { animation-delay: 600ms; }



/* Scroll-triggered animation - progressive enhancement */

.animate-on-scroll {

    opacity: 1;

    transform: none;

    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}



.js-enhanced .animate-on-scroll {

    opacity: 0;

    transform: translateY(30px);

}



.js-enhanced .animate-on-scroll.is-visible {

    opacity: 1;

    transform: translateY(0);

}



/* Stagger children on scroll */

.stagger-children .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }

.stagger-children .animate-on-scroll:nth-child(2) { transition-delay: 100ms; }

.stagger-children .animate-on-scroll:nth-child(3) { transition-delay: 200ms; }

.stagger-children .animate-on-scroll:nth-child(4) { transition-delay: 300ms; }

.stagger-children .animate-on-scroll:nth-child(5) { transition-delay: 400ms; }

.stagger-children .animate-on-scroll:nth-child(6) { transition-delay: 500ms; }



/* Hover micro-interactions */

.hover-lift {

    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

}



.hover-lift:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



/* Animated underline for links */

.animated-underline {

    position: relative;

    display: inline-block;

}



.animated-underline::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--color-primary);

    transition: width var(--transition-normal);

}



.animated-underline:hover::after {

    width: 100%;

}



/* Section divider with animated line */

.section-header::after {

    content: '';

    display: block;

    width: 60px;

    height: 3px;

    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));

    margin: var(--spacing-md) auto 0;

    border-radius: 2px;

    animation: revealLine 0.8s ease-out forwards;

}



/* Morphing blob decorative element */

.morph-blob {

    animation: morphBlob 8s ease-in-out infinite;

}



/* Gradient animated background */

.gradient-animated {

    background: linear-gradient(-45deg, var(--color-primary), #1e3a8a, var(--color-primary-light), #0f172a);

    background-size: 400% 400%;

    animation: gradientShift 8s ease infinite;

}



/* ============================================

   PROOF BAR / STATS

   ============================================ */

.proof-bar {

    background: var(--color-bg-white);

    border-top: 1px solid var(--color-border);

    border-bottom: 1px solid var(--color-border);

    padding: var(--spacing-xl) 0;

}



.stat-item {

    text-align: center;

    padding: var(--spacing-sm);

}



.stat-number {

    font-size: var(--text-3xl);

    font-weight: 800;

    color: var(--color-primary);

    margin-bottom: 0;

    line-height: 1.2;

}



.stat-label {

    font-size: var(--text-sm);

    color: var(--color-text-muted);

    margin: 0;

}



/* ============================================

   RESOURCE / DOWNLOAD CARDS

   ============================================ */

.resource-card {

    background: var(--color-bg-white);

    border: 1px solid var(--color-border);

    border-radius: 16px;

    padding: var(--spacing-xl);

    text-align: center;

    transition: all var(--transition-normal);

    position: relative;

    overflow: hidden;

}



.resource-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));

    transform: scaleX(0);

    transition: transform var(--transition-normal);

    transform-origin: left;

}



.resource-card:hover::before {

    transform: scaleX(1);

}



.resource-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);

    border-color: rgba(216, 26, 35, 0.2);

}



.resource-icon {

    width: 80px;

    height: 80px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto var(--spacing-lg);

    font-size: 2rem;

    transition: transform var(--transition-normal);

}



.resource-card:hover .resource-icon {

    transform: scale(1.1) rotate(-3deg);

}



.resource-card h4 {

    margin-bottom: var(--spacing-sm);

}



.resource-card p {

    font-size: var(--text-sm);

    color: var(--color-text-muted);

    margin-bottom: var(--spacing-lg);

}



.download-btn {

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-sm);

    padding: 0.65rem 1.5rem;

    border-radius: 99px;

    font-weight: 600;

    font-size: var(--text-sm);

    background: var(--color-primary);

    color: white;

    transition: all var(--transition-normal);

    border: none;

    cursor: pointer;

}



.download-btn:hover {

    background: var(--color-primary-light);

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(216, 26, 35, 0.3);

}



.download-btn i {

    transition: transform var(--transition-fast);

}



.download-btn:hover i {

    transform: translateY(2px);

}



.download-btn--soon {

    background: rgba(255, 255, 255, 0.88);

    color: var(--color-accent);

    border: 1px solid rgba(216, 26, 35, 0.16);

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);

    cursor: default;

}



.download-btn--soon i {

    color: var(--color-primary);

}



.download-btn--soon:hover {

    background: rgba(255, 255, 255, 0.88);

    color: var(--color-accent);

    transform: none;

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);

}



.download-btn--soon:hover i {

    transform: none;

}



[data-theme="dark"] .download-btn--soon {

    background: rgba(15, 23, 42, 0.7);

    color: var(--color-text-dark-main);

    border-color: rgba(248, 113, 113, 0.16);

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);

}



/* Resource section category header */

.resource-category {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

    margin-bottom: var(--spacing-xl);

    padding-bottom: var(--spacing-md);

    border-bottom: 2px solid var(--color-border);

}



.resource-category-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: rgba(216, 26, 35, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-primary);

    font-size: 1.25rem;

}



.resource-category h3 {

    margin: 0;

    font-size: var(--text-2xl);

}



.resource-category p {

    margin: 0;

    font-size: var(--text-sm);

    color: var(--color-text-muted);

}



.pricing-note {

    margin: 0 auto var(--spacing-xl);

    max-width: 760px;

    display: flex;

    align-items: flex-start;

    gap: 0.9rem;

    padding: 1rem 1.1rem;

    border-radius: 18px;

    background: linear-gradient(135deg, rgba(216, 26, 35, 0.08), rgba(240, 62, 71, 0.04));

    border: 1px solid rgba(216, 26, 35, 0.14);

    box-shadow: 0 16px 32px rgba(216, 26, 35, 0.08);

    text-align: left;

}



.pricing-note__icon {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border-radius: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: rgba(216, 26, 35, 0.12);

    color: var(--color-primary);

    font-size: 1rem;

}



.pricing-note__content strong {

    display: block;

    font-size: 0.98rem;

    margin-bottom: 0.2rem;

    color: var(--color-text-main);

}



.pricing-note__content p {

    margin: 0;

    font-size: var(--text-sm);

    color: var(--color-text-muted);

}



[data-theme="dark"] .pricing-note {

    background: linear-gradient(135deg, rgba(248, 113, 113, 0.12), rgba(15, 23, 42, 0.36));

    border-color: rgba(248, 113, 113, 0.16);

    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);

}



[data-theme="dark"] .pricing-note__icon {

    background: rgba(248, 113, 113, 0.14);

    color: #fca5a5;

}



/* ============================================

   SERVICE CATALOG PANELS

   ============================================ */

.service-showcase {

    align-items: stretch;

}



.service-panel,

.service-visual-card {

    min-height: 100%;

}



.service-panel {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    padding: clamp(1.4rem, 2vw, 2rem);

    overflow: hidden;

    border-radius: 28px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));

    border: 1px solid rgba(255, 255, 255, 0.72);

    box-shadow: 0 24px 52px rgba(15, 23, 42, 0.08);

}



.service-panel::before {

    content: '';

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 100% 0%, rgba(216, 26, 35, 0.12), transparent 32%),

        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 38%);

    pointer-events: none;

}



.service-panel > * {

    position: relative;

    z-index: 1;

}



.service-panel h2 {

    margin: 0;

    font-size: clamp(1.9rem, 2.4vw, 2.4rem);

}



.service-panel__head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.service-panel__meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.service-panel__meta span {

    display: inline-flex;

    align-items: center;

    min-height: 2rem;

    padding: 0.45rem 0.8rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(216, 26, 35, 0.12);

    color: var(--color-accent);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.01em;

    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);

}



.service-panel__intro {

    margin: -0.3rem 0 0;

    max-width: 44ch;

    font-size: 1rem;

    line-height: 1.68;

}



.service-chip-grid {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 0.9rem;

}



.service-chip {

    display: flex;

    align-items: flex-start;

    gap: 0.9rem;

    padding: 1rem;

    min-height: 100%;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.84);

    border: 1px solid rgba(226, 232, 240, 0.94);

    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);

    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);

}



.service-chip:hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.1);

    border-color: rgba(216, 26, 35, 0.18);

}



.service-chip__icon {

    width: 2.85rem;

    height: 2.85rem;

    flex-shrink: 0;

    border-radius: 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, rgba(216, 26, 35, 0.12), rgba(255, 255, 255, 0.9));

    color: var(--color-primary);

    box-shadow: inset 0 0 0 1px rgba(216, 26, 35, 0.08);

    font-size: 1rem;

}



.service-chip__copy {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.service-chip__name {

    display: block;

    font-size: 1rem;

    font-weight: 800;

    line-height: 1.2;

    color: var(--color-accent);

    letter-spacing: -0.01em;

}



.service-chip__copy p {

    margin: 0;

    font-size: var(--text-sm);

    line-height: 1.58;

    color: var(--color-text-muted);

}



.service-panel__note {

    display: flex;

    align-items: flex-start;

    gap: 0.8rem;

    padding: 0.95rem 1rem;

    border-radius: 20px;

    background: linear-gradient(135deg, rgba(216, 26, 35, 0.08), rgba(216, 26, 35, 0.02));

    border: 1px solid rgba(216, 26, 35, 0.12);

    color: var(--color-accent);

}



.service-panel__note i {

    color: var(--color-primary);

    margin-top: 0.15rem;

}



.service-panel__note span {

    font-size: var(--text-sm);

    line-height: 1.6;

}



.service-panel__actions {

    display: grid;

    gap: 0.75rem;

}



.service-panel__actions .btn {

    width: 100%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.55rem;

    padding: 0.95rem 1.05rem;

    font-size: 1rem;

}



.btn--sportium {

    background: #E2001A;

    border-color: #E2001A;

    box-shadow: 0 16px 28px rgba(226, 0, 26, 0.18);

}



.btn--sportium:hover {

    background: #bb0016;

    border-color: #bb0016;

    box-shadow: 0 18px 32px rgba(226, 0, 26, 0.22);

}



.sportium-logo {

    display: block;

    width: auto;

    max-width: 100%;

    flex-shrink: 0;

    transform-origin: center;

}



.sportium-logo--white {

    filter: brightness(0) invert(1);

}



.badge-brand-sportium {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    min-height: 2.2rem;

    padding: 0.5rem 0.85rem;

    background: linear-gradient(135deg, #e2001a 0%, #ff445a 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 14px 26px rgba(226, 0, 26, 0.18);

}



.badge-brand-sportium .sportium-logo--badge {

    height: 1.55rem;

}



.badge-brand-sportium span:last-child {

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.service-title-sportium {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.35rem 0.75rem;

    margin-bottom: 0.9rem;

}



.service-title-kicker {

    font: inherit;

    color: inherit;

}



.service-title-sportium .sportium-logo--headline {

    height: clamp(3.15rem, 5.4vw, 3.6rem);

}



.service-title-line {

    flex-basis: 100%;

}



.btn--sportium .sportium-logo--button-wordmark {

    width: clamp(5.8rem, 17vw, 7rem);

    height: auto;

    max-width: none;

}



.service-panel--sportium {

    background: linear-gradient(180deg, rgba(255, 251, 251, 0.96), rgba(255, 244, 244, 0.88));

    border-color: rgba(226, 0, 26, 0.18);

    box-shadow: 0 28px 60px rgba(226, 0, 26, 0.08);

}



.service-panel--sportium::before {

    background:

        radial-gradient(circle at 0% 0%, rgba(226, 0, 26, 0.12), transparent 34%),

        radial-gradient(circle at 100% 0%, rgba(226, 0, 26, 0.08), transparent 28%),

        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 42%);

}



.service-panel--sportium .badge-primary {

    background: rgba(226, 0, 26, 0.1);

    color: #b40016;

}



.service-panel--sportium .service-panel__note {

    background: linear-gradient(135deg, rgba(226, 0, 26, 0.1), rgba(226, 0, 26, 0.03));

    border-color: rgba(226, 0, 26, 0.12);

}



.service-visual-card {

    position: relative;

    padding: 0.9rem !important;

    overflow: hidden;

    border-radius: 30px;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24)) !important;

    border: 1px solid rgba(255, 255, 255, 0.72) !important;

    box-shadow: 0 28px 56px rgba(15, 23, 42, 0.08) !important;

}



.service-visual-card::before {

    content: '';

    position: absolute;

    inset: auto -8% -18% 12%;

    height: 65%;

    background: radial-gradient(circle, rgba(216, 26, 35, 0.18), transparent 60%);

    filter: blur(24px);

    pointer-events: none;

}



.service-visual-card__frame {

    position: relative;

    z-index: 1;

    min-height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: clamp(1rem, 2.4vw, 1.4rem);

    border-radius: 24px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66));

    border: 1px solid rgba(255, 255, 255, 0.8);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 38px rgba(15, 23, 42, 0.08);

}



.service-visual-card img {

    width: 100%;

    height: auto;

    object-fit: contain;

    display: block;

    border-radius: 18px;

}



.service-visual-card--sportium::before {

    background: radial-gradient(circle, rgba(226, 0, 26, 0.22), transparent 58%);

}



.service-visual-card--sportium .service-visual-card__frame {

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 24px 48px rgba(226, 0, 26, 0.12);

}



.service-visual-card--sportium img {

    transform: scale(1.04);

}



[data-theme="dark"] .badge-brand-sportium {

    box-shadow: 0 16px 30px rgba(226, 0, 26, 0.24);

}



[data-theme="dark"] .service-panel {

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.82));

    border-color: rgba(255, 255, 255, 0.06);

    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.28);

}



[data-theme="dark"] .service-panel::before {

    background:

        radial-gradient(circle at 100% 0%, rgba(248, 113, 113, 0.14), transparent 32%),

        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 38%);

}



[data-theme="dark"] .service-panel__meta span {

    background: rgba(15, 23, 42, 0.78);

    border-color: rgba(248, 113, 113, 0.18);

    color: var(--color-text-dark-main);

    box-shadow: none;

}



[data-theme="dark"] .service-chip {

    background: rgba(15, 23, 42, 0.82);

    border-color: rgba(255, 255, 255, 0.06);

    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);

}



[data-theme="dark"] .service-chip:hover {

    border-color: rgba(248, 113, 113, 0.24);

    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.24);

}



[data-theme="dark"] .service-chip__icon {

    background: linear-gradient(135deg, rgba(248, 113, 113, 0.16), rgba(15, 23, 42, 0.92));

    color: #fca5a5;

    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.1);

}



[data-theme="dark"] .service-chip__name {

    color: var(--color-text-dark-main);

}



[data-theme="dark"] .service-chip__copy p {

    color: var(--color-text-dark-muted);

}



[data-theme="dark"] .service-panel__note {

    background: linear-gradient(135deg, rgba(248, 113, 113, 0.12), rgba(15, 23, 42, 0.32));

    border-color: rgba(248, 113, 113, 0.14);

    color: var(--color-text-dark-main);

}



[data-theme="dark"] .service-visual-card {

    background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.56)) !important;

    border-color: rgba(255, 255, 255, 0.06) !important;

    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.3) !important;

}



[data-theme="dark"] .service-visual-card__frame {

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.62));

    border-color: rgba(255, 255, 255, 0.06);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 38px rgba(0, 0, 0, 0.2);

}



@media (max-width: 768px) {

    .service-showcase {

        gap: var(--spacing-lg);

    }



    .service-panel,

    .service-visual-card {

        border-radius: 22px;

    }



    .service-panel {

        padding: 1.25rem;

        gap: 1rem;

    }



    .service-panel h2 {

        font-size: clamp(1.55rem, 8vw, 2rem);

    }



    .service-panel__head {

        flex-direction: column;

        align-items: flex-start;

    }



    .service-panel__meta {

        width: 100%;

    }



    .service-panel__meta span {

        min-height: 1.9rem;

        padding: 0.42rem 0.72rem;

        font-size: 0.74rem;

    }



    .service-panel__intro {

        max-width: none;

        font-size: var(--text-sm);

    }



    .service-chip-grid {

        grid-template-columns: 1fr;

        gap: 0.75rem;

    }



    .service-chip {

        padding: 0.9rem;

        border-radius: 18px;

    }



    .service-chip__icon {

        width: 2.6rem;

        height: 2.6rem;

        border-radius: 16px;

    }



    .service-panel__note {

        padding: 0.85rem 0.95rem;

        border-radius: 18px;

    }



    .service-panel__actions .btn {

        padding: 0.9rem 0.95rem;

        font-size: 0.95rem;

    }



    .badge-brand-sportium {

        min-height: 2.05rem;

        padding: 0.46rem 0.74rem;

    }



    .badge-brand-sportium .sportium-logo--badge {

        height: 1.2rem;

    }



    .service-title-sportium {

        gap: 0.28rem 0.55rem;

        margin-bottom: 0.75rem;

    }



    .service-title-sportium .sportium-logo--headline {

        height: 3.65rem;

    }



    .btn--sportium .sportium-logo--button-wordmark {

        width: 5.25rem;

        height: auto;

    }



    .service-visual-card {

        padding: 0.75rem !important;

        min-height: auto;

    }



    .service-visual-card__frame {

        padding: 0.9rem;

        border-radius: 20px;

    }



    .service-visual-card--sportium img {

        transform: none;

    }

}



@media (max-width: 480px) {

    .service-panel,

    .service-visual-card {

        border-radius: 18px;

    }



    .service-panel {

        padding: 1rem;

    }



    .service-chip {

        gap: 0.75rem;

        padding: 0.82rem;

    }



    .service-chip__icon {

        width: 2.35rem;

        height: 2.35rem;

        border-radius: 14px;

        font-size: 0.9rem;

    }



    .service-chip__name {

        font-size: 0.95rem;

    }



    .service-chip__copy p,

    .service-panel__note span {

        font-size: 0.82rem;

    }

}



.hero-home {

    position: relative;

    min-height: 88vh;

    padding: 9rem 0 4.5rem;

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(circle at 8% 20%, rgba(240, 62, 71, 0.2), transparent 28%),

        radial-gradient(circle at 86% 20%, rgba(96, 165, 250, 0.18), transparent 26%),

        radial-gradient(circle at 70% 62%, rgba(216, 26, 35, 0.14), transparent 24%),

        linear-gradient(180deg, #fbfbfe 0%, #f3f5fb 100%);

}



.hero-home__bg {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

}



.hero-home__blob {

    opacity: 0.45;

}



.hero-home__blob--left {

    top: -16%;

    left: -10%;

    width: 34rem;

    height: 34rem;

    background: radial-gradient(circle, rgba(240, 62, 71, 0.95) 0%, rgba(240, 62, 71, 0.15) 58%, rgba(240, 62, 71, 0) 78%);

    border-radius: 42%;

}



.hero-home__blob--right {

    right: -10%;

    bottom: -16%;

    width: 40rem;

    height: 40rem;

    background: radial-gradient(circle, rgba(96, 165, 250, 0.9) 0%, rgba(96, 165, 250, 0.16) 54%, rgba(96, 165, 250, 0) 78%);

    border-radius: 46%;

    animation-delay: 2s;

}



.hero-home__mesh {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(115deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.68)),

        repeating-linear-gradient(90deg, rgba(26, 32, 44, 0.035) 0, rgba(26, 32, 44, 0.035) 1px, transparent 1px, transparent 120px),

        repeating-linear-gradient(0deg, rgba(26, 32, 44, 0.03) 0, rgba(26, 32, 44, 0.03) 1px, transparent 1px, transparent 120px);

    opacity: 0.44;

    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1), transparent 92%);

}



.hero-home__layout {

    display: grid;

    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    gap: clamp(2rem, 4vw, 4.5rem);

    align-items: center;

    position: relative;

    z-index: 1;

}



.hero-home__content {

    max-width: 42rem;

    position: relative;

    padding-top: 0.55rem;

}



.hero-home__eyebrow-row {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.9rem;

    margin-bottom: 1.4rem;

}



.hero-home__eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 3rem;

    padding: 0.75rem 1.2rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid rgba(255, 255, 255, 0.92);

    color: var(--color-primary);

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    box-shadow: 0 18px 35px rgba(216, 26, 35, 0.1);

}



.hero-home__micro-proof {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    min-height: 3rem;

    padding: 0.75rem 1.1rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.56);

    border: 1px solid rgba(255, 255, 255, 0.7);

    color: var(--color-accent);

    font-size: 0.94rem;

    font-weight: 600;

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);

}



.hero-home__title {

    margin: 0.4rem 0 1.5rem;

    max-width: 10.5ch;

    display: flex;

    flex-direction: column;

    gap: 0.02em;

    padding: 0.26em 0 0.1em;

    overflow: visible;

    font-size: clamp(3.55rem, 5.4vw, 5.7rem);

    line-height: 1.07;

    letter-spacing: -0.045em;

    color: #1b1d2a;

}



.hero-home__title-line {

    display: block;

}



.hero-home__title-accent {

    display: inline-block;

    color: transparent;

    background: linear-gradient(135deg, #d81a23 0%, #ef3f47 38%, #611720 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 12px 30px rgba(216, 26, 35, 0.18));

}



.hero-home__lead {

    max-width: 35rem;

    margin: 0 0 1.9rem;

    color: #55627a;

    font-size: clamp(1.12rem, 1.9vw, 1.38rem);

    line-height: 1.62;

}



.hero-home__actions {

    align-items: center;

    margin-bottom: 1.55rem;

}



.hero-home__actions .btn {

    min-width: 220px;

    min-height: 62px;

    border-radius: 20px;

    font-size: 1.04rem;

    font-weight: 700;

}



.hero-home__actions .btn-primary {

    box-shadow: 0 22px 40px rgba(216, 26, 35, 0.22);

}



.hero-home__actions .btn-secondary {

    background: rgba(255, 255, 255, 0.66);

    border-color: rgba(216, 26, 35, 0.3);

    color: var(--color-primary);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);

}



.hero-home__trust-row {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.85rem;

    max-width: 42rem;

}



.hero-home__trust-pill {

    padding: 0.95rem 1rem;

    border-radius: 22px;

    background: rgba(255, 255, 255, 0.68);

    border: 1px solid rgba(255, 255, 255, 0.84);

    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

}



.hero-home__trust-pill strong {

    display: block;

    margin-bottom: 0.25rem;

    font-size: 0.98rem;

    color: #1e2637;

}



.hero-home__trust-pill span {

    display: block;

    font-size: 0.86rem;

    line-height: 1.45;

    color: #5d6a82;

}



.hero-home__visual {

    position: relative;

}



.hero-home__visual-stage {

    position: relative;

    min-height: 620px;

    max-width: 610px;

    margin-left: auto;

    border-radius: 38px;

    overflow: hidden;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.22));

    border: 1px solid rgba(255, 255, 255, 0.82);

    box-shadow: 0 38px 85px rgba(15, 23, 42, 0.14);

    backdrop-filter: blur(22px);

    -webkit-backdrop-filter: blur(22px);

}



.hero-home__visual-stage::before,

.hero-home__visual-stage::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

}



.hero-home__visual-stage::before {

    inset: 1.1rem;

    border-radius: 30px;

    border: 1px solid rgba(255, 255, 255, 0.64);

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));

    opacity: 0.85;

}



.hero-home__visual-stage::after {

    background:

        radial-gradient(circle at 50% 50%, rgba(216, 26, 35, 0.12), transparent 38%),

        radial-gradient(circle at 82% 18%, rgba(96, 165, 250, 0.18), transparent 22%),

        radial-gradient(circle at 20% 78%, rgba(255, 255, 255, 0.62), transparent 24%);

}



.hero-home__halo,

.hero-home__orbit,

.hero-home__center-card,

.hero-home__service {

    position: absolute;

}



.hero-home__halo {

    inset: 50% auto auto 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

}



.hero-home__halo--one {

    width: 54%;

    aspect-ratio: 1;

    background: radial-gradient(circle, rgba(216, 26, 35, 0.24) 0%, rgba(216, 26, 35, 0) 72%);

}



.hero-home__halo--two {

    width: 82%;

    aspect-ratio: 1;

    background: radial-gradient(circle, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0) 70%);

    animation: float 9s ease-in-out infinite;

}



.hero-home__orbit {

    inset: 50% auto auto 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 1px dashed rgba(216, 26, 35, 0.18);

}



.hero-home__orbit--outer {

    width: 78%;

    aspect-ratio: 1;

}



.hero-home__orbit--inner {

    width: 53%;

    aspect-ratio: 1;

    border-color: rgba(26, 32, 44, 0.14);

}



.hero-home__center-card {

    inset: 50% auto auto 50%;

    transform: translate(-50%, -50%);

    z-index: 3;

    width: min(74%, 360px);

    padding: 1.35rem;

    border-radius: 30px;

    background: linear-gradient(180deg, rgba(26, 32, 44, 0.96), rgba(26, 32, 44, 0.88));

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 0 34px 65px rgba(15, 23, 42, 0.38);

    color: #ffffff;

}



.hero-home__center-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.8rem;

    margin-bottom: 1rem;

}



.hero-home__center-kicker {

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: #fca5a5;

}



.hero-home__center-status {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.4rem 0.7rem;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);

    font-size: 0.76rem;

    font-weight: 700;

    color: rgba(255, 255, 255, 0.88);

}



.hero-home__center-title {

    margin-bottom: 0.55rem;

    font-size: 2.2rem;

    font-weight: 800;

    letter-spacing: -0.04em;

    color: #ffffff;

}



.hero-home__center-card p {

    margin: 0;

    color: rgba(255, 255, 255, 0.74);

    font-size: 0.98rem;

    line-height: 1.6;

}



.hero-home__center-metrics {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.65rem;

    margin-top: 1.1rem;

}



.hero-home__center-metric {

    padding: 0.7rem 0.55rem;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.05);

    text-align: center;

}



.hero-home__center-metric strong {

    display: block;

    margin-bottom: 0.2rem;

    font-size: 1.02rem;

    color: #ffffff;

}



.hero-home__center-metric span {

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.62);

}



.hero-home__center-signal {

    display: flex;

    gap: 0.45rem;

    margin-top: 1rem;

}



.hero-home__center-signal span {

    height: 0.45rem;

    flex: 1;

    border-radius: 999px;

    background: linear-gradient(90deg, rgba(248, 113, 113, 0.34), rgba(248, 113, 113, 0.9));

}



.hero-home__center-signal span:nth-child(2) {

    flex: 1.35;

}



.hero-home__service {

    z-index: 4;

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.85rem 1rem;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.94);

    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);

    color: #1f2937;

    font-size: 0.96rem;

    font-weight: 700;

    animation: float 8s ease-in-out infinite;

}



.hero-home__service i {

    width: 2rem;

    height: 2rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    font-size: 0.92rem;

}



.hero-home__service--pagopa {

    top: 12%;

    left: 6%;

    animation-delay: 0s;

}



.hero-home__service--pagopa i {

    background: rgba(216, 26, 35, 0.12);

    color: var(--color-primary);

}



.hero-home__service--ricariche {

    top: 12%;

    right: 8%;

    animation-delay: 1.2s;

}



.hero-home__service--ricariche i {

    background: rgba(96, 165, 250, 0.12);

    color: #2563eb;

}



.hero-home__service--spedizioni {

    top: 58%;

    right: 3%;

    animation-delay: 0.6s;

}



.hero-home__service--spedizioni i {

    background: rgba(40, 167, 69, 0.12);

    color: var(--color-success);

}



.hero-home__service--cittadino {

    bottom: 11%;

    left: 8%;

    animation-delay: 1.8s;

}



.hero-home__service--cittadino i {

    background: rgba(26, 32, 44, 0.1);

    color: var(--color-accent);

}



.hero-home__service--ticketing {

    bottom: 12%;

    right: 18%;

    animation-delay: 0.3s;

}



.hero-home__service--ticketing i {

    background: rgba(127, 90, 240, 0.12);

    color: #7f5af0;

}



[data-theme="dark"] .hero-home {

    background:

        radial-gradient(circle at 8% 20%, rgba(248, 113, 113, 0.18), transparent 28%),

        radial-gradient(circle at 86% 20%, rgba(96, 165, 250, 0.14), transparent 26%),

        radial-gradient(circle at 70% 62%, rgba(248, 113, 113, 0.12), transparent 24%),

        linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);

}



[data-theme="dark"] .hero-home__mesh {

    opacity: 0.24;

}



[data-theme="dark"] .hero-home__eyebrow {

    background: rgba(248, 113, 113, 0.12);

    border-color: rgba(248, 113, 113, 0.18);

    color: #fecaca;

    box-shadow: none;

}



[data-theme="dark"] .hero-home__micro-proof,

[data-theme="dark"] .hero-home__trust-pill,

[data-theme="dark"] .hero-home__visual-stage,

[data-theme="dark"] .hero-home__service {

    background: rgba(15, 23, 42, 0.62);

    border-color: rgba(255, 255, 255, 0.08);

    color: var(--color-text-dark-main);

    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.24);

}



[data-theme="dark"] .hero-home__title {

    color: var(--color-text-dark-main);

}



[data-theme="dark"] .hero-home__lead,

[data-theme="dark"] .hero-home__trust-pill span {

    color: rgba(241, 245, 249, 0.74);

}



[data-theme="dark"] .hero-home__trust-pill strong {

    color: var(--color-text-dark-main);

}



[data-theme="dark"] .hero-home__visual-stage::before {

    border-color: rgba(255, 255, 255, 0.08);

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));

}



[data-theme="dark"] .hero-home__orbit--inner {

    border-color: rgba(255, 255, 255, 0.14);

}



@media (max-width: 1080px) {

    .hero-home__layout {

        grid-template-columns: 1fr;

    }



    .hero-home__content {

        max-width: none;

    }



    .hero-home__visual-stage {

        max-width: 640px;

        margin: 0 auto;

    }

}



/* ============================================

   CUSTOM SCROLLBAR

   ============================================ */

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: var(--color-bg-light); }

::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }



/* ============================================

   LOGO TOGGLING

   ============================================ */

[data-theme="dark"] .logo-light { display: none; }

[data-theme="dark"] .logo-dark { display: block !important; }



/* ============================================

   HERO SLIDER STYLES

   ============================================ */

.hero-slider-section {

    padding-top: 80px;

}



.hero-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transition: opacity 0.8s ease-in-out;

    display: flex;

    align-items: center;

}



.hero-slide::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, rgba(10, 30, 60, 0.9) 0%, rgba(10, 30, 60, 0.7) 100%);

    z-index: 1;

}



.hero-slide.active {

    opacity: 1;

    z-index: 2;

}



.hero-slide .container {

    position: relative;

    z-index: 3;

}



.hero-content h1 {

    color: white;

    font-size: 3.5rem;

}



.slider-controls {

    position: absolute;

    bottom: 30px;

    right: 50px;

    z-index: 10;

    display: flex;

    gap: 1rem;

}



.slider-prev,

.slider-next {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: white;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

}



.slider-prev:hover,

.slider-next:hover {

    background: var(--color-primary);

    color: white;

    border-color: var(--color-primary);

}



.slider-dots {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 10px;

    z-index: 10;

}



.dot {

    width: 12px;

    height: 12px;

    background: rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.3s ease;

}



.dot.active {

    background: var(--color-primary);

    transform: scale(1.2);

}



/* ============================================

   FAQ ACCORDION

   ============================================ */

details.card {

    cursor: pointer;

}



details.card summary {

    font-weight: 700;

    list-style: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



details.card summary::-webkit-details-marker {

    display: none;

}



details.card summary i {

    transition: transform var(--transition-normal);

}



details[open].card summary i {

    transform: rotate(180deg);

}



details.card > p {

    animation: fadeInUp 0.3s ease-out;

}



/* ============================================

   FOOTER

   ============================================ */

.footer {

    background-color: var(--color-accent);

    color: white;

    padding: var(--spacing-2xl) 0 var(--spacing-lg);

}



.footer a:hover {

    color: var(--color-primary-light);

}



.footer-bottom {

    border-top: 1px solid rgba(255,255,255,0.1);

    padding-top: var(--spacing-lg);

    font-size: var(--text-xs);

    color: rgba(255, 255, 255, 0.65);

}



/* ============================================

   RESPONSIVE - TABLET (max-width: 1024px)

   ============================================ */

@media (max-width: 1250px) {

    .desktop-nav {

        display: none;

    }



    #mobile-menu-btn {

        display: block;

    }

}



@media (max-width: 1024px) {

    .grid-cols-4 {

        grid-template-columns: repeat(2, 1fr);

    }



    .grid-cols-3 {

        grid-template-columns: repeat(2, 1fr);

    }



    h1 {

        font-size: var(--text-4xl);

    }



    h2 {

        font-size: var(--text-3xl);

    }



    .section {

        padding: var(--spacing-3xl) 0;

    }

}



/* ============================================

   RESPONSIVE - MOBILE (max-width: 768px)

   ============================================ */

@media (max-width: 768px) {

    :root {

        --spacing-section: 3.5rem;

    }



    .container {

        padding: 0 var(--spacing-lg);

    }



    h1 {

        font-size: var(--text-3xl);

        line-height: 1.15;

    }



    h2 {

        font-size: var(--text-2xl);

    }



    h3 {

        font-size: var(--text-xl);

    }



    h4 {

        font-size: var(--text-lg);

    }



    .section {

        padding: var(--spacing-2xl) 0;

    }



    .grid-cols-2,

    .grid-cols-3,

    .grid-cols-4 {

        grid-template-columns: 1fr;

    }



    /* Header mobile */

    .header {

        padding: var(--spacing-sm) 0;

    }



    .header .container {

        padding: 0 var(--spacing-md);

    }



    /* Hide desktop-only buttons in header on mobile */

    .header .btn-secondary:not(#mobile-menu-btn):not(#theme-toggle) {

        display: none;

    }



    .header .btn-primary {

        display: none;

    }



    /* Hero section mobile */

    .hero-content h1 {

        font-size: var(--text-3xl);

    }



    /* POS badges hidden on small screens */

    .pos-badge {

        display: none;

    }



    .pos-container {

        max-width: 300px;

    }



    /* Proof bar */

    .proof-bar .grid-cols-4 {

        grid-template-columns: repeat(2, 1fr);

        gap: var(--spacing-md);

    }



    .stat-number {

        font-size: var(--text-2xl);

    }



    /* Cards */

    .card {

        padding: var(--spacing-md);

    }



    .glass-card {

        padding: var(--spacing-md);

    }



    /* Buttons stack on mobile */

    .flex.gap-md {

        flex-wrap: wrap;

    }



    .btn {

        padding: 0.75rem 1.5rem;

        font-size: var(--text-sm);

    }



    .hero-home {

        min-height: auto;

        padding-top: 7.5rem;

        padding-bottom: var(--spacing-2xl);

    }



    .hero-home__content {

        padding: 1.7rem 1.35rem 1.35rem;

        border-radius: 28px;

        background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.68));

        border: 1px solid rgba(255, 255, 255, 0.82);

        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);

        backdrop-filter: blur(14px);

        -webkit-backdrop-filter: blur(14px);

    }



    .hero-home__eyebrow-row {

        gap: 0.7rem;

        margin-bottom: 1.1rem;

    }



    .hero-home__eyebrow,

    .hero-home__micro-proof {

        min-height: 2.65rem;

        padding: 0.65rem 0.95rem;

    }



    .hero-home__title {

        max-width: none;

        gap: 0.03em;

        margin-top: 0.3rem;

        padding: 0.2em 0 0.08em;

        font-size: clamp(2.85rem, 9.6vw, 4.1rem);

        line-height: 1.08;

    }



    .hero-home__lead {

        max-width: 100%;

        font-size: 1.08rem;

    }



    .hero-home__actions {

        flex-direction: column;

        align-items: stretch;

    }



    .hero-home__actions .btn {

        width: 100%;

        min-width: 0;

    }



    .hero-home__trust-row {

        grid-template-columns: 1fr;

    }



    .hero-home__visual-stage {

        min-height: 480px;

        border-radius: 28px;

    }



    .hero-home__center-card {

        width: min(78%, 320px);

        padding: 1.15rem;

        border-radius: 24px;

    }



    .hero-home__center-title {

        font-size: 1.85rem;

    }



    .hero-home__service {

        padding: 0.72rem 0.82rem;

        border-radius: 16px;

        font-size: 0.84rem;

        gap: 0.5rem;

    }



    .hero-home__service i {

        width: 1.75rem;

        height: 1.75rem;

        border-radius: 10px;

        font-size: 0.8rem;

    }



    .hero-home__service--pagopa {

        top: 10%;

        left: 5%;

    }



    .hero-home__service--ricariche {

        top: 10%;

        right: 5%;

    }



    .hero-home__service--spedizioni {

        top: 62%;

        right: 4%;

    }



    .hero-home__service--cittadino {

        bottom: 10%;

        left: 6%;

    }



    .hero-home__service--ticketing {

        bottom: 10%;

        right: 18%;

    }



    [data-theme="dark"] .hero-home__content {

        background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.7));

        border-color: rgba(255, 255, 255, 0.08);

        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);

    }



    /* Footer grid becomes 1 column on mobile */

    .footer .grid-cols-4 {

        grid-template-columns: 1fr;

        gap: var(--spacing-lg);

    }



    .footer .grid-cols-4 > div:first-child {

        text-align: center;

    }



    .footer .grid-cols-4 > div:first-child img {

        margin: 0 auto var(--spacing-md);

    }



    /* Resource cards on mobile */

    .resource-card {

        padding: var(--spacing-lg);

    }



    .resource-icon {

        width: 64px;

        height: 64px;

        font-size: 1.5rem;

    }



    .resource-category {

        align-items: flex-start;

        gap: 0.85rem;

        margin-bottom: var(--spacing-lg);

    }



    .resource-category h3 {

        font-size: var(--text-xl);

    }



    .pricing-note {

        padding: 0.9rem;

        border-radius: 16px;

        margin-bottom: var(--spacing-lg);

    }



    .pricing-note__icon {

        width: 40px;

        height: 40px;

        border-radius: 12px;

    }



    /* Slider */

    .slider-controls {

        display: none;

    }



    /* Order fix for reversed grid layouts on mobile: image always after text */

    .order-2 {

        order: 1;

    }



    /* Fix padding for sections with side padding */

    [style*="padding-left: 3rem"] {

        padding-left: 0 !important;

    }



    /* Mobile-specific spacing for stacked grids */

    .grid.gap-xl {

        gap: var(--spacing-lg);

    }



    /* Pricing cards fix - remove scale on mobile */

    .card[style*="transform: scale"] {

        transform: none !important;

    }

}



/* ============================================

   RESPONSIVE - SMALL MOBILE (max-width: 480px)

   ============================================ */

@media (max-width: 480px) {

    .container {

        padding: 0 var(--spacing-md);

    }



    h1 {

        font-size: var(--text-2xl);

    }



    h2 {

        font-size: var(--text-xl);

    }



    .btn {

        width: 100%;

        justify-content: center;

    }



    .flex.gap-md:has(.btn) {

        flex-direction: column;

    }



    /* Full-width buttons */

    .btn-primary, .btn-secondary {

        width: 100%;

        text-align: center;

    }



    .hero-home {

        padding-top: 7rem;

    }



    .hero-home__content {

        padding: 1.35rem 1rem 1rem;

        border-radius: 22px;

    }



    .hero-home__eyebrow-row {

        gap: 0.6rem;

    }



    .hero-home__eyebrow {

        width: 100%;

    }



    .hero-home__micro-proof {

        width: 100%;

        justify-content: center;

        font-size: 0.84rem;

    }



    .hero-home__title {

        gap: 0.035em;

        margin-top: 0.22rem;

        padding: 0.18em 0 0.06em;

        font-size: clamp(2.45rem, 11vw, 3.15rem);

        line-height: 1.08;

    }



    .hero-home__lead {

        font-size: 1rem;

    }



    .hero-home__visual-stage {

        min-height: 390px;

        border-radius: 24px;

    }



    .hero-home__center-card {

        width: min(86%, 286px);

        padding: 1rem;

    }



    .hero-home__center-title {

        font-size: 1.55rem;

    }



    .hero-home__center-metrics {

        gap: 0.45rem;

    }



    .hero-home__center-metric {

        padding: 0.6rem 0.3rem;

        border-radius: 14px;

    }



    .hero-home__service--ticketing,

    .hero-home__service--cittadino {

        display: none;

    }



    .hero-home__service--pagopa {

        top: 11%;

        left: 4%;

    }



    .hero-home__service--ricariche {

        top: 11%;

        right: 4%;

    }



    .hero-home__service--spedizioni {

        top: 69%;

        right: 7%;

    }



    .header .btn,

    .mobile-nav-close {

        width: auto;

        flex: 0 0 auto;

    }



    .proof-bar .grid-cols-4 {

        grid-template-columns: repeat(2, 1fr);

    }



    .stat-number {

        font-size: var(--text-xl);

    }



    /* Reduce card padding more */

    .card, .glass-card {

        padding: var(--spacing-md);

        border-radius: 12px;

    }



    .resource-category {

        flex-direction: column;

    }



    .pricing-note {

        flex-direction: column;

        gap: 0.7rem;

    }

}



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }



    .blob,

    .pos-container,

    .pos-badge,

    .animate-on-scroll,

    [data-reveal] {

        animation: none !important;

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}



/* ============================================

   SECTION NAVS (sticky quick filters / anchors)

   ============================================ */

.section-nav {

    position: sticky;

    top: 80px;

    z-index: 90;

    margin: var(--spacing-md) var(--spacing-md) 0;

    border-radius: 18px;

    border: 1px solid rgba(216, 26, 35, 0.08);

    background:

        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));

    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);

    overflow: hidden;

}



.section-nav__inner {

    display: flex;

    align-items: center;

    gap: 0.85rem;

    padding: 0.8rem 1rem;

}



.section-nav__label {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 2.35rem;

    padding: 0.55rem 0.9rem;

    border-radius: 999px;

    background: rgba(216, 26, 35, 0.08);

    color: var(--color-primary);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.section-nav__track {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    flex: 1;

    min-width: 0;

    overflow-x: auto;

    white-space: nowrap;

    scrollbar-width: none;

    -ms-overflow-style: none;

    scroll-snap-type: x proximity;

    overscroll-behavior-x: contain;

}



.section-nav__track::-webkit-scrollbar {

    display: none;

}



.section-nav__link {

    scroll-snap-align: start;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.55rem;

    min-height: 2.5rem;

    padding: 0.62rem 0.95rem;

    border-radius: 999px;

    border: 1px solid rgba(216, 26, 35, 0.18);

    background: rgba(255, 255, 255, 0.72);

    color: var(--color-text-main);

    font-size: 0.92rem;

    font-weight: 650;

    line-height: 1;

    text-decoration: none;

    transition:

        transform var(--transition-fast),

        background var(--transition-normal),

        color var(--transition-normal),

        border-color var(--transition-normal),

        box-shadow var(--transition-normal);

}



.section-nav__link i {

    font-size: 0.88rem;

    color: var(--color-primary);

    transition: color var(--transition-normal);

}



.section-nav__link--sportium {

    padding-inline: 0.95rem;

    min-width: 0;

    line-height: 0;

}



.section-nav__link--sportium .sportium-logo--nav {

    width: clamp(4.7rem, 8.2vw, 5.5rem);

    height: auto;

    max-width: none;

}



.section-nav__link:hover {

    transform: none;

    color: var(--color-primary);

    border-color: rgba(216, 26, 35, 0.35);

    box-shadow: 0 10px 24px rgba(216, 26, 35, 0.12);

}



.section-nav__link.is-active,

.section-nav__link[aria-current="location"] {

    background: linear-gradient(135deg, var(--color-primary) 0%, #ee3c45 100%);

    color: #ffffff;

    border-color: transparent;

    box-shadow: 0 12px 26px rgba(216, 26, 35, 0.22);

}



.section-nav__link.is-active i,

.section-nav__link[aria-current="location"] i {

    color: #ffffff;

}



.section-nav__link--sportium.is-active .sportium-logo--nav,

.section-nav__link--sportium[aria-current="location"] .sportium-logo--nav {

    filter: brightness(0) invert(1);

}



[data-theme="dark"] .section-nav {

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));

    border-color: rgba(255, 255, 255, 0.06);

    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);

}



[data-theme="dark"] .section-nav__label {

    background: rgba(248, 113, 113, 0.12);

    color: #fca5a5;

}



[data-theme="dark"] .section-nav__link {

    background: rgba(15, 23, 42, 0.6);

    border-color: rgba(248, 113, 113, 0.18);

    color: var(--color-text-dark-main);

}



[data-theme="dark"] .section-nav__link:hover {

    color: #fca5a5;

    border-color: rgba(248, 113, 113, 0.34);

}



@media (max-width: 768px) {

    .section-nav {

        top: 66px;

        margin: 0.55rem 0.75rem 0;

        border-radius: 14px;

        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);

    }



    .section-nav::before,

    .section-nav::after {

        content: "";

        position: absolute;

        top: 0;

        bottom: 0;

        width: 18px;

        pointer-events: none;

        z-index: 2;

    }



    .section-nav::before {

        left: 0;

        background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));

    }



    .section-nav::after {

        right: 0;

        background: linear-gradient(270deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));

    }



    .section-nav__inner {

        padding: 0.45rem 0.65rem;

        gap: 0;

    }



    .section-nav__label {

        display: none;

    }



    .section-nav__track {

        gap: 0.45rem;

    }



    .section-nav__link {

        min-height: 2.1rem;

        padding: 0.46rem 0.75rem;

        font-size: 0.78rem;

        font-weight: 700;

        letter-spacing: 0.01em;

        box-shadow: none;

    }



    .section-nav__link i {

        font-size: 0.75rem;

    }



    [data-theme="dark"] .section-nav::before {

        background: linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0));

    }



    [data-theme="dark"] .section-nav::after {

        background: linear-gradient(270deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0));

    }

}



@media (max-width: 480px) {

    .section-nav {

        top: 64px;

        margin: 0.45rem 0.6rem 0;

        border-radius: 12px;

    }



    .section-nav__inner {

        padding: 0.4rem 0.55rem;

    }



    .section-nav__track {

        gap: 0.4rem;

    }



    .section-nav__link {

        min-height: 2rem;

        padding: 0.42rem 0.68rem;

        font-size: 0.74rem;

        gap: 0.42rem;

    }



    .section-nav__link--sportium {

        min-width: 0;

        padding-inline: 0.78rem;

    }



    .section-nav__link--sportium .sportium-logo--nav {

        width: 4.35rem;

        height: auto;

    }



    .section-nav--resources .section-nav__link i {

        display: none;

    }

}



/* ============================================

   SMOOTH PAGE TRANSITIONS

   ============================================ */

.page-loaded .fade-in-up,

.page-loaded .slide-in-bottom {

    animation-play-state: running;

}



/* Reveal on scroll utility */

[data-reveal] {

    opacity: 1;

    transform: none;

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.js-enhanced [data-reveal] {

    opacity: 0;

    transform: translateY(20px);

}



.js-enhanced [data-reveal].revealed {

    opacity: 1;

    transform: translateY(0);

}



.js-enhanced [data-reveal="left"] {

    transform: translateX(-30px);

}



.js-enhanced [data-reveal="left"].revealed {

    transform: translateX(0);

}



.js-enhanced [data-reveal="right"] {

    transform: translateX(30px);

}



.js-enhanced [data-reveal="right"].revealed {

    transform: translateX(0);

}



.js-enhanced [data-reveal="scale"] {

    transform: scale(0.95);

}



.js-enhanced [data-reveal="scale"].revealed {

    transform: scale(1);

}



/* ============================================

   BACK TO TOP BUTTON

   ============================================ */

.back-to-top {

    position: fixed;

    bottom: 2rem;

    right: 2rem;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: var(--color-primary);

    color: white;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: all var(--transition-normal);

    z-index: 900;

    box-shadow: 0 4px 15px rgba(216, 26, 35, 0.3);

}



.back-to-top.visible {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.back-to-top:hover {

    background: var(--color-primary-light);

    transform: translateY(-3px);

    box-shadow: 0 8px 25px rgba(216, 26, 35, 0.4);

}



/* ============================================

   LOADING ANIMATION

   ============================================ */

.skeleton {

    background: linear-gradient(90deg, var(--color-border) 25%, rgba(226, 232, 240, 0.5) 50%, var(--color-border) 75%);

    background-size: 200% 100%;

    animation: shimmer 1.5s infinite;

    border-radius: 4px;

}



/* ============================================

   CONTACT FORM

   ============================================ */

.contact-form {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-md);

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

    position: relative;

}



.form-label {

    font-weight: 500;

    font-size: var(--text-sm);

    color: var(--color-text-main);

}



.form-input {

    padding: 0.85rem 1rem;

    border: 2px solid var(--color-border);

    border-radius: 0.75rem;

    width: 100%;

    font-family: inherit;

    font-size: var(--text-base);

    color: var(--color-text-main);

    background: var(--color-bg-white);

    transition: all var(--transition-normal);

    outline: none;

}



.form-input:focus {

    border-color: var(--color-primary);

    box-shadow: 0 0 0 3px rgba(216, 26, 35, 0.1);

}



.form-input:hover:not(:focus) {

    border-color: var(--color-text-muted);

}



.form-input::placeholder {

    color: var(--color-text-muted);

    opacity: 0.6;

}



[data-theme="dark"] .form-input {

    background: var(--color-bg-card-dark);

    border-color: var(--color-border-dark);

    color: var(--color-text-dark-main);

}



[data-theme="dark"] .form-input:focus {

    border-color: var(--color-primary-light);

    box-shadow: 0 0 0 3px rgba(216, 26, 35, 0.2);

}



/* Select styling */

select.form-input {

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 1rem center;

    padding-right: 2.5rem;

}



/* Textarea */

textarea.form-input {

    resize: vertical;

    min-height: 120px;

}



/* Checkbox */

.form-checkbox {

    width: 18px;

    height: 18px;

    accent-color: var(--color-primary);

    cursor: pointer;

    flex-shrink: 0;

}



/* Validation states */

.form-input.invalid {

    border-color: var(--color-error);

    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);

}



.form-input.valid {

    border-color: var(--color-success);

}



.form-error {

    font-size: var(--text-xs);

    color: var(--color-error);

    opacity: 0;

    transform: translateY(-5px);

    transition: all var(--transition-fast);

    height: 0;

    overflow: hidden;

}



.form-group.has-error .form-error {

    opacity: 1;

    transform: translateY(0);

    height: auto;

    margin-top: 2px;

}



.form-group.has-error .form-input {

    border-color: var(--color-error);

}



/* Submit button states */

#submit-btn:disabled {

    opacity: 0.7;

    cursor: not-allowed;

    transform: none;

}



/* Success / Error messages */

.form-message {

    border-radius: 1rem;

    animation: fadeInScale 0.5s ease-out forwards;

}



.form-message-success {

    border: 2px solid rgba(40, 167, 69, 0.2);

    background: rgba(40, 167, 69, 0.03);

}



.form-message-error {

    border: 2px solid rgba(220, 53, 69, 0.2);

    background: rgba(220, 53, 69, 0.03);

}



/* Form responsive */

@media (max-width: 768px) {

    .contact-form .grid-cols-2 {

        grid-template-columns: 1fr;

    }



    .form-input {

        padding: 0.75rem;

        font-size: var(--text-sm);

    }

}



/* ============================================

   LEGAL PAGES (Privacy & Cookie Policy)

   ============================================ */

.legal-hero {

    padding-top: 8rem;

    padding-bottom: var(--spacing-2xl);

    background: linear-gradient(135deg, var(--color-bg-white) 0%, var(--color-bg-light) 100%);

    border-bottom: 1px solid var(--color-border);

}



[data-theme="dark"] .legal-hero {

    background: linear-gradient(135deg, var(--color-bg-card-dark) 0%, var(--color-bg-dark) 100%);

    border-bottom-color: var(--color-border-dark);

}



.legal-content {

    max-width: 860px;

    margin: 0 auto;

    padding: var(--spacing-2xl) 0;

}



.legal-content h1 {

    font-size: var(--text-4xl);

    margin-bottom: var(--spacing-sm);

}



.legal-content .subtitle {

    color: var(--color-text-muted);

    font-size: var(--text-lg);

    margin-bottom: var(--spacing-2xl);

}



.legal-section {

    background: var(--color-bg-white);

    border: 1px solid var(--color-border);

    border-radius: 1rem;

    padding: var(--spacing-xl);

    margin-bottom: var(--spacing-lg);

    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);

}



.legal-section:hover {

    border-color: rgba(216, 26, 35, 0.15);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

}



[data-theme="dark"] .legal-section {

    background: var(--color-bg-card-dark);

    border-color: var(--color-border-dark);

}



[data-theme="dark"] .legal-section:hover {

    border-color: rgba(216, 26, 35, 0.3);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

}



.legal-section h2 {

    font-size: var(--text-xl);

    margin-bottom: var(--spacing-md);

    color: var(--color-primary);

}



.legal-section h3 {

    font-size: var(--text-lg);

    margin-top: var(--spacing-md);

    margin-bottom: var(--spacing-sm);

}



.legal-section p,

.legal-section li {

    font-size: var(--text-base);

    line-height: 1.75;

    color: var(--color-text-muted);

}



.legal-section ul,

.legal-section ol {

    padding-left: var(--spacing-lg);

    margin: var(--spacing-sm) 0;

}



.legal-section li {

    margin-bottom: var(--spacing-xs);

}



.legal-section table {

    width: 100%;

    border-collapse: collapse;

    margin: var(--spacing-md) 0;

    font-size: var(--text-sm);

}



.legal-section th,

.legal-section td {

    padding: 0.75rem 1rem;

    border: 1px solid var(--color-border);

    text-align: left;

}



.legal-section th {

    background: var(--color-bg-soft);

    font-weight: 600;

    color: var(--color-text-main);

}



[data-theme="dark"] .legal-section th {

    background: rgba(255, 255, 255, 0.05);

}



[data-theme="dark"] .legal-section td {

    border-color: var(--color-border-dark);

}



.legal-section .info-card,

.legal-section .warning-card {

    border-radius: 0.75rem;

    padding: var(--spacing-md);

    margin: var(--spacing-md) 0;

}



.legal-section .info-card {

    background: rgba(59, 130, 246, 0.05);

    border-left: 4px solid #3b82f6;

}



.legal-section .warning-card {

    background: rgba(245, 158, 11, 0.05);

    border-left: 4px solid #f59e0b;

}



/* Legal page grid for rights/browser cards */

.legal-section .grid {

    display: grid;

    gap: var(--spacing-md);

}



.legal-section .grid.grid-cols-2 {

    grid-template-columns: repeat(2, 1fr);

}



@media (max-width: 768px) {

    .legal-content {

        padding: var(--spacing-xl) 0;

    }



    .legal-content h1 {

        font-size: var(--text-2xl);

    }



    .legal-section {

        padding: var(--spacing-md);

        border-radius: 0.75rem;

    }



    .legal-section .grid.grid-cols-2 {

        grid-template-columns: 1fr;

    }



    .legal-section table {

        display: block;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }

}



@media (max-width: 480px) {

    .legal-section {

        padding: var(--spacing-md) var(--spacing-sm);

    }



    .legal-section th,

    .legal-section td {

        padding: 0.5rem;

        font-size: var(--text-xs);

    }

}