/* =========================================================
ONEDEMAND — Interactive Preview
Style: Microsoft 365 / Fluent Design / Glassmorphism
========================================================= */
:root{
/* === Onedemand palette · Trust & Authority B2B === */
/* Brand & primary ink */
--navy-deep: #0a1a2e;
--navy: #0d2647;
--ms-blue: #0b5fba; /* CTA primary — sophisticated, less Microsoft */
--ms-blue-dark: #094a93;
--blue-electric: #1f78d8; /* hover / lifted */
--blue-light: #dbe8f9;
--blue-soft: #eef4fc;
--azure: #3d8ee0;
--cyan-accent: #00b7c3; /* preserved for tiny accents only */
--teal-accent: #008272;
/* === Accent semantici (variazione per categoria di sezione) ===
Usati con parsimonia per dare ritmo cromatico senza diventare rainbow. */
--accent-recovery: #c2410c; /* ambra/rame — fasi recovery, criticità */
--accent-recovery-soft: #fed7aa;
--accent-recovery-dark: #9a3412;
--accent-recovery-shadow: rgba(194, 65, 12, 0.18);
--accent-knowledge: #0f766e; /* teal — risorse, sapere, governance */
--accent-knowledge-soft: #99f6e4;
--accent-knowledge-dark: #115e59;
--accent-knowledge-shadow: rgba(15, 118, 110, 0.16);
/* === Sistema ombre multilivello — coerente con palette === */
--shadow-1: 0 1px 2px rgba(11, 38, 71, 0.05), 0 1px 1px rgba(11, 38, 71, 0.03);
--shadow-2: 0 4px 10px rgba(11, 38, 71, 0.06), 0 1px 2px rgba(11, 38, 71, 0.04);
--shadow-3: 0 10px 24px rgba(11, 38, 71, 0.08), 0 3px 8px rgba(11, 38, 71, 0.05);
--shadow-4: 0 20px 44px rgba(11, 38, 71, 0.12), 0 8px 18px rgba(11, 38, 71, 0.06);
--shadow-5: 0 32px 68px rgba(11, 38, 71, 0.18), 0 14px 30px rgba(11, 38, 71, 0.08);
/* Ombre accent-colored (per card / CTA con identità cromatica) */
--shadow-blue: 0 14px 36px rgba(11, 95, 186, 0.20), 0 4px 10px rgba(11, 95, 186, 0.10);
--shadow-amber: 0 14px 36px rgba(194, 65, 12, 0.18), 0 4px 10px rgba(194, 65, 12, 0.10);
--shadow-teal: 0 14px 36px rgba(15, 118, 110, 0.16), 0 4px 10px rgba(15, 118, 110, 0.08);
--shadow-indigo: 0 14px 36px rgba(79, 70, 229, 0.16), 0 4px 10px rgba(79, 70, 229, 0.08);
/* Ombre interne — inner light/bottom shadow per cards "rialzate" */
--shadow-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.7);
--shadow-inner-bottom: inset 0 -1px 0 rgba(11, 38, 71, 0.06);
/* Neutri (LIGHT) */
--white: #ffffff;
--gray-lightest: #f6f8fb;
--gray-light: #ecf0f5;
--gray-border: #dde4ee;
--gray-text: #475569; /* AA on white */
--gray-medium: #64748b;
--anthracite: #0b1b2e;
--black-soft: #08111f;
--body-bg: #f4f7fb;
--surface: #ffffff;
--surface-2: #f8fafd;
--text-primary: var(--anthracite);
--text-secondary: var(--gray-text);
/* Glass surfaces LIGHT (less plastic, more confident) */
--glass-bg: rgba(255,255,255,0.66);
--glass-bg-strong: rgba(255,255,255,0.84);
--glass-border: rgba(255,255,255,0.78);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 28px rgba(11, 38, 71, 0.08);
--glass-shadow-lg: inset 0 1px 0 rgba(255,255,255,0.72), 0 22px 56px rgba(11, 38, 71, 0.14);
/* Background gradients LIGHT — drastically reduced wash, more newspaper-clean */
--bg-grad-1: rgba(31,120,216,0.08);
--bg-grad-2: rgba(11,95,186,0.06);
--bg-grad-3: rgba(80,165,246,0.04);
--bg-base-1: #f1f5fb;
--bg-base-2: #f6f8fc;
--bg-base-3: #eef3fa;
/* Header */
--header-bg: rgba(255,255,255,0.65);
--header-bg-scrolled: rgba(255,255,255,0.85);
--header-border: rgba(225,231,239,0.6);
/* Radius */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
/* Typography */
--font-main: "Inter", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
/* Transitions */
--theme-transition: background .4s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* ====== DARK MODE ====== */
[data-theme="dark"]{
--navy-deep: #e6f1ff;
--navy: #c5dbff;
--ms-blue: #4aa3f0;
--ms-blue-dark: #6db5f5;
--blue-electric: #5dade2;
--blue-light: #1e3a5f;
--blue-soft: #112844;
--azure: #7cc1f7;
--cyan-accent: #4dd4dd;
--teal-accent: #4dbdb0;
/* Accent semantici — dark mode */
--accent-recovery: #fb923c;
--accent-recovery-soft: #7c2d12;
--accent-recovery-dark: #fdba74;
--accent-recovery-shadow: rgba(251, 146, 60, 0.20);
--accent-knowledge: #5eead4;
--accent-knowledge-soft: #134e4a;
--accent-knowledge-dark: #99f6e4;
--accent-knowledge-shadow: rgba(94, 234, 212, 0.16);
/* Sistema ombre — dark mode (più scure e profonde) */
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.18);
--shadow-2: 0 4px 10px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.22);
--shadow-3: 0 10px 24px rgba(0, 0, 0, 0.42), 0 3px 8px rgba(0, 0, 0, 0.26);
--shadow-4: 0 20px 44px rgba(0, 0, 0, 0.48), 0 8px 18px rgba(0, 0, 0, 0.30);
--shadow-5: 0 32px 68px rgba(0, 0, 0, 0.54), 0 14px 30px rgba(0, 0, 0, 0.34);
--shadow-blue: 0 14px 36px rgba(31, 120, 216, 0.30), 0 4px 10px rgba(31, 120, 216, 0.18);
--shadow-amber: 0 14px 36px rgba(251, 146, 60, 0.22), 0 4px 10px rgba(251, 146, 60, 0.12);
--shadow-teal: 0 14px 36px rgba(94, 234, 212, 0.20), 0 4px 10px rgba(94, 234, 212, 0.10);
--shadow-indigo: 0 14px 36px rgba(165, 180, 252, 0.22), 0 4px 10px rgba(165, 180, 252, 0.10);
--shadow-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.08);
--shadow-inner-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.30);
--white: #0d1a2f;
--gray-lightest: #0f1f37;
--gray-light: #14253f;
--gray-border: rgba(120,170,230,0.18);
--gray-text: #9fb4cf;
--gray-medium: #7c92ad;
--anthracite: #e9f0fb;
--black-soft: #ffffff;
--body-bg: #060d1a;
--surface: #0d1a2f;
--surface-2: #0a1426;
--text-primary: #e9f0fb;
--text-secondary: #a5bad5;
--glass-bg: rgba(20, 38, 66, 0.45);
--glass-bg-strong: rgba(20, 38, 66, 0.68);
--glass-border: rgba(120, 170, 230, 0.18);
--glass-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 34px rgba(0, 0, 0, 0.5);
--glass-shadow-lg: inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 60px rgba(0, 0, 0, 0.6);
--bg-grad-1: rgba(43,136,240,0.20);
--bg-grad-2: rgba(0,120,212,0.16);
--bg-grad-3: rgba(80,165,246,0.10);
--bg-base-1: #060d1a;
--bg-base-2: #08111f;
--bg-base-3: #0a1830;
--header-bg: rgba(8, 16, 30, 0.72);
--header-bg-scrolled: rgba(8, 16, 30, 0.92);
--header-border: rgba(120,170,230,0.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
font-family:var(--font-main);
font-weight:400;
color:var(--text-primary);
background:var(--body-bg);
line-height:1.6;
overflow-x:hidden;
min-height:100vh;
transition:var(--theme-transition);
}
/* Sfondo globale - gradient mesh */
body::before{
content:"";
position:fixed;
inset:0;
z-index:-2;
transition:opacity .4s ease;
background:
radial-gradient(ellipse 80% 60% at 20% 0%, var(--bg-grad-1) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 85% 10%, var(--bg-grad-2) 0%, transparent 55%),
radial-gradient(ellipse 90% 70% at 50% 100%, var(--bg-grad-3) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-base-1) 0%, var(--bg-base-2) 50%, var(--bg-base-3) 100%);
}
/* Blob decorativi */
body::after{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background-image:
radial-gradient(circle at 10% 30%, rgba(0,120,212,0.06) 0px, transparent 200px),
radial-gradient(circle at 90% 70%, rgba(43,136,240,0.05) 0px, transparent 250px);
}
[data-theme="dark"] body::after{
background-image:
radial-gradient(circle at 10% 30%, rgba(43,136,240,0.10) 0px, transparent 240px),
radial-gradient(circle at 90% 70%, rgba(80,165,246,0.08) 0px, transparent 280px),
radial-gradient(circle at 50% 90%, rgba(0,183,195,0.06) 0px, transparent 240px);
}
/* Decorative grid pattern */
.bg-grid{
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
opacity:.4;
background-image:
linear-gradient(rgba(0,120,212,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,120,212,0.04) 1px, transparent 1px);
background-size:50px 50px;
mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 70%);
-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 70%);
}
[data-theme="dark"] .bg-grid{
opacity:.6;
background-image:
linear-gradient(rgba(120,180,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(120,180,255,0.05) 1px, transparent 1px);
}
/* Decorative floating orbs — kept very subtle, more "atmospheric" than "promo" */
.orb{
position:fixed;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
z-index:-1;
opacity:.32;
transition:opacity .4s ease;
}
.orb-1{
width:380px;height:380px;
top:-80px;right:-100px;
background:radial-gradient(circle, rgba(11,95,186,0.22), transparent 70%);
animation:floatOrb 28s ease-in-out infinite;
}
.orb-2{
width:480px;height:480px;
top:40%;left:-180px;
background:radial-gradient(circle, rgba(11,95,186,0.10), transparent 70%);
animation:floatOrb 34s ease-in-out infinite reverse;
}
.orb-3{
width:340px;height:340px;
bottom:10%;right:-80px;
background:radial-gradient(circle, rgba(11,95,186,0.14), transparent 70%);
animation:floatOrb 30s ease-in-out infinite;
}
[data-theme="dark"] .orb{opacity:.5}
@media (prefers-reduced-motion: reduce){
.orb{animation:none}
}
@keyframes floatOrb{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(20px,-30px) scale(1.06)}
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
/* Global focus-visible — accessible focus indicator across the site */
:focus{outline:none}
:focus-visible{
outline:2px solid var(--ms-blue);
outline-offset:3px;
border-radius:6px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:2px solid var(--ms-blue);
outline-offset:2px;
}
/* Reduced motion — disable all decorative animations */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
.container{
width:100%;
max-width:1240px;
margin:0 auto;
padding:0 24px;
}
/* =========================================================
HEADER / NAVIGATION
========================================================= */
.header{
position:fixed;
top:0;left:0;right:0;
z-index:1000;
padding:18px 0;
background:var(--header-bg);
backdrop-filter:blur(32px) saturate(200%);
-webkit-backdrop-filter:blur(32px) saturate(200%);
border-bottom:1px solid var(--header-border);
box-shadow:0 8px 32px rgba(15,60,130,0.07);
transition:background .25s ease, border-color .3s ease, box-shadow .25s ease;
}
.header.scrolled{
background:var(--header-bg-scrolled);
box-shadow:0 6px 24px rgba(15,60,130,0.10);
}
[data-theme="dark"] .header{
box-shadow:0 8px 32px rgba(0,0,0,0.30);
}
[data-theme="dark"] .header.scrolled{
box-shadow:0 4px 20px rgba(0,0,0,0.5);
}
/* Transparent header while on the homepage hero, before scroll */
body.on-home .header:not(.scrolled){
background:transparent;
border-bottom-color:transparent;
box-shadow:none;
backdrop-filter:blur(6px) saturate(120%);
-webkit-backdrop-filter:blur(6px) saturate(120%);
}
body.on-home .header:not(.scrolled) .nav-link{
color:rgba(255,255,255,0.88);
text-shadow:0 1px 10px rgba(0,0,0,0.45);
}
body.on-home .header:not(.scrolled) .nav-link:hover{
color:#ffffff;
background:rgba(255,255,255,0.14);
}
body.on-home .header:not(.scrolled) .nav-link.active{
color:#ffffff;
background:rgba(255,255,255,0.16);
}
body.on-home .header:not(.scrolled) .nav-link.active::after{
background:#ffffff;
}
body.on-home .header:not(.scrolled) .brand-logo-light,
body.on-home .header:not(.scrolled) .brand-logo-dark{display:none}
body.on-home .header:not(.scrolled) .brand-logo-hero{
display:block;
filter:drop-shadow(0 1px 10px rgba(0,0,0,0.5));
}
body.on-home .header:not(.scrolled) .mobile-toggle{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.28);
}
body.on-home .header:not(.scrolled) .mobile-toggle span,
body.on-home .header:not(.scrolled) .mobile-toggle span::before,
body.on-home .header:not(.scrolled) .mobile-toggle span::after{
background:#ffffff;
}
/* CTA leggibile sopra foto hero (cieli chiari, neve, ecc.) — bordo + ombra rinforzati */
body.on-home .header:not(.scrolled) .cta-button{
background:rgba(11,38,71,0.55);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border:1px solid rgba(255,255,255,0.32);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 4px 14px rgba(3,10,28,0.32),
0 1px 2px rgba(3,10,28,0.20);
color:#ffffff;
}
body.on-home .header:not(.scrolled) .cta-button:hover{
background:rgba(11,95,186,0.78);
border-color:rgba(255,255,255,0.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.24),
0 8px 22px rgba(3,10,28,0.42),
0 1px 3px rgba(3,10,28,0.24);
}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.brand{
display:flex;
align-items:center;
gap:0;
font-size:22px;
font-weight:700;
letter-spacing:-0.02em;
color:var(--navy-deep);
cursor:pointer;
transition:transform .25s ease;
}
.brand:hover{transform:translateY(-1px)}
/* Brand logo — fixed box prevents nav-link shift when image swaps between hero / scrolled */
.brand-logo{
width:260px;
height:42px;
flex-shrink:0;
display:block;
object-fit:contain;
object-position:left center;
transition:filter .3s ease, opacity .3s ease;
}
.brand-logo-light{display:block}
.brand-logo-dark{display:none}
.brand-logo-hero{display:none}
[data-theme="dark"] .brand-logo-light{display:none}
[data-theme="dark"] .brand-logo-dark{
display:block;
/* White logo over dark header — subtle glow improves contrast */
filter:drop-shadow(0 1px 8px rgba(120,180,255,0.30));
}
.footer-logo{
width:200px;
height:36px;
object-fit:contain;
object-position:left center;
/* Clean white logo on dark navy footer */
filter:drop-shadow(0 1px 8px rgba(150,195,255,0.25));
}
/* THEME TOGGLE SLIDER */
.theme-toggle{
position:relative;
width:62px;
height:30px;
border-radius:100px;
background:linear-gradient(135deg, rgba(0,120,212,0.12), rgba(80,165,246,0.18));
border:1px solid rgba(0,120,212,0.25);
cursor:pointer;
display:inline-flex;
align-items:center;
padding:3px;
transition:all .3s ease;
box-shadow:inset 0 1px 3px rgba(15,60,130,0.08);
flex-shrink:0;
}
[data-theme="dark"] .theme-toggle{
background:linear-gradient(135deg, rgba(10,30,60,0.6), rgba(43,136,240,0.25));
border-color:rgba(120,170,230,0.3);
box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);
}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,120,212,0.2)}
.theme-toggle-thumb{
width:22px;
height:22px;
border-radius:50%;
background:linear-gradient(135deg, #ffffff, #f0f7ff);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
0 2px 6px rgba(15,60,130,0.25),
0 0 0 1px rgba(0,120,212,0.1);
position:absolute;
left:3px;
transition:left .35s cubic-bezier(.4,1.4,.6,1), background .3s ease;
display:flex;
align-items:center;
justify-content:center;
z-index:2;
}
[data-theme="dark"] .theme-toggle-thumb{
left:33px;
background:linear-gradient(135deg, #1e3a5f, #0a1830);
box-shadow:
inset 0 1px 0 rgba(120,180,255,0.3),
0 2px 8px rgba(0,0,0,0.6),
0 0 0 1px rgba(120,170,230,0.2);
}
.theme-toggle svg{
width:14px;
height:14px;
position:absolute;
top:50%;
transform:translateY(-50%);
transition:opacity .25s ease, transform .35s ease;
}
.theme-toggle .ic-sun{
left:8px;
color:#f5b342;
opacity:1;
}
.theme-toggle .ic-moon{
right:8px;
color:#7cc1f7;
opacity:.45;
}
[data-theme="dark"] .theme-toggle .ic-sun{opacity:.4}
[data-theme="dark"] .theme-toggle .ic-moon{opacity:1}
.theme-toggle-thumb svg{
position:static;
transform:none;
width:12px;
height:12px;
color:var(--ms-blue);
}
[data-theme="dark"] .theme-toggle-thumb svg{color:#7cc1f7}
.nav-links{
display:flex;
align-items:center;
gap:6px;
list-style:none;
}
.nav-link{
padding:10px 18px;
border-radius:10px;
font-size:16px;
font-weight:700;
color:var(--text-primary);
cursor:pointer;
transition:all .2s ease;
position:relative;
white-space:nowrap;
letter-spacing:-0.005em;
}
.nav-link:hover{
color:var(--ms-blue);
background:rgba(0,120,212,0.07);
}
[data-theme="dark"] .nav-link:hover{background:rgba(74,163,240,0.15)}
.nav-link.active{
color:var(--ms-blue);
background:rgba(0,120,212,0.10);
}
[data-theme="dark"] .nav-link.active{background:rgba(74,163,240,0.18)}
.nav-link.active::after{
content:"";
position:absolute;
bottom:2px;
left:50%;
transform:translateX(-50%);
width:18px;
height:2px;
background:var(--ms-blue);
border-radius:2px;
}
.cta-button{
padding:12px 22px;
border-radius:10px;
background:var(--ms-blue);
color:#fff;
font-weight:600;
font-size:14px;
letter-spacing:-0.005em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 1px 2px rgba(11, 38, 71, 0.18),
0 6px 16px rgba(11, 95, 186, 0.22);
transition:transform .18s cubic-bezier(.2,.7,.3,1.2), box-shadow .25s ease, background-color .25s ease;
display:inline-flex;
align-items:center;
gap:8px;
border:none;
cursor:pointer;
}
.cta-button:hover{
background:var(--blue-electric);
transform:translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.24),
0 2px 4px rgba(11, 38, 71, 0.20),
0 10px 22px rgba(11, 95, 186, 0.30);
}
.cta-button:active{
transform:translateY(0);
transition-duration:.08s;
box-shadow:
inset 0 1px 2px rgba(11, 38, 71, 0.18),
0 1px 2px rgba(11, 38, 71, 0.12);
}
.cta-button:focus-visible{
outline:2px solid var(--ms-blue);
outline-offset:3px;
}
.cta-button.outline{
background:transparent;
color:var(--navy);
border:1.5px solid rgba(11,58,114,0.2);
box-shadow:none;
}
[data-theme="dark"] .cta-button.outline{
color:var(--text-primary);
border-color:rgba(120,170,230,0.35);
}
.cta-button.outline:hover{
background:rgba(0,120,212,0.06);
border-color:var(--ms-blue);
color:var(--ms-blue);
transform:none;
}
[data-theme="dark"] .cta-button.outline:hover{
background:rgba(74,163,240,0.12);
color:var(--ms-blue);
}
.cta-button.ghost{
background:rgba(255,255,255,0.7);
color:var(--navy);
backdrop-filter:blur(10px);
box-shadow:0 4px 12px rgba(15,60,130,0.08);
}
.mobile-toggle{
display:none;
width:42px;height:42px;
border-radius:10px;
background:var(--glass-bg);
border:1px solid var(--gray-border);
align-items:center;
justify-content:center;
transition:var(--theme-transition);
}
.mobile-toggle span{
display:block;
width:18px;
height:2px;
background:var(--navy);
border-radius:2px;
position:relative;
}
.mobile-toggle span::before,
.mobile-toggle span::after{
content:"";
position:absolute;
width:18px;
height:2px;
background:var(--navy);
border-radius:2px;
left:0;
}
.mobile-toggle span::before{top:-6px}
.mobile-toggle span::after{top:6px}
[data-theme="dark"] .mobile-toggle span,
[data-theme="dark"] .mobile-toggle span::before,
[data-theme="dark"] .mobile-toggle span::after{background:var(--text-primary)}
/* =========================================================
PAGES
========================================================= */
.page{
display:none;
padding-top:120px;
animation:fadeIn .4s ease;
}
.page.active{display:block}
@keyframes fadeIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
section{
padding:80px 0;
position:relative;
}
/* =========================================================
HERO
========================================================= */
.hero{
padding:152px 0 96px;
/* cancels the .page 120px header offset so the photo sits behind the fixed header */
margin-top:-120px;
position:relative;
overflow:hidden;
min-height:clamp(640px, 94vh, 960px);
display:flex;
align-items:center;
}
.hero-inner{
max-width:100%;
margin:0 auto;
text-align:left;
display:flex;
flex-direction:column;
align-items:flex-start;
}
.tag-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 14px 7px 8px;
border-radius:100px;
background:var(--glass-bg-strong);
backdrop-filter:blur(10px);
border:1px solid rgba(0,120,212,0.18);
font-size:13px;
font-weight:500;
color:var(--navy);
box-shadow:0 4px 12px rgba(15,60,130,0.06);
transition:var(--theme-transition);
}
[data-theme="dark"] .tag-pill{
border-color:rgba(74,163,240,0.30);
color:var(--text-primary);
}
.tag-pill .dot{
width:6px;
height:6px;
border-radius:50%;
background:var(--teal-accent);
box-shadow:0 0 0 3px rgba(0,130,114,0.2);
margin-left:6px;
}
.tag-pill .ic{
width:22px;
height:22px;
border-radius:50%;
background:linear-gradient(135deg, var(--ms-blue), var(--azure));
display:flex;
align-items:center;
justify-content:center;
}
.tag-pill .ic svg{width:12px;height:12px;color:white}
h1.hero-title{
font-size:clamp(38px, 5.4vw, 64px);
line-height:1.05;
font-weight:700;
letter-spacing:-0.035em;
color:var(--text-primary);
margin:24px 0 24px;
transition:color .3s ease;
}
h1.hero-title em{
font-style:normal;
color:var(--ms-blue);
position:relative;
display:inline;
}
.hero-sub{
font-size:18px;
color:var(--text-secondary);
max-width:540px;
line-height:1.6;
margin-bottom:36px;
transition:color .3s ease;
}
.hero-ctas{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:42px;
}
.hero-stats{
display:flex;
gap:40px;
flex-wrap:wrap;
justify-content:center;
padding-top:32px;
border-top:1px solid rgba(255,255,255,0.22);
transition:border-color .3s ease;
}
[data-theme="dark"] .hero-stats{border-color:rgba(120,170,230,0.18)}
.hero-stat{display:flex;flex-direction:column;gap:4px}
.hero-stat strong{
font-size:34px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.035em;
transition:color .3s ease;
/* Subtle gradient text — adds depth ai numeri */
background:linear-gradient(180deg, var(--text-primary) 0%, var(--text-primary) 70%, var(--ms-blue) 130%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
line-height:1;
}
.hero-stat span{
font-size:12.5px;
color:var(--gray-medium);
font-weight:600;
letter-spacing:0.02em;
transition:color .3s ease;
}
.hv-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:9px 12px;
border-radius:10px;
background:rgba(0,120,212,0.06);
margin-top:7px;
font-size:12px;
transition:background .3s ease;
}
[data-theme="dark"] .hv-row{background:rgba(74,163,240,0.12)}
.hv-row strong{color:var(--text-primary);font-weight:600;transition:color .3s ease}
.hv-row .pill{
padding:3px 9px;
border-radius:100px;
background:linear-gradient(135deg, var(--cyan-accent), var(--teal-accent));
color:white;
font-size:10px;
font-weight:600;
}
/* =========================================================
HERO — BACKGROUND SLIDESHOW & LIQUID-GLASS OVERRIDES
========================================================= */
.hero-bg{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
}
.hero-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transform:scale(1.03);
transition:opacity 1.6s ease, transform 7.5s ease-out;
will-change:opacity, transform;
}
.hero-slide.is-active{
opacity:1;
transform:scale(1.13);
}
.hero-overlay{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
linear-gradient(102deg,
rgba(5,12,26,0.58) 0%,
rgba(6,15,32,0.40) 30%,
rgba(8,20,42,0.24) 58%,
rgba(10,24,48,0.16) 100%),
linear-gradient(180deg,
rgba(5,11,24,0.24) 0%,
rgba(5,11,24,0) 17%,
rgba(5,11,24,0) 60%,
rgba(5,11,24,0.42) 100%);
}
.hero > .container{
position:relative;
z-index:2;
}
/* HERO frosted-glass card — more confident, more legible */
.hero .hero-card{
position:relative;
width:100%;
max-width:640px;
margin:0;
padding:42px 48px 36px;
border-radius:24px;
background:linear-gradient(180deg, rgba(8,18,38,0.18) 0%, rgba(8,18,38,0.28) 100%);
border:1px solid rgba(255,255,255,0.14);
backdrop-filter:blur(20px) saturate(140%);
-webkit-backdrop-filter:blur(20px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.14),
inset 0 -1px 0 rgba(255,255,255,0.02),
0 18px 48px rgba(3,10,28,0.30);
display:flex;
flex-direction:column;
align-items:flex-start;
isolation:isolate;
}
.hero .hero-card::before{
/* Soft highlight on the top edge for liquid-glass feel */
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
radial-gradient(ellipse 70% 90% at 50% 0%, rgba(255,255,255,0.08), transparent 60%),
radial-gradient(ellipse 70% 70% at 50% 100%, rgba(10,30,60,0.08), transparent 60%);
z-index:-1;
}
@media (max-width:720px){
.hero .hero-card{padding:32px 22px 28px;border-radius:22px}
}
/* hero typography — light over photography */
.hero h1.hero-title{
color:#ffffff;
margin:0 0 24px;
text-shadow:0 2px 30px rgba(3,8,20,0.55);
}
.hero h1.hero-title em{
color:#9ec8ff;
background:none;
-webkit-background-clip:initial;
background-clip:initial;
}
.hero .hero-sub{
color:rgba(255,255,255,0.87);
text-shadow:0 1px 18px rgba(3,8,20,0.5);
margin-bottom:32px;
}
.hero .hero-ctas{
justify-content:flex-start;
margin-bottom:34px;
}
.hero .hero-stats{
width:100%;
justify-content:flex-start;
border-top-color:rgba(255,255,255,0.24);
padding-top:28px;
}
.hero .hero-stat strong{
color:#ffffff;
background:none;
-webkit-background-clip:initial;
background-clip:initial;
-webkit-text-fill-color:#ffffff;
text-shadow:0 2px 20px rgba(3,8,20,0.55);
}
.hero .hero-stat span{
color:rgba(255,255,255,0.74);
}
/* glass tag pill over photo */
.hero .tag-pill{
background:rgba(255,255,255,0.12);
border-color:rgba(255,255,255,0.32);
color:#ffffff;
backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
box-shadow:0 8px 24px rgba(3,10,28,0.32), inset 0 1px 0 rgba(255,255,255,0.38);
}
/* outline CTA legible over photo */
.hero .cta-button.outline{
color:#ffffff;
border-color:rgba(255,255,255,0.5);
background:rgba(255,255,255,0.09);
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
}
.hero .cta-button.outline:hover{
background:rgba(255,255,255,0.2);
border-color:#ffffff;
color:#ffffff;
}
/* SLIDESHOW CONTROLS */
.hero-controls{
position:absolute;
left:0;right:0;
bottom:30px;
z-index:3;
display:flex;
justify-content:center;
align-items:center;
gap:14px;
padding:0 24px;
}
.hero-dots{
display:flex;
justify-content:center;
align-items:center;
gap:9px;
}
.hero-arrow{
width:38px;
height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,0.34);
border-radius:100px;
color:#ffffff;
background:rgba(6,15,32,0.16);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
opacity:.72;
transition:opacity .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-arrow svg{width:17px;height:17px}
.hero-arrow:hover{
opacity:1;
background:rgba(255,255,255,0.16);
border-color:rgba(255,255,255,0.62);
}
.hero-arrow:active{transform:scale(.95)}
.hero-dot{
width:6px;
height:6px;
padding:0;
border-radius:100px;
background:rgba(255,255,255,0.32);
border:0;
cursor:pointer;
transition:background .25s ease, transform .25s ease;
}
.hero-dot:hover{background:rgba(255,255,255,0.65);transform:scale(1.2)}
.hero-dot.is-active{
background:#ffffff;
box-shadow:0 0 0 3px rgba(255,255,255,0.18);
}
.hero-counter{
display:inline-flex;
align-items:center;
gap:8px;
color:rgba(255,255,255,0.82);
font-size:12px;
font-weight:600;
letter-spacing:0.08em;
font-feature-settings:"tnum" 1, "lnum" 1;
text-shadow:0 1px 8px rgba(0,0,0,0.45);
padding:0 4px;
}
.hero-counter b{color:#ffffff;font-weight:700}
@media (max-width:1000px){
.hero-overlay{
background:
linear-gradient(180deg,
rgba(5,12,26,0.58) 0%,
rgba(6,15,32,0.38) 36%,
rgba(7,17,36,0.42) 66%,
rgba(5,11,24,0.64) 100%);
}
}
@media (max-width:720px){
.hero-controls{bottom:18px;gap:10px}
.hero-dots{gap:6px}
.hero-arrow{width:34px;height:34px}
.hero-dot.is-active{width:22px}
.hero-inner{
text-align:center;
align-items:center;
}
.hero .hero-card{
align-items:center;
margin:0 auto;
}
.hero .hero-ctas,
.hero .hero-stats{
justify-content:center;
}
}
@media (prefers-reduced-motion: reduce){
.hero-slide{transition:opacity .3s linear;transform:none}
.hero-slide.is-active{transform:none}
}
/* =========================================================
INTERNAL PAGE HERO - extends the homepage photographic language
========================================================= */
.page-hero{
--page-hero-position:center;
position:relative;
overflow:hidden;
isolation:isolate;
margin-top:-120px;
min-height:clamp(430px, 58vh, 620px);
padding:clamp(154px, 18vh, 188px) 0 clamp(68px, 9vh, 92px);
display:flex;
align-items:center;
}
.page-hero::before,
.page-hero::after{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
}
.page-hero::before{
background-image:var(--page-hero-image);
background-position:var(--page-hero-position);
background-repeat:no-repeat;
background-size:cover;
transform:scale(1.04);
}
.page-hero::after{
background:
linear-gradient(102deg, rgba(5,12,26,0.66) 0%, rgba(6,15,32,0.48) 38%, rgba(8,20,42,0.26) 100%),
linear-gradient(180deg, rgba(5,11,24,0.18) 0%, rgba(5,11,24,0.06) 46%, rgba(5,11,24,0.48) 100%);
}
.page-hero > .container{
position:relative;
z-index:1;
}
.page-hero-card{
width:100%;
max-width:680px;
padding:38px 48px 40px;
border:1px solid rgba(255,255,255,0.13);
border-radius:var(--r-xl);
background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(8,18,38,0.09));
backdrop-filter:blur(15px) saturate(130%);
-webkit-backdrop-filter:blur(15px) saturate(130%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.13),
0 18px 42px rgba(3,10,28,0.22);
}
.page-hero-label{
display:inline-flex;
padding:6px 14px;
margin-bottom:18px;
border:1px solid rgba(255,255,255,0.28);
border-radius:100px;
background:rgba(255,255,255,0.10);
color:rgba(255,255,255,0.92);
font-size:12px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
}
h1.page-hero-title{
margin:0 0 20px;
color:#fff;
font-size:clamp(36px, 4.5vw, 54px);
font-weight:700;
letter-spacing:-0.035em;
line-height:1.08;
text-shadow:0 2px 30px rgba(3,8,20,0.52);
}
h1.page-hero-title em{
font-style:normal;
color:#9ec8ff;
}
.page-hero-lede{
max-width:590px;
color:rgba(255,255,255,0.87);
font-size:17px;
line-height:1.65;
text-shadow:0 1px 18px rgba(3,8,20,0.48);
}
.page-hero-lede strong{color:#fff}
.page-content-lead{
padding:50px 0 60px;
border-top:1px solid rgba(120,170,230,0.12);
}
.page-hero--about{--page-hero-image:url("../images/sfondi/Selva2.jpeg");--page-hero-position:center 40%}
.page-hero--method{--page-hero-image:url("../images/sfondi/Lago%20bianco3.jpeg");--page-hero-position:center 46%}
.page-hero--solutions{--page-hero-image:url("../images/sfondi/Colfosco5.jpeg");--page-hero-position:center 38%}
.page-hero--recovery{--page-hero-image:url("../images/sfondi/Nera%20Boe4.jpeg");--page-hero-position:center 44%}
.page-hero--team{--page-hero-image:url("../images/sfondi/Badia1.jpeg");--page-hero-position:center 42%}
.page-hero--contact{--page-hero-image:url("../images/sfondi/Lago%20islanda%20giorno4.jpeg");--page-hero-position:center 45%}
@media (max-width:720px){
.page-hero{
min-height:clamp(430px, 64vh, 560px);
padding:132px 0 58px;
}
.page-hero-card{
padding:30px 22px 28px;
border-radius:22px;
}
h1.page-hero-title{font-size:34px}
.page-hero-lede{font-size:15.5px}
.page-content-lead{padding:52px 0 64px}
}
/* =========================================================
SECTION HEADERS
========================================================= */
.sect-head{
text-align:center;
margin-bottom:60px;
max-width:760px;
margin-left:auto;
margin-right:auto;
}
.sect-head.left{text-align:left;margin-left:0}
.sect-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 14px;
border-radius:100px;
background:rgba(11,95,186,0.08);
border:1px solid rgba(11,95,186,0.18);
color:var(--ms-blue);
font-size:11.5px;
font-weight:600;
letter-spacing:0.10em;
text-transform:uppercase;
margin-bottom:18px;
transition:background .3s ease;
}
.sect-eyebrow::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:currentColor;
opacity:.7;
}
[data-theme="dark"] .sect-eyebrow{background:rgba(74,163,240,0.18)}
h2.sect-title{
font-size:clamp(30px, 4vw, 48px);
line-height:1.1;
letter-spacing:-0.025em;
font-weight:700;
color:var(--text-primary);
margin-bottom:18px;
transition:color .3s ease;
}
h2.sect-title em{
font-style:normal;
color:var(--ms-blue);
}
.sect-lede{
font-size:17px;
color:var(--text-secondary);
line-height:1.65;
transition:color .3s ease;
}
.sect-lede strong{color:var(--text-primary)}
/* =========================================================
CHI SIAMO IN BREVE (homepage)
========================================================= */
.about-brief{
padding:60px 0 64px;
overflow:hidden;
position:relative;
border-top:1px solid rgba(120,170,230,0.12);
border-bottom:0;
background:
linear-gradient(135deg, rgba(241,247,255,0.96) 0%, rgba(248,251,255,0.98) 48%, rgba(226,240,255,0.84) 100%);
}
/* Subtle blueprint grid overlay */
.about-brief::after{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(11,95,186,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(11,95,186,0.04) 1px, transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 75%);
pointer-events:none;
z-index:0;
}
.about-brief > *{position:relative;z-index:1}
[data-theme="dark"] .about-brief::after{
background-image:
linear-gradient(rgba(74,163,240,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(74,163,240,0.06) 1px, transparent 1px);
}
[data-theme="dark"] .about-brief{
border-color:rgba(120,170,230,0.12);
background:
linear-gradient(135deg, rgba(8,18,34,0.96) 0%, rgba(10,23,43,0.98) 52%, rgba(9,30,55,0.90) 100%);
}
.about-brief .container{
position:relative;
}
.about-brief .container::before{
content:"";
position:absolute;
inset:-78px 24px -84px;
pointer-events:none;
opacity:.55;
background-image:
linear-gradient(rgba(0,120,212,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,120,212,0.035) 1px, transparent 1px);
background-size:64px 64px;
mask-image:linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, black 18%, black 82%, transparent 100%);
}
[data-theme="dark"] .about-brief .container::before{
opacity:.75;
background-image:
linear-gradient(rgba(120,180,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(120,180,255,0.04) 1px, transparent 1px);
}
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.about-visual{
position:relative;
aspect-ratio:1/1;
max-width:480px;
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:32px;
box-shadow:var(--glass-shadow-lg);
overflow:hidden;
transition:background .3s ease, border-color .3s ease;
}
.about-brief-inner{
max-width:560px;
margin:0;
text-align:left;
position:relative;
z-index:1;
}
.about-brief-layout{
display:grid;
grid-template-columns:minmax(0, .9fr) minmax(380px, 1fr);
gap:68px;
align-items:center;
position:relative;
z-index:1;
}
.about-brief .sect-title{
margin-bottom:22px;
}
.about-brief .sect-lede{
max-width:540px;
}
.about-brief .cta-button{
margin-top:28px;
}
/* =========================================================
PRINCIPLES — Tre principi sostitutivi del diagramma astratto.
Card verticali, numero grande, taglio editoriale.
========================================================= */
.principles{
display:flex;
flex-direction:column;
gap:18px;
position:relative;
z-index:1;
}
.principle{
position:relative;
padding:26px 28px 26px 78px;
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-lg);
box-shadow:var(--shadow-2);
transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
.principle:hover{
transform:translateY(-2px);
border-color:rgba(11,95,186,0.22);
box-shadow:var(--shadow-3);
}
.principle-num{
position:absolute;
top:24px;
left:24px;
font-size:30px;
font-weight:800;
line-height:1;
color:var(--ms-blue);
letter-spacing:-0.02em;
font-feature-settings:"tnum";
opacity:.85;
}
.principle h4{
margin:0 0 8px;
font-size:16.5px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
line-height:1.35;
}
.principle p{
margin:0;
font-size:14.5px;
line-height:1.6;
color:var(--text-secondary);
}
[data-theme="dark"] .principle{
background:var(--glass-bg);
border-color:var(--glass-border);
}
@media (max-width:900px){
.principle{padding:22px 22px 22px 66px}
.principle-num{top:20px;left:20px;font-size:26px}
}
/* =========================================================
OD-SYSTEM — Onedemand operating model infographic
Input → Governo → Risultato. Flusso verticale, blueprint-style.
========================================================= */
.od-system{
position:relative;
display:flex;
flex-direction:column;
gap:0;
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-xl);
padding:28px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 12px 30px rgba(11,38,71,0.06);
overflow:hidden;
isolation:isolate;
}
.od-system::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(ellipse 50% 35% at 50% 0%, rgba(11,95,186,0.04), transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(11,95,186,0.04), transparent 70%);
pointer-events:none;
z-index:0;
}
[data-theme="dark"] .od-system{
background:rgba(13,26,47,0.78);
border-color:rgba(120,170,230,0.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px rgba(0,0,0,0.3);
}
[data-theme="dark"] .od-system::before{
background:
radial-gradient(ellipse 50% 35% at 50% 0%, rgba(74,163,240,0.10), transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(74,163,240,0.10), transparent 70%);
}
.ods-layer{
position:relative;
z-index:1;
padding:18px 20px;
border-radius:14px;
background:var(--surface-2);
border:1px solid var(--gray-border);
}
[data-theme="dark"] .ods-layer{
background:rgba(8,17,31,0.55);
border-color:rgba(120,170,230,0.14);
}
.ods-layer.ods-core{
background:linear-gradient(180deg, var(--ms-blue), var(--ms-blue-dark));
color:#fff;
border-color:transparent;
box-shadow:0 14px 34px rgba(11,95,186,0.30);
}
/* Dark mode: blu più profondo per non risultare troppo chiaro sul fondo navy */
[data-theme="dark"] .ods-layer.ods-core{
background:linear-gradient(180deg, #163e7c 0%, #0e2c5c 100%);
border:1px solid rgba(74,163,240,0.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 14px 34px rgba(0,0,0,0.45);
}
.ods-layer-h{
display:flex;
align-items:baseline;
gap:14px;
flex-wrap:wrap;
margin-bottom:14px;
}
.ods-tag{
display:inline-flex;
align-items:center;
padding:4px 10px;
border-radius:100px;
font-size:10.5px;
font-weight:600;
letter-spacing:0.10em;
text-transform:uppercase;
color:var(--text-secondary);
background:rgba(11,95,186,0.06);
border:1px solid rgba(11,95,186,0.16);
flex-shrink:0;
}
[data-theme="dark"] .ods-tag{
color:var(--text-secondary);
background:rgba(74,163,240,0.12);
border-color:rgba(74,163,240,0.20);
}
.ods-tag.is-primary,
.ods-core .ods-tag{
color:#fff;
background:rgba(255,255,255,0.16);
border-color:rgba(255,255,255,0.28);
}
.ods-layer-h h4{
font-size:15.5px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
line-height:1.35;
flex:1;
min-width:0;
}
.ods-core .ods-layer-h h4{color:#fff}
/* INPUT pills */
.ods-pills{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.ods-pills li{
padding:7px 12px;
border-radius:100px;
font-size:13px;
font-weight:600;
color:var(--text-primary);
background:var(--surface);
border:1px solid var(--gray-border);
}
[data-theme="dark"] .ods-pills li{
background:rgba(20,38,66,0.6);
border-color:rgba(120,170,230,0.20);
}
/* CORE grid (2x2) */
.ods-core-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:10px;
}
.ods-cell{
position:relative;
padding:14px 14px 14px 28px;
border-radius:10px;
background:rgba(255,255,255,0.10);
border:1px solid rgba(255,255,255,0.16);
backdrop-filter:blur(4px);
}
.ods-cell-dot{
position:absolute;
top:18px;
left:12px;
width:8px;
height:8px;
border-radius:50%;
background:#9ec8ff;
box-shadow:0 0 0 3px rgba(158,200,255,0.18);
}
.ods-cell strong{
display:block;
font-size:14px;
font-weight:700;
color:#fff;
letter-spacing:-0.005em;
margin-bottom:2px;
}
.ods-cell small{
display:block;
font-size:12px;
color:rgba(255,255,255,0.78);
line-height:1.4;
}
/* OUTPUT */
.ods-output{
text-align:left;
}
.ods-output .ods-layer-h{margin-bottom:0}
.ods-output h4{font-size:15.5px}
/* PIPE — connector with animated flow */
.ods-pipe{
position:relative;
height:36px;
margin:10px auto;
width:2px;
background:linear-gradient(180deg, transparent, var(--ms-blue) 18%, var(--ms-blue) 82%, transparent);
opacity:.55;
z-index:1;
overflow:hidden;
border-radius:2px;
}
[data-theme="dark"] .ods-pipe{
opacity:.7;
}
.ods-pipe::before{
/* Ambient glow on the pipe */
content:"";
position:absolute;
left:-6px;right:-6px;top:0;bottom:0;
background:linear-gradient(180deg, transparent, rgba(11,95,186,0.16) 40%, rgba(11,95,186,0.16) 60%, transparent);
filter:blur(4px);
z-index:-1;
}
.ods-pipe-flow{
position:absolute;
left:-2px;right:-2px;
top:-40%;
height:60%;
background:linear-gradient(180deg, transparent 0%, rgba(158,200,255,0.95) 50%, transparent 100%);
border-radius:6px;
filter:blur(0.5px);
animation:odsFlow 2.4s cubic-bezier(.55,0,.45,1) infinite;
}
.ods-pipe-flow::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse 8px 14px at 50% 50%, #fff, transparent 70%);
}
@keyframes odsFlow{
0%{transform:translateY(-120%);opacity:0}
15%{opacity:1}
85%{opacity:1}
100%{transform:translateY(280%);opacity:0}
}
@media (prefers-reduced-motion: reduce){
.ods-pipe-flow{animation:none;display:none}
}
/* Core layer subtle ambient sheen */
.ods-layer.ods-core{
position:relative;
overflow:hidden;
}
/* coreSheen animation rimossa su richiesta — niente luccichio */
@media(max-width:560px){
.od-system{padding:20px}
.ods-core-grid{grid-template-columns:1fr;gap:8px}
.ods-cell{padding:12px 12px 12px 26px}
.ods-cell-dot{top:16px;left:10px}
.ods-layer-h h4{font-size:14px}
}
/* Legacy .governance-map (no longer rendered, kept for safety) */
.governance-map{
--gm-core-size:126px;
--gm-node-w:198px;
--gm-node-h:78px;
--gm-gap:24px;
position:relative;
min-height:470px;
display:grid;
place-items:center;
isolation:isolate;
overflow:hidden;
border-radius:28px;
border:1px solid rgba(120,170,230,0.18);
background:
radial-gradient(circle at 52% 42%, rgba(0,120,212,0.16), transparent 34%),
radial-gradient(circle at 72% 20%, rgba(0,183,195,0.10), transparent 26%),
linear-gradient(145deg, rgba(255,255,255,0.42), rgba(226,240,255,0.34));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.72),
0 22px 58px rgba(15,60,130,0.10);
}
[data-theme="dark"] .governance-map{
border-color:rgba(120,170,230,0.16);
background:
radial-gradient(circle at 52% 42%, rgba(74,163,240,0.20), transparent 34%),
radial-gradient(circle at 72% 20%, rgba(77,212,221,0.10), transparent 26%),
linear-gradient(145deg, rgba(18,38,68,0.58), rgba(9,23,42,0.46));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 24px 64px rgba(0,0,0,0.28);
}
.governance-map::before{
content:"";
position:absolute;
inset:22px;
border-radius:24px;
pointer-events:none;
opacity:.55;
background-image:
linear-gradient(rgba(0,120,212,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,120,212,0.045) 1px, transparent 1px);
background-size:38px 38px;
mask-image:radial-gradient(circle at 50% 48%, black 0%, black 48%, transparent 76%);
-webkit-mask-image:radial-gradient(circle at 50% 48%, black 0%, black 48%, transparent 76%);
}
.gm-connectors{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:visible;
z-index:1;
pointer-events:none;
}
.gm-connectors path{
fill:none;
stroke:rgba(0,120,212,0.22);
stroke-width:1.5;
stroke-linecap:round;
stroke-dasharray:5 8;
}
.gm-connectors .accent{
stroke:rgba(0,183,195,0.30);
}
[data-theme="dark"] .gm-connectors path{
stroke:rgba(120,180,255,0.26);
}
[data-theme="dark"] .gm-connectors .accent{
stroke:rgba(77,212,221,0.30);
}
.gm-ring{
position:absolute;
border:1px solid rgba(0,120,212,0.16);
border-radius:50%;
}
.gm-ring.outer{
width:min(350px, 78%);
aspect-ratio:1;
}
.gm-ring.inner{
display:none;
}
[data-theme="dark"] .gm-ring{
border-color:rgba(120,180,255,0.18);
}
[data-theme="dark"] .gm-ring.inner{
border-color:rgba(77,212,221,0.18);
}
.gm-axis{
position:absolute;
z-index:1;
opacity:.38;
background:linear-gradient(90deg, transparent, rgba(0,120,212,0.18), transparent);
}
.gm-axis.h{
width:min(430px, 92%);
height:1px;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.gm-axis.v{
height:290px;
width:1px;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:linear-gradient(180deg, transparent, rgba(0,120,212,0.24), transparent);
}
.gm-core{
width:var(--gm-core-size);
height:var(--gm-core-size);
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:white;
background:radial-gradient(circle at 32% 28%, var(--blue-electric) 0%, var(--ms-blue) 55%, var(--ms-blue-dark) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
0 18px 32px rgba(11,95,186,0.28),
0 0 0 8px rgba(11,95,186,0.05);
position:relative;
z-index:2;
}
.gm-core::before{
content:"";
position:absolute;
inset:-16px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.24);
pointer-events:none;
}
.gm-core::after{
display:none;
}
.gm-core span{
font-size:27px;
line-height:1;
font-weight:800;
letter-spacing:-0.04em;
}
.gm-core strong{
font-size:10.5px;
margin-top:7px;
font-weight:650;
letter-spacing:.04em;
text-transform:uppercase;
}
.gm-node{
--node-accent:var(--ms-blue);
position:absolute;
z-index:3;
width:var(--gm-node-w);
height:var(--gm-node-h);
display:flex;
flex-direction:column;
justify-content:center;
padding:12px 16px 12px 40px;
border-radius:16px;
background:rgba(255,255,255,0.82);
border:1px solid rgba(120,170,230,0.34);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.70),
0 14px 30px rgba(15,60,130,0.12);
color:var(--text-primary);
}
.gm-node::before{
content:"";
position:absolute;
left:18px;
top:22px;
width:8px;
height:8px;
border-radius:50%;
background:var(--node-accent);
box-shadow:0 0 0 4px color-mix(in srgb, var(--node-accent) 18%, transparent);
}
[data-theme="dark"] .gm-node{
background:rgba(18,38,68,0.78);
border-color:rgba(120,170,230,0.18);
box-shadow:0 16px 34px rgba(0,0,0,0.32);
}
.gm-node span{
display:block;
color:var(--text-primary);
font-size:14.5px;
line-height:1.12;
font-weight:700;
letter-spacing:-0.01em;
}
.gm-node small{
display:block;
margin-top:5px;
color:var(--text-secondary);
font-size:11.25px;
line-height:1.28;
}
.gm-node.process{
--node-accent:#0078d4;
top:calc(50% - (var(--gm-core-size) / 2) - var(--gm-gap) - var(--gm-node-h));
left:50%;
transform:translateX(-50%);
}
.gm-node.data{
--node-accent:#0aa9c4;
left:calc(50% + (var(--gm-core-size) / 2) + var(--gm-gap));
top:50%;
transform:translateY(-50%);
}
.gm-node.people{
--node-accent:#0e9f74;
top:calc(50% + (var(--gm-core-size) / 2) + var(--gm-gap));
left:50%;
transform:translateX(-50%);
}
.gm-node.infra{
--node-accent:#6f67e8;
right:calc(50% + (var(--gm-core-size) / 2) + var(--gm-gap));
top:50%;
transform:translateY(-50%);
}
.gm-result{
position:absolute;
left:50%;
bottom:12px;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:10px;
padding:9px 14px;
border-radius:999px;
background:rgba(255,255,255,0.56);
border:1px solid rgba(120,170,230,0.22);
white-space:nowrap;
color:var(--text-secondary);
font-size:12.5px;
font-weight:600;
box-shadow:0 10px 24px rgba(15,60,130,0.08);
z-index:3;
}
[data-theme="dark"] .gm-result{
background:rgba(18,38,68,0.58);
border-color:rgba(120,170,230,0.14);
}
.gm-result i{
display:block;
width:42px;
height:1px;
background:linear-gradient(90deg, rgba(0,120,212,0.20), var(--ms-blue));
}
.gm-result strong{
color:var(--ms-blue);
font-weight:700;
}
@media(max-width:1000px){
.about-brief-layout{
grid-template-columns:1fr;
gap:44px;
}
.about-brief-inner{
max-width:680px;
}
.governance-map{
max-width:640px;
width:100%;
margin:0 auto;
}
}
@media(max-width:620px){
.about-brief{
padding:64px 0 70px;
}
.governance-map{
--gm-core-size:112px;
--gm-node-w:clamp(132px, 40vw, 168px);
--gm-node-h:66px;
--gm-gap:32px;
min-height:620px;
border-radius:22px;
}
.gm-connectors{
inset:0;
width:100%;
height:100%;
}
.gm-ring.outer{
top:96px;
left:50%;
width:280px;
transform:translateX(-50%);
}
.gm-ring.inner{
top:138px;
left:50%;
width:210px;
transform:translateX(-50%);
}
.gm-axis.h{
top:calc(50% - 38px);
left:50%;
width:300px;
transform:translate(-50%, -50%);
}
.gm-axis.v{
top:calc(50% - 38px);
left:50%;
height:330px;
transform:translate(-50%, -50%);
}
.gm-core{
position:absolute;
top:calc(50% - (var(--gm-core-size) / 2) - 38px);
left:50%;
transform:translateX(-50%);
width:var(--gm-core-size);
height:var(--gm-core-size);
}
.gm-node{
width:var(--gm-node-w);
height:var(--gm-node-h);
min-width:0;
padding:10px 12px;
}
.gm-node::before{display:none}
.gm-node span{font-size:13px}
.gm-node small{font-size:10.5px}
.gm-node.process{
top:74px;
left:50%;
transform:translateX(-50%);
}
.gm-node.people{
top:410px;
bottom:auto;
left:50%;
transform:translateX(-50%);
}
.gm-node.infra,
.gm-node.data{
top:326px;
transform:none;
}
.gm-node.infra{left:18px;right:auto}
.gm-node.data{right:18px;left:auto}
.gm-result{
bottom:18px;
flex-wrap:wrap;
justify-content:center;
white-space:normal;
width:100%;
text-align:center;
}
.gm-result i{width:34px}
}
/* Homepage section highlights */
.home-points{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}
.home-points.cols-3{grid-template-columns:repeat(3,1fr)}
.home-point{
background:var(--glass-bg);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
box-shadow:var(--glass-shadow);
padding:22px;
text-align:left;
transition:transform .3s ease, box-shadow .3s ease;
}
.home-point:hover{transform:translateY(-4px);box-shadow:var(--glass-shadow-lg)}
.hp-ic{
width:42px;height:42px;
border-radius:12px;
display:flex;align-items:center;justify-content:center;
margin-bottom:14px;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
box-shadow:0 6px 14px rgba(11,38,71,0.22);
}
.recovery-process .hp-ic{
background:rgba(251, 146, 60, 0.12);
border:1px solid rgba(251, 146, 60, 0.30);
box-shadow:none;
}
.recovery-process .hp-ic svg{color:#fdba74}
/* Ultima fase (governance) → verde success: criticità risolta */
.recovery-process .home-point:last-child .hp-ic{
background:rgba(94, 234, 212, 0.14);
border-color:rgba(94, 234, 212, 0.32);
}
.recovery-process .home-point:last-child .hp-ic svg{color:#5eead4}
.recovery-process .home-point:last-child .process-step{color:#5eead4}
.hp-ic svg{width:21px;height:21px;color:#fff}
.home-point h4{
font-size:15.5px;
font-weight:700;
color:var(--text-primary);
margin-bottom:6px;
letter-spacing:-0.01em;
}
.home-point p{
font-size:13.5px;
color:var(--text-secondary);
line-height:1.55;
}
.home-recovery{
padding:82px 0 90px;
/* Deep navy → amber whisper: comunica "criticità" senza diventare warning rosso */
background:
radial-gradient(ellipse 60% 50% at 80% 100%, rgba(194,65,12,0.10), transparent 60%),
radial-gradient(ellipse 50% 40% at 10% 0%, rgba(126,197,255,0.06), transparent 60%),
#092844;
border-top:1px solid rgba(126,197,255,0.20);
border-bottom:1px solid rgba(194,65,12,0.18);
}
.home-recovery .sect-head{
max-width:720px;
margin-bottom:46px;
}
.home-recovery .sect-eyebrow{
color:#fdba74;
background:rgba(251,146,60,0.10);
border:1px solid rgba(251,146,60,0.22);
}
.home-recovery .sect-title{color:#fff}
.home-recovery .sect-title em{
color:#fdba74;
}
.home-recovery .sect-lede{
max-width:620px;
color:rgba(228,239,253,0.76);
}
.recovery-process{
gap:28px;
}
.recovery-process .home-point{
position:relative;
z-index:1;
min-height:194px;
padding:24px;
background:rgba(255,255,255,0.065);
border-color:rgba(126,197,255,0.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 28px rgba(2,10,25,0.16);
}
.recovery-process .home-point:hover{
background:rgba(255,255,255,0.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.11), 0 18px 34px rgba(2,10,25,0.26);
}
.process-mark{
display:flex;
align-items:center;
gap:13px;
margin-bottom:16px;
}
.process-mark .hp-ic{margin-bottom:0}
.process-step{
display:block;
color:rgba(253, 186, 116, 0.85);
font-size:11px;
font-weight:700;
letter-spacing:.10em;
text-transform:uppercase;
}
.recovery-process .home-point h4{color:#fff}
.recovery-process .home-point p{color:rgba(228,239,253,0.72)}
.home-recovery .cta-button.outline{
color:#fff;
border-color:rgba(126,197,255,0.38);
background:rgba(126,197,255,0.08);
}
.home-recovery .cta-button.outline:hover{
color:#fff;
border-color:rgba(126,197,255,0.62);
background:rgba(126,197,255,0.15);
}
.home-recovery-cta{text-align:left;margin-top:38px}
@media(min-width:1001px){
.recovery-process .home-point:not(:last-child)::after{
content:"";
position:absolute;
top:45px;
right:-28px;
width:28px;
height:2px;
background:linear-gradient(90deg, rgba(126,197,255,0.26), rgba(90,215,230,0.82));
}
.recovery-process .home-point:not(:last-child)::before{
content:"";
position:absolute;
z-index:2;
top:41px;
right:-27px;
width:9px;
height:9px;
border-top:2px solid #5ad7e6;
border-right:2px solid #5ad7e6;
transform:rotate(45deg);
}
}
@media(max-width:1000px){
.home-points,.home-points.cols-3{grid-template-columns:repeat(2,1fr)}
.recovery-process{gap:18px}
}
@media(max-width:560px){
.home-points,.home-points.cols-3{grid-template-columns:1fr}
.home-recovery{padding:64px 0 70px}
}
/* ===== Step cards (Metodo page) — 6 accent semantici coerenti con accordion home =====
Step 1 blu, 2 cyan, 3 verde, 4 ambra, 5 indigo, 6 teal. */
.steps-grid.steps-6 .step-card:nth-child(1) .step-icon{background:linear-gradient(135deg, #0b5fba, #1f78d8);box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 24px rgba(11,95,186,0.28)}
.steps-grid.steps-6 .step-card:nth-child(2) .step-icon{background:linear-gradient(135deg, #0891b2, #22d3ee);box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 24px rgba(8,145,178,0.28)}
.steps-grid.steps-6 .step-card:nth-child(3) .step-icon{background:linear-gradient(135deg, #0d7c5d, #10b981);box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 24px rgba(13,124,93,0.28)}
.steps-grid.steps-6 .step-card:nth-child(4) .step-icon{background:linear-gradient(135deg, #d97706, #f59e0b);box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 24px rgba(217,119,6,0.28)}
.steps-grid.steps-6 .step-card:nth-child(5) .step-icon{background:linear-gradient(135deg, #4f46e5, #6366f1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 24px rgba(79,70,229,0.28)}
.steps-grid.steps-6 .step-card:nth-child(6) .step-icon{background:linear-gradient(135deg, #0f766e, #14b8a6);box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 24px rgba(15,118,110,0.28)}
/* Step number badge color matches step icon */
.steps-grid.steps-6 .step-card:nth-child(1) .step-num{color:rgba(11,95,186,0.20)}
.steps-grid.steps-6 .step-card:nth-child(2) .step-num{color:rgba(8,145,178,0.22)}
.steps-grid.steps-6 .step-card:nth-child(3) .step-num{color:rgba(13,124,93,0.22)}
.steps-grid.steps-6 .step-card:nth-child(4) .step-num{color:rgba(217,119,6,0.22)}
.steps-grid.steps-6 .step-card:nth-child(5) .step-num{color:rgba(79,70,229,0.22)}
.steps-grid.steps-6 .step-card:nth-child(6) .step-num{color:rgba(15,118,110,0.22)}
/* Fallback per step-card 5 (Chi siamo Vision/Mission usa step-card senza nth) */
.steps-grid .step-card .step-icon,
.steps-grid .step-card:nth-child(n) .step-icon{
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
}
.cycle-grid .cycle-card .cycle-num,
.cycle-grid .cycle-card:nth-child(n) .cycle-num{
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
}
/* =========================================================
NUMERI / KPI cards
========================================================= */
.numbers{padding:60px 0}
.kpi-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.kpi-card{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
padding:28px 24px;
box-shadow:var(--glass-shadow);
transition:all .3s ease;
position:relative;
overflow:hidden;
color:var(--text-primary);
}
.kpi-card::before{
content:"";
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background:radial-gradient(circle at 30% 30%, rgba(43,136,240,0.10), transparent 40%);
opacity:0;
transition:opacity .3s ease;
}
.kpi-card:hover{
transform:translateY(-4px);
box-shadow:var(--glass-shadow-lg);
border-color:rgba(0,120,212,0.3);
}
.kpi-card:hover::before{opacity:1}
.kpi-icon{
width:44px;height:44px;
border-radius:12px;
background:linear-gradient(135deg, var(--blue-soft), var(--surface));
border:1px solid rgba(0,120,212,0.18);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
transition:background .3s ease, border-color .3s ease;
}
[data-theme="dark"] .kpi-icon{
background:linear-gradient(135deg, rgba(74,163,240,0.18), rgba(74,163,240,0.05));
border-color:rgba(74,163,240,0.25);
}
.kpi-icon svg{width:22px;height:22px;color:var(--ms-blue)}
.kpi-value{
font-size:34px;
font-weight:700;
letter-spacing:-0.03em;
color:var(--text-primary);
line-height:1;
margin-bottom:8px;
white-space:nowrap;
transition:color .3s ease;
}
.kpi-label{
font-size:14px;
color:var(--text-secondary);
font-weight:500;
line-height:1.4;
transition:color .3s ease;
}
.kpi-card .pos{position:relative;z-index:1}
/* =========================================================
METODO — Timeline
========================================================= */
.method-section{
padding:60px 0;
position:relative;
background:
linear-gradient(135deg, rgba(238,244,252,0.5) 0%, rgba(248,250,253,0.7) 100%);
overflow:hidden;
}
[data-theme="dark"] .method-section{
background:linear-gradient(135deg, rgba(10,20,38,0.4) 0%, rgba(8,16,30,0.6) 100%);
}
/* Subtle diagonal stripes — paper/blueprint feel */
.method-section::before{
content:"";
position:absolute;
inset:0;
background-image:repeating-linear-gradient(
135deg,
transparent 0,
transparent 32px,
rgba(11,95,186,0.025) 32px,
rgba(11,95,186,0.025) 33px
);
pointer-events:none;
z-index:0;
mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 85%);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 85%);
}
[data-theme="dark"] .method-section::before{
background-image:repeating-linear-gradient(
135deg,
transparent 0,
transparent 32px,
rgba(74,163,240,0.04) 32px,
rgba(74,163,240,0.04) 33px
);
}
.method-section > *{position:relative;z-index:1}
.home-method{
border-bottom:1px solid rgba(120,170,230,0.12);
background:linear-gradient(180deg, rgba(244,248,255,0.98) 0%, rgba(249,252,255,0.98) 100%);
}
[data-theme="dark"] .home-method{
border-color:rgba(120,170,230,0.12);
background:linear-gradient(180deg, rgba(8,18,34,0.99) 0%, rgba(9,20,38,0.98) 100%);
}
.steps-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:20px;
position:relative;
}
.steps-grid::before{
content:"";
position:absolute;
top:54px;
left:8%;
right:8%;
height:2px;
background:linear-gradient(90deg, transparent, rgba(0,120,212,0.3) 20%, rgba(0,120,212,0.3) 80%, transparent);
z-index:0;
}
.steps-grid.steps-5{grid-template-columns:repeat(5,1fr);gap:16px}
.method-unified{
padding-bottom:100px;
}
.method-path-head{
max-width:760px;
margin-bottom:42px;
}
.method-path-head .sect-lede{
max-width:720px;
}
.steps-grid.steps-6{
grid-template-columns:repeat(6,1fr);
gap:12px;
}
.steps-grid.steps-6::before{
top:47px;
left:5%;
right:5%;
}
.steps-grid.steps-6 .step-card{
padding:22px 16px 20px;
min-height:260px;
}
.steps-grid.steps-6 .step-num{
top:16px;
right:14px;
font-size:28px;
}
.steps-grid.steps-6 .step-icon{
width:52px;
height:52px;
border-radius:14px;
margin-bottom:20px;
}
.steps-grid.steps-6 .step-icon::after{border-radius:11px}
.steps-grid.steps-6 .step-icon svg{width:23px;height:23px}
.steps-grid.steps-6 .step-card h3{font-size:16px}
.steps-grid.steps-6 .step-card p{font-size:13px;line-height:1.5}
.step-card{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
padding:28px 22px;
box-shadow:var(--glass-shadow);
transition:all .3s ease;
position:relative;
z-index:1;
color:var(--text-primary);
}
.step-card:hover{
transform:translateY(-6px);
box-shadow:var(--glass-shadow-lg);
}
.step-num{
position:absolute;
top:18px;
right:18px;
font-size:32px;
font-weight:800;
color:rgba(0,120,212,0.12);
line-height:1;
letter-spacing:-0.02em;
}
[data-theme="dark"] .step-num{color:rgba(74,163,240,0.25)}
.step-icon{
width:60px;
height:60px;
border-radius:16px;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
display:flex;
align-items:center;
justify-content:center;
margin-bottom:24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 8px 20px rgba(0,120,212,0.32);
position:relative;
}
.step-icon::after{
content:"";
position:absolute;
inset:3px;
border-radius:13px;
background:linear-gradient(160deg, rgba(255,255,255,0.25) 0%, transparent 50%);
}
.step-icon svg{width:26px;height:26px;color:white;position:relative;z-index:1}
.step-card h3{
font-size:18px;
font-weight:700;
color:var(--text-primary);
margin-bottom:8px;
letter-spacing:-0.01em;
transition:color .3s ease;
}
.step-card p{
font-size:14px;
color:var(--text-secondary);
line-height:1.55;
transition:color .3s ease;
}
.step-card p strong{color:var(--text-primary)}
/* =========================================================
METODO — Accordion + Media stage (Microsoft "Come funziona")
========================================================= */
.method-feature{
display:grid;
grid-template-columns:1fr 1.05fr;
gap:56px;
align-items:center;
margin-top:24px;
}
.method-acc{
display:flex;
flex-direction:column;
}
.ma-item{
border-bottom:1px solid var(--gray-border);
transition:border-color .3s ease;
position:relative;
}
.ma-item:first-child{border-top:1px solid var(--gray-border)}
.ma-item::before{
content:"";
position:absolute;
top:0;bottom:0;left:0;
width:3px;
background:transparent;
transition:background .3s ease;
}
/* 6 accent distinti per le 6 fasi del metodo */
.ma-item[data-step="1"]{--step-c: #0b5fba} /* blu — ascolto */
.ma-item[data-step="2"]{--step-c: #0891b2} /* cyan — analisi tecnica */
.ma-item[data-step="3"]{--step-c: #0d7c5d} /* verde — processi */
.ma-item[data-step="4"]{--step-c: #d97706} /* amber — piano operativo */
.ma-item[data-step="5"]{--step-c: #4f46e5} /* indigo — implementazione */
.ma-item[data-step="6"]{--step-c: #0f766e} /* teal — governance */
[data-theme="dark"] .ma-item[data-step="1"]{--step-c: #7fc1ff}
[data-theme="dark"] .ma-item[data-step="2"]{--step-c: #67e8f9}
[data-theme="dark"] .ma-item[data-step="3"]{--step-c: #5eead4}
[data-theme="dark"] .ma-item[data-step="4"]{--step-c: #fdba74}
[data-theme="dark"] .ma-item[data-step="5"]{--step-c: #a5b4fc}
[data-theme="dark"] .ma-item[data-step="6"]{--step-c: #99f6e4}
.ma-item.is-open::before{background:var(--step-c, var(--ms-blue))}
.ma-head{
display:flex;
align-items:center;
gap:16px;
width:100%;
padding:22px 8px 22px 22px;
background:transparent;
cursor:pointer;
text-align:left;
color:var(--text-primary);
font-family:inherit;
font-size:20px;
font-weight:700;
letter-spacing:-0.01em;
transition:color .25s ease;
}
.ma-head:hover{color:var(--step-c, var(--ms-blue))}
.ma-num{
min-width:38px;
padding:0 4px;
height:28px;
border-radius:6px;
color:var(--text-secondary);
background:transparent;
border:1px solid var(--gray-border);
font-size:12px;
font-weight:600;
font-feature-settings:"tnum" 1, "lnum" 1;
letter-spacing:0.04em;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.ma-item.is-open .ma-num{
color:var(--step-c, var(--ms-blue));
border-color:var(--step-c, var(--ms-blue));
background:color-mix(in srgb, var(--step-c, var(--ms-blue)) 8%, transparent);
}
.ma-title{flex:1}
.ma-chev{
color:var(--text-secondary);
transition:transform .3s ease, color .25s ease;
flex-shrink:0;
}
.ma-item.is-open .ma-chev{
transform:rotate(180deg);
color:var(--step-c, var(--ms-blue));
}
.ma-body{
max-height:0;
overflow:hidden;
opacity:0;
padding:0 22px 0 72px;
font-size:15px;
color:var(--text-secondary);
line-height:1.65;
transition:max-height .45s ease, opacity .35s ease, padding-bottom .35s ease;
}
.ma-item.is-open .ma-body{
max-height:240px;
opacity:1;
padding-bottom:22px;
}
/* Media stage */
.method-stage{
position:relative;
min-height:420px;
border-radius:var(--r-xl);
background:var(--glass-bg-strong);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid var(--glass-border);
box-shadow:var(--glass-shadow-lg);
padding:36px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
.home-method .method-stage{min-height:520px}
.ms-panel{
position:absolute;
inset:36px;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transform:translateY(12px) scale(.985);
transition:opacity .45s ease, transform .55s cubic-bezier(.4,1.3,.6,1);
pointer-events:none;
}
.ms-panel.is-active{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.ms-glow{
position:absolute;
inset:-20%;
z-index:0;
pointer-events:none;
filter:blur(28px);
background:radial-gradient(circle at 35% 28%, rgba(11,95,186,0.18), transparent 60%);
}
[data-theme="dark"] .ms-glow{
background:radial-gradient(circle at 35% 28%, rgba(31,120,216,0.32), transparent 60%);
}
.ms-card{
position:relative;
z-index:1;
width:100%;
max-width:380px;
background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(247,250,255,0.92));
border:1px solid rgba(0,120,212,0.18);
border-radius:18px;
padding:22px 22px 20px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 18px 40px rgba(11,58,114,0.22);
backdrop-filter:blur(14px);
}
[data-theme="dark"] .ms-card{
background:linear-gradient(180deg, rgba(20,40,72,0.85), rgba(14,28,52,0.88));
border-color:rgba(120,170,230,0.25);
color:var(--text-primary);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
0 18px 40px rgba(0,0,0,0.45);
}
.ms-card-h{
display:flex;align-items:center;gap:10px;
font-size:13px;font-weight:600;
color:var(--text-secondary);
letter-spacing:0.02em;
text-transform:uppercase;
margin-bottom:14px;
padding-bottom:12px;
border-bottom:1px dashed rgba(0,120,212,0.18);
}
[data-theme="dark"] .ms-card-h{border-bottom-color:rgba(120,170,230,0.2)}
.ms-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--accent, var(--ms-blue));box-shadow:0 0 0 3px color-mix(in srgb, var(--accent, var(--ms-blue)) 22%, transparent)}
.ms-card-row{
display:flex;justify-content:space-between;align-items:center;
padding:9px 0;
font-size:14px;
border-bottom:1px solid rgba(0,120,212,0.08);
color:var(--text-primary);
}
[data-theme="dark"] .ms-card-row{border-bottom-color:rgba(120,170,230,0.10)}
.ms-card-row:last-of-type{border-bottom:none}
.ms-card-row strong{font-weight:700;color:var(--accent, var(--ms-blue))}
.ms-card-bar{
height:8px;
border-radius:100px;
background:rgba(0,120,212,0.10);
overflow:hidden;
margin-top:14px;
}
[data-theme="dark"] .ms-card-bar{background:rgba(120,170,230,0.14)}
.ms-card-bar i{
display:block;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg, var(--accent, var(--ms-blue)), color-mix(in srgb, var(--accent, var(--ms-blue)) 70%, white));
transition:width .6s ease;
}
.ms-card-meta{
margin-top:10px;
font-size:12px;
color:var(--gray-medium);
text-align:center;
font-weight:500;
}
/* Step 2 — stacked layers */
.ms-stack{display:flex;flex-direction:column;gap:6px;margin:6px 0 14px}
.ms-layer{
padding:10px 14px;
border-radius:10px;
font-size:13px;
font-weight:600;
color:var(--text-primary);
border:1px solid rgba(0,120,212,0.16);
background:rgba(0,120,212,0.06);
}
[data-theme="dark"] .ms-layer{
border-color:rgba(120,170,230,0.18);
background:rgba(74,163,240,0.10);
}
.ms-l1{background:linear-gradient(90deg, rgba(11,95,186,0.20), rgba(11,95,186,0.06));border-color:rgba(11,95,186,0.32)}
.ms-l2{background:linear-gradient(90deg, rgba(11,95,186,0.16), rgba(11,95,186,0.05));border-color:rgba(11,95,186,0.26)}
.ms-l3{background:linear-gradient(90deg, rgba(11,95,186,0.12), rgba(11,95,186,0.04));border-color:rgba(11,95,186,0.20)}
.ms-l4{background:linear-gradient(90deg, rgba(11,95,186,0.08), rgba(11,95,186,0.03));border-color:rgba(11,95,186,0.16)}
/* Step 3 — flow */
.ms-flow{
display:flex;align-items:center;gap:8px;
margin:8px 0;
flex-wrap:wrap;
}
.ms-flow.muted{opacity:.7}
.ms-node{
padding:7px 12px;
border-radius:8px;
background:rgba(0,120,212,0.10);
border:1px solid rgba(0,120,212,0.22);
font-size:12px;
font-weight:600;
color:var(--text-primary);
white-space:nowrap;
}
[data-theme="dark"] .ms-node{background:rgba(74,163,240,0.16);border-color:rgba(74,163,240,0.30)}
.ms-node-warn{
background:rgba(245,166,79,0.12);
border-color:rgba(245,166,79,0.32);
color:#b76d2a;
}
[data-theme="dark"] .ms-node-warn{
background:rgba(245,166,79,0.18);
color:#f5a64f;
}
.ms-arrow{
color:var(--ms-blue);
font-size:18px;
font-weight:700;
}
/* Step 4 — Piano operativo gantt: label + track binario + segmento fase */
.ms-track{
position:relative;
margin:14px 0 16px;
display:flex;
flex-direction:column;
gap:8px;
}
.ms-track span{
font-size:12px;
font-weight:600;
color:var(--text-primary);
letter-spacing:-0.005em;
}
.ms-track::before{
/* Binario timeline (sfondo grigio) */
content:"";
display:block;
position:absolute;
left:0;right:0;
bottom:0;
height:8px;
background:rgba(11,95,186,0.08);
border-radius:100px;
z-index:0;
}
[data-theme="dark"] .ms-track::before{background:rgba(74,163,240,0.10)}
.ms-track i{
/* Segmento colorato della fase — appoggiato sul binario */
display:block;
height:8px;
background:linear-gradient(90deg, var(--accent, var(--ms-blue)), color-mix(in srgb, var(--accent, var(--ms-blue)) 75%, white));
border-radius:100px;
position:relative;
z-index:1;
box-shadow:0 1px 2px color-mix(in srgb, var(--accent, var(--ms-blue)) 30%, transparent);
}
@media (max-width:1000px){
.method-feature{grid-template-columns:1fr;gap:32px}
.method-stage,
.home-method .method-stage{min-height:380px}
}
@media (max-width:560px){
.ma-head{font-size:17px;padding:18px 6px 18px 16px;gap:12px}
.ma-body{font-size:14px;padding-left:62px}
.method-stage{padding:24px;min-height:340px}
.ms-panel{inset:24px}
}
/* =========================================================
SOLUZIONI — Bento (homepage)
========================================================= */
.solutions-section{
padding:56px 0 60px;
overflow:hidden;
scroll-margin-top:96px;
border-top:1px solid rgba(120,170,230,0.12);
border-bottom:1px solid rgba(120,170,230,0.12);
background:
radial-gradient(ellipse 46% 34% at 92% 8%, rgba(22,129,93,0.032), transparent 64%),
linear-gradient(180deg, rgba(252,253,255,0.99) 0%, rgba(247,249,253,0.99) 100%);
}
[data-theme="dark"] .solutions-section{
border-color:rgba(120,170,230,0.12);
background:
radial-gradient(ellipse 46% 34% at 92% 8%, rgba(40,176,134,0.045), transparent 64%),
linear-gradient(180deg, rgba(9,20,38,0.99) 0%, rgba(8,18,34,0.99) 100%);
}
.solutions-section::before{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(0,120,212,0.16), transparent);
}
.solutions-section .sect-head{margin-bottom:40px}
.sol-bento{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:16px;
margin-top:10px;
}
.bento-tile{
position:relative;
background:var(--glass-bg-strong);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:32px;
box-shadow:var(--glass-shadow);
overflow:hidden;
color:var(--text-primary);
transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
isolation:isolate;
}
.bento-tile:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-3);
border-color:rgba(11,95,186,0.18);
}
[data-theme="dark"] .bento-tile:hover{
box-shadow:var(--shadow-3);
border-color:var(--glass-border);
}
/* Halo ambient e glow accent rimossi su richiesta — niente colore intenso al hover */
.bento-tile::after{display:none}
.bento-tile > *{position:relative;z-index:1}
.bento-tile::before{display:none}
.solutions-section .bento-tile{
background:var(--surface);
border-color:var(--gray-border);
box-shadow:var(--shadow-2);
}
[data-theme="dark"] .solutions-section .bento-tile{
background:var(--glass-bg);
border-color:var(--glass-border);
}
.bento-feature{
grid-column:1 / -1;
display:grid;
grid-template-columns:minmax(0, 1.02fr) minmax(390px, .98fr);
grid-template-areas:
"head head"
"title ."
"desc feats"
"metrics metrics";
column-gap:42px;
align-items:start;
padding:30px 34px 28px;
}
.bento-side{
display:flex;
flex-direction:column;
padding:28px 30px;
}
.bento-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:14px;
}
.bento-head .bento-tag{
margin-bottom:0;
}
.bento-logos{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}
.bento-logo{
width:118px;
min-height:44px;
padding:9px 12px;
border-radius:14px;
background:rgba(255,255,255,0.64);
border:1px solid rgba(120,170,230,0.24);
display:flex;
align-items:center;
justify-content:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 22px rgba(15,60,130,0.08);
flex-shrink:0;
}
[data-theme="dark"] .bento-logo{
background:rgba(255,255,255,0.90);
border-color:rgba(255,255,255,0.14);
}
.bento-logo img{
max-width:100%;
max-height:30px;
object-fit:contain;
}
.bento-feature .bento-logo{
width:140px;
min-height:50px;
}
.bento-feature .bento-logo img{
max-height:34px;
}
.bento-feature .bento-logo.bento-logo-brand{
width:88px;
min-height:50px;
padding:12px 10px;
}
.bento-feature .bento-logo.bento-logo-brand img{
max-height:26px;
}
.bento-tag{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 12px;
border-radius:100px;
background:rgba(0,120,212,0.10);
color:var(--accent, var(--ms-blue));
font-size:11.5px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
width:fit-content;
margin-bottom:14px;
border:1px solid color-mix(in srgb, var(--accent, var(--ms-blue)) 25%, transparent);
}
.solutions-section .bento-tag{
background:color-mix(in srgb, var(--accent, var(--ms-blue)) 7%, #fff);
border-color:color-mix(in srgb, var(--accent, var(--ms-blue)) 18%, transparent);
}
[data-theme="dark"] .bento-tag{background:color-mix(in srgb, var(--accent, var(--ms-blue)) 22%, transparent)}
.bento-dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent, var(--ms-blue)) 28%, transparent)}
.bento-title{
font-size:28px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.02em;
margin-bottom:10px;
line-height:1.15;
}
.bento-feature .bento-head{grid-area:head;margin-bottom:16px}
.bento-feature .bento-title{grid-area:title;font-size:32px}
.bento-desc{
color:var(--text-secondary);
font-size:15px;
line-height:1.6;
margin-bottom:18px;
}
.bento-feature .bento-desc{grid-area:desc;font-size:16px;margin-bottom:0;max-width:550px}
.bento-feats{
list-style:none;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px 18px;
margin-bottom:24px;
}
.bento-feature .bento-feats{grid-area:feats;margin:2px 0 0}
.bento-feats li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
color:var(--text-primary);
font-weight:500;
}
.bf-check{
width:18px;height:18px;
border-radius:50%;
background:linear-gradient(135deg, var(--accent, var(--ms-blue)), color-mix(in srgb, var(--accent, var(--ms-blue)) 65%, #fff));
flex-shrink:0;
position:relative;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px color-mix(in srgb, var(--accent, var(--ms-blue)) 40%, transparent);
}
.bf-check::after{
content:"";
position:absolute;
inset:0;
background:url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.bento-illust{
margin-top:auto;
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:8px;
margin-bottom:20px;
}
.bento-feature .bento-illust{
grid-area:metrics;
margin:24px 0 0;
}
.bi-card{
background:linear-gradient(180deg, rgba(255,255,255,0.60), rgba(247,250,253,0.82));
border:1px solid rgba(11,95,186,0.14);
border-radius:12px;
padding:12px 10px;
text-align:left;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
min-height:64px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:6px;
}
[data-theme="dark"] .bi-card{
background:linear-gradient(180deg, rgba(20,40,72,0.60), rgba(14,28,52,0.68));
border-color:rgba(120,170,230,0.18);
}
.bi-card span{
display:block;
font-size:10.5px;
color:var(--gray-medium);
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
}
.bi-card strong{
display:block;
font-size:13px;
font-weight:600;
color:var(--text-primary);
letter-spacing:-0.005em;
line-height:1.25;
}
.bento-side-meta{
margin-top:auto;
display:flex;flex-wrap:wrap;gap:8px;
}
.bm-pill{
padding:6px 11px;
border-radius:100px;
background:rgba(0,120,212,0.08);
border:1px solid rgba(0,120,212,0.18);
color:var(--text-primary);
font-size:12px;
font-weight:600;
}
.solutions-section .bm-pill{
background:color-mix(in srgb, var(--accent, var(--ms-blue)) 5%, #fff);
border-color:color-mix(in srgb, var(--accent, var(--ms-blue)) 16%, transparent);
}
[data-theme="dark"] .bm-pill{background:rgba(74,163,240,0.14);border-color:rgba(74,163,240,0.25)}
@media (max-width:1000px){
.sol-bento{grid-template-columns:1fr;grid-template-rows:auto}
.bento-feature{
grid-column:auto;
display:flex;
flex-direction:column;
}
.bento-feature .bento-desc{margin-bottom:22px}
.bento-feature .bento-feats{margin:0 0 24px}
.bento-feature .bento-illust{margin:0;max-width:none}
}
@media (max-width:560px){
.bento-tile{padding:24px}
.bento-feature{padding:28px}
.bento-head{align-items:flex-start}
.bento-feature .bento-head{flex-direction:column;gap:16px}
.bento-logo{width:104px;min-height:40px}
.bento-feature .bento-logo{width:118px;min-height:44px}
.bento-feature .bento-logo.bento-logo-brand{width:70px;min-height:44px;padding:10px 8px}
.bento-feature .bento-title{font-size:26px}
.bento-feats{grid-template-columns:1fr}
}
/* =========================================================
SOLUZIONI — Cards
========================================================= */
.sol-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.sol-card{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:32px;
box-shadow:var(--glass-shadow);
transition:all .3s ease;
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
color:var(--text-primary);
}
.sol-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:4px;
background:linear-gradient(90deg, var(--ms-blue), var(--blue-electric), var(--cyan-accent));
opacity:0;
transition:opacity .3s ease;
}
.sol-card:hover{
transform:translateY(-6px);
box-shadow:var(--glass-shadow-lg);
border-color:rgba(0,120,212,0.25);
}
.sol-card:hover::before{opacity:1}
.sol-icon{
width:64px;
height:64px;
border-radius:18px;
background:linear-gradient(135deg, var(--blue-soft) 0%, var(--surface) 100%);
border:1px solid rgba(0,120,212,0.18);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 6px 16px rgba(0,120,212,0.10);
transition:background .3s ease, border-color .3s ease;
overflow:hidden;
flex-shrink:0;
}
[data-theme="dark"] .sol-icon{
background:linear-gradient(135deg, rgba(74,163,240,0.20), rgba(74,163,240,0.05));
border-color:rgba(74,163,240,0.30);
}
.sol-icon svg{width:30px;height:30px}
.sol-icon-img{
background:white;
width:200px;
height:96px;
padding:16px 22px;
border-radius:16px;
}
[data-theme="dark"] .sol-icon-img{
background:rgba(255,255,255,0.92);
}
.sol-icon-img img{
max-width:100%;
max-height:100%;
object-fit:contain;
display:block;
}
.sol-card h3{
font-size:22px;
font-weight:700;
color:var(--text-primary);
margin-bottom:6px;
letter-spacing:-0.02em;
transition:color .3s ease;
}
.sol-subtitle{
font-size:13px;
color:var(--ms-blue);
font-weight:600;
letter-spacing:0.05em;
text-transform:uppercase;
margin-bottom:14px;
}
/* Sol-detail: ogni piattaforma ERP eredita il suo accent dalla card home */
.sol-detail--sap .sol-subtitle{color:#d49a00}
.sol-detail--nts .sol-subtitle{color:#0d7c5d}
.sol-detail--azure .sol-subtitle{color:#0078d4}
[data-theme="dark"] .sol-detail--sap .sol-subtitle{color:#fcd34d}
[data-theme="dark"] .sol-detail--nts .sol-subtitle{color:#5eead4}
[data-theme="dark"] .sol-detail--azure .sol-subtitle{color:#7fc1ff}
/* Bullet list che richiama il colore della soluzione */
.sol-detail--sap .sol-list li::before{background:#d49a00 !important}
.sol-detail--nts .sol-list li::before{background:#0d7c5d !important}
.sol-detail--azure .sol-list li::before{background:#0078d4 !important}
.sol-card p{
font-size:15px;
color:var(--text-secondary);
line-height:1.6;
margin-bottom:22px;
flex:1;
transition:color .3s ease;
}
.sol-list{
list-style:none;
margin-bottom:24px;
}
.sol-list li{
font-size:13.5px;
color:var(--text-primary);
padding:7px 0 7px 26px;
position:relative;
transition:color .3s ease;
}
.sol-list li strong{color:var(--text-primary)}
.sol-list li::before{
content:"";
position:absolute;
left:0;top:11px;
width:16px;height:16px;
border-radius:50%;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
}
.sol-list li::after{
content:"";
position:absolute;
left:4px;top:14px;
width:8px;height:5px;
border-left:2px solid white;
border-bottom:2px solid white;
transform:rotate(-45deg);
}
.sol-link{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--ms-blue);
font-weight:600;
font-size:14px;
transition:gap .2s ease;
cursor:pointer;
}
.sol-link:hover{gap:12px;color:var(--ms-blue-dark)}
.sol-link svg{width:16px;height:16px}
/* =========================================================
RECOVERY MODE — integrata nella pagina Metodo.
Sezione narrativa: segnali tipici + trasformazione bad→good.
========================================================= */
.recovery-mode{
padding:60px 0 80px;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(194,65,12,0.04), transparent 70%),
linear-gradient(180deg, rgba(248,250,253,0.4) 0%, rgba(244,247,251,0.8) 100%);
border-top:1px solid var(--gray-border);
}
[data-theme="dark"] .recovery-mode{
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(251,146,60,0.06), transparent 70%),
linear-gradient(180deg, rgba(8,17,31,0.4) 0%, rgba(6,13,26,0.7) 100%);
border-top-color:var(--glass-border);
}
.recovery-mode-head{
max-width:760px;
margin-bottom:48px;
}
.recovery-eyebrow{
color:var(--accent-recovery) !important;
}
[data-theme="dark"] .recovery-eyebrow{color:var(--accent-recovery-dark) !important}
.recovery-mode-grid{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:32px;
align-items:stretch;
margin-bottom:36px;
}
.recovery-block{
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-lg);
padding:32px 30px;
box-shadow:var(--shadow-2);
position:relative;
overflow:hidden;
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.recovery-block:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-3);
}
.recovery-block::before{display:none}
[data-theme="dark"] .recovery-block{
background:var(--glass-bg);
border-color:var(--glass-border);
}
.recovery-block-head{
display:grid;
grid-template-columns:auto 1fr;
gap:14px;
align-items:center;
margin-bottom:24px;
padding-bottom:20px;
border-bottom:1px dashed var(--gray-border);
}
[data-theme="dark"] .recovery-block-head{border-bottom-color:var(--glass-border)}
.recovery-block-ic{
width:34px;
height:34px;
border-radius:10px;
background:color-mix(in srgb, var(--accent-recovery) 12%, transparent);
color:var(--accent-recovery);
display:flex;
align-items:center;
justify-content:center;
}
.recovery-block-ic svg{width:18px;height:18px}
.recovery-block-ic--shift{
background:color-mix(in srgb, var(--ms-blue) 12%, transparent);
color:var(--ms-blue);
}
.recovery-block-eyebrow{
display:block;
font-size:11px;
font-weight:700;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--text-secondary);
margin-bottom:2px;
}
.recovery-block h3{
margin:0;
font-size:18px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
line-height:1.3;
}
.recovery-signals{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:14px;
}
.recovery-signals li{
position:relative;
padding-left:28px;
font-size:14.5px;
line-height:1.6;
color:var(--text-primary);
}
.recovery-signals li::before{
content:"";
position:absolute;
left:0;
top:9px;
width:14px;
height:2px;
background:var(--accent-recovery);
}
.recovery-block--transform .recovery-flow{gap:12px}
.recovery-mode-note{
width:100%;
max-width:none;
font-size:15.5px;
line-height:1.7;
color:var(--text-secondary);
padding:26px 32px;
background:linear-gradient(135deg, rgba(11,95,186,0.07) 0%, rgba(11,95,186,0.03) 60%);
border:1px solid color-mix(in srgb, var(--ms-blue) 22%, var(--gray-border));
border-left:3px solid var(--ms-blue);
border-radius:0 12px 12px 0;
margin-bottom:32px;
box-shadow:var(--shadow-2);
}
[data-theme="dark"] .recovery-mode-note{
background:linear-gradient(135deg, rgba(74,163,240,0.10) 0%, rgba(74,163,240,0.04) 60%);
border-color:rgba(74,163,240,0.28);
color:var(--text-primary);
}
.recovery-mode-note strong{color:var(--text-primary);font-weight:700}
.recovery-mode-cta{
display:flex;
gap:14px;
flex-wrap:wrap;
align-items:center;
}
@media (max-width:960px){
.recovery-mode-grid{grid-template-columns:1fr;gap:18px}
.recovery-mode{padding:60px 0 80px}
.recovery-block{padding:26px 22px}
}
/* =========================================================
PROJECT RECOVERY section
========================================================= */
.recovery-section{padding:66px 0}
.recovery-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:60px;
align-items:center;
}
.recovery-diagram{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:40px 32px;
box-shadow:var(--glass-shadow-lg);
position:relative;
color:var(--text-primary);
transition:background .3s ease, border-color .3s ease;
}
.recovery-flow{
display:flex;
flex-direction:column;
gap:16px;
}
.rec-row{
display:grid;
grid-template-columns:1fr 40px 1fr;
align-items:center;
gap:12px;
}
.rec-state{
padding:14px 18px;
border-radius:14px;
font-size:13.5px;
font-weight:600;
text-align:center;
line-height:1.3;
}
.rec-state.bad{
background:rgba(255,76,76,0.06);
color:#c2384e;
border:1px solid rgba(194,56,78,0.15);
}
[data-theme="dark"] .rec-state.bad{
background:rgba(255,90,110,0.12);
color:#ff95a5;
border-color:rgba(255,120,140,0.25);
}
.rec-state.good{
background:rgba(0,130,114,0.07);
color:var(--teal-accent);
border:1px solid rgba(0,130,114,0.2);
}
[data-theme="dark"] .rec-state.good{
background:rgba(77,212,221,0.12);
color:#7eecf2;
border-color:rgba(77,212,221,0.25);
}
.rec-arrow{
display:flex;
align-items:center;
justify-content:center;
color:var(--ms-blue);
}
.rec-arrow svg{width:24px;height:24px}
.feature-list{
display:flex;
flex-direction:column;
gap:18px;
margin-top:24px;
}
.feature-row{
display:flex;
gap:18px;
align-items:flex-start;
}
.feature-row .ic{
flex-shrink:0;
width:44px;height:44px;
border-radius:12px;
background:linear-gradient(135deg, var(--blue-soft), var(--surface));
border:1px solid rgba(0,120,212,0.18);
display:flex;
align-items:center;
justify-content:center;
transition:background .3s ease, border-color .3s ease;
}
[data-theme="dark"] .feature-row .ic{
background:linear-gradient(135deg, rgba(74,163,240,0.20), rgba(74,163,240,0.05));
border-color:rgba(74,163,240,0.30);
}
.feature-row .ic svg{width:22px;height:22px;color:var(--ms-blue)}
.feature-row h4{
font-size:16px;
font-weight:600;
color:var(--text-primary);
margin-bottom:4px;
transition:color .3s ease;
}
.feature-row p{
font-size:14px;
color:var(--text-secondary);
line-height:1.55;
transition:color .3s ease;
}
/* =========================================================
CICLO OPERATIVO
========================================================= */
.cycle-section{padding:80px 0}
.cycle-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:18px;
}
.cycle-card{
background:var(--glass-bg);
backdrop-filter:blur(16px);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
box-shadow:var(--glass-shadow);
padding:24px;
text-align:center;
transition:all .3s ease;
position:relative;
color:var(--text-primary);
}
.cycle-card:hover{
background:var(--glass-bg-strong);
transform:translateY(-4px);
box-shadow:var(--glass-shadow-lg);
}
.cycle-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;height:36px;
border-radius:50%;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
color:white;
font-weight:700;
font-size:14px;
margin-bottom:14px;
box-shadow:0 6px 14px rgba(0,120,212,0.3);
}
.cycle-card h4{
font-size:16px;
font-weight:700;
color:var(--text-primary);
margin-bottom:6px;
transition:color .3s ease;
}
.cycle-card .label{
font-size:11.5px;
color:var(--ms-blue);
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
margin-bottom:10px;
}
.cycle-card p{
font-size:13px;
color:var(--text-secondary);
line-height:1.5;
transition:color .3s ease;
}
/* =========================================================
SIGNALS SECTION — "Cosa risolviamo": tre segnali tipici PMI.
Layout a 3 colonne, card narrative con citazione + sintomi + azione.
========================================================= */
.signals-section{
padding:60px 0 50px;
position:relative;
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(194,65,12,0.035), transparent 70%),
linear-gradient(180deg, rgba(248,250,253,0.5) 0%, rgba(244,247,251,0.7) 100%);
overflow:hidden;
}
[data-theme="dark"] .signals-section{
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(251,146,60,0.06), transparent 70%),
linear-gradient(180deg, rgba(8,17,31,0.5) 0%, rgba(6,13,26,0.6) 100%);
}
.signals-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
margin-top:56px;
}
.signal-card{
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-lg);
padding:32px 28px;
box-shadow:var(--shadow-2);
display:flex;
flex-direction:column;
gap:22px;
transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease;
position:relative;
}
.signal-card:hover{
transform:translateY(-3px);
border-color:rgba(11,95,186,0.18);
box-shadow:var(--shadow-3);
}
[data-theme="dark"] .signal-card{
background:var(--glass-bg);
border-color:var(--glass-border);
}
.signal-tag{
display:inline-block;
font-size:11px;
font-weight:700;
color:var(--accent-recovery);
letter-spacing:0.10em;
text-transform:uppercase;
margin-bottom:14px;
}
.signal-head h3{
margin:0;
font-size:21px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.015em;
line-height:1.3;
font-style:italic;
}
.signal-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}
.signal-list li{
position:relative;
padding-left:20px;
font-size:14px;
line-height:1.55;
color:var(--text-secondary);
}
.signal-list li::before{
content:"";
position:absolute;
left:0;
top:8px;
width:8px;
height:2px;
background:var(--accent-recovery);
opacity:.7;
}
.signal-action{
border-top:1px solid var(--gray-border);
padding-top:18px;
margin-top:auto;
}
[data-theme="dark"] .signal-action{border-top-color:var(--glass-border)}
.signal-action-label{
display:block;
font-size:11px;
font-weight:700;
color:var(--ms-blue);
letter-spacing:0.10em;
text-transform:uppercase;
margin-bottom:8px;
}
.signal-action p{
margin:0;
font-size:14.5px;
line-height:1.6;
color:var(--text-primary);
}
@media (max-width:960px){
.signals-grid{grid-template-columns:1fr;gap:18px;margin-top:40px}
.signals-section{padding:60px 0 50px}
.signal-card{padding:26px 24px}
.signal-head h3{font-size:19px}
}
/* =========================================================
TECH STRIP — Abstract illustrations showcase
========================================================= */
.tech-strip{
padding:80px 0 70px;
position:relative;
color:var(--text-primary);
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(11,95,186,0.04), transparent 70%),
linear-gradient(180deg, rgba(244,247,251,0.6) 0%, rgba(248,250,253,0.6) 100%);
overflow:hidden;
}
[data-theme="dark"] .tech-strip{
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(74,163,240,0.06), transparent 70%),
linear-gradient(180deg, rgba(10,20,38,0.6) 0%, rgba(8,16,30,0.6) 100%);
}
/* Dotted "blueprint" pattern overlay */
.tech-strip::before{
content:"";
position:absolute;
inset:0;
background-image:radial-gradient(circle, rgba(11,95,186,0.08) 1px, transparent 1.5px);
background-size:24px 24px;
mask-image:radial-gradient(ellipse 75% 60% at 50% 50%, black 25%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 50%, black 25%, transparent 80%);
pointer-events:none;
z-index:0;
}
[data-theme="dark"] .tech-strip::before{
background-image:radial-gradient(circle, rgba(74,163,240,0.10) 1px, transparent 1.5px);
}
.tech-strip > *{position:relative;z-index:1}
.ts-head{
text-align:left;
max-width:720px;
margin:0 0 48px;
}
.ts-head .sect-eyebrow::before{
/* inherit pulse from global */
}
.ts-title{
font-size:clamp(28px, 3.6vw, 42px);
font-weight:700;
letter-spacing:-0.025em;
line-height:1.12;
color:var(--text-primary);
margin-top:6px;
}
.ts-title em{
font-style:normal;
color:var(--ms-blue);
}
.ts-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
}
.ts-card{
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-lg);
padding:22px 24px 24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 8px 22px rgba(11,38,71,0.05);
transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
[data-theme="dark"] .ts-card{
background:rgba(13,26,47,0.78);
border-color:rgba(120,170,230,0.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 32px rgba(0,0,0,0.30);
}
.ts-card:hover{
transform:translateY(-3px);
border-color:rgba(11,95,186,0.28);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 18px 38px rgba(11,38,71,0.10);
}
[data-theme="dark"] .ts-card:hover{
border-color:rgba(74,163,240,0.32);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 44px rgba(0,0,0,0.40);
}
.ts-illust{
aspect-ratio: 320 / 200;
background:linear-gradient(180deg, rgba(11,95,186,0.04), rgba(11,95,186,0.01));
border-radius:12px;
margin-bottom:18px;
overflow:hidden;
position:relative;
color:var(--text-primary);
}
[data-theme="dark"] .ts-illust{
background:linear-gradient(180deg, rgba(74,163,240,0.06), rgba(74,163,240,0.02));
}
.ts-illust svg{
width:100%;
height:100%;
display:block;
}
/* Tech showcase illustrazioni — animazioni minimal e fluide */
.ts-flow-dot{filter:drop-shadow(0 0 5px rgba(31,120,216,0.55))}
/* Stack scan line — barra orizzontale che scorre dall'alto al basso */
.ts-stack-scan{
animation:tsStackScan 4s ease-in-out infinite;
}
@keyframes tsStackScan{
0%{transform:translateY(0)}
50%{transform:translateY(180px)}
100%{transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
.ts-stack-scan{animation:none;display:none}
}
.ts-card-title{
font-size:17px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
margin-bottom:6px;
}
.ts-card-desc{
font-size:13.5px;
color:var(--text-secondary);
line-height:1.55;
}
@media (max-width:900px){
.ts-grid{grid-template-columns:1fr;gap:18px;max-width:520px;margin:0 auto}
.tech-strip{padding:64px 0 56px}
.ts-head{margin-bottom:36px}
}
@media (prefers-reduced-motion: reduce){
.ts-flow-dot animateMotion{begin:indefinite}
}
/* CARD VARIATIONS (has-corner-mark · has-noise · has-dot-grid) rimosse su richiesta */
/* =========================================================
SCROLL PROGRESS INDICATOR — Thin bar at top of viewport
========================================================= */
.scroll-progress{
position:fixed;
top:0;left:0;right:0;
height:2px;
z-index:2001;
background:transparent;
pointer-events:none;
}
.scroll-progress span{
display:block;
height:100%;
width:0%;
background:linear-gradient(90deg, var(--ms-blue), var(--blue-electric), var(--accent-knowledge));
box-shadow:0 0 12px rgba(11,95,186,0.4);
transform-origin:left center;
transition:width 0.08s linear;
}
/* =========================================================
MARQUEE — Tech keywords ticker (silent, low-key)
========================================================= */
.marquee-strip{
padding:36px 0;
overflow:hidden;
background:linear-gradient(180deg, rgba(11,95,186,0.025), transparent);
border-top:1px solid rgba(11,95,186,0.10);
border-bottom:1px solid rgba(11,95,186,0.10);
mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
-webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
[data-theme="dark"] .marquee-strip{
background:linear-gradient(180deg, rgba(74,163,240,0.05), transparent);
border-color:rgba(74,163,240,0.16);
}
.marquee-track{
display:flex;
gap:0;
width:max-content;
animation:marqueeScroll 50s linear infinite;
}
.marquee-row{
display:flex;
align-items:center;
gap:24px;
padding-right:24px;
flex-shrink:0;
}
.marquee-row span{
font-size:16px;
font-weight:600;
color:var(--text-primary);
letter-spacing:-0.005em;
white-space:nowrap;
opacity:.6;
transition:opacity .3s ease;
}
.marquee-row:hover span{opacity:1}
.marquee-sep{
color:var(--ms-blue) !important;
opacity:.55 !important;
font-weight:700;
}
@keyframes marqueeScroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.marquee-strip:hover .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
.marquee-track{animation:none;flex-wrap:wrap}
}
/* SECTION DIVIDERS (wave/angle/dot-row) rimossi su richiesta */
/* =========================================================
ASSESSMENT — Lead magnet section
========================================================= */
.assessment-section{
padding:60px 0 70px;
position:relative;
/* Warm conversion zone — invita all'azione senza distrarre */
background:
radial-gradient(ellipse 60% 40% at 20% 20%, rgba(11,95,186,0.05), transparent 70%),
radial-gradient(ellipse 50% 40% at 90% 80%, rgba(15,118,110,0.04), transparent 70%),
linear-gradient(180deg, rgba(248,250,253,0.6), rgba(252,253,255,1));
overflow:hidden;
}
[data-theme="dark"] .assessment-section{
background:
radial-gradient(ellipse 60% 40% at 20% 20%, rgba(74,163,240,0.08), transparent 70%),
radial-gradient(ellipse 50% 40% at 90% 80%, rgba(94,234,212,0.05), transparent 70%),
linear-gradient(180deg, rgba(8,16,30,0.4), rgba(6,13,26,0.8));
}
/* Decorative spotlight blob behind the form card */
.assessment-section::before{
content:"";
position:absolute;
top:-10%;
right:-15%;
width:55%;
height:80%;
background:radial-gradient(circle, rgba(11,95,186,0.08), transparent 65%);
filter:blur(40px);
pointer-events:none;
z-index:0;
}
[data-theme="dark"] .assessment-section::before{
background:radial-gradient(circle, rgba(74,163,240,0.14), transparent 65%);
}
.assessment-section > *{position:relative;z-index:1}
.ar-wrap{
display:grid;
grid-template-columns:minmax(0, 0.92fr) minmax(440px, 1fr);
gap:64px;
align-items:start;
position:relative;
}
.ar-left{
position:sticky;
top:120px;
max-width:500px;
}
.ar-title{
font-size:clamp(30px, 4vw, 46px);
font-weight:700;
letter-spacing:-0.025em;
line-height:1.08;
color:var(--text-primary);
margin:18px 0 18px;
}
.ar-title em{
font-style:normal;
color:var(--ms-blue);
}
.ar-lede{
font-size:16px;
line-height:1.65;
color:var(--text-secondary);
margin-bottom:24px;
}
.ar-checklist{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:10px;
}
.ar-checklist li{
display:flex;
align-items:flex-start;
gap:12px;
font-size:14px;
color:var(--text-primary);
line-height:1.55;
}
.ar-check{
flex-shrink:0;
width:20px;
height:20px;
margin-top:1px;
border-radius:50%;
background:rgba(11,95,186,0.08);
border:1px solid rgba(11,95,186,0.24);
position:relative;
}
.ar-check::after{
content:"";
position:absolute;
inset:0;
background:url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
/* Form card */
.ar-form{
position:relative;
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-xl);
padding:36px 36px 28px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 18px 42px rgba(11,38,71,0.08);
overflow:hidden;
min-height:440px;
display:flex;
flex-direction:column;
}
[data-theme="dark"] .ar-form{
background:rgba(13,26,47,0.85);
border-color:rgba(120,170,230,0.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 18px 42px rgba(0,0,0,0.40);
}
.ar-form::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg, var(--ms-blue), var(--blue-electric));
opacity:.4;
z-index:2;
}
/* Conic gradient halo rimosso — niente luccichio sul form */
.ar-form > *{position:relative;z-index:1}
.ar-step{
flex:1;
opacity:0;
transform:translateY(8px);
pointer-events:none;
position:absolute;
inset:36px 36px 88px;
transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1);
}
.ar-step.is-active{
opacity:1;
transform:translateY(0);
pointer-events:auto;
position:relative;
inset:auto;
}
.ar-step-h{margin-bottom:22px}
.ar-step-label{
display:inline-block;
font-size:11px;
font-weight:600;
letter-spacing:0.10em;
text-transform:uppercase;
color:var(--ms-blue);
margin-bottom:8px;
}
.ar-step-h h3{
font-size:22px;
font-weight:700;
letter-spacing:-0.01em;
line-height:1.25;
color:var(--text-primary);
}
.ar-options{
display:flex;
flex-direction:column;
gap:8px;
}
.ar-opt{
position:relative;
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
border-radius:10px;
border:1px solid var(--gray-border);
background:var(--surface);
cursor:pointer;
font-size:14.5px;
font-weight:500;
color:var(--text-primary);
transition:border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.2,.8,.2,1.2);
}
.ar-opt:hover{
border-color:rgba(11,95,186,0.30);
background:rgba(11,95,186,0.03);
transform:translateY(-1px);
}
[data-theme="dark"] .ar-opt{
background:rgba(20,38,66,0.6);
border-color:rgba(120,170,230,0.18);
}
[data-theme="dark"] .ar-opt:hover{
background:rgba(74,163,240,0.10);
border-color:rgba(74,163,240,0.40);
}
.ar-opt input{
position:absolute;
opacity:0;
pointer-events:none;
}
.ar-opt::before{
content:"";
width:18px;
height:18px;
border-radius:50%;
border:1.5px solid var(--gray-border);
flex-shrink:0;
transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
background:#fff;
}
[data-theme="dark"] .ar-opt::before{background:rgba(20,38,66,0.4);border-color:rgba(120,170,230,0.30)}
.ar-opt:has(input:checked){
border-color:var(--ms-blue);
background:rgba(11,95,186,0.05);
box-shadow:inset 0 0 0 1px rgba(11,95,186,0.18);
}
.ar-opt:has(input:checked)::before{
border-color:var(--ms-blue);
background:radial-gradient(circle at center, var(--ms-blue) 0%, var(--ms-blue) 40%, #fff 42%);
}
/* Fields */
.ar-fields{
display:flex;
flex-direction:column;
gap:14px;
}
.ar-field{
display:flex;
flex-direction:column;
gap:6px;
}
.ar-field span{
font-size:12px;
font-weight:600;
letter-spacing:0.04em;
color:var(--text-secondary);
text-transform:uppercase;
}
.ar-field input{
padding:12px 14px;
border-radius:10px;
border:1px solid var(--gray-border);
background:var(--surface);
font-size:14.5px;
font-family:inherit;
color:var(--text-primary);
transition:border-color .2s ease, box-shadow .2s ease;
}
[data-theme="dark"] .ar-field input{
background:rgba(20,38,66,0.6);
border-color:rgba(120,170,230,0.20);
color:var(--text-primary);
}
.ar-field input:focus{
outline:none;
border-color:var(--ms-blue);
box-shadow:0 0 0 3px rgba(11,95,186,0.14);
}
.ar-consent{
display:flex;
align-items:flex-start;
gap:10px;
font-size:12.5px;
color:var(--text-secondary);
line-height:1.5;
margin-top:4px;
}
.ar-consent input{
margin-top:2px;
flex-shrink:0;
accent-color:var(--ms-blue);
}
/* Progress + controls */
.ar-progress{
display:flex;
align-items:center;
gap:12px;
margin:24px 0 16px;
}
.ar-progress-bar{
flex:1;
height:4px;
background:rgba(11,95,186,0.10);
border-radius:100px;
overflow:hidden;
}
[data-theme="dark"] .ar-progress-bar{background:rgba(74,163,240,0.14)}
.ar-progress-bar i{
display:block;
height:100%;
background:linear-gradient(90deg, var(--ms-blue), var(--blue-electric));
border-radius:inherit;
transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.ar-progress-meta{
font-size:12px;
font-weight:600;
color:var(--text-secondary);
font-feature-settings:"tnum" 1, "lnum" 1;
flex-shrink:0;
}
.ar-progress-meta b{color:var(--text-primary);font-weight:700}
.ar-controls{
display:flex;
align-items:center;
gap:12px;
}
.ar-btn-back{
background:none;
border:none;
color:var(--text-secondary);
font-size:14px;
font-weight:600;
font-family:inherit;
cursor:pointer;
padding:10px 14px;
border-radius:8px;
transition:color .2s ease, background .2s ease, opacity .2s ease;
}
.ar-btn-back:hover:not(:disabled){
color:var(--ms-blue);
background:rgba(11,95,186,0.06);
}
.ar-btn-back:disabled{
opacity:.35;
cursor:not-allowed;
}
.ar-btn-next,
.ar-btn-submit{
margin-left:auto;
}
/* Respect [hidden] attribute on flex buttons */
.ar-controls .cta-button[hidden]{display:none !important}
/* Success state */
.ar-success{
display:none;
flex-direction:column;
align-items:center;
text-align:center;
padding:32px 12px;
flex:1;
}
.ar-success.is-active{
display:flex;
}
.ar-success-ic{
width:62px;
height:62px;
border-radius:50%;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
color:#fff;
display:flex;align-items:center;justify-content:center;
margin-bottom:18px;
box-shadow:0 12px 30px rgba(11,95,186,0.32);
animation:successPop .55s cubic-bezier(.2,1.6,.4,1) both;
}
.ar-success-ic svg{width:28px;height:28px}
.ar-success h3{
font-size:24px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
margin-bottom:10px;
}
.ar-success p{
font-size:14.5px;
color:var(--text-secondary);
line-height:1.6;
max-width:380px;
}
@keyframes successPop{
0%{transform:scale(0.4);opacity:0}
60%{transform:scale(1.08);opacity:1}
100%{transform:scale(1)}
}
@media (max-width:1000px){
.ar-wrap{
grid-template-columns:1fr;
gap:36px;
}
.ar-left{position:static;max-width:none}
.assessment-section{padding:72px 0 64px}
}
@media (max-width:560px){
.ar-form{padding:28px 22px 22px}
.ar-step-h h3{font-size:19px}
.ar-opt{padding:13px 14px;font-size:14px}
}
/* === Alt paths: 2 lead magnet secondari (Recovery checklist + Whitepaper) === */
.alt-paths{
margin-top:48px;
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
.alt-card{
--alt-c: var(--ms-blue);
--alt-shadow: rgba(11,95,186,0.18);
--alt-soft: rgba(11,95,186,0.06);
--alt-border: rgba(11,95,186,0.20);
position:relative;
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-xl);
padding:28px 30px 26px;
overflow:hidden;
isolation:isolate;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 8px 22px rgba(11,38,71,0.05);
transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .4s cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] .alt-card{
background:rgba(13,26,47,0.78);
border-color:rgba(120,170,230,0.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 32px rgba(0,0,0,0.30);
}
.alt-card--recovery{
--alt-c: var(--accent-recovery);
--alt-c-dark: var(--accent-recovery-dark);
--alt-shadow: var(--accent-recovery-shadow);
--alt-soft: rgba(194,65,12,0.06);
--alt-border: rgba(194,65,12,0.22);
}
[data-theme="dark"] .alt-card--recovery{
--alt-soft: rgba(251,146,60,0.08);
--alt-border: rgba(251,146,60,0.24);
}
.alt-card--knowledge{
--alt-c: var(--accent-knowledge);
--alt-c-dark: var(--accent-knowledge-dark);
--alt-shadow: var(--accent-knowledge-shadow);
--alt-soft: rgba(15,118,110,0.06);
--alt-border: rgba(15,118,110,0.22);
}
[data-theme="dark"] .alt-card--knowledge{
--alt-soft: rgba(94,234,212,0.08);
--alt-border: rgba(94,234,212,0.24);
}
.alt-card::before{
/* Top accent strip */
content:"";
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg, var(--alt-c), color-mix(in srgb, var(--alt-c) 50%, transparent));
}
.alt-card:hover{
transform:translateY(-4px);
border-color:var(--alt-border);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 18px 40px var(--alt-shadow);
}
[data-theme="dark"] .alt-card:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 18px 40px var(--alt-shadow);
}
.alt-card-deco{
/* Decorative blurred halo bottom-right matched to accent */
position:absolute;
bottom:-80px;
right:-80px;
width:220px;
height:220px;
border-radius:50%;
background:radial-gradient(circle, var(--alt-soft), transparent 70%);
filter:blur(20px);
z-index:-1;
transition:transform .8s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
opacity:.85;
}
.alt-card:hover .alt-card-deco{
transform:scale(1.18) translate(-10px, -10px);
opacity:1;
}
.alt-card-meta{
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px;
}
.alt-card-ic{
width:40px;
height:40px;
border-radius:10px;
background:var(--alt-soft);
border:1px solid var(--alt-border);
color:var(--alt-c);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
transition:transform .35s cubic-bezier(.2,1.4,.4,1), background .25s ease;
}
.alt-card-ic svg{width:20px;height:20px}
.alt-card:hover .alt-card-ic{
transform:rotate(-6deg) scale(1.08);
}
.alt-card-tag{
display:inline-flex;
align-items:center;
gap:8px;
padding:5px 11px;
border-radius:100px;
background:var(--alt-soft);
border:1px solid var(--alt-border);
color:var(--alt-c);
font-size:11px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
}
[data-theme="dark"] .alt-card-tag{
color:var(--alt-c-dark, var(--alt-c));
}
.alt-card-title{
font-size:20px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.015em;
line-height:1.25;
margin-bottom:10px;
}
.alt-card-desc{
font-size:14px;
color:var(--text-secondary);
line-height:1.6;
margin-bottom:18px;
}
.alt-card-cta{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 16px;
border-radius:8px;
background:transparent;
border:1px solid var(--alt-border);
color:var(--alt-c);
font-family:inherit;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:background .2s ease, border-color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1.2);
}
[data-theme="dark"] .alt-card-cta{
color:var(--alt-c-dark, var(--alt-c));
}
.alt-card-cta:hover{
background:var(--alt-soft);
border-color:var(--alt-c);
}
.alt-card-cta svg{
transition:transform .25s cubic-bezier(.2,.8,.2,1.2);
}
.alt-card-cta:hover svg{
transform:translateX(3px);
}
@media (max-width:760px){
.alt-paths{
grid-template-columns:1fr;
gap:14px;
}
.alt-card{padding:24px 22px 22px}
.alt-card-title{font-size:18px}
}
/* =========================================================
RECOVERY SELF-CHECK MODAL — 7-question quiz with scoring
========================================================= */
.rsc-overlay{
position:fixed;
inset:0;
z-index:2000;
background:rgba(8,17,31,0.72);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
display:none;
align-items:center;
justify-content:center;
padding:24px;
opacity:0;
transition:opacity .25s ease;
}
.rsc-overlay.is-open{
display:flex;
opacity:1;
}
.rsc-modal{
width:100%;
max-width:640px;
max-height:88vh;
background:var(--surface);
border-radius:var(--r-xl);
border:1px solid var(--gray-border);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 28px 64px rgba(8,17,31,0.40);
display:flex;
flex-direction:column;
overflow:hidden;
transform:translateY(16px) scale(0.98);
opacity:0;
transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.rsc-overlay.is-open .rsc-modal{
transform:translateY(0) scale(1);
opacity:1;
}
[data-theme="dark"] .rsc-modal{
background:#0d1a2f;
border-color:rgba(120,170,230,0.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 28px 64px rgba(0,0,0,0.60);
}
.rsc-modal::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg, var(--accent-recovery), color-mix(in srgb, var(--accent-recovery) 40%, transparent));
z-index:1;
}
.rsc-head{
position:relative;
padding:26px 26px 18px;
border-bottom:1px solid var(--gray-border);
display:flex;
align-items:flex-start;
gap:16px;
}
[data-theme="dark"] .rsc-head{border-bottom-color:rgba(120,170,230,0.14)}
.rsc-meta{flex:1;min-width:0}
.rsc-tag{
display:inline-block;
padding:4px 10px;
border-radius:100px;
font-size:10.5px;
font-weight:600;
letter-spacing:0.10em;
text-transform:uppercase;
color:var(--accent-recovery);
background:rgba(194,65,12,0.08);
border:1px solid rgba(194,65,12,0.22);
margin-bottom:10px;
}
[data-theme="dark"] .rsc-tag{
color:var(--accent-recovery-dark);
background:rgba(251,146,60,0.10);
border-color:rgba(251,146,60,0.24);
}
.rsc-title{
font-size:22px;
font-weight:700;
letter-spacing:-0.015em;
color:var(--text-primary);
line-height:1.2;
margin-bottom:8px;
}
.rsc-sub{
font-size:13.5px;
color:var(--text-secondary);
line-height:1.55;
}
.rsc-close{
width:36px;
height:36px;
border-radius:10px;
background:transparent;
border:1px solid var(--gray-border);
color:var(--text-secondary);
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:background .2s ease, border-color .2s ease, color .2s ease;
flex-shrink:0;
}
.rsc-close:hover{
background:rgba(194,65,12,0.06);
border-color:rgba(194,65,12,0.30);
color:var(--accent-recovery);
}
.rsc-close svg{width:16px;height:16px}
.rsc-body{
flex:1;
overflow-y:auto;
padding:22px 26px 8px;
}
.rsc-q{
padding:16px 0;
border-bottom:1px solid var(--gray-border);
display:flex;
align-items:center;
gap:14px;
}
[data-theme="dark"] .rsc-q{border-bottom-color:rgba(120,170,230,0.10)}
.rsc-q:last-child{border-bottom:none}
.rsc-q-num{
flex-shrink:0;
min-width:32px;
padding:0 6px;
height:26px;
border-radius:6px;
border:1px solid var(--gray-border);
color:var(--text-secondary);
font-size:11px;
font-weight:600;
font-feature-settings:"tnum" 1;
display:flex;align-items:center;justify-content:center;
}
.rsc-q-text{
flex:1;
font-size:14.5px;
color:var(--text-primary);
line-height:1.45;
}
.rsc-q-controls{
display:flex;
gap:8px;
flex-shrink:0;
}
.rsc-q-btn{
padding:7px 14px;
border-radius:8px;
border:1px solid var(--gray-border);
background:var(--surface);
color:var(--text-secondary);
font-family:inherit;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1.2);
}
[data-theme="dark"] .rsc-q-btn{background:rgba(20,38,66,0.5);border-color:rgba(120,170,230,0.18)}
.rsc-q-btn:hover{
transform:translateY(-1px);
}
.rsc-q-btn.is-selected[data-v="yes"]{
color:#fff;
background:var(--accent-recovery);
border-color:var(--accent-recovery);
}
.rsc-q-btn.is-selected[data-v="no"]{
color:#fff;
background:#0d7c5d;
border-color:#0d7c5d;
}
.rsc-result{
padding:32px 28px;
display:flex;
flex-direction:column;
gap:18px;
}
.rsc-result-h{
display:flex;
align-items:center;
gap:14px;
}
.rsc-result-score{
flex-shrink:0;
width:74px;
height:74px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:28px;
font-weight:700;
color:#fff;
font-feature-settings:"tnum" 1, "lnum" 1;
background:var(--rsc-color, var(--ms-blue));
box-shadow:0 12px 28px var(--rsc-shadow, rgba(11,95,186,0.30));
}
.rsc-result-h h4{
font-size:21px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
line-height:1.2;
margin-bottom:4px;
}
.rsc-result-h p{
font-size:13.5px;
color:var(--text-secondary);
line-height:1.5;
}
.rsc-result-body{
padding:18px 20px;
border-radius:14px;
background:var(--rsc-soft, rgba(11,95,186,0.05));
border:1px solid var(--rsc-border, rgba(11,95,186,0.18));
font-size:14px;
color:var(--text-primary);
line-height:1.6;
}
.rsc-result-body strong{color:var(--rsc-color, var(--ms-blue))}
.rsc-result-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.rsc-result-actions .cta-button{margin:0}
.rsc-foot{
padding:18px 26px 22px;
border-top:1px solid var(--gray-border);
display:flex;
align-items:center;
gap:14px;
}
[data-theme="dark"] .rsc-foot{border-top-color:rgba(120,170,230,0.14)}
.rsc-progress{
flex:1;
display:flex;
align-items:center;
gap:10px;
}
.rsc-progress-bar{
flex:1;
height:4px;
background:rgba(194,65,12,0.08);
border-radius:100px;
overflow:hidden;
}
[data-theme="dark"] .rsc-progress-bar{background:rgba(251,146,60,0.10)}
.rsc-progress-bar i{
display:block;
height:100%;
background:linear-gradient(90deg, var(--accent-recovery), #fbbf24);
border-radius:inherit;
transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.rsc-progress-meta{
font-size:12px;
font-weight:600;
color:var(--text-secondary);
font-feature-settings:"tnum" 1, "lnum" 1;
}
.rsc-progress-meta b{color:var(--text-primary);font-weight:700}
.rsc-btn{
padding:8px 14px;
border-radius:8px;
border:1px solid var(--gray-border);
background:transparent;
color:var(--text-secondary);
font-family:inherit;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:background .2s ease, color .2s ease;
}
.rsc-btn:hover{
background:rgba(194,65,12,0.06);
color:var(--accent-recovery);
}
@media (max-width:560px){
.rsc-head{padding:20px 20px 14px;flex-direction:column;gap:12px;align-items:flex-start}
.rsc-close{position:absolute;top:14px;right:14px}
.rsc-body{padding:18px 20px 6px}
.rsc-q{flex-wrap:wrap;gap:10px}
.rsc-q-text{flex:1 0 calc(100% - 46px);font-size:14px}
.rsc-q-controls{margin-left:46px}
.rsc-foot{padding:14px 20px 18px;flex-direction:column;align-items:stretch}
.rsc-result{padding:24px 20px}
.rsc-result-h{flex-direction:column;text-align:center;align-items:center}
}
/* =========================================================
WHY US
========================================================= */
.why-section{
padding:80px 0;
position:relative;
background:
radial-gradient(circle 700px at 90% 30%, rgba(11,95,186,0.05), transparent 50%),
radial-gradient(circle 600px at 10% 80%, rgba(15,118,110,0.04), transparent 50%);
overflow:hidden;
}
[data-theme="dark"] .why-section{
background:
radial-gradient(circle 700px at 90% 30%, rgba(74,163,240,0.08), transparent 50%),
radial-gradient(circle 600px at 10% 80%, rgba(94,234,212,0.05), transparent 50%);
}
/* Topographic / contour decorative lines (SVG-based via background-image) */
.why-section::before{
content:"";
position:absolute;
inset:0;
background-image:url("data:image/svg+xml;utf8,");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:.7;
pointer-events:none;
z-index:0;
}
[data-theme="dark"] .why-section::before{
background-image:url("data:image/svg+xml;utf8,");
}
.why-section > *{position:relative;z-index:1}
.why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.why-card{
background:var(--glass-bg);
backdrop-filter:blur(16px);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
box-shadow:var(--glass-shadow);
padding:24px;
transition:background .25s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
display:flex;
gap:16px;
align-items:flex-start;
color:var(--text-primary);
}
.why-card:hover{
background:var(--glass-bg-strong);
transform:translateY(-2px);
box-shadow:var(--glass-shadow-lg);
border-color:rgba(11,95,186,0.22);
}
.why-card .ic{
--wic: var(--ms-blue);
width:46px;height:46px;
flex-shrink:0;
border-radius:12px;
background:color-mix(in srgb, var(--wic) 8%, var(--surface));
border:1px solid color-mix(in srgb, var(--wic) 22%, transparent);
display:flex;
align-items:center;
justify-content:center;
transition:background .3s ease, border-color .3s ease;
}
[data-theme="dark"] .why-card .ic{
background:color-mix(in srgb, var(--wic) 16%, transparent);
border-color:color-mix(in srgb, var(--wic) 32%, transparent);
}
.why-card .ic svg{width:24px;height:24px;color:var(--wic)}
/* 6 accent diversi per le 6 voci (subtle ma distinti) */
.why-grid .why-card:nth-child(1) .ic{--wic: #0b5fba} /* blu brand */
.why-grid .why-card:nth-child(2) .ic{--wic: #4f46e5} /* indigo */
.why-grid .why-card:nth-child(3) .ic{--wic: #c2410c} /* amber recovery */
.why-grid .why-card:nth-child(4) .ic{--wic: #0d7c5d} /* verde NTS */
.why-grid .why-card:nth-child(5) .ic{--wic: #0891b2} /* cyan */
.why-grid .why-card:nth-child(6) .ic{--wic: #0f766e} /* teal knowledge */
[data-theme="dark"] .why-grid .why-card:nth-child(1) .ic{--wic: #7fc1ff}
[data-theme="dark"] .why-grid .why-card:nth-child(2) .ic{--wic: #a5b4fc}
[data-theme="dark"] .why-grid .why-card:nth-child(3) .ic{--wic: #fdba74}
[data-theme="dark"] .why-grid .why-card:nth-child(4) .ic{--wic: #5eead4}
[data-theme="dark"] .why-grid .why-card:nth-child(5) .ic{--wic: #67e8f9}
[data-theme="dark"] .why-grid .why-card:nth-child(6) .ic{--wic: #99f6e4}
.why-card h4{
font-size:15px;
font-weight:600;
color:var(--text-primary);
margin-bottom:6px;
line-height:1.3;
transition:color .3s ease;
}
.why-card p{
font-size:13.5px;
color:var(--text-secondary);
line-height:1.5;
transition:color .3s ease;
}
/* =========================================================
CONTATTI / FORM
========================================================= */
.contact-section{padding:80px 0 120px}
.contact-grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:48px;
}
.contact-info{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:36px;
box-shadow:var(--glass-shadow);
height:fit-content;
transition:background .3s ease, border-color .3s ease;
}
.contact-info h3{
font-size:24px;
font-weight:700;
color:var(--text-primary);
margin-bottom:8px;
letter-spacing:-0.02em;
transition:color .3s ease;
}
.contact-info > p{
font-size:15px;
color:var(--text-secondary);
margin-bottom:28px;
line-height:1.6;
transition:color .3s ease;
}
.contact-row{
display:flex;
gap:14px;
padding:16px 0;
border-bottom:1px solid rgba(0,120,212,0.08);
align-items:flex-start;
transition:border-color .3s ease;
}
[data-theme="dark"] .contact-row{border-bottom-color:rgba(120,170,230,0.12)}
.contact-row:last-of-type{border-bottom:none}
.contact-row .ic{
width:38px;height:38px;
border-radius:10px;
background:linear-gradient(135deg, var(--blue-soft), var(--surface));
border:1px solid rgba(0,120,212,0.18);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:background .3s ease, border-color .3s ease;
}
[data-theme="dark"] .contact-row .ic{
background:linear-gradient(135deg, rgba(74,163,240,0.20), rgba(74,163,240,0.05));
border-color:rgba(74,163,240,0.30);
}
.contact-row .ic svg{width:18px;height:18px;color:var(--ms-blue)}
.contact-row h5{
font-size:12px;
font-weight:600;
color:var(--ms-blue);
letter-spacing:0.06em;
text-transform:uppercase;
margin-bottom:4px;
}
.contact-row p{
font-size:14.5px;
color:var(--text-primary);
line-height:1.5;
transition:color .3s ease;
}
.contact-form{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:40px;
box-shadow:var(--glass-shadow-lg);
transition:background .3s ease, border-color .3s ease;
}
.contact-form h3{
font-size:26px;
font-weight:700;
color:var(--text-primary);
margin-bottom:8px;
letter-spacing:-0.02em;
transition:color .3s ease;
}
.contact-form > p.lede{
font-size:14.5px;
color:var(--text-secondary);
margin-bottom:28px;
transition:color .3s ease;
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:14px;
}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.full{grid-column:1 / -1}
.form-field label{
font-size:12.5px;
font-weight:600;
color:var(--text-primary);
letter-spacing:0.02em;
transition:color .3s ease;
}
.form-field input,
.form-field select,
.form-field textarea{
padding:12px 14px;
border-radius:10px;
border:1.5px solid var(--gray-border);
background:rgba(255,255,255,0.85);
font-family:inherit;
font-size:14px;
color:var(--text-primary);
transition:all .2s ease;
outline:none;
}
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea{
background:rgba(10,20,38,0.7);
border-color:rgba(120,170,230,0.18);
color:var(--text-primary);
}
[data-theme="dark"] .form-field input::placeholder,
[data-theme="dark"] .form-field textarea::placeholder{color:rgba(165,186,213,0.45)}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
border-color:var(--ms-blue);
box-shadow:0 0 0 4px rgba(0,120,212,0.10);
background:white;
}
[data-theme="dark"] .form-field input:focus,
[data-theme="dark"] .form-field select:focus,
[data-theme="dark"] .form-field textarea:focus{
background:rgba(20,40,70,0.9);
box-shadow:0 0 0 4px rgba(74,163,240,0.18);
}
.form-field textarea{
min-height:110px;
resize:vertical;
font-family:inherit;
}
.form-consent{
display:flex;
gap:10px;
margin:18px 0 20px;
align-items:flex-start;
font-size:12.5px;
color:var(--text-secondary);
line-height:1.5;
transition:color .3s ease;
}
.form-consent input{
margin-top:2px;
accent-color:var(--ms-blue);
}
.form-submit{
width:100%;
padding:14px;
border-radius:12px;
background:linear-gradient(135deg, var(--ms-blue) 0%, var(--blue-electric) 100%);
color:white;
font-weight:600;
font-size:15px;
border:none;
cursor:pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 10px 24px rgba(0,120,212,0.32);
transition:all .2s ease;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.form-submit:hover{
transform:translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 14px 28px rgba(0,120,212,0.42);
}
.form-success{
display:none;
padding:18px;
border-radius:12px;
background:rgba(0,130,114,0.08);
border:1px solid rgba(0,130,114,0.25);
color:var(--teal-accent);
font-size:14.5px;
font-weight:500;
margin-top:14px;
align-items:center;
gap:10px;
}
.form-success.show{display:flex}
.form-success svg{width:20px;height:20px;flex-shrink:0}
/* =========================================================
TEAM SECTION
========================================================= */
.team-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.team-card{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
padding:30px;
box-shadow:var(--glass-shadow);
transition:all .3s ease;
color:var(--text-primary);
}
.team-card:hover{
transform:translateY(-4px);
box-shadow:var(--glass-shadow-lg);
}
.team-card h3{
font-size:20px;
font-weight:700;
color:var(--text-primary);
margin-bottom:6px;
letter-spacing:-0.01em;
transition:color .3s ease;
}
.team-card .role{
font-size:12.5px;
color:var(--ms-blue);
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
margin-bottom:14px;
}
.team-card p{
font-size:14px;
color:var(--text-secondary);
line-height:1.55;
margin-bottom:18px;
transition:color .3s ease;
}
.team-tags{display:flex;flex-wrap:wrap;gap:8px}
.team-tag{
padding:5px 12px;
border-radius:100px;
background:rgba(0,120,212,0.08);
color:var(--ms-blue-dark);
font-size:11.5px;
font-weight:500;
transition:background .3s ease, color .3s ease;
}
[data-theme="dark"] .team-tag{
background:rgba(74,163,240,0.18);
color:#a8d4f8;
}
.org-chart{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:40px;
box-shadow:var(--glass-shadow);
margin-top:40px;
transition:background .3s ease, border-color .3s ease;
}
.org-l1{
display:flex;
justify-content:center;
position:relative;
}
.org-l1::after{
content:"";
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
width:2px;
height:26px;
background:rgba(0,120,212,0.4);
}
[data-theme="dark"] .org-l1::after{background:rgba(120,180,255,0.4)}
.org-l2{
display:flex;
gap:16px;
position:relative;
padding-top:52px;
}
.org-l2::before{
content:"";
position:absolute;
top:26px;
left:12.5%;
right:12.5%;
height:2px;
background:rgba(0,120,212,0.4);
}
[data-theme="dark"] .org-l2::before{background:rgba(120,180,255,0.4)}
.org-branch{
flex:1;
display:flex;
justify-content:center;
position:relative;
}
.org-branch::before{
content:"";
position:absolute;
bottom:100%;
left:50%;
transform:translateX(-50%);
width:2px;
height:26px;
background:rgba(0,120,212,0.4);
}
[data-theme="dark"] .org-branch::before{background:rgba(120,180,255,0.4)}
.org-l2 .org-node{font-size:13px;text-align:center}
.org-node{
padding:12px 22px;
border-radius:12px;
background:var(--surface);
border:1px solid var(--glass-border);
font-size:13.5px;
font-weight:600;
color:var(--text-primary);
box-shadow:0 4px 10px rgba(15,60,130,0.06);
transition:background .3s ease, color .3s ease, border-color .3s ease;
}
[data-theme="dark"] .org-node{
background:rgba(20,40,70,0.7);
border-color:rgba(120,170,230,0.2);
box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
.org-node.primary{
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
color:white;
border-color:transparent;
box-shadow:0 8px 18px rgba(0,120,212,0.3);
}
/* =========================================================
ERP COMPARE — Tabella confronto SAP B1 vs NTS Business Cube
========================================================= */
.erp-compare{
margin-top:60px;
padding-top:48px;
border-top:1px solid var(--gray-border);
}
[data-theme="dark"] .erp-compare{border-top-color:rgba(120,170,230,0.14)}
.erp-compare-h{
max-width:720px;
margin-bottom:36px;
}
.erp-compare-title{
font-size:clamp(28px, 3.4vw, 38px);
font-weight:700;
letter-spacing:-0.025em;
color:var(--text-primary);
line-height:1.15;
margin-top:6px;
}
.erp-compare-sub{
font-size:15px;
color:var(--text-secondary);
line-height:1.6;
margin-top:14px;
max-width:600px;
}
.erp-compare-table-wrap{
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-xl);
overflow:hidden;
box-shadow:0 12px 32px rgba(11,38,71,0.06);
}
[data-theme="dark"] .erp-compare-table-wrap{
background:rgba(13,26,47,0.78);
border-color:rgba(120,170,230,0.18);
box-shadow:0 14px 36px rgba(0,0,0,0.30);
}
.erp-compare-table{
width:100%;
border-collapse:collapse;
font-size:14px;
color:var(--text-primary);
}
.erp-compare-table th,
.erp-compare-table td{
padding:16px 20px;
text-align:left;
vertical-align:top;
line-height:1.5;
}
.erp-compare-table thead th{
background:linear-gradient(180deg, rgba(11,95,186,0.04), rgba(11,95,186,0.02));
border-bottom:1px solid var(--gray-border);
font-weight:700;
padding:24px 20px;
}
[data-theme="dark"] .erp-compare-table thead th{
background:linear-gradient(180deg, rgba(74,163,240,0.08), rgba(74,163,240,0.03));
border-bottom-color:rgba(120,170,230,0.18);
}
.ec-criterion{
width:24%;
color:var(--text-secondary);
font-weight:600;
font-size:12px;
letter-spacing:0.06em;
text-transform:uppercase;
}
.ec-col{
width:38%;
}
.ec-col-h{
display:flex;
flex-direction:column;
gap:8px;
}
.ec-col-tag{
display:inline-block;
padding:3px 10px;
border-radius:100px;
font-size:10.5px;
font-weight:600;
letter-spacing:0.10em;
text-transform:uppercase;
width:fit-content;
}
.ec-col--sap .ec-col-tag{
color:var(--ms-blue);
background:rgba(11,95,186,0.08);
border:1px solid rgba(11,95,186,0.22);
}
.ec-col--nts .ec-col-tag{
color:#0d7c5d;
background:rgba(13,124,93,0.08);
border:1px solid rgba(13,124,93,0.24);
}
[data-theme="dark"] .ec-col--sap .ec-col-tag{color:#7fc1ff;background:rgba(74,163,240,0.14)}
[data-theme="dark"] .ec-col--nts .ec-col-tag{color:#5eead4;background:rgba(94,234,212,0.10)}
.ec-col-h strong{
font-size:18px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
}
.erp-compare-table tbody tr{
border-bottom:1px solid var(--gray-border);
transition:background .2s ease;
}
[data-theme="dark"] .erp-compare-table tbody tr{border-bottom-color:rgba(120,170,230,0.08)}
.erp-compare-table tbody tr:hover{
background:rgba(11,95,186,0.025);
}
[data-theme="dark"] .erp-compare-table tbody tr:hover{
background:rgba(74,163,240,0.05);
}
.erp-compare-table tbody th{
color:var(--text-primary);
font-weight:600;
font-size:13.5px;
}
.erp-compare-table tbody td{
color:var(--text-secondary);
}
.ec-check{
display:inline-flex;
align-items:center;
gap:8px;
padding:4px 10px 4px 8px;
border-radius:100px;
font-size:13px;
font-weight:600;
line-height:1.3;
}
.ec-check::before{
content:"";
width:14px;
height:14px;
flex-shrink:0;
border-radius:50%;
background-position:center;
background-repeat:no-repeat;
background-size:10px;
}
.ec-check--full{
color:#0d7c5d;
background:rgba(13,124,93,0.08);
border:1px solid rgba(13,124,93,0.22);
}
.ec-check--full::before{
background-color:#0d7c5d;
background-image:url("data:image/svg+xml;utf8,");
}
.ec-check--partial{
color:#b45309;
background:rgba(180,83,9,0.08);
border:1px solid rgba(180,83,9,0.24);
}
.ec-check--partial::before{
background-color:#b45309;
background-image:url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] .ec-check--full{color:#5eead4;background:rgba(94,234,212,0.10);border-color:rgba(94,234,212,0.22)}
[data-theme="dark"] .ec-check--partial{color:#fdba74;background:rgba(251,146,60,0.10);border-color:rgba(251,146,60,0.24)}
.erp-compare-table tfoot th{
color:var(--text-primary);
font-weight:700;
background:rgba(11,95,186,0.04);
border-top:1px solid var(--gray-border);
}
[data-theme="dark"] .erp-compare-table tfoot th{
background:rgba(74,163,240,0.08);
border-top-color:rgba(120,170,230,0.18);
}
.ec-rec{
padding:20px !important;
background:rgba(11,95,186,0.04);
}
[data-theme="dark"] .ec-rec{background:rgba(74,163,240,0.05)}
.ec-rec-split{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.ec-rec-cell{
padding:14px 16px;
border-radius:10px;
background:var(--surface);
border-left:3px solid;
font-size:13.5px;
color:var(--text-primary);
line-height:1.55;
}
[data-theme="dark"] .ec-rec-cell{background:rgba(13,26,47,0.6)}
.ec-rec-cell--sap{border-left-color:var(--ms-blue)}
.ec-rec-cell--sap strong{color:var(--ms-blue)}
.ec-rec-cell--nts{border-left-color:#0d7c5d}
.ec-rec-cell--nts strong{color:#0d7c5d}
[data-theme="dark"] .ec-rec-cell--nts{border-left-color:#5eead4}
[data-theme="dark"] .ec-rec-cell--nts strong{color:#5eead4}
.erp-compare-note{
margin-top:24px;
font-size:14px;
color:var(--text-secondary);
text-align:center;
line-height:1.6;
}
.erp-compare-note a{
color:var(--ms-blue);
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
}
.erp-compare-note a:hover{color:var(--blue-electric)}
@media (max-width:780px){
.erp-compare-table-wrap{overflow-x:auto}
.erp-compare-table{min-width:640px}
.ec-rec-split{grid-template-columns:1fr}
}
/* =========================================================
VISION & MISSION (Chi siamo page)
========================================================= */
.vm-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.vm-card{
padding:36px !important;
}
.vm-card h3{
font-size:22px !important;
margin-top:0;
}
.vm-card p{
font-size:15.5px !important;
margin-top:8px;
}
.vm-card .step-icon{
margin-bottom:20px !important;
}
/* Vision = blu brand, Mission = teal knowledge */
.vm-vision .step-icon{
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 24px rgba(11,95,186,0.28) !important;
}
.vm-mission .step-icon{
background:linear-gradient(135deg, #0f766e, #14b8a6) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 24px rgba(15,118,110,0.28) !important;
}
@media (max-width:760px){
.vm-grid{grid-template-columns:1fr}
}
/* KPI grid — 4 accent diversi (Chi siamo "I nostri numeri") */
.kpi-grid .kpi-card:nth-child(1) .kpi-icon svg{color:#0b5fba}
.kpi-grid .kpi-card:nth-child(2) .kpi-icon svg{color:#4f46e5}
.kpi-grid .kpi-card:nth-child(3) .kpi-icon svg{color:#d97706}
.kpi-grid .kpi-card:nth-child(4) .kpi-icon svg{color:#0f766e}
.kpi-grid .kpi-card:nth-child(1) .kpi-icon{background:rgba(11,95,186,0.10);border-color:rgba(11,95,186,0.22)}
.kpi-grid .kpi-card:nth-child(2) .kpi-icon{background:rgba(79,70,229,0.10);border-color:rgba(79,70,229,0.22)}
.kpi-grid .kpi-card:nth-child(3) .kpi-icon{background:rgba(217,119,6,0.10);border-color:rgba(217,119,6,0.22)}
.kpi-grid .kpi-card:nth-child(4) .kpi-icon{background:rgba(15,118,110,0.10);border-color:rgba(15,118,110,0.22)}
[data-theme="dark"] .kpi-grid .kpi-card:nth-child(1) .kpi-icon svg{color:#7fc1ff}
[data-theme="dark"] .kpi-grid .kpi-card:nth-child(2) .kpi-icon svg{color:#a5b4fc}
[data-theme="dark"] .kpi-grid .kpi-card:nth-child(3) .kpi-icon svg{color:#fdba74}
[data-theme="dark"] .kpi-grid .kpi-card:nth-child(4) .kpi-icon svg{color:#5eead4}
/* =========================================================
ORG MODEL — Modello a piattaforma (Team page)
Hub centrale + 4 aree + principio guida.
========================================================= */
.org-model{
margin-top:60px;
}
.org-model-h{
text-align:center;
max-width:680px;
margin:0 auto 40px;
}
.org-model-title{
font-size:clamp(24px, 3.2vw, 36px);
font-weight:700;
letter-spacing:-0.02em;
line-height:1.18;
color:var(--text-primary);
margin-top:6px;
}
.org-model-title em{
font-style:normal;
color:var(--ms-blue);
}
.org-model-sub{
font-size:15px;
color:var(--text-secondary);
line-height:1.6;
margin-top:14px;
}
.org-model-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
grid-template-rows:auto auto;
gap:18px;
align-items:stretch;
}
.org-hub{
grid-column:1 / -1;
position:relative;
padding:28px 32px;
background:linear-gradient(135deg, var(--ms-blue), var(--ms-blue-dark));
color:#fff;
border-radius:var(--r-xl);
overflow:hidden;
box-shadow:0 14px 32px rgba(11,95,186,0.28);
}
.org-hub::before{
content:"";
position:absolute;
top:-30%;right:-15%;
width:50%;height:160%;
background:radial-gradient(circle, rgba(255,255,255,0.14), transparent 60%);
pointer-events:none;
}
.org-hub-label{
display:inline-block;
padding:4px 10px;
border-radius:100px;
font-size:11px;
font-weight:600;
letter-spacing:0.10em;
text-transform:uppercase;
color:#fff;
background:rgba(255,255,255,0.18);
border:1px solid rgba(255,255,255,0.28);
margin-bottom:10px;
position:relative;
z-index:1;
}
.org-hub-name{
display:block;
font-size:24px;
font-weight:700;
letter-spacing:-0.015em;
margin-bottom:6px;
position:relative;
z-index:1;
}
.org-hub-desc{
font-size:14px;
color:rgba(255,255,255,0.88);
line-height:1.55;
max-width:440px;
position:relative;
z-index:1;
}
.org-hub-tags{
display:flex;
gap:8px;
margin-top:14px;
flex-wrap:wrap;
position:relative;
z-index:1;
}
.org-hub-tags span{
padding:5px 12px;
border-radius:100px;
background:rgba(255,255,255,0.16);
border:1px solid rgba(255,255,255,0.24);
color:#fff;
font-size:12px;
font-weight:600;
}
/* 4 aree — variazione cromatica sottile per coerenza visiva */
.org-area{
--area-c: var(--ms-blue);
--area-soft: rgba(11,95,186,0.06);
--area-border: rgba(11,95,186,0.20);
--area-shadow: rgba(11,95,186,0.10);
position:relative;
padding:22px 22px 20px;
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-lg);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 18px rgba(11,38,71,0.04);
transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .35s cubic-bezier(.2,.8,.2,1);
display:flex;
flex-direction:column;
}
[data-theme="dark"] .org-area{
background:rgba(13,26,47,0.72);
border-color:rgba(120,170,230,0.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.30);
}
.org-area:hover{
transform:translateY(-3px);
border-color:var(--area-border);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.7),
0 14px 32px var(--area-shadow);
}
.org-area::before{
content:"";
position:absolute;
top:0;left:0;right:0;
height:2px;
background:var(--area-c);
border-radius:var(--r-lg) var(--r-lg) 0 0;
opacity:.55;
}
/* Accent variations — sottili, non rainbow */
.org-area--process{
--area-c: var(--ms-blue);
--area-soft: rgba(11,95,186,0.06);
--area-border: rgba(11,95,186,0.25);
--area-shadow: rgba(11,95,186,0.12);
}
.org-area--app{
--area-c: #0d7c5d;
--area-soft: rgba(13,124,93,0.06);
--area-border: rgba(13,124,93,0.24);
--area-shadow: rgba(13,124,93,0.12);
}
.org-area--tech{
--area-c: var(--accent-knowledge);
--area-soft: rgba(15,118,110,0.06);
--area-border: rgba(15,118,110,0.24);
--area-shadow: rgba(15,118,110,0.12);
}
.org-area--delivery{
--area-c: #4f46e5;
--area-soft: rgba(79,70,229,0.06);
--area-border: rgba(79,70,229,0.24);
--area-shadow: rgba(79,70,229,0.12);
}
[data-theme="dark"] .org-area--app{--area-c:#5eead4;--area-shadow:rgba(94,234,212,0.14)}
[data-theme="dark"] .org-area--tech{--area-c:var(--accent-knowledge);--area-shadow:rgba(94,234,212,0.14)}
[data-theme="dark"] .org-area--delivery{--area-c:#a5b4fc;--area-shadow:rgba(165,180,252,0.14)}
.org-area-ic{
width:42px;
height:42px;
border-radius:10px;
background:var(--area-soft);
border:1px solid var(--area-border);
color:var(--area-c);
display:flex;align-items:center;justify-content:center;
margin-bottom:14px;
transition:transform .35s cubic-bezier(.2,1.4,.4,1);
}
.org-area-ic svg{width:22px;height:22px}
.org-area:hover .org-area-ic{transform:rotate(-4deg) scale(1.06)}
.org-area h4{
font-size:16px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
line-height:1.25;
margin-bottom:6px;
}
.org-area p{
font-size:13.5px;
color:var(--text-secondary);
line-height:1.55;
margin-bottom:14px;
flex:1;
}
.org-area-tags{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-top:auto;
}
.org-area-tags span{
padding:4px 10px;
border-radius:100px;
background:var(--area-soft);
border:1px solid var(--area-border);
color:var(--area-c);
font-size:11.5px;
font-weight:600;
}
/* Principio guida — barra orizzontale integrata */
.org-principle{
margin-top:32px;
padding:24px 28px;
background:linear-gradient(95deg, rgba(11,95,186,0.04), rgba(15,118,110,0.04));
border:1px solid rgba(11,95,186,0.14);
border-left:3px solid var(--ms-blue);
border-radius:var(--r-lg);
display:flex;
align-items:flex-start;
gap:18px;
}
[data-theme="dark"] .org-principle{
background:linear-gradient(95deg, rgba(74,163,240,0.08), rgba(94,234,212,0.05));
border-color:rgba(74,163,240,0.18);
border-left-color:var(--ms-blue);
}
.org-principle-ic{
flex-shrink:0;
width:32px;height:32px;
color:var(--ms-blue);
opacity:.7;
}
.org-principle-body{flex:1}
.org-principle-label{
display:block;
font-size:11px;
font-weight:600;
letter-spacing:0.10em;
text-transform:uppercase;
color:var(--ms-blue);
margin-bottom:6px;
}
.org-principle-body p{
font-size:15px;
color:var(--text-primary);
line-height:1.6;
font-weight:500;
}
.org-principle-body strong{color:var(--ms-blue);font-weight:700}
@media (max-width:900px){
.org-model-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:560px){
.org-model-grid{grid-template-columns:1fr;gap:12px}
.org-hub{padding:22px 22px}
.org-hub-name{font-size:20px}
.org-area{padding:20px 20px 18px}
.org-principle{flex-direction:column;gap:12px;padding:22px 22px;border-left-width:0;border-top:3px solid var(--ms-blue)}
}
/* =========================================================
FOOTER
========================================================= */
footer{
background:#0b2a52;
color:rgba(255,255,255,0.85);
padding:60px 0 24px;
margin-top:80px;
position:relative;
transition:background .3s ease;
}
[data-theme="dark"] footer{
background:#03060f;
}
.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:40px;
margin-bottom:40px;
}
.footer-brand p{
margin-top:16px;
font-size:13.5px;
line-height:1.6;
color:rgba(255,255,255,0.65);
}
footer h5{
color:white;
font-size:13px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
margin-bottom:18px;
}
.footer-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-list a{
color:rgba(255,255,255,0.7);
font-size:13.5px;
transition:color .2s;
cursor:pointer;
}
.footer-list a:hover{color:white}
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.1);
padding-top:22px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:14px;
font-size:12.5px;
color:rgba(255,255,255,0.55);
}
/* =========================================================
DEVICE PREVIEW TOGGLE (sticky bottom)
========================================================= */
.device-toolbar{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
background:rgba(13,28,52,0.92);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.15);
border-radius:100px;
padding:6px;
display:none;
gap:4px;
z-index:999;
box-shadow:0 12px 40px rgba(0,0,0,0.25);
}
body.dev-preview .device-toolbar{
display:flex;
}
.device-btn{
padding:8px 16px;
border-radius:100px;
color:rgba(255,255,255,0.6);
font-size:12.5px;
font-weight:500;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
transition:all .2s ease;
border:none;
background:transparent;
}
.device-btn:hover{color:white}
.device-btn.active{
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
color:white;
box-shadow:0 4px 12px rgba(0,120,212,0.4);
}
.device-btn svg{width:14px;height:14px}
/* Device frames for tablet/mobile */
body.dev-tablet .device-frame{
max-width:820px;
margin:90px auto 24px;
border-radius:36px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,0.2);
border:14px solid #1a2030;
}
body.dev-mobile .device-frame{
max-width:400px;
margin:90px auto 24px;
border-radius:42px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,0.25);
border:10px solid #1a2030;
}
/* Mobile menu drawer */
.mobile-drawer{
display:none;
position:fixed;
top:0;right:-100%;
width:85%;max-width:340px;
height:100vh;
background:rgba(255,255,255,0.95);
backdrop-filter:blur(30px);
z-index:1100;
padding:80px 28px 30px;
transition:right .3s ease, background .3s ease;
box-shadow:-20px 0 50px rgba(15,60,130,0.15);
}
[data-theme="dark"] .mobile-drawer{
background:rgba(8,16,30,0.96);
box-shadow:-20px 0 50px rgba(0,0,0,0.6);
}
.mobile-drawer.open{right:0;display:block}
.mobile-drawer .nav-link{
display:block;
padding:14px 0;
border-bottom:1px solid rgba(0,120,212,0.08);
font-size:16px;
}
.mobile-drawer .cta-button{
margin-top:20px;
width:100%;
justify-content:center;
}
.drawer-close{
position:absolute;
top:20px;right:20px;
width:38px;height:38px;
border-radius:50%;
background:rgba(0,120,212,0.1);
display:flex;
align-items:center;
justify-content:center;
border:none;
cursor:pointer;
}
.drawer-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(13,28,52,0.4);
backdrop-filter:blur(4px);
z-index:1050;
}
.drawer-overlay.show{display:block}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1000px){
.about-grid,
.recovery-grid,
.contact-grid{
grid-template-columns:1fr;
gap:48px;
}
.kpi-grid{grid-template-columns:repeat(2,1fr)}
.steps-grid,
.steps-grid.steps-5,
.steps-grid.steps-6{grid-template-columns:repeat(2,1fr)}
.steps-grid::before{display:none}
.sol-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
.cycle-grid{grid-template-columns:repeat(2,1fr)}
.why-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:repeat(2,1fr)}
.team-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}
@media (max-width: 1080px){
.nav-links{display:none}
.mobile-toggle{display:flex}
.cta-button.desktop-only{display:none}
}
@media (max-width: 1200px){
.nav-link{padding:8px 14px;font-size:15px;font-weight:700}
.brand-logo{width:240px;height:38px}
}
@media (max-width: 720px){
.hero{padding:130px 0 76px}
h1.hero-title{font-size:36px}
.hero-stats{gap:18px}
section{padding:60px 0}
.form-row{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;text-align:center}
.contact-form,
.contact-info{padding:24px}
.org-l2{flex-direction:column;gap:10px;padding-top:34px}
.org-l2::before,.org-branch::before{display:none}
.why-grid{grid-template-columns:1fr}
.cycle-grid{grid-template-columns:1fr}
.steps-grid.steps-6{grid-template-columns:1fr}
.kpi-grid{grid-template-columns:1fr 1fr}
.device-toolbar{transform:translateX(-50%) scale(.9)}
.brand-logo{width:170px;height:28px}
.arch-grid{grid-template-columns:1fr 1fr}
.flow-visual{flex-wrap:wrap;height:auto;gap:30px 12px;justify-content:center}
.flow-visual::before{display:none}
.flow-node{width:54px;height:54px}
.flow-label{font-size:11px}
.header .theme-toggle{display:none}
.lm-foot{flex-direction:column;align-items:flex-start;gap:8px}
.lm-dir-btn{align-self:stretch;justify-content:center}
}
/* Mobile preview specific tweaks */
body.dev-mobile h1.hero-title{font-size:32px !important}
body.dev-mobile .page-hero{
min-height:520px;
padding:132px 0 58px;
}
body.dev-mobile .page-hero-card{
padding:30px 22px 28px;
border-radius:22px;
}
body.dev-mobile h1.page-hero-title{font-size:32px !important}
body.dev-mobile .page-hero-lede{font-size:15.5px}
body.dev-mobile .page-content-lead{padding:52px 0 64px}
body.dev-mobile .about-grid,
body.dev-mobile .recovery-grid,
body.dev-mobile .contact-grid{grid-template-columns:1fr !important}
body.dev-mobile .nav-links{display:none}
body.dev-mobile .mobile-toggle{display:flex}
body.dev-mobile .cta-button.desktop-only{display:none}
body.dev-mobile .header .theme-toggle{display:none}
body.dev-mobile .kpi-grid,
body.dev-mobile .steps-grid,
body.dev-mobile .cycle-grid,
body.dev-mobile .why-grid,
body.dev-mobile .sol-grid,
body.dev-mobile .team-grid{grid-template-columns:1fr !important}
body.dev-mobile .form-row{grid-template-columns:1fr}
body.dev-mobile .footer-grid{grid-template-columns:1fr 1fr}
body.dev-mobile .flow-visual{flex-wrap:wrap !important;height:auto !important;gap:30px 12px !important;justify-content:center}
body.dev-mobile .flow-visual::before{display:none}
body.dev-mobile .arch-grid{grid-template-columns:1fr 1fr !important}
body.dev-tablet .nav-links .nav-link{padding:7px 11px;font-size:13px}
body.dev-tablet .kpi-grid{grid-template-columns:repeat(2,1fr)}
body.dev-tablet .sol-grid{grid-template-columns:1fr 1fr}
body.dev-tablet .team-grid{grid-template-columns:1fr 1fr}
/* =========================================================
MOTION SYSTEM — Reveal, counters, micro-interactions
========================================================= */
/* Reveal on scroll — supports per-element stagger via --i */
.reveal{
opacity:0;
transform:translateY(22px);
transition:
opacity .65s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 70ms),
transform .75s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 70ms),
filter .65s ease calc(var(--i, 0) * 70ms);
filter:blur(2px);
will-change:opacity, transform;
}
.reveal.in{opacity:1;transform:translateY(0);filter:none}
/* Eyebrow dot — subtle, sophisticated pulse */
.sect-eyebrow::before{
animation:eyebrowPulse 2.4s ease-in-out infinite;
}
@keyframes eyebrowPulse{
0%, 100%{ opacity:.7; transform:scale(1) }
50%{ opacity:1; transform:scale(1.18) }
}
/* CTA button arrow — slides right on hover */
.cta-button svg{
transition:transform .25s cubic-bezier(.2,.8,.2,1.2);
}
.cta-button:hover svg{
transform:translateX(3px);
}
/* bi-card — capability tiles, lift on hover */
.bento-illust .bi-card{
transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.bento-illust .bi-card:hover{
transform:translateY(-2px);
border-color:rgba(11,95,186,0.30);
box-shadow:0 8px 18px rgba(11,38,71,0.08);
}
/* od-system cells — subtle hover */
.ods-cell{
transition:transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.ods-cell:hover{
transform:translateY(-1px);
background:rgba(255,255,255,0.16);
}
.ods-cell-dot{
animation:cellDotPulse 3s ease-in-out infinite;
animation-delay:calc(var(--i, 0) * .4s);
}
@keyframes cellDotPulse{
0%, 100%{ box-shadow:0 0 0 3px rgba(158,200,255,0.18) }
50%{ box-shadow:0 0 0 5px rgba(158,200,255,0.32) }
}
/* Input pill chips — light hover */
.ods-pills li{
transition:transform .25s cubic-bezier(.2,.8,.2,1.2), background .2s ease, border-color .2s ease;
cursor:default;
}
.ods-pills li:hover{
transform:translateY(-1px);
border-color:rgba(11,95,186,0.32);
background:rgba(11,95,186,0.05);
}
/* Stat counter — tabular figures for clean digit transitions */
.hero-stat strong{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1, "lnum" 1;
}
/* Hero title fade-up on load (only once, fast) */
.hero-card .hero-title,
.hero-card .hero-sub,
.hero-card .hero-ctas,
.hero-card .hero-stats{
opacity:0;
transform:translateY(14px);
animation:heroIn .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-card .hero-title{ animation-delay:.05s }
.hero-card .hero-sub{ animation-delay:.18s }
.hero-card .hero-ctas{ animation-delay:.30s }
.hero-card .hero-stats{ animation-delay:.42s }
@keyframes heroIn{
to{ opacity:1; transform:translateY(0) }
}
@media (prefers-reduced-motion: reduce){
.orb,
.cloud-orbit,
.sect-eyebrow::before,
.ods-cell-dot,
.hero-card .hero-title,
.hero-card .hero-sub,
.hero-card .hero-ctas,
.hero-card .hero-stats{animation:none}
.reveal{transition:none;transform:none;filter:none;opacity:1}
.hero-card .hero-title,
.hero-card .hero-sub,
.hero-card .hero-ctas,
.hero-card .hero-stats{opacity:1;transform:none}
}
/* =========================================================
NEW DECORATIVE ILLUSTRATIONS & ICONS
========================================================= */
/* Locations Map (Milano + Novara) */
.locations-map{
position:relative;
width:100%;
height:100%;
display:flex;
flex-direction:column;
gap:14px;
}
.lm-tabs{
display:flex;
gap:8px;
flex-shrink:0;
}
.lm-tab{
flex:1;
padding:9px 14px;
border-radius:100px;
border:1px solid var(--glass-border);
background:var(--surface);
color:var(--text-primary);
font-family:inherit;
font-size:13.5px;
font-weight:600;
cursor:pointer;
transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.lm-tab:hover{border-color:var(--ms-blue)}
.lm-tab.active{
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
color:#fff;
border-color:transparent;
box-shadow:0 6px 14px rgba(0,120,212,0.35);
}
[data-theme="dark"] .lm-tab:not(.active){background:rgba(20,40,70,0.9)}
.lm-frame{
flex:1;
min-height:0;
border-radius:var(--r-lg);
overflow:hidden;
border:1px solid var(--glass-border);
box-shadow:0 4px 14px rgba(15,60,130,0.10);
}
.lm-frame iframe{
display:block;
width:100%;
height:100%;
border:0;
}
[data-theme="dark"] .lm-frame iframe{
filter:invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
.lm-foot{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.lm-addr{
display:flex;
flex-direction:column;
gap:1px;
min-width:0;
}
.lm-addr strong{
font-size:13.5px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.01em;
}
.lm-addr span{
font-size:11px;
color:var(--gray-medium);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.lm-dir-btn{
flex-shrink:0;
display:inline-flex;
align-items:center;
gap:4px;
padding:9px 16px;
border-radius:100px;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
color:#fff;
font-size:13px;
font-weight:600;
text-decoration:none;
box-shadow:0 6px 14px rgba(0,120,212,0.35);
transition:transform .2s ease, box-shadow .2s ease;
}
.lm-dir-btn:hover{
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(0,120,212,0.42);
}
/* ERP Architecture diagram (Solutions / SAP section) */
.arch-diagram{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:36px;
box-shadow:var(--glass-shadow);
transition:background .3s ease, border-color .3s ease;
}
.arch-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:14px;
margin-top:8px;
}
.arch-node{
background:linear-gradient(135deg, var(--blue-soft), var(--surface));
border:1px solid rgba(0,120,212,0.18);
border-radius:14px;
padding:16px 12px;
text-align:center;
transition:all .25s ease;
cursor:default;
}
[data-theme="dark"] .arch-node{
background:linear-gradient(135deg, rgba(74,163,240,0.16), rgba(74,163,240,0.05));
border-color:rgba(74,163,240,0.25);
}
.arch-node:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,120,212,0.15)}
.arch-node .ic{
width:36px;height:36px;
margin:0 auto 8px;
border-radius:10px;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 10px rgba(0,120,212,0.32);
}
.arch-node .ic svg{width:18px;height:18px;color:white}
.arch-node .lbl{
font-size:12px;
font-weight:600;
color:var(--text-primary);
margin-top:6px;
}
.arch-node .sub{
font-size:10px;
color:var(--gray-medium);
margin-top:2px;
}
.arch-row{
display:flex;
align-items:center;
justify-content:center;
color:var(--ms-blue);
margin:12px 0;
gap:6px;
font-size:11px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
}
.arch-row::before,
.arch-row::after{
content:"";
flex:1;
height:1px;
background:linear-gradient(90deg, transparent, rgba(0,120,212,0.3), transparent);
}
/* Cloud diagram */
.cloud-vis{
position:relative;
align-self:start;
background:var(--glass-bg-strong);
border:1px solid var(--glass-border);
border-radius:var(--r-xl);
padding:18px;
overflow:hidden;
transition:background .3s ease, border-color .3s ease;
}
.cloud-vis::before{
content:"";
position:absolute;
inset:-50% -20% auto auto;
width:380px;height:380px;
border-radius:50%;
background:radial-gradient(circle, rgba(43,136,240,0.30), transparent 70%);
filter:blur(40px);
}
.cloud-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
width:100%;
position:relative;
z-index:1;
}
.cloud-svc{
background:var(--surface);
border:1px solid var(--glass-border);
border-radius:16px;
padding:16px;
display:flex;
flex-direction:column;
gap:6px;
transition:background .3s ease, border-color .3s ease;
}
.cloud-svc-ic{
width:40px;height:40px;
border-radius:12px;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
display:flex;
align-items:center;
justify-content:center;
color:#fff;
margin-bottom:4px;
box-shadow:0 6px 14px rgba(0,120,212,0.3);
}
.cloud-svc-ic svg{width:20px;height:20px}
.cloud-svc h4{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-0.01em}
.cloud-svc p{font-size:12.5px;color:var(--text-secondary);line-height:1.45}
@media (max-width:560px){
.cloud-vis{padding:12px}
.cloud-grid{grid-template-columns:1fr;gap:10px}
.cloud-svc{padding:14px}
}
.cloud-circle{
position:relative;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
z-index:1;
}
.cloud-center{
width:96px;height:96px;
border-radius:30px;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 12px 32px rgba(0,120,212,0.45);
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:3;
}
.cloud-center svg{width:48px;height:48px;color:white}
.cloud-center-img{
background:white;
padding:14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 12px 32px rgba(0,120,212,0.32);
border:1px solid var(--glass-border);
}
.cloud-center-img img{
max-width:100%;
max-height:100%;
object-fit:contain;
display:block;
}
.cloud-orbit{
position:absolute;
inset:0;
border:1px dashed rgba(0,120,212,0.25);
border-radius:50%;
animation:rotateOrbit 30s linear infinite;
}
[data-theme="dark"] .cloud-orbit{border-color:rgba(120,180,255,0.25)}
.cloud-orbit-2{inset:14% ;animation-duration:25s;animation-direction:reverse}
@keyframes rotateOrbit{
to{transform:rotate(360deg)}
}
.cloud-satellite{
position:absolute;
width:48px;height:48px;
border-radius:14px;
background:var(--glass-bg-strong);
backdrop-filter:blur(10px);
border:1px solid var(--glass-border);
box-shadow:var(--glass-shadow);
display:flex;
align-items:center;
justify-content:center;
color:var(--ms-blue);
}
.cloud-satellite svg{width:22px;height:22px}
.cs-1{top:0;left:50%;transform:translate(-50%,0)}
.cs-2{right:0;top:50%;transform:translate(0,-50%)}
.cs-3{bottom:0;left:50%;transform:translate(-50%,0)}
.cs-4{left:0;top:50%;transform:translate(0,-50%)}
/* Floating glass elements */
.float-glass-icon{
position:absolute;
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:16px;
padding:12px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:var(--glass-shadow);
transition:background .3s ease, border-color .3s ease;
}
/* Process Flow Visual (for Method/Cycle) */
.flow-visual{
position:relative;
height:120px;
margin:40px auto 30px;
max-width:920px;
display:flex;
align-items:center;
justify-content:space-between;
}
.flow-visual::before{
content:"";
position:absolute;
top:50%;left:5%;right:5%;
height:3px;
background:linear-gradient(90deg, var(--ms-blue), var(--cyan-accent), var(--teal-accent));
border-radius:2px;
z-index:0;
opacity:.3;
}
.flow-node{
position:relative;
z-index:2;
width:64px;height:64px;
border-radius:50%;
background:var(--surface);
border:2px solid var(--ms-blue);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(0,120,212,0.18);
transition:all .3s ease;
}
.flow-node:hover{transform:scale(1.1);box-shadow:0 12px 28px rgba(0,120,212,0.32)}
.flow-node svg{width:26px;height:26px;color:var(--ms-blue)}
[data-theme="dark"] .flow-node{background:var(--surface-2)}
.flow-label{
position:absolute;
top:calc(100% + 12px);
left:50%;
transform:translateX(-50%);
font-size:12px;
font-weight:600;
color:var(--text-primary);
white-space:nowrap;
text-align:center;
}
/* Network mesh background */
.mesh-bg{
position:absolute;
inset:0;
pointer-events:none;
opacity:.5;
}
/* Quote highlight */
.quote-highlight{
background:linear-gradient(135deg, rgba(0,120,212,0.06), rgba(43,136,240,0.03));
border:1px solid rgba(0,120,212,0.12);
transition:background .3s ease, border-color .3s ease;
}
[data-theme="dark"] .quote-highlight{
background:linear-gradient(135deg, rgba(74,163,240,0.10), rgba(43,136,240,0.06));
border-color:rgba(74,163,240,0.20);
}
[data-theme="dark"] .quote-highlight h3{color:var(--text-primary) !important}
/* Hero badges (3D icon style) */
.icon-3d{
position:relative;
border-radius:20px;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric) 60%, var(--cyan-accent));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
0 12px 28px rgba(0,120,212,0.32);
display:inline-flex;
align-items:center;
justify-content:center;
}
.icon-3d::after{
content:"";
position:absolute;
inset:3px;
border-radius:17px;
background:linear-gradient(160deg, rgba(255,255,255,0.25) 0%, transparent 50%);
pointer-events:none;
}
.icon-3d svg{position:relative;z-index:1;color:white}
/* Glass numeric stat */
.glass-stat{
background:var(--glass-bg-strong);
backdrop-filter:blur(20px);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
padding:18px 22px;
display:flex;
align-items:center;
gap:14px;
transition:background .3s ease, border-color .3s ease;
}
.glass-stat .gv{
font-size:28px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.02em;
line-height:1;
}
.glass-stat .gl{
font-size:12.5px;
color:var(--gray-medium);
font-weight:500;
}
/* Footer brand spacing */
.footer-brand-logo{
display:flex;
align-items:center;
gap:14px;
margin-bottom:8px;
}
.footer-brand-logo .brand-logo{width:200px;height:36px}
/* Footer in dark mode: identical (already dark) */
/* Selectors helpers */
[data-theme="dark"] a{color:var(--text-primary)}
[data-theme="dark"] footer a{color:rgba(255,255,255,0.7)}
[data-theme="dark"] footer a:hover{color:white}
/* Lights mode SAP/NTS subtitle color in dark */
[data-theme="dark"] .sol-subtitle{color:#7cc1f7}
/* Make form-success readable in dark */
[data-theme="dark"] .form-success{
background:rgba(77,212,221,0.12);
border-color:rgba(77,212,221,0.30);
color:#7eecf2;
}
/* Inline anchor visible */
[data-theme="dark"] .form-consent a{color:#7cc1f7 !important}
/* =========================================================
UNIFORM SECTION BACKGROUNDS — un solo sfondo per tutto il sito
(il body-bg gradient mesh fa da fondo, le sezioni sono trasparenti).
Esclusa la hero (mantiene foto slideshow) e i page-hero (foto fissa).
========================================================= */
.about-brief,
.solutions-section,
.signals-section,
.tech-strip,
.method-section,
.home-method,
.assessment-section,
.recovery-mode,
.recovery-section,
.why-section,
.page-content-lead,
.team-integrated,
.kpi-section,
.vm-section{
background:transparent !important;
border-top:0 !important;
border-bottom:0 !important;
}
/* Disattivo decorazioni di sfondo per coerenza */
.about-brief::before,
.about-brief::after,
.about-brief .container::before,
.about-brief .container::after,
.solutions-section::before,
.solutions-section::after,
.signals-section::before,
.signals-section::after,
.tech-strip::before,
.tech-strip::after,
.method-section::before,
.method-section::after,
.assessment-section::before,
.assessment-section::after,
.recovery-mode::before,
.recovery-mode::after,
.vm-section::before,
.vm-section::after{
display:none !important;
}
/* =========================================================
SCROLL REVEAL — solo se JS è pronto, rispetta reduced-motion.
========================================================= */
body.js-ready:not(.reduce-motion) [data-reveal]{
opacity:0;
transform:translateY(28px);
transition:
opacity .8s cubic-bezier(.2,.7,.2,1),
transform .9s cubic-bezier(.2,.7,.2,1);
will-change:opacity, transform;
}
body.js-ready:not(.reduce-motion) [data-reveal].is-revealed{
opacity:1;
transform:none;
}
/* Stagger via data-reveal-delay (ms) */
body.js-ready:not(.reduce-motion) [data-reveal-delay="100"]{transition-delay:.10s}
body.js-ready:not(.reduce-motion) [data-reveal-delay="200"]{transition-delay:.20s}
body.js-ready:not(.reduce-motion) [data-reveal-delay="300"]{transition-delay:.30s}
body.js-ready:not(.reduce-motion) [data-reveal-delay="400"]{transition-delay:.40s}
body.js-ready:not(.reduce-motion) [data-reveal-delay="500"]{transition-delay:.50s}
/* Variante "up-strong": più movimento, per hero di sezione */
body.js-ready:not(.reduce-motion) [data-reveal="up-strong"]{
transform:translateY(48px);
}
/* Variante "fade": solo opacity, niente translate */
body.js-ready:not(.reduce-motion) [data-reveal="fade"]{
transform:none;
}
/* =========================================================
METHOD STAGE — sfondo che segue il colore della fase attiva.
Sei colori semantici, uno per fase.
========================================================= */
.method-stage{
transition:background .55s ease, border-color .55s ease;
position:relative;
}
.method-stage[data-active-step="1"]{
background:linear-gradient(155deg, rgba(11,95,186,0.10), rgba(11,95,186,0.04) 70%);
border-color:rgba(11,95,186,0.20);
}
.method-stage[data-active-step="2"]{
background:linear-gradient(155deg, rgba(8,145,178,0.10), rgba(8,145,178,0.04) 70%);
border-color:rgba(8,145,178,0.22);
}
.method-stage[data-active-step="3"]{
background:linear-gradient(155deg, rgba(13,124,93,0.10), rgba(13,124,93,0.04) 70%);
border-color:rgba(13,124,93,0.22);
}
.method-stage[data-active-step="4"]{
background:linear-gradient(155deg, rgba(217,119,6,0.10), rgba(217,119,6,0.04) 70%);
border-color:rgba(217,119,6,0.22);
}
.method-stage[data-active-step="5"]{
background:linear-gradient(155deg, rgba(79,70,229,0.10), rgba(79,70,229,0.04) 70%);
border-color:rgba(79,70,229,0.22);
}
.method-stage[data-active-step="6"]{
background:linear-gradient(155deg, rgba(15,118,110,0.10), rgba(15,118,110,0.04) 70%);
border-color:rgba(15,118,110,0.22);
}
[data-theme="dark"] .method-stage[data-active-step="1"]{
background:linear-gradient(155deg, rgba(31,120,216,0.18), rgba(31,120,216,0.06) 70%);
border-color:rgba(31,120,216,0.30);
}
[data-theme="dark"] .method-stage[data-active-step="2"]{
background:linear-gradient(155deg, rgba(77,212,221,0.18), rgba(77,212,221,0.06) 70%);
border-color:rgba(77,212,221,0.30);
}
[data-theme="dark"] .method-stage[data-active-step="3"]{
background:linear-gradient(155deg, rgba(94,234,212,0.18), rgba(94,234,212,0.06) 70%);
border-color:rgba(94,234,212,0.30);
}
[data-theme="dark"] .method-stage[data-active-step="4"]{
background:linear-gradient(155deg, rgba(251,146,60,0.20), rgba(251,146,60,0.06) 70%);
border-color:rgba(251,146,60,0.30);
}
[data-theme="dark"] .method-stage[data-active-step="5"]{
background:linear-gradient(155deg, rgba(165,180,252,0.18), rgba(165,180,252,0.06) 70%);
border-color:rgba(165,180,252,0.30);
}
[data-theme="dark"] .method-stage[data-active-step="6"]{
background:linear-gradient(155deg, rgba(94,234,212,0.18), rgba(94,234,212,0.06) 70%);
border-color:rgba(94,234,212,0.30);
}
/* Il glow ora segue l'accent della fase */
.method-stage[data-active-step="1"] .ms-glow{background:radial-gradient(circle at 35% 28%, rgba(11,95,186,0.22), transparent 60%)}
.method-stage[data-active-step="2"] .ms-glow{background:radial-gradient(circle at 35% 28%, rgba(8,145,178,0.22), transparent 60%)}
.method-stage[data-active-step="3"] .ms-glow{background:radial-gradient(circle at 35% 28%, rgba(13,124,93,0.22), transparent 60%)}
.method-stage[data-active-step="4"] .ms-glow{background:radial-gradient(circle at 35% 28%, rgba(217,119,6,0.22), transparent 60%)}
.method-stage[data-active-step="5"] .ms-glow{background:radial-gradient(circle at 35% 28%, rgba(79,70,229,0.22), transparent 60%)}
.method-stage[data-active-step="6"] .ms-glow{background:radial-gradient(circle at 35% 28%, rgba(15,118,110,0.22), transparent 60%)}
/* =========================================================
SOLUZIONI — Layout editoriale alternato, numerato
========================================================= */
.sol-row{
display:grid;
grid-template-columns:120px 1fr;
gap:32px;
padding:80px 0;
border-top:1px solid var(--gray-border);
position:relative;
align-items:start;
}
[data-theme="dark"] .sol-row{border-top-color:var(--glass-border)}
.sol-row:first-of-type{border-top:0;padding-top:48px}
.sol-row-num{
font-size:84px;
font-weight:800;
color:var(--gray-border);
letter-spacing:-0.05em;
line-height:.9;
font-feature-settings:"tnum";
position:sticky;
top:120px;
transition:color .35s ease;
}
[data-theme="dark"] .sol-row-num{color:var(--glass-border)}
.sol-row:hover .sol-row-num{color:rgba(11,95,186,0.18)}
.sol-row-content{min-width:0}
.sol-row-head{margin-bottom:36px}
.sol-row-tag{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--ms-blue);
padding:5px 12px;
border:1px solid currentColor;
border-radius:999px;
margin-bottom:24px;
}
.sol-row-brand{
display:flex;
align-items:center;
gap:22px;
}
.sol-row-logo{
flex-shrink:0;
width:64px;
height:64px;
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:14px;
padding:8px;
box-shadow:var(--shadow-2);
display:flex;
align-items:center;
justify-content:center;
}
[data-theme="dark"] .sol-row-logo{
background:var(--surface);
border-color:var(--glass-border);
}
.sol-row-logo img{
max-width:100%;
max-height:100%;
object-fit:contain;
}
.sol-row-title{
font-size:clamp(30px, 3.6vw, 44px);
font-weight:800;
color:var(--text-primary);
letter-spacing:-0.025em;
line-height:1.05;
margin:0;
}
.sol-row-grid{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:48px;
align-items:start;
}
.sol-row--reverse .sol-row-grid{
grid-template-columns:1fr 1.05fr;
}
.sol-row--reverse .sol-row-text{order:2}
.sol-row--reverse .sol-row-visual{order:1}
.sol-row-text p{
font-size:16px;
line-height:1.7;
color:var(--text-secondary);
margin:0 0 18px;
}
.sol-row-lede{
font-size:18px !important;
color:var(--text-primary) !important;
font-weight:500;
line-height:1.55 !important;
}
.sol-row-text strong{color:var(--text-primary);font-weight:700}
.sol-features{
list-style:none;
margin:24px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:14px;
}
.sol-features li{
position:relative;
padding-left:28px;
font-size:14.5px;
line-height:1.55;
color:var(--text-secondary);
}
.sol-features li::before{
content:"";
position:absolute;
left:0;
top:9px;
width:16px;
height:2px;
background:var(--ms-blue);
border-radius:2px;
}
.sol-features li strong{color:var(--text-primary);font-weight:700}
.sol-row-visual{
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-lg);
padding:28px 26px;
box-shadow:var(--shadow-2);
}
[data-theme="dark"] .sol-row-visual{
background:var(--glass-bg);
border-color:var(--glass-border);
}
.sol-vis-h{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:16px;
padding-bottom:16px;
margin-bottom:20px;
border-bottom:1px solid var(--gray-border);
}
[data-theme="dark"] .sol-vis-h{border-bottom-color:var(--glass-border)}
.sol-vis-h span{
font-size:11px;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--text-secondary);
}
.sol-vis-h em{
font-style:normal;
font-size:13px;
font-weight:600;
color:var(--ms-blue);
}
.sol-vis-f{
margin-top:20px;
padding-top:16px;
border-top:1px solid var(--gray-border);
font-size:12px;
font-weight:600;
color:var(--text-secondary);
letter-spacing:0.04em;
text-align:center;
}
[data-theme="dark"] .sol-vis-f{border-top-color:var(--glass-border)}
/* SAP — moduli architettura */
.sol-mods{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.sol-mod{
padding:12px 14px;
background:var(--surface-2);
border:1px solid var(--gray-border);
border-radius:10px;
display:flex;
flex-direction:column;
gap:2px;
}
[data-theme="dark"] .sol-mod{
background:transparent;
border-color:var(--glass-border);
}
.sol-mod strong{
font-size:14px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.005em;
}
.sol-mod span{
font-size:11.5px;
color:var(--text-secondary);
letter-spacing:0.01em;
}
/* NTS — checklist */
.sol-checks{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
}
.sol-checks li{
display:flex;
align-items:center;
gap:12px;
font-size:14.5px;
color:var(--text-primary);
font-weight:500;
}
.sol-check-ic{
flex-shrink:0;
width:16px;
height:16px;
position:relative;
color:#0d7c5d;
}
.sol-check-ic::before{
content:"";
position:absolute;
left:1px;
top:4px;
width:7px;
height:3px;
border-left:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(-45deg);
}
[data-theme="dark"] .sol-check-ic{color:#5eead4}
/* Azure — servizi grid */
.sol-row-visual--svc{padding:24px 22px}
.sol-svc-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.sol-svc{
padding:18px 16px;
background:var(--surface-2);
border:1px solid var(--gray-border);
border-radius:12px;
display:flex;
flex-direction:column;
gap:6px;
}
[data-theme="dark"] .sol-svc{
background:transparent;
border-color:var(--glass-border);
}
.sol-svc-ic{
width:28px;
height:28px;
color:#0078d4;
margin-bottom:6px;
}
[data-theme="dark"] .sol-svc-ic{color:#7fc1ff}
.sol-svc-ic svg{width:100%;height:100%}
.sol-svc strong{
font-size:14px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.005em;
}
.sol-svc span{
font-size:12px;
color:var(--text-secondary);
line-height:1.45;
}
@media (max-width:1100px){
.sol-row{grid-template-columns:80px 1fr;gap:24px}
.sol-row-num{font-size:64px;top:100px}
.sol-row-grid{grid-template-columns:1fr;gap:32px}
.sol-row--reverse .sol-row-grid{grid-template-columns:1fr}
.sol-row--reverse .sol-row-text{order:1}
.sol-row--reverse .sol-row-visual{order:2}
}
@media (max-width:720px){
.sol-row{grid-template-columns:1fr;gap:16px;padding:60px 0}
.sol-row-num{position:static;font-size:48px}
.sol-row-title{font-size:30px}
.sol-row-brand{flex-wrap:wrap;gap:14px}
.sol-mods,
.sol-svc-grid{grid-template-columns:1fr}
}
/* =========================================================
CHI SIAMO — Editorial layout: story + map
========================================================= */
.about-editorial{
display:grid;
grid-template-columns:minmax(0, 1.1fr) minmax(360px, 460px);
gap:64px;
align-items:stretch;
padding-top:24px;
}
.about-editorial-text{
display:flex;
flex-direction:column;
}
.about-editorial-text .display-title{
font-size:clamp(36px, 4.6vw, 60px);
margin-bottom:36px;
}
.about-editorial-body p{
font-size:17px;
line-height:1.7;
color:var(--text-secondary);
margin-bottom:20px;
}
.about-editorial-body p:last-child{margin-bottom:0}
.about-editorial-body strong{color:var(--text-primary);font-weight:700}
.about-editorial-map{
align-self:stretch;
display:flex;
}
.about-editorial-map .locations-map{
display:flex;
flex-direction:column;
height:100%;
width:100%;
gap:14px;
}
.about-editorial-map .lm-frame{
flex:1 1 auto;
height:auto;
min-height:280px;
}
@media (max-width:1000px){
.about-editorial{
grid-template-columns:1fr;
gap:48px;
align-items:start;
}
.about-editorial-map{
max-width:560px;
}
.about-editorial-map .lm-frame{height:320px;min-height:320px;flex:0 0 auto}
}
/* =========================================================
VISION & MISSION — manifesto duplex
Due quote editoriali con virgolette decorative, layout
asimmetrico (mission sfalsata verticalmente).
========================================================= */
.vm-section{
padding:60px 0 70px;
position:relative;
overflow:hidden;
}
/* Sottile sfondo decorativo solo per questa sezione */
.vm-section::before{
content:"";
position:absolute;
top:-100px;
left:-15%;
width:60%;
height:60%;
background:radial-gradient(ellipse, rgba(11,95,186,0.06), transparent 70%);
pointer-events:none;
z-index:0;
}
.vm-section::after{
content:"";
position:absolute;
bottom:-100px;
right:-15%;
width:60%;
height:60%;
background:radial-gradient(ellipse, rgba(15,118,110,0.06), transparent 70%);
pointer-events:none;
z-index:0;
}
[data-theme="dark"] .vm-section::before{
background:radial-gradient(ellipse, rgba(74,163,240,0.12), transparent 70%);
}
[data-theme="dark"] .vm-section::after{
background:radial-gradient(ellipse, rgba(94,234,212,0.10), transparent 70%);
}
.vm-section > .container{position:relative;z-index:1}
.vm-manifest{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
align-items:stretch;
}
.vm-quote{
--vm-accent:var(--ms-blue);
--vm-accent-soft:rgba(11,95,186,0.08);
position:relative;
padding:36px 32px 30px;
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-lg);
box-shadow:var(--shadow-2);
transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .3s ease;
overflow:hidden;
display:flex;
flex-direction:column;
}
.vm-quote:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px color-mix(in srgb, var(--vm-accent) 15%, rgba(11,38,71,0.08));
border-color:color-mix(in srgb, var(--vm-accent) 25%, var(--gray-border));
}
[data-theme="dark"] .vm-quote{
background:var(--glass-bg);
border-color:var(--glass-border);
}
.vm-quote--mission{
--vm-accent:#0f766e;
--vm-accent-soft:rgba(15,118,110,0.08);
}
[data-theme="dark"] .vm-quote--mission{
--vm-accent:#5eead4;
--vm-accent-soft:rgba(94,234,212,0.10);
}
.vm-quote--principle{
--vm-accent:#d97706;
--vm-accent-soft:rgba(217,119,6,0.08);
}
[data-theme="dark"] .vm-quote--principle{
--vm-accent:#fbbf24;
--vm-accent-soft:rgba(251,191,36,0.10);
}
/* Top accent bar */
.vm-quote::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:var(--vm-accent);
transform:scaleX(0);
transform-origin:left center;
transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.vm-quote.is-revealed::before,
.vm-quote:hover::before{transform:scaleX(1)}
/* Head: numero + tag */
.vm-quote-head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:20px;
}
.vm-quote-num{
font-size:12px;
font-weight:800;
letter-spacing:.04em;
color:var(--vm-accent);
font-feature-settings:"tnum";
padding:5px 9px;
background:var(--vm-accent-soft);
border-radius:6px;
}
.vm-quote-tag{
font-size:11px;
font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--text-secondary);
}
.vm-quote-text{
font-size:21px;
line-height:1.28;
letter-spacing:-0.018em;
color:var(--text-primary);
font-weight:700;
margin:0 0 18px;
}
.vm-quote-text em{
font-style:normal;
color:var(--vm-accent);
font-weight:700;
}
.vm-quote-body{
font-size:14.5px;
line-height:1.65;
color:var(--text-secondary);
margin:0 0 24px;
flex:1;
}
/* Foot tag inferiore con linea */
.vm-quote-foot{
display:flex;
align-items:center;
gap:12px;
font-size:11px;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--vm-accent);
padding-top:18px;
border-top:1px dashed color-mix(in srgb, var(--vm-accent) 28%, var(--gray-border));
}
.vm-quote-foot-line{
width:24px;
height:2px;
background:var(--vm-accent);
border-radius:2px;
flex-shrink:0;
}
@media (max-width:1000px){
.vm-manifest{grid-template-columns:1fr;gap:18px}
.vm-quote{padding:30px 26px 26px}
}
/* =========================================================
KPI BIG — numeri giganti tipo Wolverine
========================================================= */
.kpi-section{padding:50px 0 80px}
.kpi-head{
max-width:760px;
margin-bottom:56px;
}
.kpi-head .display-title{font-size:clamp(34px, 4.4vw, 52px)}
.kpi-lede{
margin-top:20px;
font-size:17px;
line-height:1.65;
color:var(--text-secondary);
}
.kpi-big-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:8px;
border-top:1px solid var(--gray-border);
padding-top:48px;
}
[data-theme="dark"] .kpi-big-grid{border-top-color:var(--glass-border)}
.kpi-big{
padding:0 24px;
position:relative;
transition:transform .35s ease;
}
.kpi-big:hover{transform:translateY(-3px)}
.kpi-big:not(:last-child)::after{
content:"";
position:absolute;
top:14px;
bottom:14px;
right:0;
width:1px;
background:var(--gray-border);
}
[data-theme="dark"] .kpi-big:not(:last-child)::after{background:var(--glass-border)}
.kpi-big-value{
font-size:clamp(36px, 4vw, 64px);
font-weight:800;
line-height:1;
letter-spacing:-0.045em;
color:var(--text-primary);
font-feature-settings:"tnum";
margin-bottom:22px;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
background:linear-gradient(180deg, var(--text-primary) 0%, var(--text-primary) 60%, color-mix(in srgb, var(--text-primary) 78%, var(--ms-blue)) 100%);
-webkit-background-clip:text;
background-clip:text;
}
.kpi-big-divider{
width:32px;
height:2px;
background:var(--ms-blue);
margin-bottom:18px;
}
.kpi-big-label{
font-size:15px;
font-weight:600;
color:var(--text-primary);
letter-spacing:-0.005em;
margin-bottom:6px;
}
.kpi-big-note{
font-size:13px;
color:var(--text-secondary);
line-height:1.5;
}
@media (max-width:1100px){
.kpi-big-grid{grid-template-columns:repeat(2, 1fr);gap:48px 8px}
.kpi-big:nth-child(2)::after{display:none}
.kpi-big{padding:0 20px}
.kpi-big-value{font-size:clamp(48px, 8vw, 72px)}
}
@media (max-width:560px){
.kpi-big-grid{grid-template-columns:1fr;gap:40px}
.kpi-big{padding:0 0 40px}
.kpi-big::after{
top:auto !important;
bottom:0 !important;
right:0 !important;
left:0 !important;
width:auto !important;
height:1px !important;
}
.kpi-big:last-child{padding-bottom:0}
.kpi-big:last-child::after{display:none}
}
/* =========================================================
TEAM BLOCK — 4 aree uniformi + coordinamento sotto.
Niente hub gigante: la Direzione & Governo è footer di coordinamento.
========================================================= */
.team-block{max-width:1180px;margin:0 auto}
.team-head{margin-bottom:44px;max-width:920px}
.team-head .display-title{font-size:clamp(34px, 4.4vw, 56px)}
.team-lede{
margin-top:24px;
font-size:17px;
line-height:1.65;
color:var(--text-secondary);
max-width:780px;
}
.team-grid-new{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:24px;
margin-bottom:48px;
}
.team-area{
position:relative;
background:var(--surface);
border:1px solid var(--gray-border);
border-radius:var(--r-lg);
padding:36px 32px 32px;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
box-shadow:var(--shadow-2);
}
[data-theme="dark"] .team-area{
background:var(--glass-bg);
border-color:var(--glass-border);
}
.team-area:hover{
transform:translateY(-3px);
border-color:rgba(11,95,186,0.18);
box-shadow:var(--shadow-3);
}
.team-area-num{
position:absolute;
top:24px;
right:32px;
font-size:42px;
font-weight:800;
color:var(--gray-border);
letter-spacing:-0.04em;
line-height:1;
font-feature-settings:"tnum";
transition:color .3s ease;
}
[data-theme="dark"] .team-area-num{color:var(--glass-border)}
.team-area:hover .team-area-num{color:rgba(11,95,186,0.22)}
.team-area-ic{
width:44px;
height:44px;
color:var(--ms-blue);
margin-bottom:24px;
display:flex;
align-items:center;
justify-content:flex-start;
}
.team-area-ic svg{width:100%;height:100%}
.team-area-h{
font-size:20px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.012em;
margin:0 0 10px;
}
.team-area p{
font-size:14.5px;
line-height:1.6;
color:var(--text-secondary);
margin:0 0 20px;
}
.team-area-tags{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.team-area-tags li{
font-size:12px;
font-weight:600;
color:var(--text-secondary);
padding:5px 11px;
border:1px solid var(--gray-border);
border-radius:999px;
letter-spacing:0.01em;
background:var(--surface-2);
}
[data-theme="dark"] .team-area-tags li{
background:transparent;
border-color:var(--glass-border);
}
.team-coord{
display:grid;
grid-template-columns:auto auto 1fr;
gap:28px;
align-items:center;
padding:32px 36px;
margin-bottom:36px;
background:linear-gradient(135deg, color-mix(in srgb, var(--ms-blue) 7%, var(--surface)) 0%, var(--surface) 60%);
border:1px solid color-mix(in srgb, var(--ms-blue) 18%, var(--gray-border));
border-radius:var(--r-lg);
box-shadow:var(--shadow-2);
position:relative;
overflow:hidden;
}
.team-coord::before{
content:"";
position:absolute;
top:0;
left:0;
width:4px;
height:100%;
background:linear-gradient(180deg, var(--ms-blue), var(--blue-electric));
}
[data-theme="dark"] .team-coord{
background:linear-gradient(135deg, rgba(74,163,240,0.12) 0%, var(--glass-bg) 60%);
border-color:rgba(74,163,240,0.22);
}
/* Variante teal per "Principio guida" — twin card del Coordinata da */
.team-coord--principle{
background:linear-gradient(135deg, color-mix(in srgb, #0f766e 8%, var(--surface)) 0%, var(--surface) 60%);
border-color:color-mix(in srgb, #0f766e 22%, var(--gray-border));
}
.team-coord--principle::before{
background:linear-gradient(180deg, #0f766e, #14b8a6);
}
.team-coord--principle .team-coord-ic{
background:linear-gradient(135deg, #0f766e, #14b8a6);
box-shadow:0 8px 20px rgba(15,118,110,0.32);
}
.team-coord--principle .team-coord-label{color:var(--text-secondary)}
.team-coord--principle .team-coord-tags span{
color:#0f766e;
}
.team-coord--principle .team-coord-desc{
border-left-color:color-mix(in srgb, #0f766e 26%, var(--gray-border));
}
[data-theme="dark"] .team-coord--principle{
background:linear-gradient(135deg, rgba(94,234,212,0.10) 0%, var(--glass-bg) 60%);
border-color:rgba(94,234,212,0.22);
}
[data-theme="dark"] .team-coord--principle .team-coord-tags span{color:#5eead4}
[data-theme="dark"] .team-coord--principle .team-coord-desc{
border-left-color:rgba(94,234,212,0.30);
}
.team-coord-ic{
width:56px;
height:56px;
border-radius:14px;
background:linear-gradient(135deg, var(--ms-blue), var(--blue-electric));
color:#fff;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 20px rgba(11,95,186,0.30);
flex-shrink:0;
}
.team-coord-ic svg{width:28px;height:28px}
.team-coord-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.team-coord-label{
font-size:11px;
font-weight:700;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--text-secondary);
}
.team-coord-name{
font-size:22px;
font-weight:800;
color:var(--text-primary);
letter-spacing:-0.018em;
line-height:1.15;
}
.team-coord-tags{
display:flex;
gap:6px;
margin-top:4px;
flex-wrap:wrap;
}
.team-coord-tags span{
font-size:11px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--ms-blue);
padding:4px 10px;
border:1px solid currentColor;
border-radius:999px;
}
.team-coord-desc{
font-size:14.5px;
line-height:1.6;
color:var(--text-secondary);
margin:0;
max-width:420px;
padding-left:28px;
border-left:1px solid color-mix(in srgb, var(--ms-blue) 22%, var(--gray-border));
}
[data-theme="dark"] .team-coord-desc{
border-left-color:rgba(74,163,240,0.30);
}
@media (max-width:900px){
.team-coord{
grid-template-columns:1fr;
padding:26px 24px;
gap:18px;
}
.team-coord-desc{
padding-left:0;
border-left:0;
padding-top:18px;
border-top:1px solid var(--gray-border);
}
[data-theme="dark"] .team-coord-desc{border-top-color:var(--glass-border)}
}
.team-principle{
display:flex;
gap:20px;
align-items:flex-start;
padding:28px 30px;
background:rgba(11,95,186,0.04);
border-radius:var(--r-lg);
border-left:3px solid var(--ms-blue);
}
[data-theme="dark"] .team-principle{
background:rgba(74,163,240,0.07);
}
.team-principle-ic{
width:32px;
height:32px;
color:var(--ms-blue);
flex-shrink:0;
margin-top:2px;
}
.team-principle-label{
display:block;
font-size:11px;
font-weight:700;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--ms-blue);
margin-bottom:6px;
}
.team-principle p{
margin:0;
font-size:15.5px;
line-height:1.65;
color:var(--text-primary);
}
.team-principle strong{font-weight:700}
@media (max-width:900px){
.team-grid-new{grid-template-columns:1fr;gap:18px}
.team-area{padding:30px 26px 26px}
.team-area-num{font-size:36px;top:20px;right:24px}
.team-coord{grid-template-columns:1fr;gap:14px;padding:28px 0}
.team-head{margin-bottom:44px}
}
/* =========================================================
METHOD TIMELINE — 6 fasi in linea orizzontale con connettore.
Marker con colore distintivo per fase + linea progressiva animata.
Mobile: si trasforma in timeline verticale.
========================================================= */
.method-timeline{
list-style:none;
margin:48px 0 0;
padding:0;
display:grid;
grid-template-columns:repeat(6, 1fr);
gap:24px;
position:relative;
}
/* Linea di base (grigia, sempre visibile) — centrata sui marker (50px → 25px center)
left = 25px (centro marker 01) · right = 25px (centro marker 06) */
.method-timeline::before{
content:"";
position:absolute;
top:25px;
transform:translateY(-50%);
left:25px;
right:25px;
height:2px;
background:var(--gray-border);
border-radius:2px;
z-index:0;
}
[data-theme="dark"] .method-timeline::before{background:var(--glass-border)}
/* Linea progressiva colorata (parte da sinistra, si riempie quando in viewport) */
.method-timeline::after{
content:"";
position:absolute;
top:25px;
transform:translateY(-50%);
left:25px;
width:0;
max-width:calc(100% - 50px);
height:2px;
background:linear-gradient(
90deg,
#0b5fba 0%,
#0891b2 20%,
#0d7c5d 40%,
#d97706 60%,
#4f46e5 80%,
#0f766e 100%
);
border-radius:2px;
z-index:0;
transition:width 2.2s cubic-bezier(.4,.7,.2,1);
}
.method-timeline.is-progressed::after{
width:calc(100% - 50px);
}
.mt-step{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:flex-start;
padding:0;
--mt-accent:var(--ms-blue);
}
.mt-step:nth-child(1){--mt-accent:#0b5fba}
.mt-step:nth-child(2){--mt-accent:#0891b2}
.mt-step:nth-child(3){--mt-accent:#0d7c5d}
.mt-step:nth-child(4){--mt-accent:#d97706}
.mt-step:nth-child(5){--mt-accent:#4f46e5}
.mt-step:nth-child(6){--mt-accent:#0f766e}
.mt-marker{
width:50px;
height:50px;
border-radius:50%;
background:var(--surface);
border:2px solid var(--gray-border);
display:flex;
align-items:center;
justify-content:center;
box-shadow:var(--shadow-2);
margin-bottom:22px;
transition:transform .35s cubic-bezier(.2,.8,.2,1),
border-color .35s ease,
background .35s ease,
box-shadow .35s ease;
position:relative;
}
.mt-marker::before{
content:"";
position:absolute;
inset:-6px;
border-radius:50%;
border:2px solid var(--mt-accent);
opacity:0;
transform:scale(.6);
transition:opacity .4s ease, transform .5s ease;
pointer-events:none;
}
.mt-step:hover .mt-marker{
transform:translateY(-4px) scale(1.06);
border-color:var(--mt-accent);
background:color-mix(in srgb, var(--mt-accent) 8%, var(--surface));
box-shadow:0 12px 30px color-mix(in srgb, var(--mt-accent) 28%, transparent);
}
.mt-step:hover .mt-marker::before{
opacity:.45;
transform:scale(1);
}
[data-theme="dark"] .mt-marker{
background:var(--surface);
border-color:rgba(120,170,230,0.30);
}
.mt-num{
font-size:14px;
font-weight:800;
color:var(--mt-accent);
letter-spacing:0.02em;
font-feature-settings:"tnum";
transition:color .3s ease;
}
.mt-icon{
width:36px;
height:36px;
color:var(--mt-accent);
margin-bottom:14px;
display:flex;
align-items:center;
justify-content:center;
opacity:.85;
transition:opacity .3s ease, transform .3s ease;
}
.mt-icon svg{width:100%;height:100%}
.mt-step:hover .mt-icon{
opacity:1;
transform:scale(1.08);
}
.mt-title{
font-size:17.5px;
font-weight:700;
color:var(--text-primary);
letter-spacing:-0.012em;
margin:0 0 8px;
line-height:1.3;
transition:color .3s ease;
}
.mt-step:hover .mt-title{color:var(--mt-accent)}
.mt-desc{
font-size:14px;
line-height:1.55;
color:var(--text-secondary);
margin:0;
}
/* Tablet → 3x2 */
@media (max-width:1100px){
.method-timeline{
grid-template-columns:repeat(3, 1fr);
gap:36px 24px;
}
.method-timeline::before{
display:none;
}
}
/* Mobile → timeline verticale */
@media (max-width:640px){
.method-timeline{
grid-template-columns:1fr;
gap:0;
padding-left:24px;
position:relative;
}
.method-timeline::before{
display:block;
top:0;
bottom:0;
left:23px;
right:auto;
width:1px;
height:auto;
background:linear-gradient(
180deg,
transparent 0%,
var(--gray-border) 6%,
var(--gray-border) 94%,
transparent 100%
);
}
.mt-step{
padding:0 0 40px 36px;
position:relative;
}
.mt-step:last-child{padding-bottom:0}
.mt-marker{
position:absolute;
left:-24px;
top:0;
margin:0;
width:48px;
height:48px;
}
.mt-icon{
margin-top:8px;
margin-bottom:10px;
}
}
/* =========================================================
TYPE PRESETS — Display heading "editoriale" (Wolverine vibe)
Usato selettivamente in sezioni di impatto.
========================================================= */
.display-title{
font-size:clamp(40px, 5.6vw, 76px);
font-weight:800;
line-height:1.02;
letter-spacing:-0.035em;
color:var(--text-primary);
}
.display-title em{
font-style:normal;
color:var(--ms-blue);
font-weight:800;
}
.display-eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 14px;
border-radius:100px;
background:rgba(11,95,186,0.08);
border:1px solid rgba(11,95,186,0.18);
color:var(--ms-blue);
font-size:11.5px;
font-weight:600;
letter-spacing:0.10em;
text-transform:uppercase;
margin-bottom:18px;
transition:background .3s ease;
width:fit-content;
align-self:flex-start;
}
.display-eyebrow::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:currentColor;
opacity:.7;
flex-shrink:0;
}
[data-theme="dark"] .display-eyebrow{background:rgba(74,163,240,0.18)}