:root{
  --ad-bg:#050505;
  --ad-panel:rgba(14,14,18,.78);
  --ad-panel-strong:rgba(20,20,26,.92);
  --ad-border:rgba(230,145,56,.22);
  --ad-border-soft:rgba(255,255,255,.08);
  --ad-text:#f7f7f5;
  --ad-muted:#c9c9c3;
  --ad-soft:#8f8f88;
  --ad-accent:#e69138;
  --ad-accent-2:#ffb15c;
  --ad-blue:#3d85c6;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  overflow-x:hidden;
  position:relative;
  background-color:#050505!important;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(230,145,56,0) 30%, rgba(230,145,56,.70) 50%, rgba(230,145,56,0) 70%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(61,133,198,0) 30%, rgba(61,133,198,.52) 50%, rgba(61,133,198,0) 70%, transparent 100%),
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(rgba(230,145,56,.045) 1px, transparent 1px),
    linear-gradient(90deg,rgba(230,145,56,.045) 1px, transparent 1px),
    radial-gradient(circle at 18% 8%, rgba(230,145,56,.22), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(61,133,198,.18), transparent 28rem),
    linear-gradient(135deg,#050505 0%,#0b0b0d 45%,#11100e 100%)!important;
  background-size:
    38vw 2px,
    32vw 1px,
    46px 46px,
    46px 46px,
    184px 184px,
    184px 184px,
    100% 100%,
    100% 100%,
    100% 100%;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-position:
    -45vw 34%,
    105vw 67%,
    0 0,
    0 0,
    0 0,
    0 0,
    center,
    center,
    center;
  animation:ad-background-flow 9s linear infinite, ad-bg-pulse 8s ease-in-out infinite;
  color:var(--ad-text);
  min-height:100vh;
}

/* I contenuti restano sempre sopra lo sfondo perché griglia e cursori sono nel background del body */
body > *{
  position:relative;
  z-index:1;
}

/* Navbar sempre sopra contenuti */
#navbar-placeholder{
  position:relative;
  z-index:9999!important;
}

/* Disattiva eventuali vecchi pseudo-layer per evitare sovrapposizioni nei browser */
body::before,
body::after{
  content:none!important;
  display:none!important;
}

/* Griglia animata + cursori telemetria nel background del body */
@keyframes ad-background-flow{
  0%{
    background-position:
      -45vw 34%,
      105vw 67%,
      0 0,
      0 0,
      0 0,
      0 0,
      center,
      center,
      center;
  }
  100%{
    background-position:
      105vw 34%,
      -45vw 67%,
      46px 46px,
      46px 46px,
      -92px 92px,
      -92px 92px,
      center,
      center,
      center;
  }
}

@keyframes ad-grid-drift{
  0%{
    background-position:
      0 0,
      0 0,
      0 0,
      0 0;
  }
  100%{
    background-position:
      46px 46px,
      46px 46px,
      -92px 92px,
      -92px 92px;
  }
}

@keyframes ad-telemetry-flow{
  0%{
    background-position:
      -45vw 34%,
      105vw 67%,
      center,
      center;
  }
  100%{
    background-position:
      105vw 34%,
      -45vw 67%,
      center,
      center;
  }
}

@keyframes ad-bg-pulse{
  0%,100%{
    filter:saturate(1);
  }
  50%{
    filter:saturate(1.25);
  }
}

@media (prefers-reduced-motion: reduce){
  body{
    animation:none!important;
  }
}

a,
button{
  touch-action:manipulation;
}

nav{
  position:relative;
  z-index:10000!important;
  background:rgba(5,5,5,.72)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--ad-border)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.30);
}

#mobileMenu{
  position:absolute;
  z-index:10001!important;
  box-shadow:0 24px 60px rgba(0,0,0,.52);
}

.ad-brand{
  font-family:'MicroExtendFLF','Inter',sans-serif;
  letter-spacing:.04em;
}

.ad-shell{
  width:min(1160px,100%);
  margin-inline:auto;
}

.ad-panel{
  background:linear-gradient(180deg,rgba(22,22,28,.86),rgba(10,10,13,.76));
  border:1px solid var(--ad-border-soft);
  border-radius:28px;
  box-shadow:0 24px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

.ad-panel-accent{
  border-color:var(--ad-border);
  box-shadow:0 24px 90px rgba(0,0,0,.45),0 0 0 1px rgba(230,145,56,.08) inset;
}

.ad-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--ad-border);
  background:rgba(230,145,56,.10);
  color:#ffd9af;
  border-radius:999px;
  padding:.45rem .75rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ad-title{
  font-family:"MicroExtendFLF", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.08;
  text-wrap:balance;
  max-width:100%;
  overflow:visible;
  overflow-wrap:normal;
  padding-right:.16em;
}

.ad-gradient-text{
  background:linear-gradient(90deg,#fff 0%,#ffd2a2 45%,#e69138 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ad-title .ad-gradient-text{
  display:inline-block;
  overflow:visible;
  padding-right:.10em;
  padding-left:.02em;
  line-height:1.08;
}

.ad-muted{
  color:var(--ad-muted);
}

.ad-card{
  background:rgba(255,255,255,.045);
  border:1px solid var(--ad-border-soft);
  border-radius:22px;
  padding:1rem;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}

.ad-card:hover{
  transform:translateY(-2px);
  border-color:var(--ad-border);
  background:rgba(255,255,255,.065);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.ad-stat{
  background:linear-gradient(180deg,rgba(230,145,56,.13),rgba(255,255,255,.04));
  border:1px solid var(--ad-border);
  border-radius:18px;
  padding:.9rem;
}

.ad-btn,
button[type="submit"],
#connect-device-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:44px;
  border-radius:999px!important;
  padding:.75rem 1.15rem!important;
  background:linear-gradient(135deg,var(--ad-accent),#c9711e)!important;
  color:#111!important;
  font-weight:800!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 14px 36px rgba(230,145,56,.25)!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}

.ad-btn:hover,
button[type="submit"]:hover,
#connect-device-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 18px 48px rgba(230,145,56,.34)!important;
}

.ad-btn-secondary{
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  border:1px solid var(--ad-border-soft)!important;
  box-shadow:none!important;
}

.ad-btn-secondary:hover{
  border-color:var(--ad-border)!important;
  background:rgba(255,255,255,.09)!important;
}

.input{
  width:100%;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.95)!important;
  color:#111!important;
  padding:.85rem 1rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

.input:focus{
  border-color:var(--ad-accent)!important;
  outline:3px solid rgba(230,145,56,.20)!important;
}

.ad-device-frame{
  position:relative;
  border-radius:28px;
  padding:10px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 25px 80px rgba(0,0,0,.55);
}

.ad-device-frame img{
  border-radius:20px;
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(255,255,255,.08);
}

.ad-device-frame::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(230,145,56,.40),transparent 30%,rgba(61,133,198,.25));
  z-index:-1;
  filter:blur(22px);
  opacity:.55;
}

.ad-note{
  background:rgba(120,75,20,.35);
  border:1px solid rgba(230,145,56,.26);
  color:#ffe5c7;
  border-radius:20px;
  padding:1rem;
  text-align:left;
}

footer{
  position:relative;
  z-index:1;
}

footer a{
  color:#d7d7d1;
}

footer a:hover{
  color:var(--ad-accent);
}

img{
  max-width:100%;
}

@media (max-width:767px){
  .ad-title{
    font-size:clamp(1.25rem,6.1vw,1.9rem)!important;
  }

  body{
    background-attachment:fixed!important;
  }
}

@media (min-width:768px){
  .ad-title{
    font-size:clamp(1.85rem,3.05vw,3rem)!important;
  }
}

/* Unified components across every page */
main.ad-panel,
.ad-panel{
  position:relative;
}

.ad-panel h1{
  letter-spacing:-.035em;
}

.ad-panel h2{
  color:#fff;
  letter-spacing:-.02em;
}

.ad-panel p,
.ad-panel li{
  line-height:1.75;
}

.ad-panel strong{
  color:#fff;
}

.ad-panel a:not(.ad-btn):not([href^="mailto:"]){
  color:#ffb15c!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(230,145,56,.35);
  transition:color .18s ease,border-color .18s ease;
}

.ad-panel a:not(.ad-btn):hover{
  color:#ffd2a2!important;
  border-color:rgba(255,210,162,.7);
}

.ad-media-card{
  display:block;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  padding:6px;
  box-shadow:0 22px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}

.ad-media-card:hover{
  transform:translateY(-2px) scale(1.01)!important;
  border-color:rgba(230,145,56,.38)!important;
  box-shadow:0 28px 86px rgba(0,0,0,.52),0 0 0 1px rgba(230,145,56,.12) inset!important;
}

/* Override old Tailwind orange buttons left in secondary pages */
a.bg-\[\#e69138\],
button.bg-\[\#e69138\],
.bg-\[\#e69138\]{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:44px;
  border-radius:999px!important;
  padding:.75rem 1.15rem!important;
  background:linear-gradient(135deg,var(--ad-accent),#c9711e)!important;
  color:#111!important;
  font-weight:800!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 14px 36px rgba(230,145,56,.25)!important;
  text-decoration:none!important;
}

a.bg-\[\#e69138\]:hover,
button.bg-\[\#e69138\]:hover,
.bg-\[\#e69138\]:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 18px 48px rgba(230,145,56,.34)!important;
}

.ad-card,
.bg-black\/60,
.bg-yellow-900{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:22px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
}

.bg-yellow-900{
  color:#ffe5c7!important;
  background:rgba(120,75,20,.35)!important;
  border-color:rgba(230,145,56,.26)!important;
}

select.input{
  appearance:auto;
}

/* ESP Web Tools shadow button style is also applied from JS, this keeps fallback coherent */
esp-web-install-button::part(button){
  border-radius:999px!important;
}

/* Shared legal/info cards */
.ad-legal-stack{
  width:min(896px,100%);
  margin:2.75rem auto 2rem;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.35rem;
  clear:both;
  position:relative;
  z-index:2;
  text-align:center;
}

.ad-info-card{
  width:100%;
  max-width:896px;
  padding:1.15rem 1.25rem;
  text-align:center!important;
  border-color:rgba(230,145,56,.30);
  background:linear-gradient(180deg,rgba(120,75,20,.28),rgba(255,255,255,.045));
}

.ad-footer-wrap{
  display:block;
  width:100%;
  text-align:center;
  margin:0;
  padding:0;
  line-height:normal;
}

.ad-footer-card{
  display:block;
  width:100%;
  max-width:896px;
  padding:1rem 1.25rem;
  text-align:center!important;
  vertical-align:top;
}

.ad-info-card p,
.ad-footer-card p{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.65;
}

.ad-info-card strong,
.ad-info-title{
  color:#ffd2a2!important;
}

.ad-footer-card a{
  color:#ffd2a2!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(230,145,56,.35);
}

.ad-footer-card a:hover{
  color:#fff!important;
  border-color:rgba(255,255,255,.60);
}

@media (max-width:767px){
  .ad-legal-stack{
    width:100%;
    margin-top:2rem;
    gap:1rem;
  }

  .ad-info-card,
  .ad-footer-card{
    border-radius:22px;
    padding:1rem;
  }
}
/* Manuale funzioni */
.manual-hero{
  overflow:hidden;
}

.manual-quick-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  justify-content:center;
}

.manual-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  border-radius:999px;
  padding:.6rem .9rem;
  color:#fff!important;
  font-size:.86rem;
  font-weight:800;
  text-decoration:none!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.manual-pill:hover{
  border-color:rgba(230,145,56,.55);
  background:rgba(230,145,56,.12);
  color:#ffd2a2!important;
}

.manual-section{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  scroll-margin-top:110px;
}

.manual-feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,0.92fr);
  gap:1.5rem;
  align-items:center;
  padding:1.25rem;
}

.manual-feature:nth-child(even){
  grid-template-columns:minmax(320px,0.92fr) minmax(0,1fr);
}

.manual-feature:nth-child(even) .manual-copy{
  order:2;
}

.manual-feature:nth-child(even) > img,
.manual-feature:nth-child(even) .manual-image-stack{
  order:1;
}

/* Alternanza manuale esplicita */
.manual-feature.manual-image-right{
  grid-template-columns:minmax(0,1fr) minmax(320px,0.92fr);
}

.manual-feature.manual-image-right .manual-copy{
  order:1;
}

.manual-feature.manual-image-right > img,
.manual-feature.manual-image-right .manual-image-stack{
  order:2;
}

.manual-feature.manual-image-left{
  grid-template-columns:minmax(320px,0.92fr) minmax(0,1fr);
}

.manual-feature.manual-image-left .manual-copy{
  order:2;
}

.manual-feature.manual-image-left > img,
.manual-feature.manual-image-left .manual-image-stack{
  order:1;
}

.manual-copy{
  padding:.6rem .6rem .6rem .85rem;
}

.manual-copy h2{
  font-size:clamp(1.55rem,2.6vw,2.55rem);
  font-weight:900;
  line-height:1.05;
  margin:.35rem 0 1rem;
  letter-spacing:-.04em;
}

.manual-copy p{
  color:var(--ad-muted);
  line-height:1.75;
  margin-bottom:1rem;
}

.manual-copy ul{
  display:grid;
  gap:.55rem;
  margin-top:.75rem;
  color:var(--ad-muted);
  line-height:1.55;
}

.manual-copy li{
  position:relative;
  padding-left:1.15rem;
}

.manual-copy li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:.38rem;
  height:.38rem;
  border-radius:999px;
  background:var(--ad-accent);
  box-shadow:0 0 18px rgba(230,145,56,.55);
}

.manual-copy strong{
  color:#fff;
}

.manual-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.55rem;
  height:2.55rem;
  border-radius:999px;
  background:rgba(230,145,56,.12);
  border:1px solid rgba(230,145,56,.42);
  color:#ffd2a2;
  font-size:.85rem;
  font-weight:900;
  letter-spacing:.05em;
}

.manual-image{
  width:100%;
  height:auto;
}

.manual-image-stack{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.manual-note{
  border:1px solid rgba(230,145,56,.26);
  background:rgba(120,75,20,.23);
  border-radius:18px;
  padding:.85rem 1rem;
  color:#ffe5c7!important;
}

.manual-icon-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  margin-top:1rem;
}

.manual-icon-list div{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  border-radius:18px;
  padding:.75rem .85rem;
}

.manual-icon-list strong{
  display:block;
  font-size:.95rem;
}

.manual-icon-list span{
  display:block;
  color:var(--ad-muted);
  font-size:.82rem;
  margin-top:.12rem;
}

.manual-summary .ad-card h3{
  font-size:1.05rem;
  font-weight:900;
  color:#fff;
  margin-bottom:.35rem;
}

.manual-summary .ad-card p{
  font-size:.92rem;
  color:var(--ad-muted);
  line-height:1.65;
}

@media (max-width:900px){
  .manual-feature,
  .manual-feature:nth-child(even),
  .manual-feature.manual-image-right,
  .manual-feature.manual-image-left{
    grid-template-columns:1fr;
    padding:1rem;
  }

  .manual-feature:nth-child(even) .manual-copy,
  .manual-feature:nth-child(even)>img,
  .manual-feature:nth-child(even) .manual-image-stack,
  .manual-feature.manual-image-right .manual-copy,
  .manual-feature.manual-image-right > img,
  .manual-feature.manual-image-right .manual-image-stack,
  .manual-feature.manual-image-left .manual-copy,
  .manual-feature.manual-image-left > img,
  .manual-feature.manual-image-left .manual-image-stack{
    order:initial;
  }

  .manual-copy{
    padding:.35rem;
  }

  .manual-icon-list{
    grid-template-columns:1fr;
  }
}