:root{

  /* Palette (immutata) */

  --fg:#eef7fb;

  --muted:rgba(239,247,251,.72);

  --border:rgba(255,255,255,.12);

  --accent:#17c3b2;

  --accent-hover:#2ee6d2;

  --accent-active:#11ab9c;

  --accent-rgb:23,195,178;

  --accent-soft:rgba(23,195,178,.18);

  --bg:#091525;

  --bg-soft:#10233a;

  /* UI tokens */

  --radius:18px;

  --shadow:0 18px 40px rgba(0,0,0,.22);

  --shadow-hover:0 20px 44px rgba(0,0,0,.30);

  /* Layout tokens */

  --max:1120px;

  --pad:20px;

  /* Typography tokens */

  --fs-body:16px;

  --lh-body:1.6;

  color-scheme: dark;

}

/* Base */

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; }

body{

  margin:0;

  color:var(--fg);

  background:var(--bg);

  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  font-size:var(--fs-body);

  line-height:var(--lh-body);

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }

a:hover{ color:var(--accent); border-bottom-color:rgba(var(--accent-rgb),0.45); }

/* Utility layout (da usare nell'index e nelle pagine) */

.container{

  max-width:var(--max);

  margin:0 auto;

  padding:0 var(--pad);

}

.section{

  padding:48px 0;

}

.sectionTitle{

  font-size:12px;

  letter-spacing:.12em;

  font-weight:900;

  color:var(--muted);

  text-transform:uppercase;

  margin:0 0 10px;

}

.h1{

  font-size:44px;

  line-height:1.05;

  letter-spacing:-0.5px;

  margin:0 0 10px;

}

.lead{

  margin:0;

  color:var(--muted);

  max-width:70ch;

}

@media (max-width: 900px){

  .h1{ font-size:36px; }

  .section{ padding:36px 0; }

}

/* Topbar (Arduino-like) */

.topbar{

  position:sticky;

  top:0;

  z-index:50;

  background:rgba(6,15,27,.82);

  border-bottom:1px solid var(--border);

}

.topbarInner{

  max-width:var(--max);

  margin:0 auto;

  padding:10px var(--pad);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}

.brand{

  display:flex;

  align-items:center;

  gap:10px;

  min-width:180px;

  border-bottom:0;

}

.brand:hover{ border-bottom:0; }

.brandLogo{

  height:40px;

  width:auto;

  display:block;

}

.brandName{

  font-weight:900;

  letter-spacing:0.04em;

}

.navSelect{

  height:38px;

  padding:0 12px;

  border:1px solid var(--border);

  border-radius:12px;

  background:rgba(255,255,255,.06);

  color:var(--fg);

  font-weight:800;

  color-scheme:dark;

}

.navSelect option,
.navSelect optgroup{
  background:#0f1c2d;
  color:#eef7fb;
}

.navSelect option[disabled]{
  color:rgba(239,247,251,.56);
}


.langSwitch{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
}

.langLink{
  color:var(--muted);
  text-decoration:none;
}

.langLink.active{
  color:var(--fg);
}

.langLink:hover{
  text-decoration:underline;
}

.langSep{
  margin:0 6px;
  color:var(--muted);
}

/* Pill */

.pill{

  border:1px solid var(--border);

  border-radius:999px;

  background:var(--bg);

}

/* Buttons */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  height:40px;

  padding:0 14px;

  border-radius:20px;

  border:1px solid rgba(var(--accent-rgb),0.58);

  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.24), rgba(var(--accent-rgb),0.10));

  color:#eef7fb;

  font-weight:900;

  cursor:pointer;

  box-shadow:0 10px 24px rgba(0,0,0,0.20);

  /* evita underline “da link” */

  border-bottom:0;

}

.btn:hover{

  border-color:var(--accent);

  color:var(--fg);

  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.34), rgba(var(--accent-rgb),0.14));

  box-shadow:0 12px 28px rgba(0,0,0,0.26);

  border-bottom-color:transparent;

}

/* Primario: IMPORTANTISSIMO — niente testo bianco in hover */

.btn.primary{

  background:var(--accent);

  border-color:var(--accent);

  color:#031318;

  box-shadow:0 10px 24px rgba(0,0,0,0.12);

}

.btn:active{

  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.28), rgba(var(--accent-rgb),0.09));

  border-color:var(--accent-active);

  transform:translateY(0);

  box-shadow:0 8px 18px rgba(0,0,0,0.22);

}

/* Cards / surfaces */

.card,

.linkCard,

.table-wrap{

  border:1px solid var(--border);

  border-radius:var(--radius);

  background:var(--bg);

  box-shadow:var(--shadow);

}

.linkCard:hover{

  border-color:rgba(var(--accent-rgb),0.55);

  transform:translateY(-1px);

  transition:transform .12s ease, border-color .12s ease;

}

/* Get started cards media container */

.cardMedia{

  height:150px;

}

@media (max-width: 600px){

  .cardMedia{

    height:130px;

  }

}

/* Media frames */

.heroImg,

.gallery img{

  border:1px solid var(--border);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

}

/* Footer (riusabile su tutte le pagine) */

.footer{
  margin-top:52px;
  padding-top:18px;
  padding-bottom:34px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  position:relative;
}
.footer::before{

  content:"";

  position:absolute;

  top:0; left:0;

  width:100%; height:2px;

  background:linear-gradient(90deg, var(--accent), transparent);

  transform:translateY(-1px);

}

.footerLinks{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  padding-top:10px;

}

.footerLinks a{

  color:var(--muted);

  border-bottom:1px solid transparent;

  font-weight:900;

}

.footerLinks a:hover{
  color:var(--accent);
  border-bottom-color:rgba(var(--accent-rgb),0.45);
}

.lastUpdate{
  margin-top:32px;
  font-size:12px;
  color:var(--muted);
  text-align:right;
}

.footerCopyright{
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
}
@media (max-width: 768px){
  .footer{
    padding-bottom:24px;
  }
}

/* Motion + focus improvements */

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

.btn,

.cardLink,

.diagramCard,

.categoryLink{

  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;

}

.btn:hover,

.cardLink:hover,

.diagramCard:hover,

.categoryLink:hover{

  transform:translateY(-2px);

}

.btn.primary:hover{
  background: var(--accent-hover);
  color:#031318;
}

.btn.primary:active{
  background: var(--accent-active);
  border-color: var(--accent-active);
  color:#031318;
}

.heroImg,

.heroImgFull,

.cardMedia img{

  box-shadow:var(--shadow);

}

.heroImg:hover,

.heroImgFull:hover{

  box-shadow:var(--shadow-hover);

}

@media (prefers-reduced-motion: reduce){

  .btn,

  .cardLink,

  .diagramCard,

  .categoryLink,

  .heroImg,

  .heroImgFull,

  .cardMedia img{

    transition:none;

    transform:none;

  }

}

@media (max-width: 768px){
  :root{
    --pad: 12px;
  }
  .topbarInner{

    padding-left:12px;

    padding-right:12px;

  }

  .pageHero{

    padding:44px 0 36px;

  }

  .heroImageWrap,

  .actionImageWrap{

    margin-top:16px;

  }

  .h1{ font-size:32px; }

  .h2{ font-size:26px; }

  .cardGrid,

  .grid,

  .screenshotGrid,

  .featureGrid{

    grid-template-columns:1fr !important;

    gap:12px !important;

  }

}

@media (max-width: 480px){

  .btn{

    height:36px;

    padding:0 12px;

    font-size:14px;

  }

}

@media (max-width: 680px){
  body{
    overflow-x:hidden;
  }

  .topbarInner{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
    gap:8px;
  }

  .brand{
    min-width:0;
  }

  .brandLogo{
    height:38px;
  }

  .topbarActions{
    width:100%;
    min-width:0;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:8px;
  }

  .navSelect{
    width:100%;
    min-width:0;
  }

  .langSwitch,
  .topbarActions > .btn{
    white-space:nowrap;
  }
}

@media (max-width: 430px){
  .topbarActions{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .topbarActions > .btn{
    grid-column:1 / -1;
    width:100%;
  }
}

/* Duilio F4 compare table dark mode fixes */
  .compareTable{
    background: var(--bg-soft);
    border-color: var(--border);
  }
  .compareTable th{
    background: var(--bg);
    color: var(--fg);
    border-color: var(--border);
  }
  .compareTable th[scope="row"]{
    background: var(--bg);
    color: var(--fg);
  }
  .compareTable td{
    background: var(--bg-soft);
    color: var(--fg);
    border-color: var(--border);
  }
  .compareTable tr:nth-child(even) td{
    background: var(--bg);
  }
  .compareTable .bar{
    background: rgba(255,255,255,0.10);
  }
  .compareTable .bar span{
    background: var(--accent);
  }
  .compareTable tr.highlight{
    background: var(--bg);
  }
  .compareTable tr.highlight th[scope="row"],
  .compareTable tr.highlight td{
    background: var(--bg);
    color: var(--fg);
  }