/* ==========================================================================
   Operator99 — foglio di stile condiviso
   Generato da build.py unendo le tre bozze originali (_sorgenti/).
   Modificare qui, non nelle singole pagine.
   ========================================================================== */

:root{
  --bg:#02060b;
  --panel:#07111a;
  --panel2:#0b1722;
  --text:#f3f8ff;
  --muted:#91a4b5;
  --blue:#00aeff;
  --blue2:#006dff;
  --green:#20f59a;
  --amber:#ffd166;
  --red:#ff4b55;
  --purple:#a855f7;
  --line:rgba(0,174,255,.28);
  --line2:rgba(255,255,255,.10);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; color:var(--text); font-family:"Segoe UI",Roboto,Arial,sans-serif; overflow-x:hidden; background: radial-gradient(circle at 78% 10%, rgba(0,174,255,.16), transparent 30%), radial-gradient(circle at 18% 70%, rgba(0,109,255,.10), transparent 34%), linear-gradient(180deg,#02060b 0%,#030914 52%,#02060b 100%) }
body:before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-2; opacity:.72; background-image:linear-gradient(rgba(0,174,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,174,255,.055) 1px,transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle at center, black, transparent 88%) }
a{ color:inherit; text-decoration:none }
.page{ width:min(1220px,calc(100% - 36px)); margin:auto }
.nav{ position:sticky; top:0; z-index:10; background:rgba(2,6,11,.74); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.08) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px; font-weight:900; font-size:22px; letter-spacing:-.03em }
.brand-mark{ width:38px; height:38px; display:grid; place-items:center; clip-path:polygon(50% 0,93% 24%,93% 76%,50% 100%,7% 76%,7% 24%); border:1px solid rgba(255,255,255,.26); background:linear-gradient(145deg,rgba(0,174,255,.2),rgba(255,255,255,.035)); box-shadow:0 0 18px rgba(0,174,255,.24), inset 0 0 20px rgba(0,174,255,.12); font-size:15px }
.brand b{ color:var(--blue) }
.nav-links{ display:flex; gap:28px; color:#c5d2dd; font-size:13px; font-weight:700 }
.nav-actions{ display:flex; gap:10px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 20px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(255,255,255,.03); font-weight:850; font-size:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) }
.btn.primary{ border-color:rgba(0,174,255,.8); background:linear-gradient(135deg,var(--blue2),#003fc4); box-shadow:0 0 22px rgba(0,109,255,.28), inset 0 0 20px rgba(255,255,255,.13) }
.btn.premium{ border-color:rgba(168,85,247,.8); background:linear-gradient(135deg,#7c3aed,#0b5fff); box-shadow:0 0 22px rgba(168,85,247,.22), inset 0 0 20px rgba(255,255,255,.12) }
.hero{ padding:84px 0 62px }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:center }
.eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; color:var(--blue); text-transform:uppercase; letter-spacing:.22em; font-weight:900; font-size:12px }
.eyebrow:before{ content:""; width:36px; height:2px; background:var(--blue); box-shadow:0 0 16px var(--blue) }
h1{ margin:0; font-size:clamp(48px,6.2vw,86px); line-height:.93; letter-spacing:-.055em; text-transform:uppercase; font-weight:950 }
.metal{ background:linear-gradient(180deg,#fff,#aeb8c1 45%,#fff 48%,#68727a); -webkit-background-clip:text; color:transparent; filter:drop-shadow(0 10px 22px rgba(0,0,0,.65)) }
.blue-text{ background:linear-gradient(180deg,#1bd6ff,#008dff 62%,#0064e8); -webkit-background-clip:text; color:transparent; text-shadow:0 0 28px rgba(0,174,255,.35) }
.premium-text{ background:linear-gradient(180deg,#d9b8ff,#a855f7 55%,#007aff); -webkit-background-clip:text; color:transparent; text-shadow:0 0 30px rgba(168,85,247,.28) }
.hero p{ max-width:680px; color:#c8d4df; font-size:19px; line-height:1.55; margin:22px 0 28px }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px }
.hero-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:760px }
.micro-card{ border:1px solid var(--line); background:linear-gradient(180deg,rgba(6,17,26,.72),rgba(4,10,15,.55)); border-radius:10px; padding:15px; display:flex; align-items:center; gap:12px; min-height:78px }
.micro-icon{ width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(0,174,255,.75); border-radius:9px; color:var(--blue); font-size:20px; background:rgba(0,174,255,.08); box-shadow:0 0 16px rgba(0,174,255,.14); flex:0 0 auto }
.micro-card strong{ display:block; font-size:14px; line-height:1.15 }
.micro-card small{ color:var(--muted); font-size:12px; line-height:1.25; display:block; margin-top:4px }
.dash-wrap{ position:relative; min-height:610px; display:grid; place-items:center }
.radar{ position:absolute; width:540px; height:540px; border-radius:50%; background:repeating-radial-gradient(circle,rgba(0,174,255,.24) 0 1px,transparent 1px 54px),conic-gradient(from -25deg,transparent 0 70%,rgba(0,174,255,.34),transparent 78%); opacity:.62; filter:drop-shadow(0 0 22px rgba(0,174,255,.22)); animation:pulse 4s ease-in-out infinite }
@keyframes pulse{ 50%{opacity:.85; transform:scale(1.025)} }
.control-panel{ position:relative; width:min(520px,92vw); min-height:560px; padding:20px; border:1px solid rgba(0,174,255,.34); border-radius:24px; background:radial-gradient(circle at 90% 5%,rgba(0,174,255,.18),transparent 28%),linear-gradient(180deg,rgba(6,17,27,.86),rgba(2,7,12,.82)); box-shadow:0 24px 90px rgba(0,0,0,.65),0 0 44px rgba(0,174,255,.12); transform:rotate(1.5deg); overflow:hidden }
.control-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; color:#d8e8f6; font-size:13px }
.control-top b{ color:var(--blue) }
.mission-card{ border:1px solid rgba(0,174,255,.28); background:linear-gradient(180deg,rgba(12,28,43,.75),rgba(5,12,18,.75)); border-radius:16px; padding:16px; box-shadow:0 0 26px rgba(0,174,255,.08); margin-bottom:14px }
.mission-head{ display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:12px }
.mission-head strong{ font-size:18px }
.status{ color:var(--green); font-size:11px; border:1px solid rgba(32,245,154,.45); padding:4px 8px; border-radius:999px; background:rgba(32,245,154,.08) }
.kpi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px }
.kpi{ border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); border-radius:12px; padding:12px }
.kpi small{ display:block; color:#8fa0ad; font-size:11px; text-transform:uppercase; letter-spacing:.08em }
.kpi b{ display:block; color:#fff; font-size:26px; margin-top:3px }
.kpi b.blue{ color:var(--blue) }
.kpi b.green{ color:var(--green) }
.mini-map{ height:170px; border:1px solid rgba(0,174,255,.20); border-radius:16px; background:radial-gradient(circle at 35% 48%,rgba(0,174,255,.35),transparent 5%),radial-gradient(circle at 60% 32%,rgba(0,174,255,.28),transparent 4%),radial-gradient(circle at 76% 58%,rgba(32,245,154,.24),transparent 4%),linear-gradient(135deg,rgba(0,174,255,.06),transparent),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 38px); position:relative; overflow:hidden; margin-bottom:14px }
.mini-map:before{ content:"Mission Map"; position:absolute; top:10px; left:12px; color:#fff; font-weight:850; font-size:12px; text-transform:uppercase; letter-spacing:.08em }
.pin{ position:absolute; width:22px; height:22px; border:2px solid var(--blue); border-radius:50%; box-shadow:0 0 18px rgba(0,174,255,.65) }
.pin.one{ left:34%; top:46% }
.pin.two{ left:58%; top:30% }
.pin.three{ left:74%; top:56%; border-color:var(--green); box-shadow:0 0 18px rgba(32,245,154,.45) }
.candidate-list{ display:grid; gap:10px }
.candidate{ display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:11px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); border-radius:13px }
.avatar{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:linear-gradient(135deg,#6a7c89,#131a22); position:relative }
.avatar:after{ content:""; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:var(--green); border:2px solid #06111b }
.candidate strong{ display:block; font-size:14px }
.candidate span{ display:block; color:#8fa0ad; font-size:12px; margin-top:2px }
.candidate .accept{ color:var(--green); font-weight:900 }
section{ padding:74px 0 }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:26px; margin-bottom:28px }
.section-head h2{ margin:0; font-size:clamp(34px,4.2vw,58px); line-height:.98; text-transform:uppercase; letter-spacing:-.04em }
.section-head p{ max-width:590px; color:#a9b7c5; line-height:1.5; font-size:17px; margin:0 }
.steps{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px }
.step{ position:relative; min-height:260px; padding:20px; border:1px solid rgba(0,174,255,.22); background:linear-gradient(180deg,rgba(7,17,26,.76),rgba(3,8,13,.72)); border-radius:16px; overflow:hidden }
.step:after{ content:""; position:absolute; inset:auto -30px -40px auto; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(0,174,255,.18),transparent 60%) }
.step-num{ width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(0,174,255,.65); border-radius:12px; color:var(--blue); font-weight:950; margin-bottom:18px; background:rgba(0,174,255,.06) }
.step h3{ margin:0 0 10px; font-size:20px; line-height:1.12 }
.step p{ margin:0; color:#a6b4c0; line-height:1.45; font-size:14px }
.benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.benefit{ border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(9,18,27,.70),rgba(4,9,14,.68)); border-radius:18px; padding:22px; min-height:218px; position:relative; overflow:hidden }
.benefit:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--blue),transparent); box-shadow:0 0 16px var(--blue) }
.benefit-icon{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; border:1px solid rgba(0,174,255,.45); background:rgba(0,174,255,.08); color:var(--blue); font-size:24px; margin-bottom:16px }
.benefit h3{ margin:0 0 10px; font-size:22px }
.benefit p{ margin:0; color:#a9b7c5; line-height:1.5; font-size:15px }
.mission-flow{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch }
.flow-panel{ border:1px solid var(--line); background:linear-gradient(180deg,rgba(6,16,24,.82),rgba(3,8,13,.76)); border-radius:18px; padding:28px; min-height:390px }
.flow-panel h3{ font-size:28px; margin:0 0 18px; text-transform:uppercase; letter-spacing:-.02em }
.flow-list{ display:grid; gap:14px; margin:0; padding:0; list-style:none }
.flow-list li{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.03) }
.flow-list i{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--blue); border:1px solid rgba(0,174,255,.45); font-style:normal }
.flow-list strong{ display:block; margin-bottom:4px }
.flow-list span{ display:block; color:#a6b5c2; font-size:14px; line-height:1.35 }
.flow-panel.highlight{ border-color:rgba(32,245,154,.32); background:linear-gradient(180deg,rgba(6,24,20,.54),rgba(3,8,13,.76)) }
.status-board{ display:grid; gap:12px }
.status-line{ display:flex; justify-content:space-between; gap:12px; padding:15px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08) }
.status-line span{ color:#a9b7c5 }
.status-line b{ color:#fff; text-align:right }
.status-line.ok b{ color:var(--green) }
.status-line.warn b{ color:var(--amber) }
.status-line.blue b{ color:var(--blue) }
.premium-wrap{ border:1px solid rgba(168,85,247,.34); background:radial-gradient(circle at 78% 8%,rgba(168,85,247,.16),transparent 28%),linear-gradient(180deg,rgba(10,14,28,.86),rgba(3,8,13,.84)); border-radius:24px; padding:28px; box-shadow:0 0 44px rgba(168,85,247,.10) }
.premium-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:stretch; margin-top:22px }
.premium-map{ min-height:430px; border:1px solid rgba(0,174,255,.24); border-radius:18px; background:radial-gradient(circle at 32% 40%,rgba(0,174,255,.30),transparent 6%),radial-gradient(circle at 63% 58%,rgba(32,245,154,.24),transparent 5%),radial-gradient(circle at 76% 28%,rgba(168,85,247,.22),transparent 5%),linear-gradient(135deg,rgba(0,174,255,.07),rgba(168,85,247,.04)),repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 55px),repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 50px); position:relative; overflow:hidden; padding:18px }
.premium-map:after{ content:""; position:absolute; inset:12%; border:1px dashed rgba(0,174,255,.34); border-radius:50%; box-shadow:0 0 30px rgba(0,174,255,.14) }
.zone{ position:absolute; border:1px solid rgba(0,174,255,.55); background:rgba(0,174,255,.09); color:#fff; border-radius:10px; padding:8px 10px; font-size:12px; font-weight:850; z-index:2 }
.zone.a{ left:8%; top:20% }
.zone.b{ left:48%; top:11% }
.zone.c{ right:8%; top:34% }
.zone.d{ left:34%; bottom:16%; border-color:rgba(32,245,154,.65); background:rgba(32,245,154,.10) }
.live-pin{ position:absolute; width:38px; height:38px; border-radius:50%; border:2px solid var(--blue); box-shadow:0 0 24px rgba(0,174,255,.75); background:rgba(0,174,255,.12); z-index:3 }
.live-pin.p1{ left:28%; top:42% }
.live-pin.p2{ left:58%; top:51% }
.live-pin.p3{ right:20%; top:26%; border-color:var(--green); box-shadow:0 0 24px rgba(32,245,154,.45) }
.premium-features{ display:grid; gap:12px }
.premium-feature{ border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); border-radius:16px; padding:17px; display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start }
.picon{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; border:1px solid rgba(168,85,247,.60); color:#d9b8ff; background:rgba(168,85,247,.10); font-size:22px }
.premium-feature strong{ display:block; font-size:18px; margin-bottom:5px }
.premium-feature span{ display:block; color:#a9b7c5; line-height:1.38; font-size:14px }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.plan{ border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(9,18,27,.74),rgba(4,9,14,.70)); border-radius:20px; padding:24px; position:relative; overflow:hidden }
.plan.featured{ border-color:rgba(0,174,255,.60); box-shadow:0 0 34px rgba(0,174,255,.12); transform:translateY(-8px) }
.plan.premium-plan{ border-color:rgba(168,85,247,.58); box-shadow:0 0 34px rgba(168,85,247,.11) }
.plan h3{ margin:0 0 8px; font-size:26px }
.price{ font-size:34px; font-weight:950; margin:10px 0; color:#fff }
.price small{ font-size:13px; color:#8fa0ad; font-weight:700 }
.plan p{ color:#a9b7c5; line-height:1.45; margin:0 0 18px }
.plan ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.plan li{ color:#c8d4df; font-size:14px; line-height:1.35; display:flex; gap:8px }
.plan li:before{ content:"✓"; color:var(--green); font-weight:900 }
.legal-box{ border:1px solid rgba(0,174,255,.28); background:linear-gradient(135deg,rgba(0,174,255,.07),rgba(255,255,255,.025)); border-radius:22px; padding:30px; display:grid; grid-template-columns:1fr 1fr; gap:24px }
.legal-box h2{ margin:0 0 12px; font-size:clamp(32px,4vw,54px); line-height:1; text-transform:uppercase; letter-spacing:-.04em }
.legal-box p{ color:#c0ceda; line-height:1.55; font-size:17px; margin:0 }
.rule-list{ display:grid; gap:12px }
.rule{ display:flex; gap:12px; align-items:flex-start; padding:15px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(0,0,0,.18) }
.rule b{ color:var(--blue); font-size:20px }
.rule span{ color:#d1dce6; line-height:1.4 }
.cta{ padding:58px 0 84px }
.cta-box{ text-align:center; border:1px solid rgba(0,174,255,.55); background:radial-gradient(circle at 50% 0%,rgba(0,174,255,.20),transparent 35%),linear-gradient(180deg,rgba(8,17,25,.86),rgba(3,8,13,.82)); border-radius:24px; padding:46px 24px; box-shadow:0 0 44px rgba(0,174,255,.12) }
.cta-box h2{ margin:0 auto 14px; max-width:880px; font-size:clamp(34px,5vw,64px); line-height:1; text-transform:uppercase; letter-spacing:-.045em }
.cta-box p{ margin:0 auto 24px; color:#bdd0df; font-size:18px; line-height:1.5; max-width:760px }
footer{ border-top:1px solid rgba(255,255,255,.08); padding:28px 0; color:#7f90a0; font-size:13px }
.footer-inner{ display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-2; opacity:.72; background-image: linear-gradient(rgba(0,174,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,174,255,.055) 1px, transparent 1px); background-size:42px 42px; mask-image:radial-gradient(circle at center, black, transparent 88%) }
.btn:hover{ transform:translateY(-1px) }
.eyebrow::before{ content:""; width:36px; height:2px; background:var(--blue); box-shadow:0 0 16px var(--blue) }
.feature-list{ display:grid; gap:14px; margin-top:22px; max-width:540px }
.feature-row{ display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:center; padding:14px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(8,18,28,.72),rgba(4,10,15,.56)); border-radius:15px }
.feature-row i{ width:42px; height:42px; display:grid; place-items:center; font-style:normal; color:var(--blue); border:1px solid rgba(0,174,255,.54); background:rgba(0,174,255,.08); border-radius:13px; box-shadow:0 0 16px rgba(0,174,255,.12); font-size:21px }
.feature-row strong{ display:block; font-size:18px; margin-bottom:4px }
.feature-row span{ display:block; color:#a9b7c5; line-height:1.35; font-size:14px }
.preview-card{ position:relative; border:1px solid rgba(0,174,255,.33); border-radius:24px; padding:12px; background: radial-gradient(circle at 70% 20%, rgba(0,174,255,.14), transparent 24%), linear-gradient(180deg,rgba(6,17,27,.82),rgba(2,7,12,.76)); box-shadow:0 26px 90px rgba(0,0,0,.66),0 0 44px rgba(0,174,255,.10); overflow:hidden }
.preview-card::after{ content:""; position:absolute; inset:10%; border-radius:50%; background:repeating-radial-gradient(circle, rgba(0,174,255,.14) 0 1px, transparent 1px 46px); opacity:.45; pointer-events:none }
.preview-card img{ position:relative; z-index:2; display:block; width:100%; height:auto; border-radius:16px; border:1px solid rgba(255,255,255,.09) }
.benefit::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--blue),transparent); box-shadow:0 0 16px var(--blue) }
.control-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch }
.panel{ border:1px solid var(--line); background:linear-gradient(180deg,rgba(6,16,24,.82),rgba(3,8,13,.76)); border-radius:18px; padding:28px; min-height:390px }
.panel h3{ font-size:30px; margin:0 0 18px; text-transform:uppercase; letter-spacing:-.03em }
.list{ display:grid; gap:12px }
.item{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.03) }
.item i{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--blue); border:1px solid rgba(0,174,255,.45); font-style:normal }
.item strong{ display:block; margin-bottom:4px }
.item span{ display:block; color:#a6b5c2; font-size:14px; line-height:1.35 }
.workflow{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px }
.step::after{ content:""; position:absolute; inset:auto -30px -40px auto; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(0,174,255,.18),transparent 60%) }
.premium-box{ border:1px solid rgba(168,85,247,.34); background: radial-gradient(circle at 78% 8%, rgba(168,85,247,.16), transparent 28%), linear-gradient(180deg,rgba(10,14,28,.86),rgba(3,8,13,.84)); border-radius:24px; padding:30px; box-shadow:0 0 44px rgba(168,85,247,.10) }
.premium-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px }
.p-card{ border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); border-radius:16px; padding:18px }
.p-card i{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; border:1px solid rgba(168,85,247,.60); color:#d9b8ff; background:rgba(168,85,247,.10); font-style:normal; font-size:22px; margin-bottom:12px }
.p-card strong{ display:block; font-size:18px; margin-bottom:7px }
.p-card span{ color:#a9b7c5; line-height:1.4; font-size:14px }
.terminal{ position:relative; width:min(520px,92vw); padding:20px; border:1px solid rgba(0,174,255,.34); border-radius:24px; background:radial-gradient(circle at 90% 5%,rgba(0,174,255,.18),transparent 28%),linear-gradient(180deg,rgba(6,17,27,.86),rgba(2,7,12,.82)); box-shadow:0 24px 90px rgba(0,0,0,.65),0 0 44px rgba(0,174,255,.12); transform:rotate(1.5deg) }
.terminal-top{ display:flex; justify-content:space-between; color:#d8e8f6; font-size:13px; margin-bottom:16px }
.terminal-top b{ color:var(--blue) }
.status-card{ border:1px solid rgba(0,174,255,.28); background:linear-gradient(180deg,rgba(12,28,43,.75),rgba(5,12,18,.75)); border-radius:16px; padding:16px; margin-bottom:12px }
.flow-mini{ display:grid; gap:10px }
.flow-row{ display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:11px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); border-radius:13px }
.flow-row i{ font-style:normal; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; border:1px solid rgba(0,174,255,.45); color:var(--blue) }
.flow-row strong{ display:block; font-size:14px }
.flow-row span{ display:block; color:#8fa0ad; font-size:12px; margin-top:2px }
.flow-row b{ color:var(--green) }
.progress{ height:8px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top:14px }
.progress i{ display:block; width:72%; height:100%; background:linear-gradient(90deg,var(--blue),var(--blue2)); box-shadow:0 0 12px var(--blue) }
.timeline{ position:relative; display:grid; gap:16px }
.timeline:before{ content:""; position:absolute; left:32px; top:18px; bottom:18px; width:2px; background:linear-gradient(var(--blue),rgba(0,174,255,.05)) }
.t-step{ position:relative; display:grid; grid-template-columns:66px 1fr; gap:18px; align-items:start }
.t-num{ width:66px; height:66px; display:grid; place-items:center; border:1px solid rgba(0,174,255,.65); border-radius:18px; color:var(--blue); font-weight:950; background:rgba(0,174,255,.06); box-shadow:0 0 22px rgba(0,174,255,.10); z-index:1 }
.t-card{ border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(9,18,27,.72),rgba(4,9,14,.68)); border-radius:18px; padding:22px; min-height:118px }
.t-card h3{ margin:0 0 8px; font-size:24px }
.t-card p{ margin:0; color:#a9b7c5; line-height:1.5 }
.tag{ display:inline-flex; margin-top:12px; padding:6px 10px; border:1px solid rgba(0,174,255,.38); border-radius:999px; color:var(--blue); font-weight:850; font-size:12px; background:rgba(0,174,255,.06) }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.match-grid{ display:grid; grid-template-columns:1fr 120px 1fr; gap:18px; align-items:center }
.role-card{ border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(9,18,27,.74),rgba(4,9,14,.70)); border-radius:22px; padding:24px; min-height:310px }
.role-card h3{ margin:0 0 10px; font-size:28px }
.role-card p{ color:#a9b7c5; line-height:1.5 }
.role-card ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px }
.role-card li{ color:#c8d4df; font-size:14px }
.role-card li:before{ content:"✓"; color:var(--green); font-weight:900; margin-right:8px }
.connector{ display:grid; place-items:center; color:var(--blue); font-size:44px; filter:drop-shadow(0 0 18px rgba(0,174,255,.5)) }
.premium-strip{ border:1px solid rgba(168,85,247,.34); background:radial-gradient(circle at 78% 8%,rgba(168,85,247,.16),transparent 28%),linear-gradient(180deg,rgba(10,14,28,.86),rgba(3,8,13,.84)); border-radius:24px; padding:30px }

@media (max-width:1080px){
  .nav-links{ display:none }
  .hero-grid,.mission-flow,.premium-grid,.legal-box{ grid-template-columns:1fr }
  .dash-wrap{ min-height:520px }
  .steps{ grid-template-columns:repeat(3,1fr) }
  .benefits,.plans{ grid-template-columns:repeat(2,1fr) }
  .plan.featured{ transform:none }
  .hero-grid,.control-grid,.legal-box{ grid-template-columns:1fr }
  .workflow{ grid-template-columns:repeat(3,1fr) }
  .premium-cards{ grid-template-columns:repeat(2,1fr) }
  .hero-grid,.two-col,.legal-box{ grid-template-columns:1fr }
  .match-grid{ grid-template-columns:1fr }
  .connector{ transform:rotate(90deg) }
}

@media (max-width:720px){
  .page,.nav-inner{ width:min(100% - 24px,1220px) }
  .nav-actions .ghost{ display:none }
  .brand{ font-size:19px }
  .hero{ padding:52px 0 36px }
  .hero-badges,.benefits,.steps,.plans{ grid-template-columns:1fr }
  .section-head{ display:block }
  .section-head p{ margin-top:14px }
  .dash-wrap{ display:none }
  section{ padding:48px 0 }
  h1{ font-size:48px }
  .hero p{ font-size:17px }
  .btn{ width:100% }
  .hero-actions{ display:grid }
  .flow-panel,.premium-wrap,.legal-box{ padding:18px }
  .premium-map{ min-height:300px }
  .footer-inner{ display:grid }
  .hero-grid{ display:block }
  .preview-card{ margin-top:28px }
  .workflow,.benefits,.premium-cards{ grid-template-columns:1fr }
  .panel,.premium-box,.legal-box{ padding:18px }
  .hero-badges,.premium-cards{ grid-template-columns:1fr }
  .panel,.premium-strip,.legal-box{ padding:18px }
  .timeline:before{ left:24px }
  .t-step{ grid-template-columns:50px 1fr }
  .t-num{ width:50px; height:50px; border-radius:14px; font-size:13px }
  .t-card{ padding:16px }
  .t-card h3{ font-size:20px }
}

/* ==========================================================================
   Aggiunte: navigazione tra le pagine, icone SVG, comportamento mobile,
   blocco Presenze live.
   ========================================================================== */
.nav-links a{ padding:4px 0; border-bottom:2px solid transparent; }
.nav-links a:hover{ color:#fff; }
.nav-links a.attiva{ color:var(--blue); border-bottom-color:var(--blue); }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--blue2); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100; }
.skip-link:focus{ left:0; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* Icone: SVG che eredita il colore del contenitore, al posto dei glifi testuali */
.ico{ width:1.05em; height:1.05em; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Etichetta "novità" sulle funzioni appena uscite */
.novita,
.premium-feature .novita, .p-card .novita, .item .novita, .benefit .novita, .feature-row .novita{
  display:inline-flex; align-items:center; width:auto; margin-left:8px; padding:3px 8px; border-radius:999px;
  font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; line-height:1.4;
  color:#0a1b12; background:var(--green); vertical-align:middle; }

/* Blocco "Presenze live" nelle pagine Premium */
.presenze-box{ border:1px solid rgba(0,174,255,.32); border-radius:22px; padding:26px;
               background:radial-gradient(circle at 82% 6%, rgba(0,174,255,.14), transparent 30%), linear-gradient(180deg,rgba(6,17,27,.86),rgba(3,8,13,.82)); }
.presenze-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center; margin-top:22px; }
.presenze-visual{ border:1px solid rgba(0,174,255,.28); border-radius:18px; padding:22px; background:linear-gradient(180deg,rgba(12,28,43,.75),rgba(5,12,18,.75)); }
.presenze-num{ font-size:clamp(48px,7vw,74px); font-weight:950; line-height:1; letter-spacing:-.04em; color:var(--amber); }
.presenze-num small{ font-size:26px; color:var(--muted); font-weight:800; letter-spacing:0; }
.presenze-barra{ height:12px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--line2); overflow:hidden; margin-top:14px; }
.presenze-barra > i{ display:block; height:100%; width:74%; background:linear-gradient(90deg,var(--green),var(--amber)); }
.presenze-legenda{ display:flex; justify-content:space-between; margin-top:8px; font-size:12px; font-weight:800; color:var(--muted); }
.presenze-stat{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.presenze-stat div{ border:1px solid var(--line2); border-radius:12px; padding:12px; text-align:center; background:rgba(255,255,255,.03); }
.presenze-stat b{ display:block; font-size:22px; }
.presenze-stat b.in{ color:var(--blue); } .presenze-stat b.out{ color:var(--red); }
.presenze-stat span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:800; }
.presenze-soglie{ display:flex; gap:10px; margin-top:14px; }
.presenze-soglie div{ flex:1; border:1px solid var(--line2); border-radius:12px; padding:10px 12px; background:rgba(0,0,0,.2); }
.presenze-soglie .lbl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:800; color:var(--muted); }
.presenze-soglie .val{ font-size:17px; font-weight:900; margin-top:2px; }
.presenze-soglie .warn .val{ color:var(--amber); } .presenze-soglie .crit .val{ color:var(--red); }
.presenze-punti{ display:grid; gap:12px; margin-top:20px; }

/* L'anteprima della Control Room mobile nella hero Premium */
.preview-card img{ max-height:640px; width:auto; margin:0 auto; }

@media(max-width:1080px){
  /* La navigazione non sparisce piu' su tablet e telefono: scorre in orizzontale. */
  .nav-links{ display:flex; gap:18px; font-size:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-inner{ flex-wrap:wrap; }
  .presenze-grid{ grid-template-columns:1fr; }
}

@media(max-width:720px){
  /* La control room non viene piu' nascosta su telefono: e' cio' che spiega
     il prodotto. Viene solo semplificata e rimessa dritta. */
  .dash-wrap{ display:grid; min-height:auto; margin-top:26px; }
  .radar{ display:none; }
  .terminal, .control-panel{ transform:none; width:100%; min-height:auto; }
  .preview-card img{ max-height:none; width:100%; }
  .nav-actions{ width:100%; }
  .nav-actions .btn{ width:auto; flex:1; }
  /* Il collegamento "Accedi" resta raggiungibile anche da telefono. */
  .nav-actions .ghost{ display:inline-flex; }
}