:root{
  --bg:#000; --fg:#eaeaea; --muted:#9aa0a6; --accent:#8ab4f8; --card:#111; --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Layout principale compatto */
.wrap{
  max-width:680px; margin:3vh auto 0; padding:0 16px; text-align:center;
}
@media (min-width:768px){ .wrap{margin-top:2.5vh} }

/* Logo cliccabile con due immagini impilate (foto + SVG) */
.logo-link{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:6px; margin:0 auto 8px; text-decoration:none; outline:none;
}
.logo{ display:block; margin:0; width:clamp(160px,40vw,280px); height:auto; }
.logo + .logo{ margin-top:6px }          /* extra sicurezza se il gap non applica */
.logo--tight{ margin:0 }                  /* per SVG subito sotto la foto */

/* Tooltip “fumetto” */
.tooltip{
  position:absolute; left:50%; bottom:calc(100% + 12px); transform:translate(-50%,4px);
  padding:8px 12px; background:#1c1c1c; color:var(--fg);
  border:1px solid #2a2a2a; border-radius:12px; font-size:14px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.tooltip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#1c1c1c;
}
.logo-link:hover .tooltip, .logo-link:focus-visible .tooltip{
  opacity:1; transform:translate(-50%,0);
}

/* Box contenuti (input / testo / bottoni) */
.ask{
  display:flex; flex-direction:column; gap:8px;
  background:var(--card); padding:12px; margin-top:8px;
  border-radius:calc(var(--radius) + 4px); box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Input arrotondato */
.ask input{
  width:100%; padding:16px; border-radius:var(--radius);
  border:1px solid #222; background:#0d0d0d; color:var(--fg); font-size:16px; outline:none;
}
.ask input::placeholder{ color:var(--muted) }
.ask input:focus{ border-color:#333; box-shadow:0 0 0 3px rgba(138,180,248,.25) }

/* Bottoni (index) e link-bottone (iriade) identici */
.ask button, .ask .btn{
  display:inline-block; padding:14px 18px; border-radius:var(--radius);
  border:1px solid #2a2a2a; background:linear-gradient(0deg,#1b1b1b,#222);
  color:var(--fg); font-weight:600; font-size:16px; line-height:1.2; text-decoration:none;
  cursor:pointer; transition:transform .03s ease, filter .15s ease;
}
.ask button:hover, .ask .btn:hover{ filter:brightness(1.1) }
.ask button:active, .ask .btn:active{ transform:translateY(1px) }

/* Testo dei paragrafi nel box */
.ask p{ margin:0; font-size:14px; line-height:1.35; text-align:justify }

/* Link testuali “piccoli” con colore IA */
a.link{
  color:var(--accent); font-size:12px; font-family:inherit; text-decoration:none;
  opacity:.95; transition:color .15s ease, opacity .15s ease, text-decoration-color .15s ease;
}
a.link:visited{ color:var(--accent) }
a.link:hover, a.link:focus{ opacity:1; text-decoration:underline; text-decoration-color:var(--accent) }
a.link:active{ opacity:.75 }
/* Se ci sono link nel box che non sono bottoni */
.ask a:not(.btn){ color:var(--accent) }

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

/* Animazione discreta sul logo */
@media (prefers-reduced-motion:no-preference){
  .logo{ transition:opacity .3s ease, transform .3s ease }
  .logo-link:hover .logo{ transform:scale(1.02) }
}