/* ============================================================
   CLEVER — Tema condiviso, allineato al sito clever-ia.com
   Palette azzurra Clever + font Archivo/IBM Plex + sfondo animato.
   Includere PRIMA dello <style> di pagina, con clever_bg.js.
   ============================================================ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/Archivo.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/IBMPlexSans.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500.woff2) format('woff2')}

:root{
  /* palette del sito clever-ia.com */
  --accent:#059FE1;          /* azzurro Clever */
  --accent-2:#3FB7ED;        /* azzurro chiaro */
  --accent-deep:#0784BD;     /* azzurro scuro (hover) */
  --bg-dark:#0B1017;         /* ground */
  --panel-bg-1:rgba(17,26,36,0.86);   /* #111A24 */
  --panel-bg-2:rgba(11,16,23,0.90);
  --panel-border:rgba(120,170,210,0.14);
  --btn-bg:rgba(22,33,45,0.72);       /* #16212D */
  --btn-border:rgba(120,170,210,0.16);
  --input-bg:#16212D;
  --input-border:rgba(120,170,210,0.22);
  --ink:#EAF1F7;
  --ink-soft:#93A4B5;
  --ink-dim:#5E6E7E;
  --danger:#ef4444;
  --ok:#39d98a;
  --warn:#f2c14e;
  --f-disp:"Archivo",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}

body{background:var(--bg-dark);font-family:var(--f-body);color:var(--ink);
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-disp);letter-spacing:-.02em}

/* ---------- layer di sfondo (iniettati da clever_bg.js) ---------- */
.bg-layer{position:fixed;inset:0;pointer-events:none}
.grid-bg{
  z-index:-4;
  background:
    linear-gradient(rgba(120,170,210,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,210,0.05) 1px, transparent 1px),
    linear-gradient(rgba(120,170,210,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,210,0.09) 1px, transparent 1px);
  background-size:26px 26px,26px 26px,140px 140px,140px 140px;
  animation:gridPan 60s linear infinite;
}
@keyframes gridPan{from{background-position:0 0,0 0,0 0,0 0}to{background-position:140px 140px,140px 140px,140px 140px,140px 140px}}
#bgCanvas.bg-layer{z-index:-3}
.glow-bg{
  z-index:-2;
  background:
    radial-gradient(1000px 640px at 78% 12%, rgba(5,159,225,0.15), transparent 60%),
    radial-gradient(820px 600px at 12% 88%, rgba(63,183,237,0.08), transparent 60%),
    radial-gradient(closest-side at 50% 50%, transparent 55%, rgba(11,16,23,0.85));
}
.scanline{
  z-index:-1;height:2px;inset:auto 0;top:-2%;
  background:linear-gradient(90deg,transparent,rgba(5,159,225,0.35),transparent);
  box-shadow:0 0 18px rgba(5,159,225,0.35);
  animation:scan 9s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes scan{0%{top:-2%;opacity:0}8%{opacity:1}50%{top:102%;opacity:1}58%{opacity:0}100%{top:102%;opacity:0}}
@media (prefers-reduced-motion: reduce){
  .grid-bg{animation:none}
  .scanline{display:none}
}

/* ---------- componenti riutilizzabili ---------- */
.glass-panel{
  background:linear-gradient(180deg, var(--panel-bg-1), var(--panel-bg-2));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--panel-border);
  border-radius:8px;
  box-shadow:0 24px 60px -28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
}
.clever-btn{
  position:relative;overflow:hidden;
  background:var(--btn-bg);color:var(--ink);
  border:1px solid var(--btn-border);border-radius:3px;
  cursor:pointer;font-weight:600;font-family:var(--f-mono);letter-spacing:.02em;
  transition:transform .16s ease, border-color .18s ease, box-shadow .2s ease, background .18s ease;
}
.clever-btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.clever-btn:hover::after{left:160%}
.clever-btn:hover{
  border-color:rgba(5,159,225,0.55);
  box-shadow:0 0 0 3px rgba(5,159,225,0.14), 0 14px 30px -16px rgba(5,159,225,0.5);
  transform:translateY(-2px);
}
.clever-btn:active{transform:translateY(0)}