/* ===== Dark Neon (black/purple mix + white glow) ===== */
:root{
  --bg:#0a0a12;
  --card:rgba(16,16,24,.94);
  --card-solid:#121821;
  --text:#e6edf6;
  --muted:#9fb0c3;
  --border:rgba(148,163,184,.12);
  --accent:#4da3ff;
  --accent-2:#7c5cff;
  --accent-3:#a78bfa;
  --shadow:0 0.625rem 1.875rem rgba(0,0,0,.45), 0 0.125rem 0.5rem rgba(0,0,0,.35);
  --glow:0 0 0 1px rgba(77,163,255,.15), 0 0.5rem 1.875rem rgba(77,163,255,.15);
  --radius:0.875rem;
  --radius-sm:0.625rem;
  --blur:12px;
  --fs-base:16px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
html{font-size:var(--fs-base); background:#0a0a12}
body{
  margin:0; color:var(--text); line-height:1.55; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:1rem;
  background-color:#0a0a12;
  background-image:
    radial-gradient(80rem 55rem at 50% -14%, rgba(167,139,250,.24), transparent 62%),
    radial-gradient(100rem 70rem at 118% -10%, rgba(124,92,255,.48), transparent 60%),
    radial-gradient(100rem 70rem at -18% 20%, rgba(109,40,217,.42), transparent 62%),
    radial-gradient(70rem 50rem at 50% 115%, rgba(77,163,255,.18), transparent 60%);
  background-repeat:no-repeat;
}

/* Layout */
.wrap{max-width:46.875rem; margin:2rem auto; padding:0 1rem}
.container{
  margin-top:2rem; padding:1.375rem; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--card);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  position:relative; overflow:hidden;
  border:1px solid rgba(248,248,255,.92);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255,255,255,.18),
    0 0 3px  rgba(255,255,255,.7),
    0 0 8px  rgba(255,245,150,.42),
    0 0 16px rgba(167,139,250,.52),
    0 0 28px rgba(139,92,246,.38);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .container{background-color:rgba(16,16,24,.98)}
}

/* Nav (non sticky: scorre con la pagina) */
.nav{
  display:flex; gap:.875rem; align-items:center; flex-wrap:nowrap; margin:0 0 .875rem;
  position:static; top:auto; z-index:auto;
  overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-block:6px;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  text-decoration:none; color:var(--text); font-weight:600; opacity:.9; white-space:nowrap; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.62em .9em; line-height:1.2; min-height:2.4em;
  border-radius:999px; border:1px solid transparent; transition:.2s; font-size:1rem;
}
.nav a:hover{border-color:var(--border); background:rgba(255,255,255,.03); box-shadow:none; transform:none}
.nav a[aria-current="page"]{border-color:var(--border); background:rgba(77,163,255,.08)}

/* Headings */
h1{
  margin:0 0 .5rem; font-weight:900; letter-spacing:-.015em; line-height:1.15;
  font-size:clamp(1.4rem, 3.2vw, 2.1rem);
  background:linear-gradient(90deg,#fff,var(--accent-3) 45%,var(--accent) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 24px rgba(124,92,255,.25);
}
.h1-home{font-size:clamp(1.6rem,4vw,2.4rem)}
p.sub{margin:0 0 1.125rem; color:var(--muted); font-size:clamp(.9375rem,1.6vw,1rem)}
.hint{font-size:.75rem; color:var(--muted)}

/* Cards / items */
.card, .item{
  position:relative; overflow:hidden; border-radius:var(--radius-sm); border:2px solid transparent; box-shadow:var(--shadow);
  background:
    linear-gradient(var(--card-solid),var(--card-solid)) padding-box,
    conic-gradient(from 180deg at 50% 50%, rgba(124,92,255,.8), rgba(77,163,255,.8), rgba(167,139,250,.8), rgba(124,92,255,.8)) border-box;
  padding:.75rem 1rem; transition:transform .18s, box-shadow .18s, filter .18s;
}
.card{margin-bottom:.75rem; padding-bottom:2.5rem}
.item{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem}
.card:hover, .item:hover{transform:translateY(-4px) scale(1.012); box-shadow:0 1rem 2.4rem rgba(0,0,0,.60), 0 0 0 2px rgba(124,92,255,.18), var(--glow); filter:saturate(1.04)}
.card strong{display:block; margin-bottom:.25rem}
.card p{margin:.25rem 0 .5rem; line-height:1.35}
.name{font-weight:700; letter-spacing:.2px; font-size:1.02rem}

/* Buttons */
.btn, .download, .back{
  display:inline-block; text-decoration:none; font-weight:800; color:#07121d;
  background:linear-gradient(180deg,var(--accent),#2f7fe6 55%,var(--accent-3));
  padding:.72em 1.02em; border-radius:.7rem; border:1px solid rgba(255,255,255,.10);
  box-shadow:0 .5rem 1.4rem rgba(77,163,255,.45), inset 0 1px 0 rgba(255,255,255,.35), var(--glow);
  transition:transform .15s, box-shadow .15s, filter .15s, background .15s, color .15s;
  font-size:1rem;
}
.btn:hover, .download:hover, .back:hover, .back:focus, .back:focus-visible{
  transform:translateY(-2px) scale(1.03); filter:saturate(1.10) brightness(1.06);
  box-shadow:0 .9rem 2.2rem rgba(124,92,255,.50), 0 0 0 3px rgba(124,92,255,.18), var(--glow);
  color:#ffffff;
  background:linear-gradient(180deg,var(--accent),#2f7fe6 55%,var(--accent-3)); border-color:rgba(255,255,255,.10); outline:none;
}
.btn:active, .download:active, .back:active{transform:translateY(0); box-shadow:0 .25rem 1rem rgba(47,127,230,.35)}
.download{padding:.82em 1.12em; border-radius:.75rem}
.download::after{ content:none; }
.card .btn{position:absolute; right:1rem; bottom:.75rem; padding-block:.85em; padding-inline:1rem; font-size:1.05rem; width:auto; min-width:0; border-radius:.75rem}
.back{ padding:.55em .85em; font-size:.92rem; margin-right:.5rem; }
.back:last-child{ margin-right:0; }

/* Code */
pre{
  background:#0b1220; color:#dbe7f5; padding:.875rem; border-radius:.75rem; overflow:auto;
  border:1px solid var(--border); box-shadow:inset 0 1px 0 rgba(255,255,255,.02), var(--shadow); max-width:100%; font-size:.95rem;
}
code{max-width:100%}

/* Copy */
.copy{
  margin:.5rem 0 1.125rem; display:inline-block; cursor:pointer; font-weight:800; text-decoration:none;
  background:linear-gradient(180deg,var(--accent-2),#5b46d6 60%,var(--accent-3)); color:#0b0f14;
  padding:.6em .8em; border-radius:.625rem; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 .5rem 1.4rem rgba(124,92,255,.40), inset 0 1px 0 rgba(255,255,255,.35), var(--glow);
  font-size:.95rem; transition:.18s;
}
.copy:hover{box-shadow:0 .9rem 2.2rem rgba(124,92,255,.50), var(--glow); transform:translateY(-1px) scale(1.02)}

/* Footer & misc */
footer{margin:1.125rem 0 .375rem; font-size:.75rem; color:var(--muted); text-align:center; opacity:.9}
.ad-spacer{height:0; min-height:0}
.ad-in-article{margin:1rem 0; min-height:15.625rem}
img,video,canvas,svg{max-width:100%; height:auto}
a{color:#8ec2ff} a:hover{color:#b8d8ff}

/* Sheen */
.container::after, .card::after, .item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.10), transparent 30% 70%, rgba(255,255,255,.06));
  opacity:.45; mix-blend-mode:overlay;
}

/* Video 16:9 */
.video{position:relative; width:100%; aspect-ratio:16/9; margin:1rem 0 1.25rem; border-radius:.75rem; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:#000}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
@media (min-width:992px){ .video{max-width:960px; margin-left:auto; margin-right:auto} }

/* Contact */
#contact label{display:block; margin:12px 0 6px; font-weight:600}
#contact input, #contact textarea{
  display:block; width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; color:inherit;
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04);
}
#contact textarea{min-height:140px; resize:vertical}
#contact .btn{margin-top:14px}

/* Tablet */
@media (max-width:768px){
  :root{--fs-base:15px}
  .wrap{max-width:43.75rem; margin:1.5rem auto; padding:0 .875rem}
  .container{padding:1.125rem; margin-top:2rem}
  .container h1{font-size:1.1rem; line-height:1.2; white-space:nowrap; overflow:hidden}
  p.sub{font-size:.95rem; margin-bottom:1rem}
  .hint{font-size:.8rem}
  .btn, .download{font-size:.95rem; padding:.65em .95em}
  .copy{font-size:.95rem; padding:.6em .9em}
}

/* Phone */
@media (max-width:480px){
  :root{--fs-base:14px}
  .wrap{max-width:100%; margin:1rem auto; padding:0 .625rem}
  .container{padding:1rem; border-radius:.75rem; margin-top:2rem}
  .card, .item{padding:.75rem; border-radius:.625rem}
  .item{flex-direction:column; align-items:stretch; gap:.625rem}
  .container h1{font-size:1.15rem; line-height:1.2; white-space:nowrap; overflow:hidden}
  p.sub{font-size:.9rem; margin-bottom:.9rem}
  .hint{font-size:.8rem}
  .btn, .download{width:100%; text-align:center; font-size:.95rem; padding:.6em 1em}
  .card .btn{position:static; width:100%; margin-top:.5rem}
  .copy{width:100%; text-align:center; padding:.55em .8em}
  .nav{gap:.5rem}
  .nav a{padding:.45em .6em; font-size:1rem}
  .video{width:100%; margin-left:0; margin-right:0}
}

/* --- Search in-page (pill rotonda, layout: input | count | divider | buttons) --- */
.nav .search{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:auto; padding:4px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(255,255,255,.02);
  height:30px; min-width:0; white-space:nowrap;
  max-width:300px; /* pill più corta quando piena */
}

.nav .search input[type="search"]{
  appearance:none; border:0; outline:0; background:transparent;
  color:var(--text);
  flex:0 1 120px; min-width:70px; max-width:28vw;
  padding:0; font:inherit; font-size:13.5px; line-height:1;
}
.nav .search input[type="search"]::placeholder{ color:var(--muted); }

.nav .search:focus-within{
  border-color:color-mix(in oklab, var(--accent) 45%, var(--border));
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent);
}

.nav .search .count{
  font-size:12px; color:var(--muted); min-width:34px; text-align:right; font-variant-numeric:tabular-nums;
}

.nav .search .divider{
  width:1px; height:16px; background:var(--border); opacity:.7; margin:0 2px;
}

.nav .search .btns{ display:inline-flex; align-items:center; gap:6px; }
.nav .search .btns button{
  border:0; background:transparent; color:var(--muted);
  padding:2px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.nav .search .btns button:hover{ color:var(--text); transform:translateY(-1px); }
.nav .search .btns button:active{ transform:translateY(0); }
.nav .search .btns button svg{ width:14px; height:14px; display:block; }

/* Stato vuoto: nascondi parte destra */
.nav .search:has(input:placeholder-shown) .count,
.nav .search:has(input:placeholder-shown) .divider,
.nav .search:has(input:placeholder-shown) .btns{ display:none; }

/* Stato vuoto: pill e input un filo più larghi */
.nav .search:has(input:placeholder-shown){ max-width:340px; }
.nav .search:has(input:placeholder-shown) input[type="search"]{ flex-basis:150px; min-width:90px; }

/* Fallback JS (se usi la classe .is-empty) */
.nav .search.is-empty .count,
.nav .search.is-empty .divider,
.nav .search.is-empty .btns{ display:none; }

/* evidenziazione risultati — più forte */
mark.find-hit{
  background:#ffe066;                 /* giallo pieno, leggibile su dark */
  color:#111;
  padding:.05em .2em;
  border-radius:3px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 0 0 1px rgba(255,224,102,.45);
}

mark.find-hit.active{
  background:#ff9f1c;                 /* arancio brillante per l’attivo */
  color:#111;
  outline:3px solid #4da3ff;          /* bordo spesso azzurro */
  box-shadow:
    0 0 0 3px rgba(77,163,255,.45),
    0 0 14px rgba(77,163,255,.75),
    0 0 0 1px rgba(0,0,0,.35) inset;
  border-radius:4px;
  filter:saturate(1.15) brightness(1.04);
}

/* accessibilità */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Nasconde la X nativa del campo search (Chrome/Edge/Safari) */
.nav .search input[type="search"]::-webkit-search-decoration,
.nav .search input[type="search"]::-webkit-search-cancel-button,
.nav .search input[type="search"]::-webkit-search-results-button,
.nav .search input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none; appearance:none; display:none; width:0; height:0; pointer-events:none;
}
/* Nasconde la X nativa su Edge/IE */
.nav .search input[type="search"]::-ms-clear,
.nav .search input[type="search"]::-ms-reveal{
  display:none; width:0; height:0;
}

/* Icona lente: nascosta su desktop, visibile su tablet/phone */
.nav .search .icon svg{ width:16px; height:16px; display:block; }

/* Tablet & phone: mostra lente, compatta la testata e manda la ricerca a capo */
@media (max-width:768px){
  .nav{
    flex-wrap:wrap; overflow-x:visible;
    gap:.5rem; padding-block:4px; margin-bottom:.5rem;
  }
  .nav a{
    padding:.45em .65em; font-size:.95rem; min-height:2em;
  }
  .nav .search{
    order:99;
    margin:.5rem auto 0;
    width:100%;
    max-width:100%;
    height:28px; padding:3px 8px;
  }
  .nav .search input[type="search"]{
    flex:1 1 auto; max-width:none; font-size:13px;
  }
  .nav .search .icon{
    display:inline-flex; align-items:center; justify-content:center;
    margin-right:4px; color:var(--muted); flex:0 0 auto;
    transform: translateY(0.5px);
  }
  .nav .search:focus-within .icon{ color:var(--text); }
  .nav .search input::placeholder{ color: rgba(255,255,255,.55); }
  .nav .search .btns button svg{ width:13px; height:13px; }

  .container{ margin-top: 1.25rem; }
}

/* Telefono stretto: ancora un filo più compatto */
@media (max-width:480px){
  .nav{ gap:.4rem; padding-block:3px; }
  .nav a{ padding:.4em .55em; font-size:.9rem; }
  .nav .search{
    height:26px; padding:2px 8px;
    width:100%;
    max-width:100%;
    margin:.5rem auto 0;
  }
  .nav .search input[type="search"]{ font-size:12.5px; }

  .container{ margin-top: 1rem; }
}