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

:root { 
	--neon: #00f2ff;
	--bg-dark: #11151f;
	--bg-light: #1a1f2b;
	--accent-gaming: #ff0055;
}

body {
	background-color: var(--bg-dark);
	background-image: 
		radial-gradient(circle at 50% 50%, var(--bg-light) 0%, var(--bg-dark) 75%),
		linear-gradient(rgba(0, 242, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 242, 255, 0.02) 1px, transparent 1px);
	background-size: 100% 100%, 45px 45px, 45px 45px;
	color: var(--neon);
	font-family: 'JetBrains Mono', monospace;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	background-attachment: fixed; /*IMPORTANTE: Evita di ridisegnare lo sfondo durante lo scroll SE NON LO SI METTE SITO LENTO E LAG*/
}

.orbitron { font-family: 'Orbitron', sans-serif; }

.scanline {
	position: fixed;
	top: -10px; left: 0; width: 100%; height: 2px;
	background: var(--neon);
	box-shadow: 0 0 20px var(--neon), 0 0 40px var(--neon);
	z-index: 100;
	pointer-events: none;
	opacity: 0;
}

.hex-card {
	display: block;
	position: relative;
	clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0% 30%);
	background: rgba(15, 20, 29, 0.95);
	border: 1px solid rgba(0, 242, 255, 0.1);
	border-left: 3px solid var(--neon);
	transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

.hex-card:hover {
	background: rgba(255, 255, 255, 0.05);
	border-left: 6px solid var(--neon);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 242, 255, 0.2);
}

.tech-label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 500;
	color: #ffffff;
	transition: all 0.3s ease;
}

.card-desc {
	color: #a1a1aa;
	line-height: 1.6;
}

#page-loader {
	position: fixed; inset: 0; background: var(--bg-dark);
	z-index: 1000; display: none; flex-direction: column;
	align-items: center; justify-content: center;
}

.glitch-text { text-shadow: 2px 0 rgba(255,0,193,0.3), -2px 0 rgba(0,255,249,0.3); }

.footer-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	/* SFONDO: Quasi nero solido per garantire la leggibilità del testo bianco/ciano */
	background: rgba(5, 7, 10, 0.95); 
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 242, 255, 0.3); /* Bordo più visibile */
	border-radius: 4px;
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	white-space: nowrap;
	/* Ombra esterna per staccare il pulsante dal fondo pagina */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.footer-btn .tech-label {
	/* TESTO: Bianco puro e ombra nera per "bucare" lo schermo */
	color: #ffffff !important;
	font-weight: 700;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
	letter-spacing: 0.1em;
}

.footer-btn svg {
	/* ICONE: Ciano più luminoso */
	color: var(--neon) !important;
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
}

/* EFFETTO HOVER */
.footer-btn:hover {
	background: rgba(0, 242, 255, 0.2);
	border-color: var(--neon);
	box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
	transform: translateY(-2px);
}

.footer-btn:hover .tech-label {
	text-shadow: 0 0 8px rgba(0, 242, 255, 0.8);
}

.gaming-module {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 400px;
	height: 130px;
	padding: 25px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	border: 1px solid rgba(255, 0, 85, 0.3);
	border-radius: 8px;
	transition: all 0.4s ease;
	background-image: linear-gradient(to right, rgba(5, 7, 10, 0.95) 45%, rgba(5, 7, 10, 0.3)), 
					  url('media/pc-gaming.avif');
	background-size: cover;
	background-position: center;
	transform: translateY(-20px);
}

.gaming-module h2 { font-size: 22px !important; letter-spacing: 0.05em; margin-bottom: 4px; }
.gaming-module .tech-label { font-size: 12px !important; }
.gaming-module p { font-size: 14px !important; line-height: 1.4; }
.gaming-info { position: relative; z-index: 2; }

.copyright-main {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 60;
	pointer-events: auto;
	background: rgba(5, 7, 10, 0.85); 
	backdrop-filter: blur(12px); 
	/* Padding ridotto: 12px sopra/sotto, 20px destra/sinistra */
	padding: 12px 20px; 
	border-left: 3px solid var(--neon);
	border-radius: 0 12px 12px 0;
	max-width: 500px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 10px rgba(0, 242, 255, 0.1);
	/* Interlinea più compatta */
	line-height: 1.4; 
}

.gaming-wrapper-container {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 60;
}

.video-box iframe {
    width: 100%;
    height: 100%;
    opacity: 1 !important;
}
.video-box:has(iframe) .absolute.inset-0.bg-custom-dark\/30 {
    display: none !important;
}

.service-node {
    opacity: 0;
    transform: translateY(20px) translateZ(0); /* translateZ forza l'accelerazione hardware */
    will-change: transform, opacity; /* Avvisa il browser di prepararsi all'animazione */
}

.bg-copyright {
	background: rgba(13, 17, 23, 0.9) !important;
}

@media (max-width: 1700px) {
	body { height: auto; overflow: auto; }
	main { 
		min-height: auto !important; 
		padding-top: 40px !important; 
		padding-bottom: 40px !important; 
	}
	.ui-container { position: relative !important; height: auto !important; padding: 35px !important; }
	.gaming-wrapper-container {
        /* Usiamo absolute per posizionarlo rispetto al primo genitore con position:relative */
        position: absolute !important; 
        
        /* Coordinate per il rettangolo rosso in alto a destra */
        top: 40px !important; 
        right: 20px !important;
        
        /* Reset dei parametri che lo disturbano */
        margin: 0 !important;
        width: auto !important;
        display: block !important;
        z-index: 60 !important;
        transform: none !important;
    }

    .gaming-module {
        /* Dimensioni fisse per stare nell'angolo senza coprire il logo */
        width: 320px !important;
        height: 110px !important;
        padding: 15px !important;
        margin: 0 !important;
        background-position: right center !important;
    }

    .gaming-module h2 {
        font-size: 18px !important; /* Titolo più piccolo su mobile */
        line-height: 1.2 !important;
    }

    .gaming-module p {
        font-size: 13px !important; /* Testo descrizione più piccolo */
        margin-top: 8px !important;
    }
	.copyright-main {
		position: relative !important; /* Diventa un elemento normale del flusso */
		bottom: auto !important;
		left: auto !important;
		margin: 40px auto;        /* 'auto' sui lati lo centra orizzontalmente */
		width: 90%;               /* Non occupa tutto il bordo, lasciando spazio ai lati */
		max-width: 500px;
		text-align: center;       /* Centra il testo all'interno del box */
		border-radius: 12px;      /* Arrotondamento completo su tutti i lati per mobile */
		border-left: none;        /* Opzionale: toglie il bordo solo a sinistra per simmetria */
		border-bottom: 3px solid var(--neon); /* Aggiunge il bordo sotto come accento */
	}
	.buttons-wrapper {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important; /* Permette ai pulsanti di andare a capo */
        justify-content: center !important; 
        gap: 10px !important; /* Spazio tra i pulsanti */
        margin: 20px auto !important;
        padding: 15px !important;
        width: 95% !important;
        background: rgba(5, 7, 10, 0.9) !important;
        border-top: 3px solid var(--neon) !important;
        border-radius: 12px !important;
    }
	.footer-btn {
        /* Di base occupano quasi metà riga (meno il gap) */
        flex: 1 1 calc(50% - 10px) !important; 
        min-width: 120px !important;
        justify-content: center !important;
        padding: 10px 5px !important;
        font-size: 11px !important;
    }
	.footer-btn:nth-last-child(1),
    .footer-btn:nth-last-child(2) {
        flex: 1 1 100% !important;
    }
	/* Rimuoviamo il padding extra dal div interno se presente */
	.buttons-wrapper-inner {
		justify-content: center !important;
		width: 100%;
	}
}
@media (max-width: 1400px) {
	.video-box iframe {
		width: 100%;
		height: 700px;
	}
}
@media (max-width: 800px) {
	.gaming-wrapper-container {
        /* Diventa parte del flusso normale della pagina */
        position: relative !important;
        top: auto !important;
        right: auto !important;
        
        /* Occupa tutta la larghezza */
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        
        /* Aggiunge un po' di spazio sopra e sotto per non appiccicarsi agli altri elementi */
        padding: 20px 10px !important; 
        margin: 0 !important;
    }

    .gaming-module {
        /* Il modulo si espande per riempire il container */
        width: 100% !important;
        max-width: 600px; /* Impedisce che diventi troppo enorme su tablet */
        height: auto !important;
        min-height: 100px !important;
        
        /* Reset dei margini e trasformazioni */
        margin: 0 !important;
        transform: none !important;
        
        /* Adatta il background per i display piccoli */
        background-position: center right !important;
    }

    /* Rimpiccioliamo leggermente i testi per schermi piccoli */
    .gaming-module h2 {
        font-size: 16px !important;
    }
    
    .gaming-module p {
        font-size: 12px !important;
    }
	.video-box iframe {
		width: 100%;
		height: 400px;
	}
}