/* ==========================================================================
   Twinther — Digital Twin & AI predittiva
   Palette derivata dal logo ufficiale: verde oliva profondo + oro
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font self-hosted (nessuna chiamata a Google: più veloce e GDPR-safe).
   unicode-range fa scaricare il subset "latin-ext" solo quando serve.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Cinzel"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/cinzel-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cinzel"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/cinzel-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Base */
  --bg:        #10140C;
  --bg-2:      #161B10;
  --band:      #1B2114;
  --surface:   #212819;
  --surface-2: #2A3220;
  --olive:     #3F4A31;
  --line:      rgba(226,203,132,.14);
  --line-2:    rgba(226,203,132,.26);

  /* Oro */
  --gold-1: #F8F0CB;
  --gold-2: #E2CB84;
  --gold-3: #C6A85C;
  --gold-4: #9C8241;
  --gold-grad: linear-gradient(135deg,#F8F0CB 0%,#E2CB84 45%,#BC9E52 100%);

  /* Testo */
  --text:  #ECEADC;
  --text-2:#B9BCA6;
  --text-3:#8A8F78;

  /* Stato */
  --ok:   #8FC98A;
  --warn: #E9B45E;
  --info: #7AB2C9;

  /* Tipografia */
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cinzel", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* Layout */
  --wrap: 1200px;
  --pad: 20px;
  --radius: 16px;
  --radius-lg: 24px;
  --header-h: 68px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 24px 60px -24px rgba(0,0,0,.75);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.08; font-weight:700; letter-spacing:-.02em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}

::selection{background:var(--gold-2); color:#14180E}

:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px; border-radius:6px}

.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--gold-2); color:#14180E; padding:10px 16px; border-radius:8px; font-weight:600;
}
.skip-link:focus{left:16px}

.container{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* ---------- Sfondo atmosferico ---------- */
.bg-aura{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 78% 6%,  rgba(226,203,132,.14), transparent 62%),
    radial-gradient(52% 42% at 8% 22%,  rgba(63,74,49,.55),    transparent 60%),
    radial-gradient(70% 50% at 50% 108%,rgba(198,168,92,.10),  transparent 60%);
}

/* ---------- Tipografia display ---------- */
h1{font-size:clamp(2.1rem,5.4vw,3.5rem); letter-spacing:-.028em}
h2{font-size:clamp(1.7rem,4vw,2.6rem)}
h3{font-size:1.075rem; letter-spacing:-.01em}

.grad{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.eyebrow{
  font-family:var(--font-display);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-2); margin:0 0 .9rem; font-weight:600;
}
.lead{font-size:clamp(1rem,2.4vw,1.15rem); color:var(--text-2); max-width:52ch}
.sec-sub{color:var(--text-2); max-width:62ch; margin-inline:auto}

/* ---------- Bottoni ---------- */
.btn{
  --btn-py:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:var(--btn-py) 26px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.95rem; letter-spacing:.01em; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s;
  will-change:transform;
}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-gold{
  background:var(--gold-grad); color:#14180E;
  box-shadow:0 10px 30px -12px rgba(226,203,132,.7);
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(226,203,132,.85)}
.btn-ghost{border-color:var(--line-2); color:var(--text); background:rgba(226,203,132,.03)}
.btn-ghost:hover{border-color:var(--gold-2); background:rgba(226,203,132,.09); transform:translateY(-2px)}
.btn-sm{--btn-py:10px; padding-inline:20px; font-size:.875rem}
.btn-block{width:100%}

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em; color:var(--gold-2);
  font-weight:600; font-size:.95rem; border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .25s, gap .25s;
}
.link-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.link-arrow:hover{border-color:var(--gold-2); gap:.85em}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .35s var(--ease), border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(16,20,12,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}

.brand{display:inline-flex; align-items:center; gap:10px}
.brand img{width:32px; height:auto}
.brand-name{
  font-family:var(--font-display); font-weight:600; font-size:1.12rem;
  letter-spacing:.09em; text-transform:uppercase;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav{display:flex; align-items:center; gap:6px}
.nav > a:not(.btn){
  padding:9px 14px; border-radius:999px; font-size:.92rem; color:var(--text-2);
  transition:color .2s, background .2s;
}
.nav > a:not(.btn):hover, .nav > a:not(.btn).active{color:var(--gold-2); background:rgba(226,203,132,.07)}
.nav-cta{margin-left:8px}

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:12px;
  background:rgba(226,203,132,.05); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{width:18px; height:1.8px; background:var(--gold-2); border-radius:2px; transition:transform .3s var(--ease), opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding-top:calc(var(--header-h) + 40px); padding-bottom:64px; position:relative}
.hero-grid{display:grid; gap:44px; align-items:center}
.hero-copy h1{margin-bottom:.55em}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 18px}
.hero-claim{
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-3); margin:0;
}

/* ---- Pannello gemello digitale ---- */
.hero-visual{position:relative}
.twin-panel{
  position:relative;
  border-radius:var(--radius-lg);
  padding:10px;
  background:linear-gradient(150deg, rgba(226,203,132,.22), rgba(226,203,132,.03) 42%, rgba(63,74,49,.35));
  box-shadow:var(--shadow);
}
.twin-panel::after{
  content:""; position:absolute; inset:-30% -12% auto; height:60%;
  background:radial-gradient(closest-side, rgba(226,203,132,.16), transparent);
  pointer-events:none; z-index:-1;
}
.plant{width:100%; height:auto; border-radius:18px; display:block}

.plant .lbl{font:600 10px/1 var(--font-body); letter-spacing:.16em; fill:rgba(226,203,132,.62)}
.plant .lbl-sm{font:700 13px/1 var(--font-body); fill:rgba(226,203,132,.85)}
.plant .pipe{fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round}
.plant .pipe.supply{stroke:rgba(233,180,94,.28)}
.plant .pipe.return{stroke:rgba(122,178,201,.24)}
.plant .flow{
  fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:16 150; filter:drop-shadow(0 0 5px currentColor);
}
.plant .supply-flow{stroke:#F2C271; color:#F2C271; animation:flow 3.4s linear infinite}
.plant .return-flow{stroke:#7AB2C9; color:#7AB2C9; animation:flow 4.6s linear infinite}
.plant [data-c="2"] .supply-flow{animation-delay:-1.1s}
.plant [data-c="3"] .supply-flow{animation-delay:-2.2s}
.plant [data-c="2"] .return-flow{animation-delay:-1.6s}
.plant [data-c="3"] .return-flow{animation-delay:-3s}
@keyframes flow{to{stroke-dashoffset:-166}}

.plant .pump{fill:rgba(226,203,132,.08); stroke:rgba(226,203,132,.55); stroke-width:2}
.plant .pump-blade{
  stroke:rgba(226,203,132,.75); stroke-width:2; fill:none; stroke-linecap:round;
  transform-box:fill-box; transform-origin:center; animation:spin 2.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.plant .hx{fill:rgba(226,203,132,.05); stroke:rgba(226,203,132,.4); stroke-width:2}
.plant .hx-lines{stroke:rgba(226,203,132,.32); stroke-width:1.6; stroke-linecap:round}
.plant .load{fill:rgba(63,74,49,.6); stroke:rgba(226,203,132,.35); stroke-width:2}
.plant .sensor{fill:var(--ok); animation:ping 2.8s ease-out infinite}
.plant .sensor.warn{fill:var(--warn); animation-duration:1.5s}
@keyframes ping{0%{opacity:.35; r:4}45%{opacity:1}100%{opacity:.35; r:9}}
.plant .live-dot{fill:var(--ok); animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.plant .flame{transform-box:fill-box; transform-origin:bottom center; animation:flick 2.2s ease-in-out infinite}
@keyframes flick{50%{transform:scaleY(1.12) scaleX(.94)}}
.plant .scan{animation:scan 7s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(-40px)}50%{transform:translateY(430px)}}

/* ---- Card fluttuanti ---- */
.float-card{
  position:absolute; display:flex; flex-direction:column; gap:2px;
  padding:12px 15px; border-radius:14px; min-width:150px;
  background:rgba(22,27,16,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-2);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
  animation:bob 6s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-9px)}}
.fc-1{top:3%;    right:-5%}
.fc-2{bottom:4%; left:-5%;  animation-delay:-2s}
.fc-3{top:44%;   right:-7%; animation-delay:-4s}
.fc-label{font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3)}
.fc-value{font-size:1.28rem; line-height:1.2; color:var(--gold-1)}
.fc-value.ok{color:var(--ok); font-size:1.05rem}
.fc-value.warn{color:var(--warn); font-size:1.05rem}
.fc-delta{font-size:.72rem; color:var(--text-3)}
.fc-delta.up{color:var(--ok)}

/* ---- Strip statistiche ---- */
.stat-strip{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:56px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.stat-strip li{background:var(--bg-2); padding:22px 18px; text-align:center}
.stat-strip strong{
  display:block; font-family:var(--font-display); font-size:clamp(1.6rem,5vw,2.3rem); font-weight:600;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-strip span{font-size:.78rem; color:var(--text-3); letter-spacing:.04em}
.stat-note{margin-top:14px; font-size:.75rem; color:var(--text-3); text-align:center; max-width:70ch; margin-inline:auto}

/* ==========================================================================
   Sezioni
   ========================================================================== */
.section{padding:clamp(64px,10vw,120px) 0; position:relative}
.band{background:var(--band); border-block:1px solid var(--line)}
.sec-head{text-align:center; max-width:800px; margin:0 auto clamp(38px,6vw,64px)}

.split{display:grid; gap:clamp(36px,6vw,72px); align-items:center}
.split-copy p{color:var(--text-2); max-width:52ch}

.ticks{margin:22px 0 26px; display:grid; gap:12px}
.ticks li{position:relative; padding-left:32px; color:var(--text-2); font-size:.95rem}
.ticks li::before{
  content:""; position:absolute; left:0; top:.32em; width:19px; height:19px; border-radius:50%;
  background:rgba(226,203,132,.12); border:1px solid var(--line-2);
}
.ticks li::after{
  content:""; position:absolute; left:6px; top:.66em; width:7px; height:4px;
  border-left:1.8px solid var(--gold-2); border-bottom:1.8px solid var(--gold-2);
  transform:rotate(-45deg);
}

/* ---------- Dashboard mockup ---------- */
.dash{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-2);
  background:linear-gradient(160deg,var(--surface),var(--bg-2));
  box-shadow:var(--shadow); transform:perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition:transform .6s var(--ease);
}
.dash:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
.dash-top{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.18)}
.dash-title{font-size:.85rem; font-weight:600}
.dash-chip{margin-left:auto; font-size:.7rem; padding:4px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--gold-2)}
.dash-body{padding:16px; display:grid; gap:14px}
.dash-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kpi{background:rgba(226,203,132,.04); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.kpi span{display:block; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}
.kpi strong{font-size:1rem; color:var(--gold-1)}
.dash-chart{background:rgba(0,0,0,.2); border:1px solid var(--line); border-radius:12px; padding:12px}
.spark{width:100%; height:auto}
.chart-line{fill:none; stroke:var(--gold-2); stroke-width:2.4; stroke-linecap:round}
.chart-line.dashed{stroke-dasharray:5 5; stroke:var(--gold-3); opacity:.85}
.chart-line.muted{stroke:rgba(185,188,166,.42); stroke-width:2}
.dash-legend,.panel-legend{display:flex; align-items:center; gap:8px; font-size:.7rem; color:var(--text-3); margin-top:8px}
.dash-legend i,.panel-legend i{width:14px; height:2px; border-radius:2px; display:inline-block; margin-left:8px}
.dash-legend i:first-child,.panel-legend i:first-child{margin-left:0}
.d-gold{background:var(--gold-2)}
.d-mut{background:rgba(185,188,166,.5)}
.d-dash{background:repeating-linear-gradient(90deg,var(--gold-3) 0 4px,transparent 4px 8px)}
.dash-list{display:grid; gap:8px}
.dash-list .row{display:flex; align-items:center; gap:10px; font-size:.83rem; color:var(--text-2); padding:8px 12px; background:rgba(226,203,132,.03); border:1px solid var(--line); border-radius:10px}
.dash-list .row b{margin-left:auto; color:var(--gold-1)}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none}
.dot.ok{background:var(--ok); box-shadow:0 0 0 3px rgba(143,201,138,.15)}
.dot.warn{background:var(--warn); box-shadow:0 0 0 3px rgba(233,180,94,.15)}

/* ---------- Card ---------- */
.cards{display:grid; gap:16px}
.card{
  position:relative; padding:26px 22px; border-radius:var(--radius);
  background:linear-gradient(165deg, rgba(42,50,32,.9), rgba(22,27,16,.9));
  border:1px solid var(--line); overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(226,203,132,.55), transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s;
}
.card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(0,0,0,.9)}
.card:hover::before{opacity:1}
.card h3{color:var(--gold-1)}
.card p{color:var(--text-2); font-size:.9rem; margin:0}
.card-ico{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px;
  border-radius:13px; background:rgba(226,203,132,.09); border:1px solid var(--line-2);
}
.card-ico svg{width:22px; height:22px; fill:none; stroke:var(--gold-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.card.sm{padding:20px 18px}
.card.sm .card-ico{width:40px; height:40px; margin-bottom:12px; border-radius:11px}
.card.sm .card-ico svg{width:19px; height:19px}
.card.sm h3{font-size:.98rem}
.card.sm p{font-size:.84rem}

/* ---------- Steps ---------- */
.steps{display:grid; gap:16px; counter-reset:s}
.step{
  position:relative; padding:24px 22px 24px 24px; border-radius:var(--radius);
  background:rgba(33,40,25,.55); border:1px solid var(--line);
  transition:border-color .35s, transform .35s var(--ease), background .35s;
}
.step:hover{border-color:var(--line-2); transform:translateY(-4px); background:rgba(42,50,32,.7)}
.step-n{
  display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:600; margin-bottom:10px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step h3{color:var(--text)}
.step p{color:var(--text-2); font-size:.89rem; margin:0}

.chips{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:40px}
.chips li{
  font-size:.78rem; color:var(--text-2); padding:7px 15px; border-radius:999px;
  border:1px solid var(--line); background:rgba(226,203,132,.035);
  transition:border-color .25s, color .25s;
}
.chips li:hover{border-color:var(--gold-3); color:var(--gold-2)}

/* ---------- Vantaggi ---------- */
.adv-grid{display:grid; gap:22px}
.adv-chart{display:grid; gap:16px; align-content:start}
.panel{
  border-radius:var(--radius); border:1px solid var(--line-2); padding:16px;
  background:linear-gradient(160deg,var(--surface),var(--bg-2)); box-shadow:var(--shadow);
}
.panel-head{display:flex; align-items:center; justify-content:space-between; font-size:.83rem; color:var(--text-2); margin-bottom:10px}
.pill{font-size:.66rem; padding:3px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--gold-2)}
.bigchart{width:100%; height:auto}
.bigchart .axis line{stroke:rgba(226,203,132,.08); stroke-width:1}
.gauges{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center}
.gauge svg{width:100%; max-width:74px; margin-inline:auto; transform:rotate(-90deg)}
.gauge circle{fill:none; stroke-width:3.2}
.g-bg{stroke:rgba(226,203,132,.12)}
.g-fg{
  stroke:var(--gold-2); stroke-linecap:round;
  stroke-dasharray:0 100; /* impostata da JS */
  transition:stroke-dasharray 1.3s var(--ease);
}
.g-txt{display:block; font-weight:700; color:var(--gold-1); font-size:.95rem; margin-top:-6px}
.gauge small{display:block; font-size:.68rem; color:var(--text-3)}

/* ---------- Quote / device ---------- */
.quote{
  margin:26px 0 0; padding:18px 22px; border-left:2px solid var(--gold-3);
  background:rgba(226,203,132,.05); border-radius:0 12px 12px 0;
}
.quote p{
  margin:0; font-family:var(--font-display); font-size:1.02rem; letter-spacing:.05em;
  color:var(--gold-1); text-transform:uppercase;
}

.device{
  border-radius:var(--radius-lg); border:1px solid var(--line-2); padding:14px;
  background:linear-gradient(160deg,rgba(63,74,49,.5),rgba(16,20,12,.9)); box-shadow:var(--shadow);
}
.device-screen{background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:16px; padding:16px; display:grid; gap:12px}
.ds-head{display:flex; align-items:baseline; justify-content:space-between; font-size:.78rem; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase}
.ds-head b{font-size:2rem; font-family:var(--font-display)}
.ds-head b.ok{color:var(--ok)}
.ds-rows{display:grid; gap:7px}
.ds-row{display:flex; align-items:center; justify-content:space-between; font-size:.84rem; color:var(--text-2); padding:9px 12px; background:rgba(226,203,132,.04); border:1px solid var(--line); border-radius:10px}
.ds-foot{padding-top:4px}

/* ---------- CTA / Form ---------- */
.cta-section{position:relative; overflow:hidden}
.cta-section::before{
  content:""; position:absolute; inset:auto 0 -40% 0; height:80%;
  background:radial-gradient(50% 60% at 50% 50%, rgba(226,203,132,.12), transparent 70%);
  pointer-events:none;
}
.cta-wrap{display:grid; gap:clamp(32px,6vw,64px); align-items:start; position:relative}
.cta-copy p{color:var(--text-2); max-width:46ch}
.contact-list{display:grid; gap:8px; margin-top:18px}
.contact-list a{color:var(--gold-2); font-weight:600; border-bottom:1px solid transparent; transition:border-color .25s}
.contact-list a:hover{border-color:var(--gold-2)}

.form{
  display:grid; gap:14px; padding:24px; border-radius:var(--radius-lg);
  background:linear-gradient(165deg,rgba(42,50,32,.85),rgba(22,27,16,.92));
  border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.field{display:grid; gap:6px}
.field label{font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3)}
.field input,.field textarea{
  width:100%; padding:13px 15px; border-radius:12px; background:rgba(0,0,0,.28);
  border:1px solid var(--line); color:var(--text); font-size:.95rem;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder,.field textarea::placeholder{color:#6C7160}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--gold-3); background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(226,203,132,.13);
}
.field input:user-invalid{border-color:#C97A6B}
.field textarea{resize:vertical; min-height:110px}
.form-note{margin:0; font-size:.8rem; color:var(--gold-2); min-height:1.2em}
.form-note.ok{color:var(--ok)}
.form-note.err{color:#E0A08F}

/* Campo trappola anti-bot: fuori dallo schermo, mai visibile né focalizzabile. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.btn[disabled]{opacity:.6; cursor:progress; transform:none}
.btn[disabled]:hover{transform:none; box-shadow:0 10px 30px -12px rgba(226,203,132,.7)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{border-top:1px solid var(--line); background:var(--bg-2); padding:56px 0 26px}
.footer-grid{display:grid; gap:32px}
.footer-brand p{color:var(--text-3); font-size:.86rem; margin-top:14px}
.footer-col h4{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2);
  font-family:var(--font-display); margin-bottom:14px;
}
.footer-col a{display:block; font-size:.88rem; color:var(--text-2); padding:5px 0; transition:color .2s}
.footer-col a:hover{color:var(--gold-2)}
.footer-col .claim{margin-top:14px; font-size:.72rem; color:var(--text-3); letter-spacing:.06em}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--text-3);
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
/* Nascosti solo se il JS è attivo: senza JS il contenuto resta visibile. */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.cards .reveal:nth-child(2){transition-delay:.08s}
.cards .reveal:nth-child(3){transition-delay:.16s}
.cards .reveal:nth-child(4){transition-delay:.24s}
.cards .reveal:nth-child(5){transition-delay:.32s}
.cards .reveal:nth-child(6){transition-delay:.4s}
.steps .reveal:nth-child(2){transition-delay:.1s}
.steps .reveal:nth-child(3){transition-delay:.2s}
.steps .reveal:nth-child(4){transition-delay:.3s}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width:600px){
  .stat-strip{grid-template-columns:repeat(4,1fr)}
  .cards-2{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .form{padding:30px}
}

@media (min-width:900px){
  :root{--pad:32px; --header-h:76px}
  .hero{padding-top:calc(var(--header-h) + 56px); padding-bottom:80px}
  .hero-grid{grid-template-columns:1.02fr 1.1fr; gap:52px}
  .split{grid-template-columns:1fr 1.08fr}
  .split.rev .split-copy{order:2}
  .cards-4{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .adv-grid{grid-template-columns:1.35fr 1fr; align-items:start}
  .cta-wrap{grid-template-columns:1fr 1fr; align-items:center}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
}

@media (min-width:1100px){
  .cards-2{grid-template-columns:repeat(3,1fr)}
}

/* --- Mobile: menu a scomparsa --- */
@media (max-width:899px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed; inset:var(--header-h) 0 auto; flex-direction:column; align-items:stretch; gap:2px;
    padding:18px var(--pad) 26px;
    background:rgba(16,20,12,.97);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
  }
  .nav.open{transform:none; opacity:1; pointer-events:auto}
  .nav > a{padding:14px 12px; font-size:1.02rem; border-radius:12px}
  .nav-cta{margin:12px 0 0; justify-content:center}
  body.nav-open{overflow:hidden}

  /* Card fluttuanti riposizionate per non uscire dallo schermo */
  .float-card{min-width:0; padding:9px 12px; animation:none}
  .fc-1{top:2%; right:2%}
  .fc-2{top:auto; bottom:14%; left:2%}
  .fc-3{display:none}
  .fc-value{font-size:1.05rem}
  .fc-value.ok,.fc-value.warn{font-size:.9rem}

  .dash{transform:none}
  .hero-copy{text-align:left}

  /* KPI del cruscotto: 3 colonne strette senza andare a capo */
  .dash-kpis{gap:7px}
  .kpi{padding:8px 9px}
  .kpi span{font-size:.56rem; letter-spacing:.03em}
  .kpi strong{font-size:.82rem}

  .hero-claim{font-size:.7rem; letter-spacing:.11em}
  .hero{padding-top:calc(var(--header-h) + 28px)}
  .lead{line-height:1.55}
}

@media (max-width:420px){
  .fc-label{font-size:.62rem}
  .stat-strip li{padding:16px 10px}
}

/* --- Accessibilità: riduzione movimento --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1; transform:none}
  .plant .scan{display:none}
}

/* --- Stampa --- */
@media print{
  .bg-aura,.site-header,.hero-visual,.split-visual,.adv-chart,.form{display:none}
  body{background:#fff; color:#000}
}