/* FXG HUB STATION — style.css
   Font: Inter | Architettura: Tiles stile investinmusk.com
   Palette: Blu Navy Istituzionale + Oro */

/* +--------------------------------------------------+
   | [F6] - Reset & Variabili CSS                     |
   | Box model, variabili globali, html/body base.    |
   | Dipende da: nessuno                              |
   | Status: STABLE | Last modified: 2026-07-15       |
   +--------------------------------------------------+ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:       #1a2744;
    --gold:     #c9a84c;
    --white:    #ffffff;
    --white70:  rgba(255,255,255,0.70);
    --ov1: #1a3a52; --ov2: #2c3e6b; --ov3: #1e3d5c;
    --ov4: #243352; --ov5: #1a2e4a; --ov6: #1f3558;
    --font: 'Inter', Helvetica, sans-serif;
    --mono: 'Space Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--white);
    font-weight: 300;
    line-height: 1.6;
}

p { text-align: justify; }

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

a { color: var(--gold); text-decoration: none; }
a:hover { color: #e8c96a; }

/* +--------------------------------------------------+
   | [F7] - CSS Header / Navigazione                  |
   | Fixed top, logo-img, nav-main, hamburger,        |
   | nav-mobile drawer. Trasparente → opaco scroll.   |
   | Dipende da: F6                                   |
   | Status: WIP | Last modified: 2026-07-16          |
   +--------------------------------------------------+ */
#header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4em 2.5em;
    background: transparent;
    transition: background 0.3s;
}
#header.scrolled {
    background: rgba(26,39,68,0.96);
    backdrop-filter: blur(8px);
}
/* Logo immagine */
.logo-link { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 2.4em; width: auto; display: block; }

/* Nav principale desktop */
.nav-main { display: flex; align-items: center; gap: 2em; }
.nav-link {
    font-size: 0.78em;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white70);
    transition: color 0.2s;
}
.nav-link:hover { color: var(--white); }
.nav-cta {
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg);
    background: #e07b2a;
    padding: 0.5em 1.2em;
    border-radius: 2px;
    transition: background 0.2s;
}
.nav-cta:hover { background: #f08c3a; color: var(--bg); }

/* Hamburger mobile */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.3s; }

/* Menu mobile */
.nav-mobile {
    display: none;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    background: rgba(26,39,68,0.98);
    z-index: 99;
    padding: 5em 2em 2em;
    transform: translateY(-100%);
    transition: transform 0.3s;
}
.nav-mobile.open { transform: translateY(0); display: flex; }
.nav-mobile .nav-link, .nav-mobile .nav-cta {
    font-size: 1em;
    padding: 1em 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--white);
    background: none;
}
.nav-mobile .nav-cta { color: #e07b2a; }

/* Vecchio stile nav (mantenuto per compatibilità) */
#header nav { display: flex; gap: 1.5em; }
#header nav a {
    font-size: 0.75em;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--white70);
}
#header nav a:hover { color: var(--white); }

/* +--------------------------------------------------+
   | [F8] - Hero / Banner                             |
   | Full-screen con foto Giorgio come sfondo.        |
   | Overlay gradiente + contenuto centrato a sx.     |
   | Dipende da: F6                                   |
   | Status: STABLE | Last modified: 2026-07-15       |
   +--------------------------------------------------+ */
#banner {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 10em 4em 4em;
    background-image: url('../images/giorgio-hero-integrated.webp');
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    margin-top: 2.5em;
}
.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26,39,68,0.55) 0%,
        rgba(26,39,68,0.35) 40%,
        rgba(26,39,68,0.80) 100%
    );
    z-index: 1;
}
.banner-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
}
.banner-content h1 {
    font-size: clamp(2.4em, 5.5vw, 4.8em);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
}
.banner-line {
    width: 100%;
    max-width: 560px;
    height: 2px;
    background: var(--white);
    margin: 0.8em 0 1.4em;
}
.banner-content p {
    font-size: 0.82em;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--white70);
    line-height: 1.8;
}
.btn-cta {
    display: inline-block;
    margin-top: 1.8em;
    padding: 0.85em 2em;
    border: 2px solid var(--white);
    color: var(--white);
    font-size: 0.78em;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
}
.btn-cta:hover { background: var(--white); color: var(--bg); }

/* +--------------------------------------------------+
   | [F8a] - NSPE™ Block in Hero                      |
   | Blocco NSPE sotto il claim principale.           |
   | Dipende da: F8                                   |
   | Status: STABLE | Last modified: 2026-07-15       |
   +--------------------------------------------------+ */
.nspe-block {
    margin-top: 2.2em;
    padding-top: 1.8em;
    border-top: 1px solid rgba(255,255,255,0.15);
    max-width: 560px;
}
.nspe-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5em;
}
.nspe-title {
    font-size: 0.82em;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--white);
    margin-bottom: 0.4em;
}
.nspe-tagline {
    font-size: 0.75em;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.55);
    font-style: italic;
    line-height: 1.6;
}

/* +--------------------------------------------------+
   | [F9] - Tiles Grid                                |
   | Griglia flex con larghezze alternate 40/60%.     |
   | Meccanismo hover identico a investinmusk.com.    |
   | Dipende da: F6                                   |
   | Status: STABLE | Last modified: 2026-07-15       |
   +--------------------------------------------------+ */
.tiles {
    display: flex;
    flex-wrap: wrap;
}

.tiles article {
    position: relative;
    width: 40%;
    height: 50vh;
    min-height: 28em;
    max-height: 44em;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 3em 3em 2.5em;
    background-size: cover;
    background-position: center top;
}

/* Larghezze alternate 40/60 come investinmusk.com */
.tiles article:nth-child(4n-1),
.tiles article:nth-child(4n-2) { width: 60%; }

/* Overlay colorato — copre la foto a riposo (opacity 0.85) */
.tile-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.85;
    transition: opacity 0.5s ease;
    z-index: 2;
}

/* Velatura scura fissa sotto l'overlay per leggibilità testo */
.tiles article::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26,39,68,0.25);
    z-index: 1;
}

/* Colori overlay per tessera */
.tiles article:nth-child(6n+1) .tile-overlay { background: var(--ov1); }
.tiles article:nth-child(6n+2) .tile-overlay { background: var(--ov2); }
.tiles article:nth-child(6n+3) .tile-overlay { background: var(--ov3); }
.tiles article:nth-child(6n+4) .tile-overlay { background: var(--ov4); }
.tiles article:nth-child(6n+5) .tile-overlay { background: var(--ov5); }
.tiles article:nth-child(6n+0) .tile-overlay { background: var(--ov6); }

/* HOVER desktop: overlay scompare → foto si accende */
.tiles article:not(.tile-soon):hover .tile-overlay { opacity: 0; }
.tiles article:not(.tile-soon) { cursor: pointer; }

/* TILE-ACTIVE: stato acceso al primo tocco su mobile */
.tiles article.tile-active .tile-overlay { opacity: 0; }
.tiles article.tile-active {
    outline: 2px solid rgba(201,168,76,0.7);
    outline-offset: -2px;
}
/* Hint visivo: invito a confermare l'ingresso */
.tiles article.tile-active .tile-content::after {
    content: 'ENTRA →';
    display: block;
    margin-top: 1em;
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    animation: pulse-hint 1s ease-in-out infinite alternate;
}
@keyframes pulse-hint {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

/* Testo sopra l'overlay */
.tile-content {
    position: relative;
    z-index: 3;
    width: 100%;
}
.tile-content h3 {
    font-size: 1.55em;
    font-weight: 600;
    color: var(--white);
}
.tile-line {
    width: 100%;
    max-width: 260px;
    height: 2px;
    background: var(--white);
    margin: 0.45em 0 0.65em;
}
.tile-content p {
    font-size: 0.68em;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--white70);
    line-height: 1.7;
}

/* Claim secondario nella tessera — es. Giorgio Demagistris */
.tile-claim {
    margin-top: 1.2em;
    font-size: 0.75em;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.5;
    background: linear-gradient(90deg, #ffffff 0%, #e8d5a0 40%, #c9a84c 70%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.95;
}

/* +--------------------------------------------------+
   | [F9a] - NSPE Label on Cards (.tile-nspe-label)   |
   | Etichetta NSPE in alto a sinistra su ogni card.  |
   | Dipende da: F9                                   |
   | Status: BROKEN | Last modified: 2026-07-16       |
   | BUG F3d: copre il volto del gondoliere su mobile |
   +--------------------------------------------------+ */
.tile-nspe-label {
    position: absolute;
    top: 1.2em;
    left: 1.2em;
    z-index: 5;
    font-family: 'Space Mono', monospace;
    font-size: 0.52em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.6);
    padding: 0.4em 0.8em;
    font-style: italic;
    background: rgba(10,22,40,0.85);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* Link invisibile che copre tutta la tessera */
.tile-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    border: 0;
}

/* Tessere prossimamente: hover bloccato */
.tile-soon { cursor: default; }
.tile-soon:hover .tile-overlay { opacity: 0.85 !important; }

/* Tessera con overlay fisso ma link attivo (es. Giorgio Demagistris) */
.tile-no-hover { cursor: pointer; }
.tile-no-hover:hover .tile-overlay { opacity: 0.85 !important; }

/* +--------------------------------------------------+
   | [F9c] - Tiles Area Header (separatori di area)   |
   | Intestazione di sezione nella griglia tiles.     |
   | Dipende da: F9                                   |
   | Status: STABLE | Last modified: 2026-08-11       |
   +--------------------------------------------------+ */
.tiles-area-header {
    width: 100%;
    padding: 2.5em 3em 1.2em;
    background: rgba(26,39,68,0.6);
    border-top: 1px solid rgba(201,168,76,0.25);
    display: flex;
    align-items: center;
    gap: 1em;
}
.tiles-area-header:first-child {
    border-top: none;
    padding-top: 2em;
}
.tiles-area-number {
    font-family: 'Space Mono', monospace;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold);
    opacity: 0.8;
    text-transform: uppercase;
}
.tiles-area-title {
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white70);
}
.tiles-area-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(201,168,76,0.4) 0%, transparent 100%);
}

/* +--------------------------------------------------+
   | [F9b] - Interstitial Overlay CSS                 |
   | Modal overlay per NSPE interstitial page.        |
   | Dipende da: F6                                   |
   | Status: DEPRECATED | Last modified: 2026-08-12   |
   | 2026-08-12: orfano. F16 deprecato e F5a non piu  |
   | attivato: queste regole non colpiscono nulla.    |
   | Parte da display:none, resta inerte e innocuo.   |
   +--------------------------------------------------+ */
#interstitial-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,18,40,0.92);
    backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2em;
}
#interstitial-overlay.active {
    display: flex;
}
.interstitial-container {
    background: rgba(15,30,56,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 3.5em 4em;
    max-width: 900px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3em;
    align-items: center;
    min-height: 200px;
}
.interstitial-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
.interstitial-nspe-tag {
    font-family: 'Space Mono', monospace;
    font-size: 0.7em;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    font-style: italic;
    margin-bottom: 1.5em;
}
.interstitial-text {
    font-size: 0.95em;
    color: rgba(255,255,255,0.75);
    line-height: 1.8;
    max-width: 600px;
    text-align: center;
    white-space: pre-line;
    margin: 0 auto;
}
.interstitial-firma {
    font-family: 'Space Mono', monospace;
    font-size: 0.7em;
    font-style: italic;
    color: rgba(255,255,255,0.2);
    margin-top: 1.5em;
    letter-spacing: 0.08em;
}
.interstitial-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2em;
    flex-shrink: 0;
}
.btn-entra {
    font-family: 'Space Mono', monospace;
    font-size: 0.75em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 1em 2.2em;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    transition: all 0.3s;
    position: relative;
    z-index: 1001;
}
.btn-entra:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.7);
}
.btn-salta {
    font-family: 'Space Mono', monospace;
    font-size: 0.7em;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.25);
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
    background: none;
    border: none;
    transition: color 0.2s;
}
.btn-salta:hover {
    color: rgba(255,255,255,0.5);
}

@media (max-width: 640px) {
    .interstitial-container {
        grid-template-columns: 1fr;
        padding: 2.5em 1.5em;
    }
    .interstitial-right {
        align-items: flex-start;
    }
}

/* Puntino argento disco vinile — tessera SPOT AI */
.vinyl-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e8e8e8, #a0a0a0 60%, #707070);
    box-shadow: 0 0 4px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.4);
    z-index: 3;
    pointer-events: none;
}

/* +--------------------------------------------------+
   | [F10] - Footer                                   |
   | Dati societari FXG + link legali.                |
   | Dipende da: F6                                   |
   | Status: STABLE | Last modified: 2026-07-15       |
   +--------------------------------------------------+ */
#footer {
    background: rgba(10,18,40,0.95);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 2.5em 2em;
    text-align: center;
}
#footer p {
    font-size: 0.75em;
    color: var(--white70);
    letter-spacing: 0.08em;
    margin-bottom: 0.4em;
}
#footer a { color: var(--white70); border-bottom: 1px solid rgba(255,255,255,0.2); }
#footer a:hover { color: var(--white); }

/* +--------------------------------------------------+
   | [F11] - Cookie Bar                               |
   | Banner fisso in basso con consenso cookie.       |
   | Dipende da: F6                                   |
   | Status: STABLE | Last modified: 2026-07-15       |
   +--------------------------------------------------+ */
#cookieBar {
    display: none;
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    background: rgba(10,18,40,0.97);
    border-top: 1px solid rgba(201,168,76,0.35);
    padding: 1em 2em;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
    z-index: 999;
    font-size: 0.78em;
    color: var(--white70);
}
#cookieBar a { color: var(--gold); }
#cookieBar button {
    background: var(--gold);
    border: 0;
    color: var(--bg);
    font-family: var(--font);
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.5em 1.5em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
#cookieBar button:hover { background: #e8c96a; }

/* +--------------------------------------------------+
   | [F12] - Responsive                               |
   | Breakpoint 900 / 768 / 640px.                    |
   | Dipende da: F7, F8, F9                           |
   | Status: WIP | Last modified: 2026-07-16          |
   | BUG F3b: min-height tile SPOT AI su mobile       |
   +--------------------------------------------------+ */
@media (max-width: 900px) {
    .tiles article { height: 32vh; min-height: 18em; }
    #banner { background-attachment: scroll; padding: 5em 2.5em 3em; }
}
@media (max-width: 900px) {
    .tiles article,
    .tiles article:nth-child(4n-1),
    .tiles article:nth-child(4n-2) { width: 50%; }
    #banner { background-attachment: scroll; padding: 5em 2.5em 3em; }
}
@media (max-width: 768px) {
    .tiles article,
    .tiles article:nth-child(4n-1),
    .tiles article:nth-child(4n-2) {
        width: 100%;
        height: 28vh;
        min-height: 14em;
        padding: 2em 1.5em;
    }
    #banner { 
        padding: calc(var(--action-bar-height, 6em) + 2em) 1.5em 2.5em; 
        margin-top: 0;
        min-height: 85vh;
        background-attachment: scroll;
        background-position: 85% top;
        background-image: url('../images/giorgio-hero-integrated-mobile.jpg');
        align-items: flex-end;
    }
    .banner-content h1 { font-size: 1.85em; }
    .banner-content p { font-size: 0.72em; }
    .nspe-block { margin-top: 1.2em; padding-top: 1em; }
    .logo span { display: none; }
    #cookieBar { flex-direction: column; text-align: center; }
    .tile-nspe-label { font-size: 0.55em; top: 0.8em; left: 0.8em; }

    /* SPOT AI: l'articolo ha min-height:42em inline (per il desktop).
       Su mobile va riportato all'altezza standard delle altre tile,
       altrimenti il crop verticale esclude la tastiera del pianoforte. */
    .tile-spot { min-height: 14em !important; }

    /* Open Tour: la label (top-left come le altre) a 0.55em è ~207px e
       copre il volto del gondoliere (~195px dal bordo). Riduciamo il
       font a 0.40em: la label scende a ~150px su una riga sola,
       lasciando ~45px di margine prima del volto. */
    .tile-opentour .tile-nspe-label {
        font-size: 0.40em;
        white-space: nowrap;
    }

    .pwa-action-bar {
        gap: 0.4em;
        padding: 0.4em 0.4em;
    }
    
    .pwa-btn {
        padding: 0.4em 0.6em;
        font-size: 0.6em;
        flex: 1;
        min-width: 50px;
        max-width: 100px;
    }
}


/* Su mobile: nasconde la navbar (F1), la PWA Action Bar (F1b) la sostituisce */
@media (max-width: 768px) {
    #header { display: none; }
    .nav-mobile { display: none; }
}

/* +--------------------------------------------------+
   | [F1b] - PWA Action Bar CSS                       |
   | Barra fissa top: 4 pulsanti + modali + ESCI.     |
   | DEFAULT: display:grid (mobile + PWA standalone). |
   | Su desktop (>=769px): display:none.              |
   | Dipende da: F6                                   |
   | Status: STABLE | Last modified: 2026-07-16       |
   +--------------------------------------------------+ */
.pwa-action-bar {
    display: grid;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    grid-template-columns: 1fr 1fr;
    gap: 0.4em;
    padding: 0.4em 0.4em;
    background: rgba(27, 54, 93, 0.98);
    backdrop-filter: blur(10px);
    height: auto;
}

/* Su desktop: nasconde la PWA bar, mostra la navbar */
@media (min-width: 769px) {
    .pwa-action-bar { display: none; }
}

.pwa-btn {
    padding: 0.5em 0.6em;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--white);
    font-family: var(--font);
    font-size: 0.65em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-btn:hover {
    background: rgba(201, 168, 76, 0.2);
    border-color: var(--gold);
    color: var(--gold);
}

.pwa-btn-exit {
    position: fixed;
    bottom: 1.5em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    padding: 0.6em 1.5em;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    font-family: var(--font);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.pwa-btn-exit:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
}

/* Modale PWA */
.pwa-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.pwa-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.pwa-modal-content {
    position: relative;
    z-index: 10001;
    background: var(--white);
    color: var(--bg);
    padding: 2.5em;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.pwa-modal-content h3 {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--bg);
    margin-bottom: 1.2em;
    text-align: center;
}

.pwa-modal-content h4 {
    font-size: 1em;
    font-weight: 600;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

.pwa-modal-btn {
    display: block;
    width: 100%;
    padding: 0.9em;
    margin: 0.8em 0;
    background: var(--bg);
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-family: var(--font);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.pwa-modal-btn:hover {
    background: #0f1f38;
    transform: translateY(-2px);
}

.pwa-modal-btn-close {
    display: block;
    width: 100%;
    padding: 0.8em;
    margin-top: 1.5em;
    background: transparent;
    color: var(--bg);
    border: 1px solid rgba(26, 39, 68, 0.3);
    border-radius: 4px;
    font-family: var(--font);
    font-size: 0.85em;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.pwa-modal-btn-close:hover {
    background: rgba(26, 39, 68, 0.05);
    border-color: var(--bg);
}

/* Adattamento responsive modale PWA su schermi piccoli */
@media (max-width: 640px) {
    .pwa-modal-content {
        padding: 1.8em;
        max-width: 90vw;
    }
}

/* +--------------------------------------------------+
   | [F10] - Form Contatti CSS                        |
   | Sezione #contatti: layout, campi, pulsante,      |
   | messaggi successo/errore.                        |
   | Dipende da: F6                                   |
   | Status: STABLE | Last modified: 2026-07-16       |
   +--------------------------------------------------+ */
#contatti {
    background: var(--bg);
    padding: 5em 2em;
}

.contatti-inner {
    max-width: 640px;
    margin: 0 auto;
}

#contatti h2 {
    font-size: 2rem;
    font-weight: 300;
    color: var(--white);
    letter-spacing: 0.02em;
    text-transform: none;
    margin-bottom: 0.3em;
}

.contatti-sub {
    color: rgba(255,255,255,0.55);
    font-size: 0.9em;
    margin-bottom: 2em;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2em;
}

.form-group label {
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.4em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    padding: 0.75em 1em;
    color: var(--white);
    font-family: var(--font);
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.2s;
    resize: vertical;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: var(--gold);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

.form-privacy {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75em;
    margin-bottom: 1.6em;
}

.form-privacy input[type="checkbox"] {
    margin-top: 0.15em;
    accent-color: var(--gold);
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    cursor: pointer;
}

.form-privacy label {
    font-size: 0.8em;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
}

.form-privacy label a {
    color: var(--gold);
    text-decoration: underline;
}

.btn-form-submit {
    background: var(--gold);
    color: var(--bg);
    border: none;
    border-radius: 4px;
    padding: 0.85em 2.5em;
    font-family: var(--font);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    width: 100%;
}

.btn-form-submit:hover {
    background: #e0c060;
    transform: translateY(-1px);
}

.form-success {
    margin-top: 1.2em;
    padding: 1em 1.2em;
    background: rgba(50, 180, 100, 0.15);
    border: 1px solid rgba(50, 180, 100, 0.4);
    border-radius: 4px;
    color: #7ddc9a;
    font-size: 0.9em;
    text-align: center;
}

.form-error {
    margin-top: 1.2em;
    padding: 1em 1.2em;
    background: rgba(220, 60, 60, 0.12);
    border: 1px solid rgba(220, 60, 60, 0.35);
    border-radius: 4px;
    color: #f08080;
    font-size: 0.9em;
    text-align: center;
}

@media (max-width: 768px) {
    #contatti { padding: 3.5em 1.5em; }
    #contatti h2 { font-size: 1.4em; }
}

/* ============================================================
   [F3-CSS] Hub Categories — 3 pulsanti spartiacque
   Sostituisce la griglia tessere nella homepage.
   Status: STABLE | Last modified: 2026-08-11
   ============================================================ */
.hub-categories {
    display: flex;
    flex-direction: row;
    gap: 0;
    background: #0d1b2a;
    padding: 0;
    min-height: 28em;
}

.hub-cat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 4em 3em;
    border-right: 1px solid rgba(212, 175, 55, 0.15);
    background: #0d1b2a;
    transition: background 0.3s ease;
    position: relative;
}

.hub-cat-card:last-child {
    border-right: none;
}

.hub-cat-card:hover {
    background: #111f30;
}

.hub-cat-featured {
    background: #0f2035;
    border-left: 3px solid #D4AF37;
    border-right: 3px solid #D4AF37;
}

.hub-cat-featured:hover {
    background: #142540;
}

.hub-cat-number {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    color: #D4AF37;
    margin-bottom: 1.2em;
    opacity: 0.8;
}

.hub-cat-title {
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: 300;
    color: #ffffff;
    margin: 0 0 0.6em 0;
    letter-spacing: 0.02em;
}

.hub-cat-line {
    width: 3em;
    height: 1px;
    background: #D4AF37;
    margin-bottom: 1.2em;
}

.hub-cat-desc {
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 2em;
    max-width: 22em;
}

.hub-cat-btn {
    display: inline-block;
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.5);
    padding: 0.7em 1.8em;
    text-decoration: none;
    transition: all 0.25s ease;
}

.hub-cat-btn:hover {
    background: #D4AF37;
    color: #0d1b2a;
    border-color: #D4AF37;
}

@media (max-width: 768px) {
    .hub-categories {
        flex-direction: column;
        min-height: auto;
    }
    .hub-cat-card {
        border-right: none;
        border-bottom: 1px solid rgba(212, 175, 55, 0.15);
        padding: 2.5em 1.8em;
    }
    .hub-cat-card:last-child {
        border-bottom: none;
    }
    .hub-cat-featured {
        border-left: 3px solid #D4AF37;
        border-right: none;
    }
}