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

   RESET & CSS VARIABLES

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

*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --blue: #2563eb;

    --blue-dark: #1d4ed8;

    --blue-light: #3b82f6;

    --blue-bright: #60a5fa;

    --cyan: #06b6d4;

    --cyan-light: #22d3ee;

    --purple: #8b5cf6;

    --purple-light: #a78bfa;

    --emerald: #10b981;



    --text-primary: #f0f4ff;

    --text-secondary: #8baabb;

    --text-muted: #4a6277;



    --bg-base: #020c1b;

    --bg-dark: #050f20;

    --bg-medium: #081525;

    --bg-card: #0c1a2e;

    --bg-card-hover: #102038;

    --bg-glass: rgba(8, 21, 37, 0.75);



    --border: rgba(20, 42, 68, 0.9);

    --border-medium: rgba(37, 73, 110, 0.7);

    --border-bright: rgba(96, 165, 250, 0.45);



    --grad-primary: linear-gradient(135deg, #2563eb, #06b6d4);

    --grad-accent: linear-gradient(135deg, #8b5cf6, #2563eb);

    --grad-text: linear-gradient(135deg, #60a5fa 0%, #06b6d4 50%, #a78bfa 100%);

    --grad-card-border: linear-gradient(135deg, rgba(96,165,250,0.5), rgba(6,182,212,0.3), rgba(139,92,246,0.4));

    --grad-hero-bg: radial-gradient(ellipse 110% 90% at 10% 25%, rgba(37,99,235,0.2) 0%, transparent 55%),

                    radial-gradient(ellipse 80% 70% at 90% 10%, rgba(139,92,246,0.13) 0%, transparent 55%),

                    radial-gradient(ellipse 80% 80% at 55% 95%, rgba(6,182,212,0.1) 0%, transparent 55%);



    --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);

    --shadow-md: 0 8px 32px rgba(0,0,0,0.5);

    --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);

    --shadow-blue: 0 0 30px rgba(37,99,235,0.35), 0 0 70px rgba(37,99,235,0.1);

    --shadow-cyan: 0 0 30px rgba(6,182,212,0.3);

    --shadow-card: 0 20px 50px rgba(0,0,0,0.45), 0 0 30px rgba(37,99,235,0.1);



    --t-fast: 0.15s ease;

    --t-base: 0.3s ease;

    --t-smooth: 0.4s cubic-bezier(0.4,0,0.2,1);

    --t-bounce: 0.5s cubic-bezier(0.34,1.56,0.64,1);

    --t-slow: 0.6s ease;



    --r-sm: 8px;

    --r-md: 12px;

    --r-lg: 16px;

    --r-xl: 24px;

    --r-full: 9999px;

}



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

   BASE

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

html {

    scroll-behavior: smooth;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    color: var(--text-primary);

    background: var(--bg-base);

    line-height: 1.65;

    overflow-x: hidden;

    min-height: 100vh;

}



a { text-decoration: none; color: inherit; }

img { max-width: 100%; height: auto; }



/* Custom scrollbar */

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

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

::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }

::-webkit-scrollbar-thumb:hover { background: var(--blue-light); }



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

   UTILITIES

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

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 24px;

}



.gradient-text {

    background: var(--grad-text);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    display: inline-block;

}



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

   SCROLL PROGRESS BAR

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

.scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    height: 2px;

    width: 0%;

    background: var(--grad-primary);

    z-index: 9999;

    box-shadow: 0 0 10px rgba(6,182,212,0.7);

    transition: width 0.1s linear;

}



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

   NAVBAR

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

.navbar {

    position: fixed;

    top: 0;

    width: 100%;

    background: rgba(2, 12, 27, 0.8);

    backdrop-filter: blur(24px);

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

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

    z-index: 1000;

    transition: background var(--t-base), box-shadow var(--t-base), border-color var(--t-base);

}



.navbar.scrolled {

    background: rgba(2, 12, 27, 0.96);

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

    box-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 0 80px rgba(37,99,235,0.05);

}



.navbar .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 1rem;

    padding-bottom: 1rem;

}



.nav-brand .logo {

    height: 50px;

    width: auto;

    max-width: 200px;

    object-fit: contain;

    display: block;

    transition: filter var(--t-base), transform var(--t-base);

}



.nav-brand .logo:hover {

    filter: brightness(1.15) drop-shadow(0 0 10px rgba(37,99,235,0.6));

    transform: scale(1.03);

}



.nav-brand a {

    display: flex;

    align-items: center;

}



.nav-menu {

    display: flex;

    list-style: none;

    gap: 0.25rem;

    align-items: center;

}



.nav-link {

    color: var(--text-secondary);

    font-weight: 500;

    font-size: 0.9375rem;

    padding: 0.5rem 0.875rem;

    border-radius: var(--r-sm);

    transition: all var(--t-base);

    position: relative;

    letter-spacing: 0.01em;

}



.nav-link:hover {

    color: var(--text-primary);

    background: rgba(37,99,235,0.1);

}



.nav-link.active {

    color: var(--blue-bright);

    background: rgba(37,99,235,0.12);

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 2px;

    background: var(--grad-primary);

    border-radius: 1px;

    transition: width var(--t-base);

}



.nav-link:hover::after,

.nav-link.active::after {

    width: calc(100% - 1.75rem);

}



.hamburger {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 5px;

    padding: 6px;

    background: none;

    border: none;

}



.hamburger span {

    width: 24px;

    height: 2px;

    background: var(--text-secondary);

    border-radius: 1px;

    transition: all 0.3s ease;

    display: block;

}



.hamburger.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

    background: var(--blue-bright);

}

.hamburger.active span:nth-child(2) {

    opacity: 0;

    transform: scaleX(0);

}

.hamburger.active span:nth-child(3) {

    transform: rotate(-45deg) translate(5px, -5px);

    background: var(--blue-bright);

}



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

   HERO SECTION

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

.hero {

    margin-top: 72px;

    padding: 100px 0 120px;

    position: relative;

    overflow: hidden;

    background: var(--bg-base);

}



/* Hero solo testo (es. Chi Siamo, Contatti): area ampia per aurora + particelle */

.hero:not(:has(.hero-image)) {

    min-height: min(560px, 70vh);

    display: flex;

    align-items: center;

}



.hero:not(:has(.hero-image)) .container {

    width: 100%;

}



/* Aurora glow */

.hero::before {

    content: '';

    position: absolute;

    inset: 0;

    background: var(--grad-hero-bg);

    animation: aurora-drift 12s ease-in-out infinite alternate;

    pointer-events: none;

    z-index: 0;

}



/* Grid pattern */

.hero::after {

    content: '';

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),

        linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);

    background-size: 60px 60px;

    pointer-events: none;

    z-index: 0;

    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 75%);

    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 75%);

}



@keyframes aurora-drift {

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

    25%  { transform: scale(1.06) translate(12px, -15px); opacity: 0.85; }

    50%  { transform: scale(0.97) translate(-8px,  18px); opacity: 0.9; }

    75%  { transform: scale(1.04) translate(15px,  8px);  opacity: 0.8; }

    100% { transform: scale(1.02) translate(-5px, -10px); opacity: 1; }

}



/* Canvas particles */

.hero-canvas {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 1;

}



.hero .container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



/* Badge */

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(37,99,235,0.1);

    border: 1px solid rgba(37,99,235,0.35);

    border-radius: var(--r-full);

    padding: 6px 18px;

    margin-bottom: 1.5rem;

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--blue-bright);

    letter-spacing: 0.07em;

    text-transform: uppercase;

}



.badge-dot {

    width: 6px;

    height: 6px;

    background: var(--cyan);

    border-radius: 50%;

    animation: pulse-dot 2s ease-in-out infinite;

    flex-shrink: 0;

    box-shadow: 0 0 8px var(--cyan);

}



@keyframes pulse-dot {

    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px var(--cyan); }

    50%       { transform: scale(1.6); opacity: 0.6; box-shadow: 0 0 16px var(--cyan); }

}



.hero-title {

    font-size: 3.5rem;

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -0.03em;

    margin-bottom: 1.5rem;

    color: var(--text-primary);

}



.hero-subtitle {

    font-size: 1.15rem;

    color: var(--text-secondary);

    line-height: 1.75;

    margin-bottom: 2.5rem;

    font-weight: 400;

    max-width: 520px;

}



.hero-buttons {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    margin-bottom: 3rem;

}



/* Stats row */

.hero-stats {

    display: flex;

    align-items: center;

    gap: 2.5rem;

    padding-top: 2rem;

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

}



.stat-item {

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.stat-number-wrap {

    display: flex;

    align-items: baseline;

    gap: 1px;

}



.stat-number {

    font-size: 1.875rem;

    font-weight: 700;

    background: var(--grad-primary);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1;

}



.stat-plus {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--cyan);

}



.stat-label {

    font-size: 0.8rem;

    color: var(--text-muted);

    font-weight: 500;

    letter-spacing: 0.02em;

}



.stat-divider {

    width: 1px;

    height: 40px;

    background: linear-gradient(to bottom, transparent, var(--border-medium), transparent);

    flex-shrink: 0;

}



/* Hero image / cards */

.hero-image {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 400px;

    gap: 1.25rem;

}



.hero-cards {

    display: grid;

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

    gap: 1.25rem;

    height: auto;

    max-width: 480px;

    width: 100%;

}



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

   FLOATING CARDS (hero)

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

.floating-card {

    background: var(--bg-glass);

    backdrop-filter: blur(20px);

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

    padding: 2rem 1.5rem;

    border-radius: var(--r-lg);

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

    text-decoration: none;

    color: var(--text-primary);

    text-align: center;

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

    position: relative;

    overflow: hidden;

}



.floating-card::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(6,182,212,0.05));

    opacity: 0;

    transition: opacity var(--t-base);

    border-radius: var(--r-lg);

}



.floating-card:hover {

    transform: translateY(-8px) scale(1.03);

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

    border-color: rgba(37,99,235,0.5);

}



.floating-card:hover::before { opacity: 1; }



.floating-card span {

    font-size: 2.25rem;

    display: block;

    margin-bottom: 0.75rem;

    line-height: 1;

    filter: drop-shadow(0 0 10px rgba(37,99,235,0.5));

    transition: filter var(--t-base), transform var(--t-base);

}



.floating-card:hover span {

    filter: drop-shadow(0 0 16px rgba(6,182,212,0.7));

    transform: scale(1.1);

}



.floating-card p {

    font-weight: 600;

    font-size: 0.9375rem;

    color: var(--text-secondary);

    margin: 0;

    transition: color var(--t-base);

}



.floating-card:hover p { color: var(--text-primary); }



/* Float animation */

.hero-cards .floating-card:nth-child(1) { animation: card-float 7s ease-in-out infinite; }

.hero-cards .floating-card:nth-child(2) { animation: card-float 7s ease-in-out infinite 1.75s; }

.hero-cards .floating-card:nth-child(3) { animation: card-float 7s ease-in-out infinite 3.5s; }

.hero-cards .floating-card:nth-child(4) { animation: card-float 7s ease-in-out infinite 5.25s; }



/* Una sola card nel hero (pagine servizio): stesso movimento della home */

.hero-image:not(.hero-cards) .floating-card {

    animation: card-float 7s ease-in-out infinite;

}



@keyframes card-float {

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

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

}



.floating-card:hover { animation-play-state: paused; }



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

   BUTTONS

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

.btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 32px;

    border-radius: var(--r-md);

    font-weight: 600;

    font-size: 0.9375rem;

    letter-spacing: 0.01em;

    text-decoration: none;

    border: none;

    cursor: pointer;

    transition: all var(--t-smooth);

    position: relative;

    overflow: hidden;

    white-space: nowrap;

}



.btn::after {

    content: '';

    position: absolute;

    inset: 0;

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

    transition: background var(--t-fast);

}

.btn:hover::after { background: rgba(255,255,255,0.06); }



.btn-primary {

    background: linear-gradient(135deg, var(--blue), var(--cyan));

    color: white;

    box-shadow: 0 4px 20px rgba(37,99,235,0.45);

}



.btn-primary:hover {

    transform: translateY(-2px) scale(1.02);

    box-shadow: 0 8px 35px rgba(37,99,235,0.55), 0 0 0 1px rgba(6,182,212,0.3);

}



.btn-primary:active { transform: translateY(0) scale(1); }



.btn-secondary {

    background: transparent;

    color: var(--text-primary);

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

}



.btn-secondary:hover {

    background: rgba(37,99,235,0.1);

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

    color: var(--blue-bright);

    transform: translateY(-2px);

}



.btn-icon {

    width: 16px;

    height: 16px;

    transition: transform var(--t-base);

    flex-shrink: 0;

}

.btn:hover .btn-icon { transform: translateX(3px); }



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

   SECTION TITLES

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

.section-label {

    display: block;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--cyan);

    text-align: center;

    margin-bottom: 0.75rem;

}



.section-title {

    font-size: 2.5rem;

    font-weight: 700;

    text-align: center;

    margin-bottom: 1rem;

    letter-spacing: -0.025em;

    line-height: 1.2;

    color: var(--text-primary);

}



.section-subtitle {

    text-align: center;

    color: var(--text-secondary);

    font-size: 1.1rem;

    margin-bottom: 3.5rem;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.75;

}



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

   SERVIZI SECTION

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

.servizi {

    padding: 100px 0;

    background: var(--bg-dark);

    position: relative;

    overflow: hidden;

}



.servizi::before {

    content: '';

    position: absolute;

    inset: 0;

    background-image: radial-gradient(rgba(37,99,235,0.09) 1px, transparent 1px);

    background-size: 32px 32px;

    pointer-events: none;

    opacity: 0.6;

}



.servizi .container { position: relative; z-index: 1; }



.servizi-grid {

    display: grid;

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

    gap: 1.5rem;

}



.servizi-grid-home {

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

    gap: 1.5rem;

}



/* Servizio Card */

.servizio-card {

    background: var(--bg-card);

    padding: 2.25rem 2rem;

    border-radius: var(--r-lg);

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

    transition: all var(--t-smooth);

    position: relative;

    overflow: hidden;

}



/* Top glow line */

.servizio-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 2px;

    background: var(--grad-primary);

    opacity: 0;

    transition: opacity var(--t-base);

    border-radius: var(--r-lg) var(--r-lg) 0 0;

}



/* Corner ambient glow */

.servizio-card::after {

    content: '';

    position: absolute;

    top: -80px;

    right: -80px;

    width: 200px;

    height: 200px;

    background: radial-gradient(circle, rgba(37,99,235,0.09) 0%, transparent 70%);

    opacity: 0;

    transform: scale(0.5);

    transition: opacity var(--t-slow), transform var(--t-slow);

}



.servizio-card:hover {

    border-color: rgba(37,99,235,0.4);

    transform: translateY(-5px);

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

}



.servizio-card:hover::before { opacity: 1; }

.servizio-card:hover::after  { opacity: 1; transform: scale(1); }



/* Icon */

.servizio-icon {

    font-size: 2.25rem;

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(6,182,212,0.1));

    border-radius: var(--r-md);

    margin-bottom: 1.5rem;

    border: 1px solid rgba(37,99,235,0.25);

    transition: all var(--t-base);

    position: relative;

    z-index: 1;

}



.servizio-card:hover .servizio-icon {

    background: linear-gradient(135deg, rgba(37,99,235,0.28), rgba(6,182,212,0.2));

    border-color: rgba(37,99,235,0.5);

    box-shadow: 0 0 24px rgba(37,99,235,0.25);

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

}



.servizio-card h3 {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 0.875rem;

    letter-spacing: -0.01em;

    position: relative;

    z-index: 1;

}



.servizio-card p {

    color: var(--text-secondary);

    margin-bottom: 1.5rem;

    line-height: 1.75;

    font-size: 0.9375rem;

    position: relative;

    z-index: 1;

}



.servizio-features {

    list-style: none;

    margin-bottom: 1.5rem;

    position: relative;

    z-index: 1;

}



.servizio-features li {

    padding: 0.35rem 0;

    color: var(--text-secondary);

    font-size: 0.9rem;

}



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

   CTA HOME

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

.cta-home {

    padding: 100px 0;

    background: var(--bg-base);

    position: relative;

    overflow: hidden;

}



.cta-home::before {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(37,99,235,0.12) 0%, transparent 65%);

    pointer-events: none;

}



.cta-home::after {

    content: '';

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),

        linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px);

    background-size: 50px 50px;

    pointer-events: none;

    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent 75%);

    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent 75%);

}



.cta-home-inner {

    text-align: center;

    max-width: 600px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

}



.cta-home-text {

    color: var(--text-secondary);

    font-size: 1.125rem;

    margin-bottom: 2.25rem;

    line-height: 1.75;

}



.btn-cta {

    padding: 16px 48px;

    font-size: 1rem;

}



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

   CHI SONO / CHI SIAMO

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

.chi-sono {

    padding: 100px 0;

    background: var(--bg-dark);

    position: relative;

}



.chi-sono-content {

    max-width: 800px;

    margin: 0 auto;

    background: var(--bg-card);

    padding: 2.75rem 3rem;

    border-radius: var(--r-xl);

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

    position: relative;

    overflow: hidden;

}



.chi-sono-content::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 2px;

    background: var(--grad-primary);

    border-radius: var(--r-xl) var(--r-xl) 0 0;

}



.chi-sono-content::after {

    content: '';

    position: absolute;

    bottom: -60px;

    right: -60px;

    width: 200px;

    height: 200px;

    background: radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 70%);

    pointer-events: none;

}



.chi-sono-text p {

    color: var(--text-secondary);

    margin-bottom: 1.25rem;

    font-size: 1.0625rem;

    line-height: 1.8;

}



.chi-sono-text p strong {

    color: var(--text-primary);

    font-weight: 600;

}



/* Skills */

.skills {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    margin-top: 2rem;

}



.skill-tag {

    background: rgba(37,99,235,0.09);

    padding: 0.5rem 1.25rem;

    border-radius: var(--r-full);

    font-weight: 500;

    color: var(--blue-bright);

    border: 1px solid rgba(37,99,235,0.22);

    font-size: 0.875rem;

    transition: all var(--t-base);

    cursor: default;

}



.skill-tag:hover {

    background: rgba(37,99,235,0.18);

    border-color: rgba(37,99,235,0.45);

    transform: translateY(-2px);

    box-shadow: 0 4px 14px rgba(37,99,235,0.2);

}



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

   BRANDS SECTION

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

.brands {

    padding: 80px 0;

    background: var(--bg-base);

    position: relative;

}



.brands .container { position: relative; z-index: 1; }



.brands-grid {

    display: grid;

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

    gap: 1.25rem;

    margin-top: 3rem;

    justify-items: center;

    align-items: center;

}



.brand-item {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.5rem 1rem;

    background: var(--bg-card);

    border-radius: var(--r-md);

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

    transition: all var(--t-smooth);

    cursor: pointer;

    min-height: 90px;

    width: 100%;

}



.brand-item:hover {

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

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(37,99,235,0.12);

}



.brand-logo {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.brand-logo svg {

    max-width: 140px;

    max-height: 50px;

    opacity: 0.55;

    transition: opacity var(--t-base), filter var(--t-base);

    filter: brightness(1.3);

}



.brand-item:hover .brand-logo svg {

    opacity: 0.9;

    filter: brightness(1.6) drop-shadow(0 0 6px rgba(37,99,235,0.4));

}



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

   CONTATTI

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

.contatti {

    padding: 100px 0;

    background: var(--bg-dark);

    position: relative;

}



.contatti .container { position: relative; z-index: 1; }



.contact-info {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: stretch;

    gap: 1.5rem;

    margin-top: 4rem;

    flex-wrap: wrap;

}



.info-card {

    background: var(--bg-card);

    padding: 2rem 1.75rem;

    border-radius: var(--r-lg);

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

    text-align: center;

    transition: all var(--t-smooth);

    width: 220px;

    position: relative;

    overflow: hidden;

}



.info-card::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 2px;

    background: var(--grad-primary);

    opacity: 0;

    transition: opacity var(--t-base);

}



.info-card:hover {

    border-color: rgba(37,99,235,0.4);

    transform: translateY(-5px);

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

}



.info-card:hover::before { opacity: 1; }



.info-icon {

    font-size: 2.25rem;

    margin-bottom: 1rem;

    display: block;

    filter: drop-shadow(0 0 10px rgba(37,99,235,0.4));

    transition: filter var(--t-base), transform var(--t-base);

}



.info-card:hover .info-icon {

    filter: drop-shadow(0 0 16px rgba(6,182,212,0.6));

    transform: scale(1.1);

}



.info-card h3 {

    font-size: 1.125rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 0.75rem;

}



.info-card p {

    color: var(--text-secondary);

    font-size: 0.9375rem;

    line-height: 1.6;

    margin: 0;

}



.info-card a {

    color: var(--blue-bright);

    font-weight: 500;

    transition: color var(--t-base);

}



.info-card a:hover { color: var(--cyan-light); }



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

   FOOTER

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

.footer {

    background: var(--bg-base);

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

    padding: 3.5rem 0 2rem;

}



.footer-inner {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 3rem;

    margin-bottom: 3rem;

    padding-bottom: 3rem;

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

}



.footer-brand .footer-logo {

    height: 44px;

    width: auto;

    display: block;

    margin-bottom: 1.25rem;

    filter: brightness(0.9);

    transition: filter var(--t-base);

}



.footer-brand .footer-logo:hover {

    filter: brightness(1.1) drop-shadow(0 0 8px rgba(37,99,235,0.4));

}



.footer-brand p {

    color: var(--text-muted);

    font-size: 0.9rem;

    line-height: 1.7;

    max-width: 250px;

}



.footer-col h4 {

    color: var(--text-primary);

    font-weight: 600;

    font-size: 0.8125rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    margin-bottom: 1.25rem;

}



.footer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

}



.footer-links a {

    color: var(--text-muted);

    font-size: 0.9rem;

    transition: color var(--t-base), padding-left var(--t-base);

    display: flex;

    align-items: center;

    gap: 6px;

}



.footer-links a:hover {

    color: var(--blue-bright);

    padding-left: 6px;

}



.footer-contact-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-size: 0.9rem;

    margin-bottom: 0.7rem;

}



.footer-contact-item a {

    color: var(--text-muted);

    transition: color var(--t-base);

}



.footer-contact-item a:hover { color: var(--blue-bright); }



.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

}



.footer-bottom p {

    color: var(--text-muted);

    font-size: 0.875rem;

}



.footer-bottom a {

    color: var(--blue-bright);

    transition: color var(--t-base);

}



.footer-bottom a:hover { color: var(--cyan-light); }



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

   FORM STYLES (compatibility)

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

.form-group { margin-bottom: 1.5rem; }



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 500;

    color: var(--text-secondary);

    font-size: 0.9375rem;

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 14px 18px;

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

    border-radius: var(--r-md);

    font-family: 'Inter', sans-serif;

    font-size: 1rem;

    transition: all var(--t-base);

    background: var(--bg-card);

    color: var(--text-primary);

}



.form-group input::placeholder,

.form-group textarea::placeholder { color: var(--text-muted); }



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: var(--blue);

    box-shadow: 0 0 0 3px rgba(37,99,235,0.2);

    background: var(--bg-card-hover);

    outline: none;

}



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

   SCROLL REVEAL ANIMATION

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

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);

}



.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}



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

    .reveal {

        opacity: 1;

        transform: none;

        transition: none;

    }

}



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

   RESPONSIVE — Tablet

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

@media (max-width: 1024px) {

    .hero .container { gap: 3rem; }

    .hero-title { font-size: 3rem; }

    .section-title { font-size: 2.25rem; }



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

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



    .footer-inner {

        grid-template-columns: 1fr 1fr;

        gap: 2.5rem;

    }

}



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

   RESPONSIVE — Mobile

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

@media (max-width: 768px) {

    .container { padding: 0 16px; }



    .hamburger { display: flex; }



    .nav-menu {

        position: fixed;

        top: 70px;

        left: -100%;

        width: 100%;

        flex-direction: column;

        background: rgba(2,12,27,0.97);

        backdrop-filter: blur(24px);

        padding: 2rem 1.5rem;

        gap: 0.5rem;

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

        transition: left 0.3s ease;

        z-index: 999;

        box-shadow: 0 30px 60px rgba(0,0,0,0.6);

    }



    .nav-menu.active { left: 0; }



    .nav-link {

        padding: 0.875rem 1rem;

        font-size: 1rem;

        display: block;

    }



    .hero { margin-top: 70px; padding: 60px 0 80px; }



    .hero:not(:has(.hero-image)) {

        min-height: min(400px, 62vh);

    }



    .hero .container {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 2.5rem;

    }



    .hero-badge     { margin-left: auto; margin-right: auto; }

    .hero-title     { font-size: 2.5rem; }

    .hero-subtitle  { max-width: 100%; margin-left: auto; margin-right: auto; }

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

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

    .hero-cards     { max-width: 100%; }



    .servizi-grid-home  { grid-template-columns: 1fr; }

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



    .section-title      { font-size: 2rem; }



    .contact-info       { flex-direction: column; align-items: center; }

    .info-card          { width: 100%; max-width: 320px; }



    .chi-sono-content   { padding: 2rem 1.5rem; }



    .footer-inner {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .footer-brand p { max-width: 100%; }



    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }



    .btn {

        width: 100%;

        justify-content: center;

    }

}



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

   RESPONSIVE — Small mobile

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

@media (max-width: 480px) {

    .hero-title     { font-size: 2rem; }

    .section-title  { font-size: 1.75rem; }



    .hero-stats { flex-wrap: wrap; justify-content: center; gap: 1.5rem; }

    .stat-divider { display: none; }



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



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



    .chi-sono-content { padding: 1.75rem 1.25rem; }

}



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

   TOUCH / REDUCED MOTION

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

@media (hover: none) and (pointer: coarse) {

    .btn:active           { transform: scale(0.97); }

    .servizio-card:active { transform: translateY(-2px); }

    * { -webkit-tap-highlight-color: rgba(37,99,235,0.1); }

}



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

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



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

   CONTATORE VISITE (solo home)

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

.visit-counter {

    position: fixed;

    z-index: 50;

    bottom: max(14px, env(safe-area-inset-bottom, 0px));

    right: max(14px, env(safe-area-inset-right, 0px));

    font-size: 0.6875rem;

    font-weight: 500;

    letter-spacing: 0.04em;

    color: var(--text-muted);

    opacity: 0.28;

    user-select: none;

    transition: opacity 0.35s ease;

}



.visit-counter-inner {

    display: inline-flex;

    align-items: baseline;

    gap: 0.35em;

    padding: 4px 8px;

    border-radius: var(--r-sm);

    background: rgba(2, 12, 27, 0.45);

    border: 1px solid rgba(37, 73, 110, 0.25);

}



.visit-counter-label {

    text-transform: lowercase;

    font-variant: small-caps;

    letter-spacing: 0.12em;

}



.visit-counter-value {

    font-variant-numeric: tabular-nums;

    color: var(--text-secondary);

}



.visit-counter[data-local="true"] {

    opacity: 0.22;

}



@media (hover: hover) and (pointer: fine) {

    .visit-counter:hover {

        opacity: 0.55;

    }

}