/* ════════════════════════════════════════════════════════════════
   INSTACODE — IC-PREMIUM.CSS
   Livello di animazioni "premium" condiviso su tutte le pagine.
   Non ridefinisce colori o layout: usa lo stesso nero/bianco/off
   già presente in ogni pagina, aggiunge solo movimento e profondità.
   Si disattiva automaticamente con prefers-reduced-motion.
════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────
   Angoli "stile Apple" — una sola scala per tutto il sito.
   Le pagine usano var(--ic-r-...) al posto dei px fissi: per rendere
   tutto piu' o meno tondo basta cambiare questi sette numeri.
────────────────────────────── */
:root{
  --ic-r-xs: 10px;     /* chip, badge, miniature */
  --ic-r-s: 14px;      /* elementi piccoli dentro le card */
  --ic-r-m: 20px;      /* card piccole, riquadri, immagini QR */
  --ic-r-l: 28px;      /* card grandi, pannelli */
  --ic-r-xl: 32px;     /* modali, finestre */
  --ic-r-field: 16px;  /* campi di testo, menu a tendina */
  --ic-r-pill: 999px;  /* pulsanti */
}

/* ──────────────────────────────
   Aurora di sfondo — nebulosa lenta, fissa dietro al contenuto
────────────────────────────── */
/* Niente "filter: blur" ne' "mix-blend-mode" sul contenitore: entrambi
   costringevano il browser a risfocare e rimescolare un'area piu' grande
   dello schermo a ogni fotogramma dell'animazione. Le macchie sono gia'
   gradienti radiali sfumati, quindi la sfocatura non aggiungeva quasi
   niente; cosi' le tre macchie si muovono solo con "transform", che la
   scheda grafica compone senza ridisegnare. */
.ic-aurora{
  position:fixed; inset:-15%; z-index:-2; pointer-events:none;
  opacity:.14;
  transition: opacity 1.2s ease;
}
.ic-aurora span{
  position:absolute; border-radius:50%;
  will-change: transform;
  animation: icpDrift 26s ease-in-out infinite alternate;
}
.ic-aurora span:nth-child(1){
  width:48vw; height:48vw; top:-14%; left:-10%;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
  animation-duration:28s;
}
.ic-aurora span:nth-child(2){
  width:40vw; height:40vw; bottom:-16%; right:-8%;
  background: radial-gradient(circle, rgba(130,170,255,.12), transparent 70%);
  animation-duration:34s; animation-delay:-8s;
}
.ic-aurora span:nth-child(3){
  width:32vw; height:32vw; top:32%; left:58%;
  background: radial-gradient(circle, rgba(255,180,120,.09), transparent 70%);
  animation-duration:22s; animation-delay:-13s;
}
/* home page: aurora più viva, protagonista */
body.ic-hero-page .ic-aurora{ opacity:.26; }
body.ic-hero-page .ic-aurora span{ animation-duration:22s; }
body.ic-hero-page .ic-aurora span:nth-child(1){ width:50vw; height:50vw; }

@keyframes icpDrift{
  0%   { transform:translate(0,0) scale(1); }
  50%  { transform:translate(4%,-6%) scale(1.14); }
  100% { transform:translate(-5%,5%) scale(.94); }
}

/* ──────────────────────────────
   Spotlight che segue il cursore — solo desktop
────────────────────────────── */
/* Prima era un livello grande quanto lo schermo con il gradiente spostato
   via variabili CSS: ogni movimento del mouse ridipingeva tutta la
   finestra. Ora e' un cerchio di dimensione fissa spostato con
   "transform" (vedi ic-premium.js): stesso aspetto, zero ridisegni. */
.ic-spotlight{
  position:fixed; left:0; top:0; z-index:1; pointer-events:none;
  width:1120px; height:1120px; margin:-560px 0 0 -560px;
  background: radial-gradient(circle 560px at 50% 50%, rgba(255,255,255,.03), transparent 62%);
  opacity:0; transition: opacity .35s ease;
  will-change: transform;
}
.ic-spotlight.ic-on{ opacity:1; }
body.ic-hero-page .ic-spotlight{
  width:1240px; height:1240px; margin:-620px 0 0 -620px;
  background: radial-gradient(circle 620px at 50% 50%, rgba(255,255,255,.045), transparent 62%);
}

/* ──────────────────────────────
   Bottoni — shine sweep al passaggio del mouse
────────────────────────────── */
.ic-shine-ready{ position:relative; overflow:hidden; }
.ic-shine-ready::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg);
  transition: left .75s cubic-bezier(.16,1,.3,1);
  pointer-events:none; z-index:2;
}
.ic-shine-ready:hover::after{ left:130%; }

/* ──────────────────────────────
   Card — leggero tilt 3D + elevazione al passaggio del mouse
────────────────────────────── */
/* "will-change" solo mentre il mouse e' sopra: tenerlo fisso su ogni card
   creava decine di livelli grafici sempre in memoria. */
.ic-tilt{
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  transform-style: preserve-3d;
}
.ic-tilt:hover{ will-change: transform; }
.ic-tilt:hover{
  box-shadow: 0 16px 44px rgba(255,255,255,.03), 0 6px 16px rgba(0,0,0,.35);
}

/* ──────────────────────────────
   Navbar — effetto vetro allo scroll
────────────────────────────── */
.navbar.ic-scrolled{
  background: linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 100%) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 12px 40px rgba(0,0,0,.4);
  transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}

/* ──────────────────────────────
   Divider — shimmer che attraversa la linea periodicamente
────────────────────────────── */
.divider{
  background-image:
    linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent),
    linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent) !important;
  background-size: 100% 100%, 55% 100% !important;
  background-position: 0 0, -80% 0 !important;
  background-repeat:no-repeat !important;
  /* Stesso motivo del riflesso qui sopra: quattordici divisori che
     ridipingono un gradiente in movimento, per un lampo di luce che
     attraversa una linea sottile. La linea resta, con il suo punto di
     luce fermo al centro. */
  background-position: 0 0, 50% 0 !important;
}
@keyframes icpDividerSweep{
  0%, 62%   { background-position: 0 0, -80% 0; }
  100%      { background-position: 0 0, 180% 0; }
}

/* ──────────────────────────────
   Eyebrow / badge premium — bordo che respira piano
────────────────────────────── */
[class*="eyebrow"], [class*="badge"]{
  transition: box-shadow .5s ease, border-color .5s ease;
}
[class*="eyebrow"]:hover, [class*="badge"]:hover{
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 0 24px rgba(255,255,255,.1);
}

/* ──────────────────────────────
   Numeri / statistiche — piccolo "pop" quando entrano in vista
────────────────────────────── */
.ic-count-pop{ animation: icpCountPop .55s cubic-bezier(.16,1,.3,1); }
@keyframes icpCountPop{
  0%{ transform:scale(.85); opacity:.4; }
  60%{ transform:scale(1.06); opacity:1; }
  100%{ transform:scale(1); }
}

/* ──────────────────────────────
   Immagini/illustrazioni hero — parallasse leggera al mouse
────────────────────────────── */
.ic-parallax{ transition: transform .25s ease-out; will-change: transform; }

@media (hover:none), (pointer:coarse){
  .ic-spotlight{ display:none !important; }
  .ic-tilt:hover{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .ic-aurora, .ic-aurora span, .divider, .ic-parallax{ animation:none !important; transform:none !important; }
  .ic-spotlight{ display:none !important; }
}

/* ══════════════════════════════════════
   PULSANTE APRI COMETA — icona semplice, non fluttuante.
   Sostituisce la sfera sempre visibile: la sfera/chat compaiono
   solo dopo il click su questo pulsante (vedi script Cometa in pagina).
══════════════════════════════════════ */
.ic-cometa-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#fff;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .2s ease;
}
.ic-cometa-btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.32); }
.ic-cometa-btn:active{ transform:scale(.93); }
.ic-cometa-btn svg{ display:block; }

/* Variante fissa: stesso identico punto dove stava prima la sfera
   flottante (in basso a destra, sopra il bottone Upgrade). Posizione
   (right/bottom) impostata via JS in base al bottone Upgrade di ogni
   pagina, cosi' resta sempre allineata anche nei breakpoint mobile. */
.ic-cometa-toggle-fixed{
  position:fixed;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(20,20,22,.9);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  z-index:299;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .2s ease, background .25s ease, border-color .25s ease;
}
.ic-cometa-toggle-fixed:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); }
.ic-cometa-toggle-fixed:active{ transform:scale(.92); }
.ic-cometa-toggle-fixed svg{ display:block; }

/* ════════════════════════════════════════════════════════════════
   VETRO LIQUIDO — versione "lucido", non opaco
   ic-premium.js individua da solo ogni superficie che usa già
   backdrop-filter (navbar, card, modali, pill, badge...) e le marca
   con .ic-glass-auto: qui le rendiamo lucide (sheen che scorre,
   bordo con luce che gira) e le colleghiamo al filtro SVG che le
   distorce leggermente quando l'utente scrolla, come vetro vero
   che si flette sotto la mano. Non tocca sfondo/colori esistenti,
   aggiunge solo luce sopra.
════════════════════════════════════════════════════════════════ */
.ic-glass-auto{
  isolation: isolate;
  transition: -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease;
}
/* position:relative solo se l'elemento non ha già un posizionamento
   proprio (absolute/fixed/sticky) impostato dalla pagina: altrimenti
   sovrascriverlo rompe dropdown/menu/popover che devono restare fuori
   dal flusso (es. il menu lingua che gonfiava la navbar) */
.ic-glass-auto.ic-glass-needs-pos{ position: relative; }

/* sheen: la "lucentezza" che scivola in diagonale sulla superficie,
   sempre leggermente in movimento — è quello che distingue il vetro
   lucido dal solito blur piatto e opaco */
.ic-glass-auto::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.34)  0%,
      rgba(255,255,255,.08) 20%,
      rgba(255,255,255,0)   40%,
      rgba(255,255,255,0)   58%,
      rgba(255,255,255,.12) 76%,
      rgba(255,255,255,.34) 100%);
  background-size: 250% 250%;
  background-position: 20% 20%;
  /* Era "mix-blend-mode: overlay": su ogni pannello in vetro obbligava a
     rimescolare il riflesso con lo sfondo gia' sfocato, a ogni scorrimento.
     Con la fusione normale e un'opacita' piu' bassa il riflesso sul fondo
     scuro si vede praticamente uguale. */
  opacity:.14;
  /* Il riflesso resta, il suo lento scorrimento no.

     Era un'animazione di "background-position": ogni fotogramma il browser
     deve ridisegnare l'intero elemento, perche' il gradiente si sposta
     dentro di lui. Girava su 34 pannelli contemporaneamente, per un totale
     di due milioni e mezzo di pixel quadrati ridipinti sessanta volte al
     secondo — piu' dell'intero cielo stellato — per uno scorrimento da
     diciotto secondi a opacita' 0,35 che quasi nessuno nota.

     Il riflesso statico si vede uguale. Il movimento resta al passaggio
     del mouse, cioe' quando qualcuno sta davvero guardando quel pannello:
     vedi la regola :hover qui sotto. */
  background-position: 28% 24%;
}

/* filo di luce sottile sul bordo — il riflesso che ti dice "questo è
   vetro spesso", non un rettangolo grigio traslucido */
.ic-glass-auto::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  z-index:2;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -14px 22px -14px rgba(255,255,255,.1);
}

.ic-glass-auto:hover::before{
  opacity:.3;
  animation-play-state: paused;
  background-position: 65% 35%;
  transition: background-position .6s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}

@keyframes icpGlassSheen{
  0%   { background-position: 10% 10%; }
  50%  { background-position: 85% 70%; }
  100% { background-position: 10% 10%; }
}

/* quando lo scroll muove il "liquido": una spinta di luce extra sulla
   superficie, sincronizzata con la distorsione del backdrop-filter
   che ic-premium.js applica via il filtro SVG #icLiquidGlass */
.ic-glass-auto.ic-glass-flex::after{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 -12px 24px -12px rgba(255,255,255,.22);
}

@media (prefers-reduced-motion: reduce){
  .ic-glass-auto::before{ animation:none !important; background-position:15% 15% !important; }
}
@media (hover:none), (pointer:coarse){
  .ic-glass-auto:hover::before{ animation-play-state: running; background-position:10% 10%; }
}

/* ══════════════════════════════════════════════════════════════
   ALLEGGERIMENTO SU TELEFONO
   Foglio condiviso da tutte le pagine, quindi queste regole valgono
   ovunque senza doverle ripetere.

   "backdrop-filter" e' la regola piu' costosa che si possa mettere in una
   pagina: obbliga il browser a rifotografare e risfocare tutto cio' che sta
   sotto l'elemento, e a rifarlo a ogni scorrimento. Su desktop non si nota,
   su telefono e' fra le prime cause di scatti. Su Instacode compare una
   ventina di volte nella sola pagina iniziale.

   I pannelli restano leggibili: hanno gia' un fondo proprio piuttosto
   coprente (fra 0.78 e 0.92 di opacita'), la sfocatura era una rifinitura.
══════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 820px){
  *, *::before, *::after{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

}

/* ══════════════════════════════════════════════════════════════
   ALLEGGERIMENTO SU TELEFONO — SECONDO GIRO

   Il primo giro aveva tolto le sfocature di sfondo e ridotto i canvas.
   Misurando di nuovo su uno schermo da 375px sono emersi tre costi che
   pesavano piu' del disegno vero e proprio:

     121 elementi con "filter: blur()"   → ridisegno fuori schermo
     168 con "will-change" mai rilasciato → 168 livelli grafici in memoria
      62 animazioni infinite               → il compositore non si ferma mai

   Qui si tolgono tutti e tre. Sono decorazioni: la pagina resta identica
   nella sostanza, e su telefono e' l'unica cosa che conta davvero.
══════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 820px){

  /* 1. Niente sfocatura nella comparsa: restano opacita' e spostamento,
        che la scheda grafica compone senza ridisegnare niente. */
  .fade-up, .scale-in, .reveal-left, .reveal-right{
    filter: none !important;
    transition-property: opacity, transform !important;
  }

  /* 2. Nessun livello grafico tenuto in vita a vuoto. Il browser se la
        cava benissimo da solo su animazioni cosi' brevi. */
  .fade-up, .scale-in, .reveal-left, .reveal-right,
  .glow-text, .section-label, .ic-magnetic{
    will-change: auto !important;
  }

  /* 3. Le animazioni infinite puramente decorative si fermano su un
        fotogramma qualunque: nessuna di queste comunica niente, e tenerle
        vive obbliga il compositore a lavorare a ogni fotogramma anche
        quando la pagina e' ferma. */
  /* Nota: l'animazione sta sull'elemento, non sul suo pseudo-elemento.
     La prima versione di questa regola mirava a ".divider::after" e non
     fermava niente. */
  .divider, .divider::after, .divider::before,
  .hero-particles span, .hero-particles,
  .hero-phone-glare, .hero-phone-chip,
  .tour-phone, .tour-phone::after, .tour-phone::before,
  .hero-visual-glow, .hero-ground-shadow, .ic-aurora,
  .mini-stage-glow, .mini-stage-shadow, .mini-stage-ring,
  .mini-card, .mini-card-dot, .mini-plan-highlight, .mini-spot, .mini-card-glare{
    animation: none !important;
  }

  /* Alcune di queste sono anche sfocate: senza mouse non comunicano
     nulla, e la sfocatura resta il costo piu' alto per pixel. */
  .mini-stage-glow, .mini-stage-shadow, .mini-stage-ring,
  .hero-visual-glow, .hero-ground-shadow, .ic-aurora{
    filter: none !important;
  }

  /* L'inclinazione 3D che segue il puntatore: su un telefono non c'e'
     nessun puntatore da seguire, ma i livelli grafici che si porta
     dietro restano. */
  .ic-tilt, .mini-tilt{
    will-change: auto !important;
    transform: none !important;
  }

  /* 4. Ombre molto larghe: il browser le calcola su un'area grande quanto
        il raggio. Su telefono si dimezzano, restano leggibili ma costano
        molto meno. */
  .sb-arte{ box-shadow:0 10px 22px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.07) !important; }
  .sb-arte-qr{ box-shadow:0 1cqw 2cqw rgba(0,0,0,.3) !important; }
}


/* ══════════════════════════════════════════════════════════════
   MODALITA' MINIMA SU TELEFONO — TERZO GIRO

   I due giri precedenti avevano ridotto il lavoro; qui si toglie del
   tutto quello che non serve a usare il sito. Il criterio e' uno solo:
   se non comunica niente e si ridisegna in continuazione, su telefono
   non c'e'.

   Cosa sparisce: le ultime animazioni infinite (galleggiamenti, pulsazioni,
   la striscia scorrevole delle categorie), le animazioni di comparsa allo
   scorrimento, e gli ultimi "will-change" rimasti.
   Cosa resta: tutti i contenuti, tutti i colori, tutte le funzioni.
══════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 820px){

  /* 1. Gli elementi compaiono e basta. La transizione costava poco per
        singolo elemento, ma sono un centinaio e partono a raffica mentre
        si scorre, cioe' proprio quando il telefono ha gia' da fare. */
  .fade-up, .scale-in, .reveal-left, .reveal-right{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  /* 2. Le ultime animazioni infinite, quelle sopravvissute al giro
        precedente. Sono tutte decorative: un QR che fluttua, un pallino
        che pulsa, una freccia che rimbalza. */
  .hero-phone-notif-dot, .hero-qr-card, .hero-qr-ping, .hero-qr-scan,
  .scroll-arrow, .trust-marquee-track, .mini-trend,
  .cometa-mock, .cometa-mock-dot,
  .ic-aurora, .ic-aurora span, .ic-spotlight{
    animation: none !important;
  }

  /* La striscia delle categorie non scorre piu': va allineata a sinistra,
     altrimenti resta ferma a meta' corsa con un vuoto davanti. */
  .trust-marquee-track{ transform:none !important; }

  /* 3. Nessun livello grafico tenuto vivo a vuoto. */
  .scroll-progress, .hero-visual-stage, .trust-marquee-track,
  .ic-aurora span{ will-change:auto !important; }

  /* 4. L'aurora, se un vecchio browser l'avesse comunque iniettata. */
  .ic-aurora{ display:none !important; }
}


/* ══════════════════════════════════════════════════════════════
   TELEFONO — QUARTO GIRO: tocchi puliti, niente scroll laterale

   1. Il telefono girato in orizzontale non ingrandisce piu' il testo da
      solo (lo fa Safari su iPhone): era una delle strade per cui una riga
      diventava piu' larga dello schermo.
   2. Una parola lunghissima (un link, un nome attaccato) va a capo invece
      di spingere la pagina di lato. Non tocca le righe che devono restare
      su una riga sola (quelle coi tre puntini).
   3. Niente doppio tocco che zooma la pagina per sbaglio mentre si
      preme un pulsante: lo zoom con due dita resta.
   4. Niente rettangolo azzurro del browser sopra il pulsante toccato: al
      suo posto il pulsante si scurisce un attimo, con i suoi angoli tondi.
   5. I campi di testo a 16px. Sotto i 16px Safari su iPhone, appena tocchi
      il campo, ingrandisce la pagina e la lascia ingrandita: da li' in poi
      bisogna spostarsi a destra e sinistra col dito. Succedeva nel login,
      nel modulo della Home, nella chat di Cometa e nell'editor.
══════════════════════════════════════════════════════════════ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select, textarea{ font-size:16px !important; }
}
@media (pointer: coarse), (max-width: 820px){
  html{ touch-action:manipulation; }
  body{ overflow-wrap:break-word; }
  a, button, label, summary, select, [role="button"], [onclick]{ -webkit-tap-highlight-color:transparent; }
  button:active:not(:disabled), a[class*="btn"]:active, .btn:active,
  [class*="-btn"]:active:not(:disabled), [role="button"]:active{ opacity:.78; }

  /* La barra in cima a Dashboard e Analisi resta agganciata mentre si
     scorre, con un fondo nero al 60% pensato per stare sopra a una
     sfocatura. Sul telefono la sfocatura non c'e' (vedi sopra) e il testo
     che passava sotto si leggeva attraverso il titolo: qui il fondo e' pieno. */
  .top-bar.ic-scrolled{ background:rgba(0,0,0,.94) !important; }
  html[data-theme="light"] .top-bar.ic-scrolled{ background:rgba(255,255,255,.96) !important; }

  /* Stesso motivo per le finestre della Dashboard (editor, stampa, aiuto):
     il loro fondo all'85% lasciava intravedere le card dietro. */
  .modal-overlay .modal{ background:linear-gradient(180deg, #0b0b0b, #060606) !important; }
  html[data-theme="light"] .modal-overlay .modal{ background:linear-gradient(180deg, #fff, #f8fafc) !important; }

  /* Con una finestra aperta il pulsante tondo di Cometa, che sta sopra a
     tutto, copriva l'angolo in basso a destra della finestra (opzioni,
     pulsanti). Sparisce finche' la finestra e' aperta e torna da solo dopo.
     Se la chat e' aperta resta: li' fa da pulsante per chiuderla. */
  body:has(.modal-overlay.open) #cometaLaunch:not(.cmt-on){ opacity:0 !important; pointer-events:none !important; }
}

/* Su un telefono non c'e' il mouse: l'effetto "al passaggio" scatta al
   tocco e resta attaccato finche' non si tocca altrove (la scheda resta
   sollevata, il pulsante ingrandito). Qui il colore del bordo resta, lo
   spostamento no. Le card hanno gia' la loro regola (.ic-tilt piu' su). */
@media (hover: none){
  .stat-panel:hover, .feature:hover, .sec-step:hover, .durata:hover,
  .qs-tool-btn:hover, .qs-sticker-btn:hover, .bg-thumb-option:hover,
  .qs-element-row:hover, .qs-cornice-btn:hover, .qs-pro-btn:hover,
  .qs-bg-swatch:hover, .qs-glow-swatch:hover, .qs-color-swatch:hover,
  .action-btn:hover, .start-btn:hover, .form-submit:hover, .shiny-btn:hover, .spick:hover{
    transform:none !important;
  }
  .ic-shine-ready:hover::after{ left:-60%; }
}


/* ════════════════════════════════════════════════════════════════
   TEMA — i dettagli del sito, su tutte le pagine

   Il sito e' nero e bianco, e il bianco fa da colore: pulsanti
   principali, puntini e spie, badge Pro, barra di avanzamento
   dell'editor, barre dei grafici, voce attiva nel menu, e i pulsanti
   dell'editor quando ci si passa sopra col mouse. Prima erano oro, poi
   azzurri: il bianco e' quello che sta meglio col resto.

   Questo foglio e' l'ultimo del <head> in ogni pagina, quindi le
   variabili scritte qui vincono su quelle di ciascuna pagina; per i
   pulsanti che avevano il bianco scritto a mano ci sono le regole sotto.
════════════════════════════════════════════════════════════════ */
:root, html[data-theme="dark"]{
  --led:#ffffff;                 /* il dettaglio: pulsanti, puntini, badge */
  --led-2:#ffffff;               /* per i gradienti */
  --led-3:#d6d6dc;               /* appena piu' scuro, per bordi e ombre */
  --led-t:#0A0A0A;               /* il testo sopra al bianco */
  --led-dim:rgba(255,255,255,.24);
  --led-velo:rgba(255,255,255,.1);
  --led-glow:0 0 22px rgba(255,255,255,.35);

  --accent:var(--led);
  --accent-2:var(--led-2);
  --accent-t:var(--led-t);
  --accent-dim:var(--led-dim);
  --focus-ring:rgba(255,255,255,.28);
}
/* Col tema chiaro il bianco sparirebbe sul bianco: si usa il nero,
   col testo bianco sopra. */
html[data-theme="light"]{
  --led:#0f172a; --led-2:#334155; --led-3:#0b1120; --led-t:#ffffff;
  --led-dim:rgba(15,23,42,.24); --led-velo:rgba(15,23,42,.08); --led-glow:0 0 18px rgba(15,23,42,.25);
  --accent:var(--led); --accent-2:var(--led-2); --accent-t:var(--led-t); --accent-dim:var(--led-dim);
  --focus-ring:rgba(15,23,42,.25);
}

/* ── Pulsanti principali che avevano il bianco scritto a mano ── */
.btn-primary, .btn-free-top,
.btn-primary-login,
.grazie-btn, .box .btn{
  background:var(--led) !important; color:var(--led-t) !important;
  box-shadow:0 10px 30px -8px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.25) !important;
}
.btn-primary:hover, .btn-free-top:hover, .btn-primary-login:hover{
  box-shadow:0 14px 36px -8px rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.25) !important;
}
.btn-primary-login:disabled{ box-shadow:0 0 20px rgba(255,255,255,.18) !important; }

/* ── Pagina iniziale ── */
.mini-card-dot{ background:var(--led); box-shadow:0 0 8px var(--led); }
.vetrina-pallino.acceso{ background:var(--led); }
.sb-piano.pro{ background:var(--led); color:var(--led-t); }
.price-card.featured{
  border-color:rgba(255,255,255,.4);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px -30px rgba(255,255,255,.22);
}
.price-card.featured .plan-badge{ background:var(--led-velo); color:var(--led); }
.faq-item.is-open .faq-icon{ color:var(--led); }
.hero-eyebrow{ border-color:rgba(255,255,255,.28); }

/* ── Menu laterale dell'app: la voce attiva ha la sua riga ── */
.nav-item.active a{ box-shadow:inset 3px 0 0 var(--led); }
/* sul telefono il menu diventa la barra in basso: la riga a sinistra li'
   seguiva gli angoli tondi e sembrava una parentesi; basta il fondo chiaro */
@media (max-width:480px){ .sidebar .nav-item.active a{ box-shadow:none; } }
.nav-item.active svg{ stroke:var(--led); filter:drop-shadow(0 0 5px rgba(255,255,255,.45)); }

/* ── Badge del piano ── */
.plan-badge.pro, .tier-badge-top.tier-pro{
  color:var(--led); border-color:rgba(255,255,255,.38); background:var(--led-velo);
}

/* ── Editor: avanzamento, salvataggio, passo attivo ── */
.qs-progress-fill{ background:linear-gradient(90deg, rgba(255,255,255,.75), #fff 60%, rgba(255,255,255,.9)); }
.btn-save{ background:linear-gradient(120deg, rgba(255,255,255,.88), #fff 55%, rgba(255,255,255,.95)); }
.qs-side-step.active .qs-side-num{ background:linear-gradient(135deg, #fff, var(--led-3)); }
.qs-hint-banner.qs-hint-locked{ color:var(--led); border-color:rgba(255,255,255,.28); background:var(--led-velo); }

/* ── Editor: ogni pulsante e ogni tessera si accende al passaggio del
   mouse. Prima ognuno aveva il suo grigio; ora la regola e' una sola e
   vale per tutto quello che si puo' premere nel modale, tranne la X
   rossa, i pulsanti rossi e quelli spenti. ── */
.modal.qs-modal button:hover:not(:disabled):not(.modal-close):not(.pericolo):not(.btn-save):not(.qs-editor-action-danger):not(.qs-ctx-voce),
.modal.qs-modal label.qs-tool-btn:hover,
.modal.qs-modal .qs-element-row:hover,
.modal.qs-modal .qs-bg-swatch:hover, .modal.qs-modal .qs-glow-swatch:hover,
.modal.qs-modal .qs-tpl-card:hover .qs-tpl-swatch,
.modal.qs-modal .qs-color-swatch:hover, .modal.qs-modal .qs-sticker-btn:hover,
.modal.qs-modal .qs-emoji-tema:hover, .modal.qs-modal .qs-shape-btn:hover,
.modal.qs-modal .qs-font-btn:hover, .modal.qs-modal .qs-style-btn:hover,
.modal.qs-modal .qs-cornice-btn:hover, .modal.qs-modal .qs-cornice-chip:hover,
.modal.qs-modal .qs-pro-btn:hover, .modal.qs-modal .qs-pro-photo-thumb:hover{
  border-color:var(--led) !important;
  box-shadow:0 0 0 1px var(--led-dim), 0 0 18px -4px rgba(255,255,255,.4) !important;
  color:var(--txt);
}
/* la barra sotto l'anteprima e le tappe: stesso velo, senza cambiare fondo */
.modal.qs-modal .qs-side-step:hover:not(.active){ background:var(--led-velo); }
.modal.qs-modal .qs-barra-btn:hover:not(:disabled):not(.pericolo):not(.primaria){ background:var(--led-velo); }
/* i pulsanti pieni (primari) si schiariscono, non cambiano colore */
.modal.qs-modal .qs-barra-btn.primaria:hover, .modal.qs-modal .btn-save:hover{ filter:brightness(1.08); }
/* fuori dal modale: i pulsanti azione della dashboard e delle impostazioni */
.action-btn:hover, .btn-setting:hover:not(.btn-danger):not(.btn-primario), .btn-control:hover:not(.btn-delete-premium){
  border-color:var(--led) !important; box-shadow:0 0 0 1px var(--led-dim), 0 0 16px -4px rgba(255,255,255,.35);
}

/* ── Analisi: i dettagli dei pannelli ──
   La pagina era tutta grigia con i soli numeri bianchi: ora il dettaglio
   segna il periodo in alto, l'icona di ogni pannello, un filo di luce sul
   bordo superiore, l'alone dei numeri grandi, i pulsanti dentro ai
   pannelli, la spia "in tempo reale", il primo posto della classifica. */
.days-label{ color:var(--led); border:1px solid rgba(255,255,255,.3); background:var(--led-velo);
  padding:6px 13px; border-radius:999px; font-size:.78rem; font-weight:700; }
.days-label span{ color:var(--led); }
.panel-icon{ color:var(--led); background:var(--led-velo); border-color:rgba(255,255,255,.26); box-shadow:0 0 14px -4px rgba(255,255,255,.4); }
.stat-panel::before{ content:''; position:absolute; left:8%; right:8%; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--led), transparent); opacity:.6; pointer-events:none; }
.stat-panel:hover{ border-color:rgba(255,255,255,.4) !important; box-shadow:0 16px 40px rgba(0,0,0,.35), 0 0 30px rgba(255,255,255,.1) !important; }
.panel-value{ text-shadow:0 0 18px rgba(255,255,255,.3), 0 0 2px rgba(255,255,255,.35); }
.page-title h1{ text-shadow:0 0 18px rgba(255,255,255,.3), 0 0 2px rgba(255,255,255,.35); }
.inc-btn{ border-color:rgba(255,255,255,.3); color:var(--led); }
.inc-btn:hover{ background:var(--led-velo); border-color:var(--led); text-shadow:none; }
.sum-value{ text-shadow:0 0 12px rgba(255,255,255,.25); }
.sum-days::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--led);
  box-shadow:0 0 8px var(--led); margin-right:8px; vertical-align:middle; }
.top-qr-title::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--led);
  box-shadow:0 0 8px var(--led); margin-right:9px; vertical-align:middle; }
.top-qr-row:first-child .top-qr-pos{ background:var(--led); color:var(--led-t); }
.top-qr-bar span{ background:linear-gradient(90deg, var(--led-3), var(--led)); }
:root, html[data-theme="dark"]{ --grid-line:rgba(255,255,255,.07); }

/* ── Analisi: le barre dei grafici ── */
:root, html[data-theme="dark"]{
  --bar-fill:rgba(255,255,255,.14); --bar-stroke:rgba(255,255,255,.6);
  --bar-fill-h:rgba(255,255,255,.32); --bar-stroke-h:#ffffff;
  --bar-glow:drop-shadow(0 0 5px rgba(255,255,255,.7));
}
html[data-theme="light"]{
  --bar-fill:rgba(15,23,42,.18); --bar-stroke:rgba(15,23,42,.7);
  --bar-fill-h:rgba(15,23,42,.35); --bar-stroke-h:#0f172a;
  --bar-glow:drop-shadow(0 0 4px rgba(15,23,42,.45));
}


/* ════════════════════════════════════════════════════════════════
   60 FPS — regole valide su TUTTI i dispositivi, anche desktop

   1. Comparsa allo scorrimento senza sfocatura. Animare "filter: blur"
      obbliga il browser a ridisegnare l'elemento a ogni fotogramma, e
      sulla home sono un centinaio di elementi che partono proprio mentre
      si scorre. Restano dissolvenza e spostamento, che costano zero.

   2. L'anello iridescente delle card ruotava sempre, su ogni card,
      ridipingendo un gradiente mascherato a ogni fotogramma (anche su
      telefono). Ora e' fermo e ruota solo sulla card sotto il mouse.
════════════════════════════════════════════════════════════════ */
.fade-up, .scale-in, .reveal-left, .reveal-right{
  filter: none !important;
  transition-property: opacity, transform !important;
}

.card::before, .price-card::before, .review-card::before,
.faq-item::before, .mini-card::before, .btn-secondary::before{
  animation: none !important;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .card:hover::before, .price-card:hover::before, .review-card:hover::before,
  .faq-item:hover::before, .mini-card:hover::before, .btn-secondary:hover::before{
    animation: icRefractSpin 14s linear infinite !important;
  }
  .featured:hover::before{ animation: none !important; }
}

/* Pagina caricata di nascosto (Safari e Chrome la precaricano mentre si
   scrive l'indirizzo): le animazioni aspettano che compaia davvero,
   invece di finire prima che qualcuno le veda. La classe la mettono
   index.html (in testa) e ic-premium.js. */
html.ic-attesa *, html.ic-attesa *::before, html.ic-attesa *::after{
  animation-play-state: paused !important;
}