/* =====================================================================
   AM COLD SYSTEM — SITO PUBBLICO / COMMERCIALE
   Design system: stessa palette navy/blu/arancio del pannello esistente
   (assets/theme.css), riadattata per un sito B2B/IoT chiaro, pulito,
   professionale. Solo tema chiaro. Nessuna dipendenza dal pannello.
   ===================================================================== */

:root{
    /* Superfici */
    --bg:            #f6f8fc;
    --surface:       #ffffff;
    --surface-alt:   #f2f5fa;
    --border:        #e2e8f2;

    /* Testo */
    --text:          #14213d;
    --text-soft:     #56658a;
    --text-faint:    #8893ac;
    --text-on-navy:  #eef3fb;
    --text-on-navy-soft: #a9bbdd;

    /* Brand: navy + blu */
    --navy-950:      #05070f;
    --navy-900:      #0d213c;
    --navy-800:      #123056;
    --navy-700:      #17407a;
    --navy-600:      #1f52a0;
    --blue-accent:   #2f6fed;
    --blue-accent-2: #38bdf8;
    --cyan-accent:   #22d3ee;

    /* Accento arancio */
    --orange:        #f2790a;
    --orange-dark:   #d9660a;
    --orange-soft:   #fff1e0;

    /* Stati */
    --ok:            #12a664;
    --ok-bg:         #e3f8ee;
    --ok-border:     #b6ecd2;
    --warn:          var(--orange);
    --warn-bg:       var(--orange-soft);
    --danger:        #e0342c;
    --danger-bg:     #fdeceb;
    --danger-border: #f7c3bf;
    --offline:       #64748b;
    --offline-bg:    #eef1f6;

    /* Forma */
    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 10px rgba(16,42,76,.06);
    --shadow:    0 10px 30px rgba(16,42,76,.10);
    --shadow-lg: 0 24px 55px rgba(16,42,76,.16);

    --grad-navy:  linear-gradient(135deg, var(--navy-800), var(--navy-700) 55%, var(--navy-600));
    --grad-hero:  linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 48%, var(--blue-accent) 100%);
    --grad-accent: linear-gradient(135deg, var(--blue-accent), var(--cyan-accent));

    --font-main: "Inter","Segoe UI",Roboto,Arial,sans-serif;
    --container: 1180px;
}

/* ===================== RESET ===================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:var(--font-main);
    background:var(--bg);
    color:var(--text);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.18; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--text-soft); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 24px;
}
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.section-alt{ background:var(--surface-alt); }
.section-navy{ background:var(--grad-navy); color:var(--text-on-navy); }
.section-navy p{ color:var(--text-on-navy-soft); }
.section-navy h2, .section-navy h3{ color:#fff; }

.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
    color:var(--blue-accent);
    background:rgba(47,111,237,.08);
    padding:6px 14px;
    border-radius:var(--radius-pill);
    margin-bottom:16px;
}
.section-navy .eyebrow{ color:#bfe0ff; background:rgba(255,255,255,.10); }

.section-head{ max-width:680px; margin:0 auto 48px; text-align:center; }
.section-head h2{ font-size:clamp(26px,3.4vw,38px); }
.section-head p{ font-size:16.5px; }

/* ===================== BOTTONI ===================== */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 26px;
    border-radius:var(--radius-pill);
    font-weight:700; font-size:15px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
    white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
    background:var(--grad-accent);
    color:#fff;
    box-shadow:0 10px 24px rgba(47,111,237,.32);
}
.btn-primary:hover{ box-shadow:0 14px 30px rgba(47,111,237,.42); }
.btn-outline{
    background:transparent;
    border-color:rgba(20,33,61,.18);
    color:var(--text);
}
.btn-outline:hover{ border-color:var(--blue-accent); color:var(--blue-accent); }
.section-navy .btn-outline{ border-color:rgba(255,255,255,.35); color:#fff; }
.section-navy .btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-white{
    background:#fff; color:var(--navy-800);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.btn-ghost-navy{
    background:rgba(255,255,255,.10);
    color:#fff;
    border-color:rgba(255,255,255,.28);
}
.btn-sm{ padding:10px 18px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn[disabled], .btn.is-disabled{
    opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important;
}
.btn-whatsapp{ background:#22c55e; color:#fff; }
.btn-telegram{ background:#229ED9; color:#fff; }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ===================== HEADER / NAV ===================== */
.site-header{
    position:sticky; top:0; z-index:1000;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
}
.nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
    max-width:var(--container);
    margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:17px; color:var(--navy-900); }
.brand-icon{
    width:38px; height:38px; border-radius:11px;
    background:var(--grad-navy); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    box-shadow:0 0 0 1px rgba(47,111,237,.25), 0 6px 16px rgba(23,64,122,.3);
}
.nav-links{ display:flex; align-items:center; gap:2px; flex-wrap:nowrap; }
.nav-links a{
    padding:8px 13px;
    font-size:14.5px; font-weight:600; color:var(--text-soft);
    white-space:nowrap; position:relative;
    transition:color .15s;
}
.nav-links a::after{
    content:""; position:absolute; left:13px; right:13px; bottom:2px; height:2px;
    background:var(--blue-accent); border-radius:2px;
    transform:scaleX(0); transform-origin:left; transition:transform .15s ease;
}
.nav-links a:hover{ color:var(--navy-900); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--navy-900); }
.nav-links a.active::after{ transform:scaleX(1); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-cta{
    background:var(--surface-alt); color:var(--navy-900) !important;
    padding:8px 15px; border-radius:var(--radius-pill);
    font-weight:700; font-size:13px;
    display:inline-flex; align-items:center; gap:7px;
    border:1px solid var(--border);
    transition:background .15s, border-color .15s, color .15s;
    white-space:nowrap;
}
.nav-cta:hover{ background:#fff; border-color:var(--blue-accent); color:var(--blue-accent) !important; }
.menu-toggle{
    display:none; background:none; border:none; font-size:22px; color:var(--navy-900);
    padding:6px 8px; cursor:pointer;
}

@media(max-width:900px){
    .nav-links{
        position:fixed; top:100%; left:0; right:0; height:100vh; background:#fff;
        flex-direction:column; align-items:stretch; gap:2px;
        padding:18px; overflow-y:auto;
        transform:translateY(-12px); opacity:0; pointer-events:none;
        transition:opacity .18s ease, transform .18s ease;
    }
    .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .nav-links a{ padding:14px 16px; font-size:16px; border-bottom:1px solid var(--border); }
    .nav-links a::after{ display:none; }
    .nav-links a:hover, .nav-links a.active{ background:var(--surface-alt); }
    .menu-toggle{ display:block; }
    .nav-actions .nav-cta span{ display:none; }
}

/* ===================== HERO ===================== */
.hero{
    background:var(--grad-hero);
    color:#fff;
    padding:76px 0 96px;
    position:relative;
    overflow:hidden;
}
.hero::before{
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(circle at 12% 20%, rgba(56,189,248,.25), transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(242,121,10,.18), transparent 50%);
    pointer-events:none;
}
.hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
    position:relative;
}
.hero h1{ font-size:clamp(32px,4.6vw,52px); }
.hero .lead{ font-size:18px; color:var(--text-on-navy-soft); max-width:520px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 30px; }
.hero-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:700; color:var(--text-on-navy-soft);
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
    padding:8px 14px; border-radius:var(--radius-pill);
}
.hero-badge i{ color:var(--cyan-accent); }

/* Pannello demo nella hero */
.hero-panel{
    background:rgba(13,33,60,.55);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius-lg);
    padding:20px;
    backdrop-filter:blur(6px);
    box-shadow:var(--shadow-lg);
}
.hero-panel-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:14px;
}
.hero-panel-title{ font-size:13px; font-weight:800; color:#fff; letter-spacing:.3px; }
.demo-tag{
    font-size:10.5px; font-weight:800; letter-spacing:.5px;
    color:#0d213c; background:var(--cyan-accent);
    padding:4px 10px; border-radius:var(--radius-pill);
}
.mini-cards{ display:flex; flex-direction:column; gap:10px; }
.mini-card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--radius);
    padding:13px 16px;
    display:flex; align-items:center; justify-content:space-between;
    transition:background .3s ease;
}
.mini-card-name{ font-size:13.5px; font-weight:700; color:#fff; display:flex; align-items:center; gap:10px; }
.mini-card-name i{ color:var(--blue-accent-2); font-size:15px; }
.mini-status{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-ok{ background:var(--ok); box-shadow:0 0 0 3px rgba(18,166,100,.25); }
.dot-alarm{ background:var(--danger); box-shadow:0 0 0 3px rgba(224,52,44,.28); animation:blink 1s infinite; }
.dot-off{ background:#7c8aa8; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
.mini-card-temp{ font-size:17px; font-weight:800; color:#fff; min-width:76px; text-align:right; font-variant-numeric:tabular-nums; }
.status-ok{ color:var(--ok); }
.status-alarm{ color:#ffb4ae; }

/* ===================== SEZIONI GENERICHE ===================== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:980px){
    .hero-grid, .grid-2{ grid-template-columns:1fr; }
    .grid-3{ grid-template-columns:1fr 1fr; }
    .grid-4{ grid-template-columns:1fr 1fr; }
}
@media(max-width:620px){
    .grid-3, .grid-4{ grid-template-columns:1fr; }
}

.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:26px;
    box-shadow:var(--shadow-sm);
    transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.card-icon{
    width:46px; height:46px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(47,111,237,.10); color:var(--blue-accent);
    font-size:19px; margin-bottom:16px;
}
.card h3{ font-size:17.5px; }
.card p{ font-size:14.5px; margin-bottom:0; }

/* Messaggio principale a tutta larghezza */
.statement{
    text-align:center;
    max-width:760px;
    margin:0 auto;
}
.statement h2{ font-size:clamp(24px,3.6vw,34px); color:var(--navy-900); }
.statement .sub{ font-size:16.5px; color:var(--text-soft); }

/* ===================== COME FUNZIONA — STEP ===================== */
.steps{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    position:relative;
    counter-reset:step;
}
.step{
    position:relative;
    text-align:center;
    padding:0 18px;
}
.step-num{
    width:54px; height:54px; margin:0 auto 18px;
    border-radius:50%;
    background:var(--grad-navy); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:17px;
    box-shadow:0 8px 20px rgba(23,64,122,.28);
    position:relative; z-index:2;
}
.step-icon{ font-size:26px; color:var(--blue-accent); margin-bottom:10px; }
.step h3{ font-size:16px; }
.step p{ font-size:14px; }
.steps-connector{
    position:absolute; top:27px; left:12%; right:12%;
    height:2px; background:repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px);
    z-index:1;
}
@media(max-width:900px){
    .steps{ grid-template-columns:1fr; gap:34px; }
    .steps-connector{ display:none; }
}

.flow-diagram{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
    gap:14px; margin-top:44px;
}
.flow-node{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 20px; display:flex; align-items:center; gap:10px;
    font-weight:700; font-size:14px; box-shadow:var(--shadow-sm);
}
.flow-node i{ color:var(--blue-accent); font-size:17px; }
.flow-arrow{ color:var(--text-faint); font-size:18px; }

/* ===================== DEMO LIVE ===================== */
.demo-banner{
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--navy-900); color:#fff;
    padding:12px 18px; border-radius:var(--radius-pill);
    font-size:13px; font-weight:800; letter-spacing:.3px;
    max-width:max-content; margin:0 auto 30px;
}
.demo-banner .demo-tag{ background:var(--cyan-accent); color:var(--navy-900); }

.scenario-bar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:18px 22px; margin-bottom:26px; box-shadow:var(--shadow-sm);
}
.scenario-bar h3{ margin:0; font-size:15px; }
.scenario-bar p{ margin:2px 0 0; font-size:13px; }

.device-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:760px){ .device-grid{ grid-template-columns:1fr; } }

.device-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:22px; box-shadow:var(--shadow-sm); cursor:pointer;
    transition:transform .15s, box-shadow .15s, border-color .15s;
    border-left:5px solid var(--ok);
    position:relative;
}
.device-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.device-card.is-alarm{ border-left-color:var(--danger); animation:alarmPulse 1.3s infinite; }
.device-card.is-offline{ border-left-color:var(--offline); }
@keyframes alarmPulse{
    0%,100%{ box-shadow:var(--shadow-sm); }
    50%{ box-shadow:0 0 0 6px rgba(224,52,44,.12), var(--shadow-sm); }
}
.device-card-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.device-name{ font-weight:800; font-size:15.5px; display:flex; align-items:center; gap:10px; }
.device-name i{ color:var(--blue-accent); }
.badge{
    display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
    padding:5px 11px; border-radius:var(--radius-pill); letter-spacing:.3px;
}
.badge-ok{ background:var(--ok-bg); color:var(--ok); }
.badge-alarm{ background:var(--danger-bg); color:var(--danger); }
.badge-offline{ background:var(--offline-bg); color:var(--offline); }
.device-temps{ display:flex; gap:14px; margin-bottom:12px; }
.device-temp{ flex:1; background:var(--surface-alt); border-radius:var(--radius); padding:10px 10px 12px; text-align:center; }
.device-temp .val{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.device-temp.alarm .val{ color:var(--danger); }
.device-temp .lbl{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

/* Termómetro igual al del panel de administración real (gauge SVG,
   viewBox cuadrado 120x120, con la lectura numérica ya dentro del SVG),
   dentro de .device-temp */
.gauge-svg{ width:100%; max-width:118px; height:auto; display:block; margin:0 auto; overflow:visible; }

/* Mini gráfico con las últimas 5 lecturas, debajo del gauge */
.sparkline-wrap{ margin-top:4px; }
.sparkline-svg{ width:100%; max-width:96px; height:22px; display:block; margin:0 auto; overflow:visible; }

.device-meta{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 12px; font-size:12px; color:var(--text-faint); }

/* Indicador de señal Wi-Fi (RSSI), dentro de .device-meta */
.signal-bars{ display:inline-flex; align-items:center; gap:5px; }
.signal-bars-svg{ width:18px; height:15px; flex:none; }
.signal-bars-txt{ font-size:11px; font-variant-numeric:tabular-nums; }
.device-cta{ margin-top:12px; font-size:12.5px; font-weight:700; color:var(--blue-accent); display:flex; align-items:center; gap:6px; }

/* Banner allarme grande, sopra la griglia */
.alarm-flash{
    display:none;
    align-items:center; gap:16px;
    background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger);
    border-radius:var(--radius-lg); padding:18px 22px; margin-bottom:22px;
}
.alarm-flash.show{ display:flex; }
.alarm-flash.resolved{ background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok); }
.alarm-flash i{ font-size:26px; }
.alarm-flash strong{ display:block; font-size:14.5px; }
.alarm-flash span{ font-size:13px; opacity:.85; }

/* Variante banner per la Demo Live con dati reali (da distinguere bene
   dalla pagina di simulazione, che resta con il banner navy/ciano) */
.demo-banner.is-live{ background:var(--blue-accent); }
.demo-banner.is-live .demo-tag{ background:#fff; color:var(--blue-accent); }

/* Stato vuoto/errore per la Demo Live con dati reali: nessun nodo demo
   configurato ancora, oppure nodo momentaneamente non raggiungibile. */
.empty-state-card{
    background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-lg);
    padding:40px 30px; text-align:center; max-width:560px; margin:0 auto;
}
.empty-state-card i{ font-size:30px; color:var(--text-faint); margin-bottom:14px; display:block; }
.empty-state-card h3{ font-size:17px; margin-bottom:8px; }
.empty-state-card p{ font-size:14px; color:var(--text-soft); margin-bottom:20px; }

.device-card.is-loading{ opacity:.6; }

/* Pannello dettaglio dispositivo */
.detail-panel{
    position:fixed; inset:0; background:rgba(10,17,30,.55);
    display:none; align-items:flex-end; justify-content:center;
    z-index:2000; padding:0;
}
.detail-panel.open{ display:flex; }
.detail-sheet{
    background:#fff; width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
    border-radius:22px 22px 0 0;
    padding:26px 26px 34px;
    box-shadow:0 -20px 60px rgba(0,0,0,.35);
}
@media(min-width:760px){
    .detail-panel{ align-items:center; }
    .detail-sheet{ border-radius:22px; max-height:82vh; }
}
.detail-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.detail-close{ background:var(--surface-alt); border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:15px; color:var(--text-soft); }
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.detail-stat{ background:var(--surface-alt); border-radius:var(--radius); padding:14px; }
.detail-stat .v{ font-size:20px; font-weight:800; }
.detail-stat .l{ font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.3px; }
.chart-wrap{ margin:20px 0; }
.history-table{ width:100%; border-collapse:collapse; font-size:13px; }
.history-table th{ text-align:left; font-size:11px; text-transform:uppercase; color:var(--text-faint); padding:6px 8px; border-bottom:1px solid var(--border); }
.history-table td{ padding:8px; border-bottom:1px solid var(--border-soft, var(--border)); }

/* ===================== TIMELINE / STORICO CHART ===================== */
.chart-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:26px; box-shadow:var(--shadow-sm);
}
.chart-axis text{ font-family:var(--font-main); }

/* ===================== ALLARMI ===================== */
.alarm-types{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:900px){ .alarm-types{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .alarm-types{ grid-template-columns:1fr; } }
.alarm-type-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:22px; text-align:left; box-shadow:var(--shadow-sm);
    border-top:4px solid var(--danger);
}
.alarm-type-card.type-offline{ border-top-color:var(--offline); }
.alarm-type-card.type-door{ border-top-color:var(--orange); }
.alarm-type-card.type-ok{ border-top-color:var(--ok); }
.alarm-type-card i{ font-size:22px; margin-bottom:12px; display:block; }
.alarm-type-card.type-offline i{ color:var(--offline); }
.alarm-type-card.type-door i{ color:var(--orange); }
.alarm-type-card.type-ok i{ color:var(--ok); }
.alarm-type-card:not(.type-offline):not(.type-door):not(.type-ok) i{ color:var(--danger); }

/* ===================== NOTIFICHE ===================== */
.notif-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:900px){ .notif-grid{ grid-template-columns:1fr 1fr; } }
.notif-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:22px; text-align:center;
}
.notif-card i{ font-size:26px; margin-bottom:10px; }
.notif-card.active{ border-color:var(--ok-border); }
.notif-status{ display:inline-block; margin-top:8px; font-size:11px; font-weight:800; padding:4px 10px; border-radius:var(--radius-pill); }
.notif-status.on{ background:var(--ok-bg); color:var(--ok); }
.notif-status.soon{ background:var(--surface-alt); color:var(--text-faint); }

/* ===================== SMARTPHONE MOCKUP ===================== */
.phone-mock{
    width:280px; margin:0 auto;
    background:var(--navy-950); border-radius:38px; padding:14px;
    box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.phone-screen{
    background:var(--bg); border-radius:26px; overflow:hidden; padding:16px 14px 22px;
}
.phone-notch{ width:70px; height:6px; background:#000; border-radius:6px; margin:0 auto 12px; }
.phone-app-title{ font-weight:800; font-size:13px; color:var(--navy-900); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.phone-card{
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px; margin-bottom:10px;
    display:flex; justify-content:space-between; align-items:center;
}
.phone-card .name{ font-size:12.5px; font-weight:700; }
.phone-card .status{ font-size:10px; font-weight:800; margin-top:3px; }
.phone-card .temp{ font-size:17px; font-weight:800; }

/* ===================== INSTALLAZIONE ===================== */
.install-flow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.hw-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
@media(max-width:620px){ .hw-list{ grid-template-columns:1fr; } }
.hw-item{ display:flex; gap:14px; align-items:flex-start; }
.hw-item i{ width:40px; height:40px; min-width:40px; border-radius:11px; background:rgba(47,111,237,.10); color:var(--blue-accent); display:flex; align-items:center; justify-content:center; font-size:16px; }
.hw-item h4{ margin:0 0 4px; font-size:14.5px; }
.hw-item p{ font-size:13.5px; margin:0; }

/* ===================== FOTO PLACEHOLDER ===================== */
.photo-placeholder{
    aspect-ratio:4/3; border-radius:var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(47,111,237,.10), rgba(34,211,238,.08)),
        repeating-linear-gradient(45deg, rgba(20,33,61,.035) 0 2px, transparent 2px 14px);
    border:1px dashed rgba(20,33,61,.18);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    color:var(--text-faint); text-align:center; padding:16px;
}
.photo-placeholder i{ font-size:26px; color:var(--blue-accent); opacity:.6; }
.photo-placeholder span{ font-size:12px; font-weight:700; }

/* ===================== ILLUSTRAZIONI / MOCKUP =====================
   Sostituiscono i placeholder finché non arrivano le fotografie reali.
   Le illustrazioni (SVG) hanno la didascalia già incorporata nel disegno;
   i mockup del pannello (PNG) hanno una didascalia HTML sotto, per essere
   sempre chiari sul fatto che non sono screenshot dal vivo. */
.illustration-card{
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    background:var(--surface);
}
.illustration-card img{ width:100%; height:auto; display:block; }
.illustration-caption{
    font-size:12px; color:var(--text-faint); text-align:center;
    margin-top:10px;
}
.mockup-card{
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    background:var(--surface);
    padding:14px;
}
.mockup-card img{ width:100%; height:auto; display:block; border-radius:10px; }

/* ===================== PER CHI È / SETTORI ===================== */
.sector-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .sector-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .sector-grid{ grid-template-columns:1fr; } }
.sector-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:22px; text-align:center;
}
.sector-card i{ font-size:24px; color:var(--blue-accent); margin-bottom:10px; }
.sector-card h4{ font-size:14.5px; margin:0; }

/* ===================== FORM CONTATTI ===================== */
.form-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:32px; box-shadow:var(--shadow-sm);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:620px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--text); }
.field input, .field select, .field textarea{
    width:100%; padding:12px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:var(--surface-alt);
    font-family:inherit; font-size:14.5px; color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--blue-accent); background:#fff;
    box-shadow:0 0 0 3px rgba(47,111,237,.14);
}
.field textarea{ resize:vertical; min-height:110px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-soft); margin-bottom:20px; }
.checkbox-row input{ margin-top:3px; }
.form-note{ font-size:12.5px; color:var(--text-faint); margin-top:14px; }
.form-success{
    display:none; background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-border);
    border-radius:var(--radius); padding:16px 18px; font-size:14px; font-weight:700; margin-bottom:18px;
}
.form-success.show{ display:block; }

.quick-contacts{ display:flex; flex-direction:column; gap:12px; }
.quick-contact{
    display:flex; align-items:center; gap:14px; padding:16px 18px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}
.quick-contact i{ font-size:20px; width:34px; text-align:center; }
.quick-contact .wa{ color:#22c55e; }
.quick-contact .tg{ color:#229ED9; }
.quick-contact .op{ color:var(--blue-accent); }
.quick-contact .txt strong{ display:block; font-size:14px; }
.quick-contact .txt span{ font-size:12.5px; color:var(--text-faint); }
.soon-badge{
    margin-left:auto; font-size:10.5px; font-weight:800; color:var(--text-faint);
    background:var(--surface-alt); padding:4px 9px; border-radius:var(--radius-pill);
}

/* ===================== FOOTER ===================== */
.site-footer{ background:var(--navy-950); color:var(--text-on-navy-soft); padding:56px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:40px; }
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:16px; margin-bottom:12px; }
.footer-col h5{ color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; }
.footer-col a, .footer-col li{ display:block; font-size:13.5px; margin-bottom:10px; color:var(--text-on-navy-soft); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.10); padding-top:22px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:12.5px; color:#8393b8;
}

/* ===================== CHAT WIDGET ===================== */
.chat-launcher{
    position:fixed; right:22px; bottom:22px; z-index:1500;
    width:60px; height:60px; border-radius:50%;
    background:var(--grad-navy); color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:22px;
    box-shadow:0 14px 30px rgba(13,33,60,.4);
}
.chat-box{
    position:fixed; right:22px; bottom:92px; z-index:1500;
    width:300px; max-width:calc(100vw - 44px);
    background:#fff; border-radius:20px; box-shadow:var(--shadow-lg);
    border:1px solid var(--border);
    display:none; overflow:hidden;
}
.chat-box.open{ display:block; }
.chat-box-head{ background:var(--grad-navy); color:#fff; padding:16px 18px; }
.chat-box-head strong{ display:block; font-size:14.5px; }
.chat-box-head span{ font-size:12px; color:var(--text-on-navy-soft); }
.chat-box-body{ padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.chat-option{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:12px; border:1px solid var(--border);
    background:var(--surface-alt); cursor:pointer; font-size:13.5px; font-weight:700; color:var(--text);
}
.chat-option i{ font-size:17px; }
.chat-option.wa i{ color:#22c55e; }
.chat-option.tg i{ color:#229ED9; }
.chat-option.req i{ color:var(--blue-accent); }

/* ===================== TOAST ===================== */
.toast{
    position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
    background:var(--navy-900); color:#fff; padding:13px 20px; border-radius:var(--radius-pill);
    font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg);
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
    z-index:3000; max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ===================== NOTIFICA PUSH SIMULATA =====================
   Riproduce l'aspetto di una notifica su telefono/Telegram, per far
   vedere visivamente cosa arriva quando scatta un allarme o un nodo
   torna online/offline. Solo visuale: nessun invio reale, nessuna API. */
.push-stack{
    position:fixed; top:16px; right:16px; z-index:4000;
    display:flex; flex-direction:column; gap:10px;
    width:340px; max-width:calc(100vw - 32px);
    pointer-events:none;
}
@media(max-width:640px){
    .push-stack{ top:12px; right:12px; left:12px; width:auto; }
}
.push-notif{
    pointer-events:auto;
    background:var(--surface); border:1px solid var(--border); border-left:5px solid var(--blue-accent);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
    opacity:0; transform:translateX(24px); transition:opacity .25s ease, transform .25s ease;
}
.push-notif.show{ opacity:1; transform:translateX(0); }
.push-notif.type-alarm{ border-left-color:var(--danger); }
.push-notif.type-ok{ border-left-color:var(--ok); }
.push-notif.type-offline{ border-left-color:var(--offline); }
.push-notif-icon{
    width:36px; height:36px; border-radius:10px; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    background:rgba(47,111,237,.10); color:var(--blue-accent);
}
.push-notif.type-alarm .push-notif-icon{ background:var(--danger-bg); color:var(--danger); }
.push-notif.type-ok .push-notif-icon{ background:var(--ok-bg); color:var(--ok); }
.push-notif.type-offline .push-notif-icon{ background:var(--offline-bg); color:var(--offline); }
.push-notif-body{ flex:1; min-width:0; }
.push-notif-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.push-notif-app{ font-size:11px; font-weight:800; letter-spacing:.3px; color:var(--text-faint); text-transform:uppercase; }
.push-notif-time{ font-size:11px; color:var(--text-faint); flex:none; }
.push-notif-title{ font-size:13.5px; font-weight:800; margin:2px 0 2px; color:var(--text); }
.push-notif-text{ font-size:13px; color:var(--text-soft); line-height:1.4; }
.push-notif-close{
    background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:13px;
    padding:2px; line-height:1; flex:none; margin-left:4px;
}

/* ===================== SELETTORE LINGUA ===================== */
.lang-switch{
    display:flex; align-items:center; gap:3px;
    font-size:12px; font-weight:800; letter-spacing:.2px;
    margin-right:6px;
}
.lang-switch a{ display:inline-flex; align-items:center; gap:4px; padding:5px 7px; border-radius:7px; color:var(--text-faint); }
.lang-switch a:hover{ background:var(--surface-alt); }
.lang-switch a.active{ color:var(--blue-accent); background:rgba(47,111,237,.10); }
.lang-switch .sep{ color:var(--border); font-weight:400; }
.lang-switch .flag{
    width:16px; height:12px; border-radius:2px; display:inline-block;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
    flex:none;
}
.lang-switch .flag-it{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='1' height='2' fill='%23009246'/><rect width='1' height='2' x='1' fill='%23fff'/><rect width='1' height='2' x='2' fill='%23ce2b37'/></svg>"); }
.lang-switch .flag-es{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'><rect width='3' height='2' fill='%23aa151b'/><rect width='3' height='1' y='0.5' fill='%23f1bf00'/></svg>"); }

/* ===================== UTILS ===================== */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.small{ font-size:12.5px; color:var(--text-faint); }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Anchor offset per sticky header */
section[id]{ scroll-margin-top:88px; }