/* =========================================
   1. RESET E IMPOSTAZIONI GLOBALI
   (Fondamenta del sito:gestione scroll e dimensioni)
   ========================================= */
html{
    height:100%;
    /* overflow-y:auto è fondamentale per permettere lo scroll */
    overflow-y:auto;
    overflow-x:hidden;
    scroll-behavior:auto !important;/* Disabilita smooth scroll nativo per Lenis */
}

body{
    margin:0;
    padding:0;
    background-color:#000;
    color:#ffffff;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    width:100%;
    min-height:100%;
    position:relative;
    display:flex;
    flex-direction:column;
    /* Rendering Font Nitido */
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

/* Nasconde scrollbar esteticamente ma mantiene la funzione */
::-webkit-scrollbar{
    display:none;
}

html{
    scrollbar-width:none;/* Firefox */
    -ms-overflow-style:none;/* IE/Edge */
}

.content{
    padding:0 !important;
}

/* Stile base per tutti i link */
a{
    text-decoration:none;
    color:inherit;
    transition:0.3s;
}

    a:hover{
        opacity:0.8;
  }

    button:focus-visible, a:focus-visible{
        outline:2px solid #0078d4;
        outline-offset:4px;
  }

#blazor-error-ui{
    background:#cc0000;
    color:white;
    display:none;
    position:fixed;
    bottom:0;
    width:100%;
    padding:10px;
    z-index:9999;
}

/* =========================================
   2. MAIN LAYOUT (SEMPLIFICATO)
   ========================================= */
main{
    flex:1 0 auto;/* Spinge il footer in basso */
    width:100%;
    position:relative;
    z-index:1;
}

.page-wrapper{
    width:100%;
    overflow:visible;
    position:relative;
}

/* =========================================
   3. NAVIGATION MENU
   ========================================= */
.custom-nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.5rem 3rem;
    z-index:9999;/* Sopra a tutto */
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.logo a{
    font-weight:900;
    font-size:1.5rem;
    color:#ffffff;
    letter-spacing:-1px;
}

.links{
    display:flex;
    gap:2rem;
}

    .links a{
        color:#ffffff;
        font-size:0.9rem;
        text-transform:uppercase;
        letter-spacing:1px;
        font-weight:600;
  }

        .links a:hover, .links a.active{
            color:#ffffff;
            text-decoration:underline;
            text-decoration-thickness:2px;
            text-underline-offset:4px;
      }

@media (max-width:640px){
    .custom-nav{
        padding:1rem 1.5rem;
        height:60px;
  }

    .links{
        display:none;
  }

    .logo a{
        font-size:1.2rem;
  }
}

/* =========================================
   4. PANELS & REVEAL
   ========================================= */
.panel{
    min-height:100vh;
    width:100%;
    display:flex;
    align-items:center;
    padding:80px 0;
    position:relative;
    transition:background-color 1s ease;
}
    /* Fix per l'ultima sezione:rimuove altezza forzata */
    .panel:last-child{
        min-height:auto;
        padding-bottom:100px;
  }

.reveal{
    opacity:1;
    position:relative;
    will-change:transform, opacity;
}

/* =========================================
   5. LAYOUT & CARDS
   ========================================= */
.content-split{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    gap:80px;
}

.tech-spec-card{
    background:#0a0a0a;
    border:1px solid #333;
    border-radius:8px;
    width:100%;
    max-width:450px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
}

.spec-header{
    background:#111;
    padding:15px 20px;
    font-size:0.9rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#ffffff;
    border-bottom:1px solid #333;
    display:flex;
    align-items:center;
    gap:10px;
}

.spec-row{
    display:flex;
    justify-content:space-between;
    padding:15px 20px;
    border-bottom:1px solid #222;
    font-size:1rem;
}

    .spec-row:last-child{
        border-bottom:none;
  }

    .spec-row .label{
        color:#ffffff;
        font-weight:500;
  }

    .spec-row .value{
        color:#ffffff;
        font-weight:700;
        font-family:monospace;
        font-size:1.1rem;
  }

/* Temi Card */
.tech-spec-card.error-theme{
    border-color:rgba(255, 77, 77, 0.3);
}

    .tech-spec-card.error-theme .spec-header{
        color:#ff4d4d;
        background:rgba(255, 77, 77, 0.05);
  }

.tech-spec-card.success-theme{
    border-color:rgba(12, 206, 107, 0.3);
}

    .tech-spec-card.success-theme .spec-header{
        color:#0cce6b;
        background:rgba(12, 206, 107, 0.05);
  }

.tech-spec-card.code-theme{
    border-color:rgba(0, 120, 212, 0.3);
}

    .tech-spec-card.code-theme .spec-header{
        color:#ffffff;
        background:rgba(0, 120, 212, 0.05);
  }

        .tech-spec-card.code-theme .spec-header i{
            color:#4da6ff;
            margin-right:10px;
      }

.text-side{
    flex:1;
    text-align:left;
}

.visual-side{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

@media (max-width:992px){
    .content-split{
        flex-direction:column;
        text-align:center;
  }

    .text-side{
        text-align:center;
        margin-bottom:40px;
  }
}

/* =========================================
   6. ELEMENTI GUIDA & TIPOGRAFIA
   ========================================= */
.chapter-badge{
    display:inline-block;
    font-size:0.8rem;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#4da6ff;
    border:1px solid rgba(77, 166, 255, 0.5);
    padding:5px 15px;
    border-radius:20px;
    margin-bottom:20px;
}

.nav-area{
    margin-top:40px;
    display:flex;
    gap:20px;
    align-items:center;
}

@media (max-width:992px){
    .nav-area{
        justify-content:center;
  }
}

.giant-title{
    font-size:clamp(3rem, 6vw, 6rem);
    font-weight:900;
    line-height:1;
    margin-bottom:2rem;
    color:#ffffff;
}

.section-title{
    font-size:clamp(2.5rem, 5vw, 4rem);
    font-weight:800;
    margin-bottom:1.5rem;
    color:#ffffff;
}

.gradient-text{
    background:linear-gradient(90deg, #0078d4, #00c6ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.description{
    font-size:1.3rem;
    color:#e0e0e0 !important;
    max-width:650px;
    line-height:1.6;
}

.feature-list{
    list-style:none;
    padding:0;
    margin-top:2rem;
}

    .feature-list li{
        margin-bottom:1.5rem;
        color:#e0e0e0 !important;
        font-size:1.1rem;
        line-height:1.6;
  }

/* =========================================
   8. PULSANTI
   ========================================= */
.btn-main{
    padding:1rem 2.5rem;
    font-size:1rem;
    font-weight:700;
    border-radius:4px;
    background:#0078d4;
    color:white;
    border:none;
    cursor:pointer;
    transition:0.3s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-transform:uppercase;
    letter-spacing:1px;
}

    .btn-main:hover{
        transform:translateY(-3px);
        box-shadow:0 10px 25px rgba(0,120,212,0.4);
  }

.nav-link-back{
    background:none;
    border:none;
    padding:0;
    color:#ffffff;
    font-size:0.9rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:0.3s;
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:underline;
    text-decoration-color:rgba(255,255,255,0.5);
}

    .nav-link-back:hover{
        color:#ffffff;
        gap:12px;
        text-decoration-color:#ffffff;
  }

/* Badge 100 */
.visual-badge{
    background:#0cce6b;
    width:250px;
    height:250px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transform:rotate(-10deg);
    box-shadow:0 0 60px rgba(12, 206, 107, 0.4);
    margin:0 auto;
}

    .visual-badge .number{
        font-size:4rem;
        font-weight:900;
        line-height:1;
        color:white;
  }

.feature-title{
    font-size:1.5rem;
    font-weight:600;
    margin-top:1.5rem;
    margin-bottom:0.5rem;
    color:white;
}

.feature-desc{
    font-size:1rem;
    color:#e0e0e0 !important;
    line-height:1.4;
}

/* =========================================
   9. EFFETTI
   ========================================= */
.click-ripple{
    position:fixed;
    border-radius:50%;
    border:2px solid rgba(255, 255, 255, 0.6);
    background:rgba(255, 255, 255, 0.2);
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%, -50%) scale(0);
    will-change:transform, opacity;
}

.icon-glow{
    font-size:3.5rem;
    color:#0078d4;
    margin-bottom:1.5rem;
    filter:drop-shadow(0 0 15px rgba(0, 120, 212, 0.6));
}

/* =========================================
   10. CODICE VISUALE & OFFERTA
   ========================================= */
.code-block-visual{
    background:#0d0d0d;
    border:1px solid #333;
    border-radius:10px;
    width:100%;
    max-width:500px;
    font-family:'Courier New', Courier, monospace;
    box-shadow:0 20px 50px rgba(0,0,0,0.6);
    overflow:hidden;
}

.code-header{
    background:#1a1a1a;
    padding:10px 15px;
    display:flex;
    align-items:center;
    gap:8px;
    border-bottom:1px solid #333;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
}

    .dot.red{
        background:#ff5f56;
  }

    .dot.yellow{
        background:#ffbd2e;
  }

    .dot.green{
        background:#27c93f;
  }

.filename{
    color:#ffffff;
    font-size:0.8rem;
    margin-left:10px;
}

.code-content{
    padding:20px;
    color:#ffffff;
    font-size:0.95rem;
    line-height:1.6;
}

.kwd{
    color:#569cd6;
}

.cls{
    color:#4ec9b0;
}

.mth{
    color:#dcdcaa;
}

.str{
    color:#ce9178;
}

.cmt{
    color:#6a9955;
}

/* CARD OFFERTA */
.black-card-offer{
    background:linear-gradient(145deg, #111 0%, #050505 100%);
    border:1px solid #333;
    border-radius:16px;
    padding:35px;
    position:relative;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,0.8);
    transition:transform 0.4s ease;
}

    .black-card-offer:hover{
        transform:translateY(-5px);
        border-color:#0078d4;
        box-shadow:0 40px 80px rgba(0,120,212,0.15);
  }

    .black-card-offer::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:4px;
        background:linear-gradient(90deg, #0078d4, #0cce6b);
  }

.card-top{
    border-bottom:1px solid #222;
    padding-bottom:20px;
    margin-bottom:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.plan-name{
    font-size:0.9rem;
    font-weight:800;
    letter-spacing:2px;
    color:#ffffff;
    text-transform:uppercase;
}

.plan-price{
    font-size:2.8rem;
    font-weight:800;
    color:white;
    line-height:1;
}

.card-mid{
    margin-bottom:30px;
}

.validity{
    background:rgba(255,255,255,0.05);
    color:#ffffff;
    padding:6px 12px;
    border-radius:4px;
    display:inline-block;
    font-size:0.85rem;
    margin-bottom:15px;
    border:1px solid rgba(255,255,255,0.1);
}

.server-badge{
    color:#0cce6b;
    font-weight:700;
    font-size:0.95rem;
    letter-spacing:0.5px;
    margin-bottom:25px;
    display:flex;
    align-items:center;
    gap:8px;
}

    .server-badge::before{
        content:'●';
        font-size:0.8rem;
  }

.offer-list{
    list-style:none;
    padding:0;
    margin:0;
}

    .offer-list li{
        margin-bottom:12px;
        font-size:1.05rem;
        color:#ffffff;
        display:flex;
        align-items:center;
        gap:12px;
  }

        .offer-list li i{
            color:#4da6ff;
            font-size:1.2rem;
      }

.card-bottom{
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #222;
    text-align:center;
}

.terms-link{
    color:#ffffff;
    text-decoration:none;
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:all 0.3s;
    border-bottom:1px dotted #fff;
    padding-bottom:2px;
}

    .terms-link:hover{
        color:#fff;
        border-bottom:1px solid #fff;
  }

/* =========================================
   11. GRAFICO & FOOTER
   ========================================= */
.graph-card{
    background:#0f172a;
    border:1px solid #1e293b;
    border-radius:12px;
    padding:30px;
    width:100%;
    max-width:450px;
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

.graph-header{
    color:#ffffff;
    font-size:0.8rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:25px;
    border-bottom:1px solid #1e293b;
    padding-bottom:15px;
}

.graph-bars{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    height:200px;
    padding-bottom:10px;
    border-bottom:2px solid #334155;
    position:relative;
}

.bar-group{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    width:25%;
    height:100%;
}

.bar-fill{
    width:100%;
    background:linear-gradient(to top, #3b82f6, #60a5fa);
    border-radius:4px 4px 0 0;
    transition:height 1.5s ease-out;
    position:relative;
    box-shadow:0 0 15px rgba(59, 130, 246, 0.3);
}

    .bar-fill.highlight{
        background:linear-gradient(to top, #10b981, #34d399);
        box-shadow:0 0 20px rgba(16, 185, 129, 0.5);
  }

.popover{
    position:absolute;
    top:-35px;
    left:50%;
    transform:translateX(-50%);
    background:#10b981;
    color:#022c22;
    font-size:0.7rem;
    font-weight:800;
    padding:4px 8px;
    border-radius:4px;
}

    .popover::after{
        content:'';
        position:absolute;
        bottom:-4px;
        left:50%;
        transform:translateX(-50%);
        border-width:4px 4px 0;
        border-style:solid;
        border-color:#10b981 transparent transparent;
  }

.bar-label{
    margin-top:15px;
    font-size:0.9rem;
    color:#ffffff;
}

    .bar-label.bold{
        color:white;
        font-weight:700;
  }

.graph-footer{
    display:flex;
    gap:20px;
    margin-top:20px;
    justify-content:center;
}

.legend-item{
    font-size:0.8rem;
    color:#e0e0e0;
    display:flex;
    align-items:center;
    gap:8px;
}

.dot.blue{
    background:#3b82f6;
}

.dot.green{
    background:#10b981;
}

/* === FOOTER DEFINITIVO === */
.site-footer{
    display:block !important;
    flex-shrink:0;
    position:relative;
    z-index:9999;/* Sopra ogni cosa */
    background-color:#050505 !important;
    padding:80px 0 30px 0;
    border-top:1px solid rgba(255, 255, 255, 0.1);
    opacity:1 !important;
    visibility:visible !important;
    width:100%;
}

.footer-brand{
    margin-bottom:20px;
}

.brand-name{
    display:block;
    font-size:1.5rem;
    font-weight:800;
    color:#ffffff;
    letter-spacing:-1px;
}

.brand-tagline{
    font-size:0.85rem;
    color:#4da6ff;
    font-family:monospace;
}

.footer-desc{
    color:#e0e0e0;
    line-height:1.6;
    margin-bottom:25px;
    max-width:300px;
}

.iso-mini-badges{
    display:flex;
    gap:10px;
}

    .iso-mini-badges span{
        background:#111;
        border:1px solid #333;
        color:#aaa;
        font-size:0.7rem;
        padding:3px 8px;
        border-radius:4px;
        font-family:monospace;
  }

.footer-title{
    color:#ffffff;
    font-size:1rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:25px;
    border-left:3px solid #4da6ff;
    padding-left:15px;
}

.company-data, .footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

    .company-data li{
        margin-bottom:10px;
        color:#cccccc;
        line-height:1.5;
  }

        .company-data li strong{
            color:#ffffff;
      }

    .company-data a{
        color:#e0e0e0;
        text-decoration:underline;
  }

    .footer-links li{
        margin-bottom:12px;
  }

    .footer-links a{
        color:#e0e0e0;
        text-decoration:none;
        transition:0.2s;
        display:inline-flex;
        align-items:center;
        gap:8px;
  }

        .footer-links a:hover{
            color:#4da6ff;
            padding-left:5px;
      }

.footer-bottom{
    margin-top:60px;
    padding-top:30px;
    border-top:1px solid #111;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
    color:#666;
    font-size:0.8rem;
}

@media (max-width:768px){
    .footer-bottom{
        flex-direction:column;
        text-align:center;
  }
}

/* COOKIE BANNER */
.cookie-banner{
    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    background:#0a0a0a;
    border:1px solid #333;
    border-radius:12px;
    padding:20px;
    z-index:99999;
    box-shadow:0 10px 40px rgba(0,0,0,0.8);
}

.cookie-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

    .cookie-content p{
        margin:0;
        font-size:0.9rem;
        color:#f0f0f0;
  }

.btn-cookie-main{
    background:#0cce6b;
    color:#000;
    border:none;
    padding:8px 20px;
    border-radius:4px;
    font-weight:700;
    cursor:pointer;
}

.btn-cookie-outline{
    background:transparent;
    color:#fff;
    border:1px solid #444;
    padding:8px 20px;
    border-radius:4px;
    cursor:pointer;
}

@media (max-width:768px){
    .cookie-content{
        flex-direction:column;
        text-align:center;
  }
}

/* STILI JSON & OVERRIDE */
.json-key{
    color:#9cdcfe !important;
}

.str{
    color:#ce9178 !important;
}

.num{
    color:#b5cea8 !important;
}

.kwd{
    color:#569cd6 !important;
}

.prop{
    color:#9cdcfe !important;
}

.cmt{
    color:#6a9955 !important;
    font-style:italic;
}

.text-success{
    color:#0cce6b !important;
}

.text-info{
    color:#33deff !important;
}

.text-muted, .text-secondary{
    color:#e0e0e0 !important;
}

.badge{
    color:#000 !important;
}
/* --- SIMPLE POPUP (Nessuna animazione, solo visibilità) --- */
.simple-cookie-popup{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background-color:#111;/* Sfondo scuro solido */
    border-top:2px solid #4da6ff;/* Linea blu sopra */
    color:white;
    padding:20px 0;
    z-index:2147483647;/* Valore massimo possibile per stare sopra a tutto */
    box-shadow:0 -10px 40px rgba(0,0,0,0.8);
}

.popup-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.popup-text p{
    margin:5px 0 0 0;
    font-size:0.95rem;
    color:#e0e0e0;
}

.popup-buttons{
    display:flex;
    gap:15px;
    flex-shrink:0;/* Impedisce ai bottoni di schiacciarsi */
}

.btn-accetta{
    background-color:#0cce6b;/* Verde Acceso */
    color:#000;
    font-weight:800;
    border:none;
    padding:10px 25px;
    border-radius:6px;
    cursor:pointer;
    font-size:1rem;
}

.btn-rifiuta{
    background-color:transparent;
    color:#fff;
    border:1px solid #666;
    padding:10px 20px;
    border-radius:6px;
    cursor:pointer;
    font-size:0.9rem;
}

.btn-accetta:hover{
    background-color:#0ae075;
}

.btn-rifiuta:hover{
    border-color:#fff;
}

/* Adattamento Mobile */
@media (max-width:768px){
    .popup-flex{
        flex-direction:column;
        text-align:center;
  }

    .popup-buttons{
        width:100%;
        justify-content:center;
  }

    .btn-accetta, .btn-rifiuta{
        flex:1;/* Bottoni larghi uguali su mobile */
  }
}
.legal-page-wrapper{
    background-color:#000;
    min-height:100vh;
    padding:40px 20px;/* QUESTO è ciò che impedisce di sbattere ai bordi */
    font-family:'Inter', sans-serif;
    color:#ffffff;
}