/* =========================

   THEME TOKENS (DEFAULT LIGHT)

   ========================= */

:root{

  --radius: 18px;

  --shadow: 0 18px 70px rgba(2,6,23,.14);

  --max: 1120px;



  /* light */

  --bg: #f6f7fb;

  --text: rgba(15,23,42,.92);

  --muted: rgba(15,23,42,.70);

  --line: rgba(15,23,42,.14);



  --surface: rgba(15,23,42,.04);

  --surface2: rgba(15,23,42,.07);



  --brand1:#0284c7;

  --brand2:#7c3aed;

}



html[data-theme="dark"]{

  /* dark */

  --bg: #0b1220;

  --text: rgba(255,255,255,.92);

  --muted: rgba(255,255,255,.72);

  --line: rgba(255,255,255,.14);



  --surface: rgba(255,255,255,.06);

  --surface2: rgba(255,255,255,.09);



  --brand1:#38bdf8;

  --brand2:#a78bfa;



  --shadow: 0 18px 70px rgba(0,0,0,.45);

}



html{ color-scheme: light; }

html[data-theme="dark"]{ color-scheme: dark; }



*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{

  margin:0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;

  color: var(--text);

  background:

    radial-gradient(1100px 700px at 15% 10%, rgba(56,189,248,.14), transparent 55%),

    radial-gradient(900px 600px at 85% 15%, rgba(167,139,250,.12), transparent 55%),

    var(--bg);

}



a{ color:inherit; text-decoration:none; }

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



.container{

  width: min(100% - 32px, var(--max));

  margin-inline:auto;

}



.skip{

  position:absolute; left:-9999px; top:auto;

  width:1px; height:1px; overflow:hidden;

}

.skip:focus{

  left:16px; top:16px; width:auto; height:auto;

  padding:10px 12px;

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

  color: #0f172a;

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

  border-radius:12px;

  z-index:9999;

}

html[data-theme="dark"] .skip:focus{

  background:#111827;

  color: rgba(255,255,255,.92);

}



/* =========================

   HEADER / NAV

   ========================= */

header{

  position:sticky;

  top:0;

  z-index:50;

  background: color-mix(in srgb, var(--bg) 70%, transparent);

  backdrop-filter: blur(10px);

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

}

.nav{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:14px 0;

  gap:14px;

}

.brand{

  display:flex;

  align-items:center;

  gap:12px;

  min-width: 0;

  flex: 1 1 auto;

}

.brandMark{

  width:38px; height:38px;

  border-radius:14px;

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

  background: linear-gradient(135deg, color-mix(in srgb, var(--brand1) 22%, transparent), color-mix(in srgb, var(--brand2) 18%, transparent));

  box-shadow: 0 10px 30px rgba(0,0,0,.18);

}

.brandText strong{ display:block; font-size:14px; letter-spacing:.2px; }

.brandText span{ display:block; font-size:12px; color:var(--muted); }



.navLinks{

  display:flex;

  align-items:center;

  gap:12px;

}

.navLinks a{

  font-size:14px;

  color:var(--muted);

  padding:10px 10px;

  border-radius:12px;

}

.navLinks a:hover{

  color:var(--text);

  background: var(--surface);

}



.navCta{

  display:flex;

  align-items:center;

  gap:10px;

  flex: 0 0 auto;

  white-space: nowrap;

}



.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

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

  background: var(--surface);

  color: var(--text);

  padding:10px 12px;

  border-radius:14px;

  font-size:14px;

  cursor:pointer;

  transition: all 0.25s ease;

}



/* HOVER = STILE PRIMARY (gradiente blu/viola) */

.btn:hover{

  background: linear-gradient(

    135deg,

    color-mix(in srgb, var(--brand1) 24%, transparent),

    color-mix(in srgb, var(--brand2) 18%, transparent)

  );

  color: white;

  border-color: color-mix(in srgb, var(--brand1) 35%, var(--line));

}



/* RESET primary (così non parte già blu) */

.btn.primary{

  background: var(--surface);

  border-color: var(--line);

  color: var(--text);

}



/* Hover uguale anche per primary */

.btn.primary:hover{

  background: linear-gradient(

    135deg,

    color-mix(in srgb, var(--brand1) 24%, transparent),

    color-mix(in srgb, var(--brand2) 18%, transparent)

  );

  color: white;

  border-color: color-mix(in srgb, var(--brand1) 35%, var(--line));

}

.burger{ display:none; width:42px; height:42px; }

.burger svg{ width:20px; height:20px; opacity:.9; }



.mobileMenu{ display:none; padding:0 0 14px 0; }

.mobileMenu a{

  display:block;

  padding:12px 12px;

  color:var(--muted);

  border-radius:14px;

}

.mobileMenu a:hover{ background: var(--surface); color:var(--text); }



@media (max-width: 860px){

  .navLinks{ display:none; }

  .burger{ display:inline-flex; }

  .mobileMenu.open{ display:block; }

}



/* =========================

   THEME TOGGLE (ON/OFF)

   ========================= */

.themeToggle{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:8px 10px;

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

  background: var(--surface);

  border-radius: 999px;

  cursor:pointer;

  user-select:none;

}

.themeToggle:hover{ background: var(--surface2); }

.themeToggle .toggleLabel{

  font-size:12px;

  color:var(--muted);

  line-height:1;

}



.switch{

  width:44px;

  height:26px;

  border-radius:999px;

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

  background: color-mix(in srgb, var(--surface2) 55%, transparent);

  position:relative;

  flex: 0 0 auto;

}

.knob{

  width:20px;

  height:20px;

  border-radius:999px;

  position:absolute;

  top:50%;

  left:3px;

  transform: translateY(-50%);

  background: linear-gradient(135deg, color-mix(in srgb, var(--brand1) 60%, transparent), color-mix(in srgb, var(--brand2) 45%, transparent));

  transition: left .18s ease;

  box-shadow: 0 10px 25px rgba(0,0,0,.20);

}

html[data-theme="dark"] .knob{ left:21px; }



/* =========================

   HERO / PANELS

   ========================= */

.hero{ padding:56px 0 26px; }

.heroGrid{

  display:grid;

  grid-template-columns: 1.15fr .85fr;

  gap:18px;

  align-items:stretch;

}

@media (max-width: 980px){

  .heroGrid{ grid-template-columns: 1fr; }

}

.panel{

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

  background: var(--surface);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  overflow:hidden;

}

.panelInner{ padding:26px; }



.kicker{

  display:inline-flex;

  align-items:center;

  gap:10px;

  font-size:12px;

  color:var(--muted);

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

  background: var(--surface);

  padding:8px 10px;

  border-radius:999px;

}

.dot{

  width:8px; height:8px; border-radius:99px;

  background: var(--brand1);

  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand1) 18%, transparent);

}



h1{

  margin:14px 0 10px;

  font-size: clamp(30px, 4.2vw, 46px);

  letter-spacing: -.6px;

  line-height: 1.05;

}

.lead{

  margin:0 0 18px;

  color:var(--muted);

  font-size:16px;

  line-height:1.55;

}

.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }



.sidePanel{

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  background: linear-gradient(180deg, var(--surface2), var(--surface));

}

.sideTop h2{ margin:0 0 8px; font-size:18px; }

.sideTop p{ margin:0; color:var(--muted); line-height:1.55; font-size:14px; }

.sideBottom{

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

  padding:16px 22px;

  display:flex;

  gap:10px;

  flex-wrap:wrap;

}



/* =========================

   SECTIONS / CARDS

   ========================= */

.section{ padding:26px 0; }

.sectionTitle{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:14px;

  margin-bottom:14px;

}

.sectionTitle h2{ margin:0; font-size:20px; }

.sectionTitle p{ margin:0; color:var(--muted); font-size:13px; }



.grid{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap:14px;

}

@media (max-width: 980px){

  .grid{ grid-template-columns: 1fr; }

}



.card{

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

  background: var(--surface);

  border-radius: var(--radius);

  overflow:hidden;

}

.cardBody{ padding:16px; }

.card h3{ margin:0 0 6px; font-size:16px; }

.card p{ margin:0; color:var(--muted); line-height:1.6; font-size:14px; }



.thumb{

  height:160px;

  background: var(--surface2);

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

  position:relative;

}

.thumb img{

  width:100%;

  height:100%;

  object-fit:cover;

}

.thumb::after{

  content:"";

  position:absolute; inset:0;

  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--bg) 85%, transparent));

}



.pills{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:12px;

}

.pill{

  font-size:12px;

  color:var(--muted);

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

  background: var(--surface);

  padding:7px 10px;

  border-radius:999px;

}



/* =========================

   FOOTER

   ========================= */

footer{

  padding:30px 0 40px;

  color:var(--muted);

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

  margin-top:30px;

}

.footerGrid{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  justify-content:space-between;

  align-items:flex-start;

}

small{ font-size:12px; }

.footerNote{ max-width: 820px; line-height:1.6; }



html, body{

  height: 100%;

}



body{

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



main{

  flex: 1;

}



body{

  margin:0;

  min-height:100vh;

  display:flex;

  flex-direction:column;

  color: var(--text);

  background: var(--bg);

  position: relative;

  overflow-x: hidden;

}



/* Background globale unico (tutte le pagine) */

body::before{

  content:"";

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;



  background:

    radial-gradient(1100px 700px at 15% 10%, rgba(56,189,248,.18), transparent 55%),

    radial-gradient(900px 600px at 85% 15%, rgba(167,139,250,.16), transparent 55%),

    var(--bg);

}



/* Le sezioni NON devono avere background proprio */

main,

.section,

.hero{

  background: transparent;

}



.panel,

.card{

  background-color: var(--surface);

}





/* Theme toggle */

.themeToggle .icon-moon{ display:none; }

html[data-theme="dark"] .themeToggle .icon-sun{ display:none; }

html[data-theme="dark"] .themeToggle .icon-moon{ display:block; }



.themeToggle .icon{ width:16px; height:16px; }



/* SOLE */

.themeToggle .icon-sun circle{

  fill: #facc15 !important;

  stroke: #0f172a !important;

}

.themeToggle .icon-sun path{

  fill: none !important;

  stroke: #0f172a !important;

}



/* LUNA */

.themeToggle .icon-moon path{

  fill: #facc15 !important;

  stroke: #0f172a !important;

}



/* FACEBOOK */



.cardMedia{

  padding: 16px;

  padding-top: 0;

}



.ratio{

  aspect-ratio: 16 / 10;

  border-radius: calc(var(--radius) - 6px);

  overflow: hidden;

  background: var(--surface2);

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

}



@media (max-width: 520px){

  .ratio{ aspect-ratio: 4 / 3; }

}



/* ===== Chi siamo layout compatto ===== */

.chiSiamoLayout{

  display: grid;

  grid-template-columns: 1fr 250px; /* testo + quadratino */

  gap: 18px;

  align-items: center;

}



/* testo leggermente più stretto */

.chiSiamoText{

  min-width: 0;

}



/* riquadro immagine */

.chiSiamoImage{

  width: 260px;

  height: 250px;

  border-radius: 16px;

  background: var(--surface2);

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

  overflow: hidden;

  flex-shrink: 0;

}



.chiSiamoImage img{

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* mobile: immagine sotto */

@media (max-width: 860px){

  .chiSiamoLayout{

    grid-template-columns: 1fr;

  }



  .chiSiamoImage{

    width: 100%;

    height: 180px;

  }

}



/* ===== Prodotti layout compatto ===== */

.prodottiLayout{

  display: grid;

  grid-template-columns: 1fr 250px;

  gap: 18px;

  align-items: center;

}



.prodottiText{

  min-width: 0;

}



.prodottiImage{

  width: 260px;

  height: 250px;

  border-radius: 16px;

  background: var(--surface2);

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

  overflow: hidden;

}



.prodottiImage img{

  width: 100%;

  height: 110%;

  object-fit: cover;

  object-fit: center;

  object-position: 50% 30%;

}



/* mobile */

@media (max-width: 860px){

  .prodottiLayout{

    grid-template-columns: 1fr;

  }



  .prodottiImage{

    width: 100%;

    height: 18  0px;

  }

}