.s-header-inner { display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:2rem; }
.s-header-actions { display:flex; align-items:center; }
.s-nav { gap:1.5rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.75rem 1.2rem; border-radius:var(--radius-md); font-weight:var(--font-weight-semibold); transition:var(--transition); }
.btn-primary { color:var(--text-white); background:var(--color-primary); }
.btn-secondary { color:var(--text-primary); border:1px solid var(--border-color); background:var(--bg-card); }
.section-header { max-width:760px; margin:0 auto 3.5rem; text-align:center; }
.section-label { display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem; padding:.55rem 1rem; border-radius:var(--radius-pill); color:var(--color-primary); background:rgba(10,132,255,.12); font:600 var(--font-size-sm)/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.page-hero-grid,.two-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:3rem; }
.page-hero-grid--single { grid-template-columns:minmax(0,900px); justify-content:center; }
.page-hero-grid--single .page-hero-content { width:100%; padding-block:clamp(1rem,3vw,2.5rem); }
.page-hero-grid--single .page-hero-content p { max-width:760px; }
.login-hero h1 { font-size: var(--font-size-page-title); }
.principles-grid,.problem-grid,.vision-grid,.components-grid,.scenario-grid,.future-grid,.tech-principles-grid,.mesh-grid,.resilience-grid,.security-grid,.api-grid,.integration-grid,.modules-grid,.goals-grid,.evolution-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.principle-card,.problem-card,.vision-card,.component-card,.scenario-card,.future-card,.tech-principle,.mesh-card,.resilience-card,.security-card,.api-card,.integration-card,.module-card,.goal-card,.evolution-card,.progress-card,.timeline-card { padding:1.75rem; border:1px solid var(--border-color); border-radius:var(--radius-xl); background:var(--bg-card); }
.feature-list,.feature-list-large { display:grid; gap:.75rem; margin-top:1rem; }
.feature-item { display:flex; gap:.7rem; color:var(--text-secondary); }
.architecture-diagram,.ecosystem-diagram,.server-architecture,.technology-preview,.roadmap-preview,.strategy-map,.progress-dashboard { min-height:320px; padding:2rem; border:1px solid var(--border-color); border-radius:var(--radius-xl); background:radial-gradient(circle at center,rgba(10,132,255,.13),transparent 65%),var(--bg-card); }
.timeline,.roadmap-timeline { display:grid; gap:1.25rem; }
.timeline-item { display:grid; grid-template-columns:auto 1fr; gap:1rem; }
.progress-bar { overflow:hidden; height:8px; border-radius:999px; background:var(--bg-body); }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--color-primary),var(--color-secondary)); }
.s-dark { background:var(--bg-surface); }
.s-loader-content { display:grid; justify-items:center; gap:1rem; }
.s-loader-spinner,.server-spinner { width:32px; height:32px; border:3px solid var(--border-color); border-top-color:var(--color-primary); border-radius:50%; animation:sentinelRotate 1s linear infinite; }
.login-page { min-height:100vh; background:radial-gradient(circle at 20% 20%,rgba(10,132,255,.16),transparent 32%),var(--bg-body); }
.login-wrapper { position:relative; z-index:1; display:grid; place-items:center; min-height:100vh; padding:2rem; }
.login-layout { display:grid; grid-template-columns:1.1fr .9fr; width:min(1100px,100%); overflow:hidden; border:1px solid var(--border-color); border-radius:var(--radius-2xl); background:var(--bg-card); box-shadow:var(--shadow-lg); }
.login-hero,.login-panel { padding:clamp(2rem,5vw,4rem); }
.login-panel { background:var(--bg-surface); }
.login-logo { width:200px; margin-bottom:2rem; }
.login-features,.login-form { display:grid; gap:1rem; }
.form-group { display:grid; gap:.5rem; }
.input-wrapper,.password-wrapper { position:relative; }
.input-wrapper input,.password-wrapper input { width:100%; padding:1rem; color:var(--text-primary); border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-body); }
.password-toggle { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); color:var(--text-secondary); background:none; border:0; }
.login-options { display:flex; justify-content:space-between; gap:1rem; }
.login-button { width:100%; }
.login-message { min-height:1.5rem; }
.modal,.server-overlay { position:fixed; inset:0; display:grid; place-items:center; padding:1rem; background:var(--bg-overlay); z-index:var(--z-modal); }
.modal,.server-overlay { opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--transition),visibility var(--transition); }
.modal.open { opacity:1; visibility:visible; pointer-events:auto; }
.server-overlay.visible { opacity:1; visibility:visible; pointer-events:auto; }
.modal-backdrop { position:absolute; inset:0; }
.modal-content { position:relative; z-index:1; }
.modal-close { position:absolute; top:1rem; right:1rem; width:40px; height:40px; border:1px solid var(--border-color); border-radius:50%; color:var(--text-primary); background:var(--bg-surface); }
.modal-content,.server-box { width:min(520px,100%); padding:2rem; border:1px solid var(--border-color); border-radius:var(--radius-xl); background:var(--bg-card); }
.hidden { display:none!important; }
@media(max-width:991.98px){.page-hero-grid,.two-columns,.login-layout{grid-template-columns:1fr}.principles-grid,.problem-grid,.vision-grid,.components-grid,.scenario-grid,.future-grid,.tech-principles-grid,.mesh-grid,.resilience-grid,.security-grid,.api-grid,.integration-grid,.modules-grid,.goals-grid,.evolution-grid{grid-template-columns:1fr 1fr}.s-header-actions{display:none}.s-header-inner{min-height:72px}}
@media(max-width:767.98px){.principles-grid,.problem-grid,.vision-grid,.components-grid,.scenario-grid,.future-grid,.tech-principles-grid,.mesh-grid,.resilience-grid,.security-grid,.api-grid,.integration-grid,.modules-grid,.goals-grid,.evolution-grid{grid-template-columns:1fr}.hero-buttons{flex-direction:column}.login-hero{display:none}.login-options{flex-direction:column}}

/* Operational diagrams shared by the extended Progetto and Roadmap pages. */
.page-hero-image { min-width: 0; }
.architecture-preview,
.roadmap-preview { position: relative; min-height: 420px; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-2xl); background: radial-gradient(circle at center,rgba(10,132,255,.17),transparent 62%),var(--bg-card); box-shadow: var(--shadow-lg); }
.architecture-preview::before,
.roadmap-preview::before { position: absolute; inset: 13%; border: 1px solid rgba(10,132,255,.2); border-radius: 50%; content: ""; }
.architecture-preview::after,
.roadmap-preview::after { position: absolute; inset: 28%; border: 1px dashed rgba(0,194,168,.25); border-radius: 50%; content: ""; }
.architecture-preview > .architecture-core,
.roadmap-preview > .roadmap-core { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: 132px; height: 132px; border: 1px solid rgba(10,132,255,.6); border-radius: 50%; color: var(--text-primary); background: rgba(7,17,29,.94); box-shadow: 0 0 42px rgba(10,132,255,.28); font-weight: var(--font-weight-bold); letter-spacing: .04em; transform: translate(-50%,-50%); }
.architecture-preview > .architecture-node { position: absolute; z-index: 3; min-width: 92px; padding: .65rem .8rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); background: rgba(13,31,50,.95); box-shadow: var(--shadow-sm); text-align: center; font: 600 .75rem/1.2 var(--font-mono); }
.architecture-preview > .node-a { top: 12%; left: 50%; transform: translateX(-50%); }
.architecture-preview > .node-b { top: 30%; right: 7%; }
.architecture-preview > .node-c { right: 14%; bottom: 12%; }
.architecture-preview > .node-d { bottom: 12%; left: 14%; }
.architecture-preview > .node-e { top: 30%; left: 7%; }
.roadmap-preview > .roadmap-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(10,132,255,.32); border-radius: 50%; transform: translate(-50%,-50%); }
.roadmap-preview > .ring-1 { width: 190px; height: 190px; }
.roadmap-preview > .ring-2 { width: 280px; height: 280px; }
.roadmap-preview > .ring-3 { width: 370px; height: 370px; }
.roadmap-preview > .roadmap-dot { position: absolute; z-index: 4; width: 15px; height: 15px; border: 3px solid rgba(7,17,29,.9); border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 16px rgba(0,194,168,.75); }
.roadmap-preview > .dot-1 { top: 13%; left: 48%; }
.roadmap-preview > .dot-2 { top: 32%; right: 12%; }
.roadmap-preview > .dot-3 { right: 23%; bottom: 10%; }
.roadmap-preview > .dot-4 { bottom: 17%; left: 17%; }
.roadmap-preview > .dot-5 { top: 31%; left: 11%; }
.architecture-diagram { display: grid; grid-template-columns: repeat(5,minmax(120px,1fr) auto) minmax(120px,1fr); align-items: stretch; gap: .7rem; min-height: 0; }
.architecture-column { display: flex; min-width: 0; }
.architecture-box { display: grid; align-content: center; justify-items: center; width: 100%; min-height: 165px; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: var(--text-secondary); background: rgba(13,31,50,.86); text-align: center; }
.architecture-box i { margin-bottom: .65rem; color: var(--color-primary); font-size: 1.45rem; }
.architecture-box h4 { margin-bottom: .35rem; color: var(--text-primary); }
.architecture-box p { font-size: .75rem; }
.architecture-column.architecture-core .architecture-box { border-color: rgba(10,132,255,.55); background: rgba(10,132,255,.1); box-shadow: 0 0 24px rgba(10,132,255,.12); }
.architecture-arrow { display: grid; place-items: center; color: var(--color-secondary); }
.progress-dashboard { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; min-height: 0; }
.progress-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; }
.progress-card .progress-bar { grid-column: 1 / -1; }
.progress-card > span { color: var(--color-primary); font: 600 .8rem/1 var(--font-mono); }
.strategy-map { position: relative; min-height: 560px; overflow: hidden; }
.strategy-map::before,
.strategy-map::after { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(10,132,255,.2); border-radius: 50%; content: ""; transform: translate(-50%,-50%); }
.strategy-map::before { width: 330px; height: 330px; }
.strategy-map::after { width: 500px; height: 500px; border-style: dashed; }
.strategy-center { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: 170px; height: 170px; padding: 1rem; border: 1px solid rgba(10,132,255,.58); border-radius: 50%; background: rgba(7,17,29,.95); box-shadow: 0 0 44px rgba(10,132,255,.25); text-align: center; transform: translate(-50%,-50%); }
.strategy-center i { color: var(--color-primary); font-size: 1.8rem; }
.strategy-center span { color: var(--text-muted); font: 500 .65rem/1.2 var(--font-mono); text-transform: uppercase; }
.strategy-node { position: absolute; z-index: 3; display: grid; place-items: center; width: 112px; min-height: 78px; padding: .7rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: var(--text-secondary); background: rgba(13,31,50,.95); text-align: center; }
.strategy-node i { margin-bottom: .3rem; color: var(--color-secondary); }
.strategy-node h4 { margin: 0; font-size: .78rem; }
.strategy-node.node-users { top: 6%; left: 45%; }
.strategy-node.node-pca { top: 17%; right: 14%; }
.strategy-node.node-gis { top: 44%; right: 5%; }
.strategy-node.node-mqtt { right: 17%; bottom: 10%; }
.strategy-node.node-mesh { bottom: 5%; left: 45%; }
.strategy-node.node-mobile { bottom: 10%; left: 17%; }
.strategy-node.node-cloud { top: 44%; left: 5%; }
.strategy-node.node-ai { top: 17%; left: 14%; }

@media(max-width:991.98px){
  .architecture-preview,.roadmap-preview{min-height:380px}
  .architecture-diagram{grid-template-columns:1fr;gap:.5rem}
  .architecture-box{min-height:120px}
  .architecture-arrow{transform:rotate(90deg)}
  .progress-dashboard{grid-template-columns:1fr 1fr}
  .strategy-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;min-height:0}
  .strategy-map::before,.strategy-map::after{display:none}
  .strategy-center,.strategy-node{position:static;width:auto;min-height:100px;transform:none}
  .strategy-center{grid-column:1/-1;height:auto;border-radius:var(--radius-xl)}
}
@media(max-width:767.98px){
  .architecture-preview,.roadmap-preview{min-height:340px}
  .progress-dashboard,.strategy-map{grid-template-columns:1fr}
  .strategy-center{grid-column:auto}
}
.platform-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .035);
}

.status-item div {
    display: grid;
    gap: .15rem;
}

.status-item small {
    color: var(--text-secondary, #aeb9c7);
}

.status-led {
    width: .7rem;
    height: .7rem;
    flex: 0 0 .7rem;
    border-radius: 50%;
    background: #7d8997;
    box-shadow: 0 0 0 .2rem rgba(125, 137, 151, .12);
}

.status-led.online {
    background: #4ecf92;
    box-shadow: 0 0 0 .2rem rgba(78, 207, 146, .14);
}

.status-led.warning {
    background: #e6bd4c;
    box-shadow: 0 0 0 .2rem rgba(230, 189, 76, .14);
}

.status-led.offline {
    background: #ff786f;
    box-shadow: 0 0 0 .2rem rgba(255, 120, 111, .14);
}

@media (max-width: 560px) {
    .platform-status {
        grid-template-columns: 1fr;
    }
}