/* Bizcraft — sistema visivo v2
   Un accento solo (l'arancione del marchio). Verde = stato, mai decorazione.
   Scuro dove serve teatro, chiaro dove serve leggere. */

:root{
  --brand:#FC6C00;
  --brand-dim:#D25A00;
  --ink:#F2F4F7;           /* titoli */
  --ink-2:#AEB7C4;         /* testo corrente */
  --ink-3:#79839220;       /* segnaposto, sostituito sotto */
  --ink-3:#7B8797;         /* secondario */
  /* Un solo mondo, scuro. Le sezioni si distinguono per tono e per filetto,
     non per un salto di luminosità che costringe l'occhio a riadattarsi. */
  --paper:#0E1218;         /* fondo base */
  --paper-2:#131A24;       /* fondo alternato */
  --surface:#161E29;       /* schede e pannelli */
  --surface-2:#1B2531;     /* schede su fondo alternato */
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.14);
  --graphite:#0E1218;
  --on-dark:#EDEFF2;
  --on-dark-2:#98A2B0;
  --ok:#2F9E5E;

  --display:"Cabinet Grotesk","Outfit","Segoe UI Variable Display",system-ui,-apple-system,sans-serif;
  --body:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

html{ color-scheme:dark; background:var(--paper); scroll-behavior:smooth; }
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:768px){ .wrap{ padding-inline:2.5rem; } }

.tag{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brand);
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{ background:rgba(251,250,249,.93); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; height:66px; }
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.brand .mark{ width:26px; height:26px; flex:none; }
.brand .name{
  font-family:var(--display); font-size:1.0625rem; font-weight:600;
  letter-spacing:-0.012em; color:var(--on-dark); transition:color .3s var(--ease);
}
.nav.stuck .brand .name{ color:var(--ink); }
.nav-links{ display:none; gap:1.6rem; }
@media (min-width:940px){ .nav-links{ display:flex; } }
.nav-links a{ font-size:.875rem; color:var(--on-dark-2); text-decoration:none; transition:color .2s var(--ease); }
.nav.stuck .nav-links a{ color:var(--ink-2); }
.nav-links a:hover{ color:var(--brand); }
.nav-links a[aria-current="page"]{ color:var(--brand); }
.nav-right{ display:flex; align-items:center; gap:1rem; }

/* ---------- PULSANTI ---------- */
.btn{
  font:inherit; font-weight:600; border:1px solid transparent; cursor:pointer;
  border-radius:8px; text-decoration:none; display:inline-flex; align-items:center;
  justify-content:center; gap:.45rem;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .1s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn-sm{ font-size:.8125rem; padding:.5rem 1rem; }
.btn-lg{ font-size:.9375rem; padding:.8rem 1.5rem; }
.btn-block{ width:100%; }
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-dim); }
.btn-outline-dark{ background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.24); }
.btn-outline-dark:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.42); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--brand); color:var(--brand); }

/* ---------- BANDE SCURE ---------- */
.dark{ position:relative; background:var(--graphite); color:var(--on-dark); overflow:hidden; }
.dark-fallback{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(252,108,0,.10) 0%, transparent 58%),
    linear-gradient(180deg,#0E1218 0%,#131922 100%);
}
#gl{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.dark > .wrap{ position:relative; z-index:2; }

.hero{ padding:8rem 0 4rem; }
.hero-in{ display:grid; gap:3rem; align-items:center; }
@media (min-width:1000px){ .hero-in{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:3.5rem; } }

.pagehead{ padding:7.5rem 0 3rem; }
.pagehead h1{ max-width:23ch; }
.pagehead .lede{ margin-bottom:0; }

.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none; }

h1{
  margin:0 0 1.15rem; font-family:var(--display); font-weight:600;
  font-size:clamp(1.85rem,3.3vw,2.7rem); line-height:1.14;
  letter-spacing:-0.03em; color:#fff; text-wrap:balance; max-width:19ch;
}
.lede{ margin:0 0 1.9rem; max-width:56ch; font-size:clamp(1rem,1.35vw,1.125rem); color:var(--on-dark-2); }
.lede b{ color:var(--on-dark); font-weight:500; }
.actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.6rem; }
.badges{ display:flex; flex-wrap:wrap; gap:.4rem 1.35rem; font-size:.8125rem; color:var(--on-dark-2); }
.badges span{ display:flex; align-items:center; gap:.4rem; }
.badges span::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--brand); flex:none; }

/* ---------- FINESTRA PRODOTTO ---------- */
.shot{
  border-radius:11px; overflow:hidden; background:var(--surface);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 26px 60px -14px rgba(0,0,0,.65), 0 0 0 1px rgba(252,108,0,.10);
}
.shot .chrome{
  display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem;
  background:#1A222D; border-bottom:1px solid rgba(255,255,255,.08);
}
.shot .chrome i{ width:9px; height:9px; border-radius:50%; background:#3A4553; flex:none; }
.shot .url{
  margin-left:.4rem; font-family:var(--mono); font-size:.6875rem; color:#7D8899;
  background:#0E1218; border-radius:5px; padding:.2rem .6rem; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shot img{ display:block; width:100%; height:auto; }
.shot-cap{
  margin:.75rem 0 0; font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.06em; color:var(--on-dark-2); text-align:center;
}

/* ---------- SEZIONI CHIARE ---------- */
section.light{ background:var(--paper); padding:4rem 0; }
section.alt{ background:var(--paper-2); border-block:1px solid var(--line); }
section.tight{ padding:3rem 0; }
.sec-head{ max-width:64ch; margin-bottom:2.25rem; }
.sec-head h2{
  margin:.8rem 0 .6rem; font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,3.1vw,2.15rem); line-height:1.15;
  letter-spacing:-0.028em; color:var(--ink); text-wrap:balance;
}
.sec-head p{ margin:0; color:var(--ink-2); font-size:1.0625rem; }

.grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }

.card{
  display:flex; flex-direction:column; gap:.7rem; padding:1.5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
section.alt .card{ background:var(--surface-2); }
.card:hover{ border-color:var(--brand); box-shadow:0 12px 28px -14px rgba(28,33,40,.22); transform:translateY(-2px); }
.card.flat, .card.flat:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.card-top{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.card h3{ margin:0; font-family:var(--display); font-size:1.0625rem; font-weight:600; color:var(--ink); letter-spacing:-0.012em; }
.card p{ margin:0; font-size:.875rem; color:var(--ink-2); }
.card .more{ margin-top:auto; padding-top:.35rem; font-size:.8125rem; font-weight:600; color:var(--brand); }
.card .num{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; color:var(--brand); }

/* verde = stato */
.status{
  display:inline-flex; align-items:center; gap:.35rem; flex:none;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ok); background:rgba(47,158,94,.09);
  border:1px solid rgba(47,158,94,.26); border-radius:4px; padding:.2rem .45rem;
}
.status .led{ width:5px; height:5px; border-radius:50%; background:var(--ok); animation:pulse 3s var(--ease) infinite; }
.status.soon{ color:var(--ink-3); background:var(--paper-2); border-color:var(--line); }
.status.soon .led{ background:var(--ink-3); animation:none; }
.status.on-dark{ background:rgba(47,158,94,.14); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- CATENA DOCUMENTALE ---------- */
.chain{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.chain .step{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:.45rem 1rem; font-size:.875rem; color:var(--ink); white-space:nowrap;
}
.chain .step b{ font-family:var(--mono); font-size:.625rem; color:var(--brand); }
.chain .arrow{ color:var(--ink-3); flex:none; }

/* ---------- ELENCHI PUNTATI ---------- */
.ticks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:.9375rem; }
.ticks li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--ink-2); }
.ticks li::before{ content:"✓"; color:var(--brand); font-weight:700; flex:none; font-size:.875rem; line-height:1.55; }

/* ---------- PIANI ---------- */
.plans{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); align-items:stretch; }
.plan{
  display:flex; flex-direction:column; gap:.3rem; padding:1.6rem 1.4rem;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; position:relative;
}
.plan.best{ border-color:var(--brand); box-shadow:0 16px 34px -18px rgba(252,108,0,.42); }
.plan .flag{
  position:absolute; top:-.65rem; left:1.4rem;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--brand); color:#fff; border-radius:4px; padding:.22rem .55rem;
}
.plan h3{ margin:0; font-family:var(--display); font-size:1.125rem; font-weight:600; color:var(--ink); }
.plan .who{ font-size:.8125rem; color:var(--ink-3); min-height:2.7em; }
.plan .price{
  font-family:var(--display); font-size:2.05rem; font-weight:600; color:var(--ink);
  letter-spacing:-0.03em; margin:.4rem 0 .1rem; font-variant-numeric:tabular-nums;
}
.plan .price small{ font-family:var(--body); font-size:.875rem; font-weight:400; color:var(--ink-3); letter-spacing:0; }
.plan ul{ list-style:none; margin:1rem 0 1.35rem; padding:0; display:flex; flex-direction:column; gap:.42rem; font-size:.875rem; }
.plan li{ display:flex; gap:.5rem; align-items:flex-start; color:var(--ink-2); }
.plan li::before{ content:"✓"; color:var(--brand); font-weight:700; flex:none; font-size:.8125rem; line-height:1.5; }
.plan li.head{ color:var(--ink-3); font-size:.75rem; margin-top:.4rem; font-family:var(--mono); letter-spacing:.06em; }
.plan li.head::before{ content:""; }
.plan .btn{ margin-top:auto; }

/* ---------- TABELLE ---------- */
.scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
table{ width:100%; border-collapse:collapse; font-size:.875rem; min-width:640px; }
th,td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); }
thead th{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; background:var(--paper-2);
}
thead th:not(:first-child), td:not(:first-child){ text-align:center; }
tbody th{ font-weight:500; color:var(--ink); }
td{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
tr:last-child th, tr:last-child td{ border-bottom:0; }
.rowhead th{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand); background:var(--paper); text-align:left;
}
.y{ color:var(--ok); font-weight:700; }
.n{ color:var(--ink-3); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; padding:1.15rem 0; font-family:var(--display); font-weight:600;
  font-size:1.0625rem; color:var(--ink); list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--brand); font-size:1.25rem; flex:none; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 1.15rem; max-width:72ch; font-size:.9375rem; }

/* ---------- CHIUSURA + PIEDE ---------- */
.close{ padding:4.25rem 0; text-align:center; }
.close h2{
  margin:0 auto 1rem; max-width:24ch; font-family:var(--display); font-weight:600;
  font-size:clamp(1.45rem,3.2vw,2.15rem); line-height:1.18; letter-spacing:-0.028em;
  color:#fff; text-wrap:balance;
}
.close p{ margin:0 auto 1.9rem; max-width:58ch; color:var(--on-dark-2); }
.close .actions{ justify-content:center; margin-bottom:1.25rem; }
.close .badges{ justify-content:center; }

footer{ background:var(--paper-2); border-top:1px solid var(--line); padding:3rem 0 2.5rem; font-size:.875rem; }
.foot-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr)); }
footer h4{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .85rem; font-weight:500; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
footer a{ color:var(--ink-2); text-decoration:none; }
footer a:hover{ color:var(--brand); }
.foot-bottom{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.8125rem; color:var(--ink-3);
}

a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }

@keyframes rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
.up{ opacity:0; animation:rise .75s var(--ease) forwards; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .up{ animation:none; opacity:1; }
  .status .led{ animation:none; }
  .card,.btn,.nav,.nav-links a{ transition:none; }
}

/* marchio in nav: vira col fondo */
.brand .mark{ color:var(--on-dark); transition:color .3s var(--ease); }
.nav.stuck .brand .mark{ color:#33383d; }

/* ============ v3 — architettura Bizcraft, direzione Glass Tactical ============ */

/* marchio più grande, e il nome giusto: BizCraft.it */
.brand{ gap:.65rem; }
.brand .mark{ width:38px; height:43px; }   /* 730:826, il marchio non è quadrato */
.brand .name{ font-size:1.1875rem; letter-spacing:-0.018em; }
.brand .name i{ font-style:normal; color:var(--brand); }
@media (max-width:520px){ .brand .mark{ width:32px; height:36px; } .brand .name{ font-size:1.0625rem; } }
.nav-in{ height:76px; }
.nav.stuck .nav-in{ height:66px; transition:height .3s var(--ease); }

/* pannelli vetro fumé (solo su fondo scuro) */
.glass{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}

/* griglia dichiarata: filetti sottilissimi, come in un pannello strumenti */
.ruled{
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
}
section.light.ruled{
  background-image:linear-gradient(rgba(28,33,40,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(28,33,40,.035) 1px,transparent 1px);
}

/* il marchio in grande, come elemento grafico */
.watermark{
  position:absolute; pointer-events:none; z-index:1;
  opacity:.045; color:var(--on-dark);
}
.watermark svg{ width:100%; height:100%; display:block; }
.wm-right{ right:-6%; top:50%; transform:translateY(-50%); width:min(52vw,620px); aspect-ratio:730/826; }
.wm-corner{ right:2%; bottom:-8%; width:min(34vw,320px); aspect-ratio:730/826; opacity:.06; }

/* firma grande: il marchio come pausa fra due sezioni */
.signature{ background:var(--graphite); padding:4.5rem 0; text-align:center; position:relative; overflow:hidden; }
.signature .sig-mark{ width:min(30vw,150px); margin:0 auto 1.5rem; display:block; color:var(--on-dark); }
.signature blockquote{
  margin:0 auto; max-width:34ch; font-family:var(--display); font-weight:500;
  font-size:clamp(1.2rem,2.6vw,1.7rem); line-height:1.3; letter-spacing:-0.022em;
  color:#fff; text-wrap:balance;
}
.signature cite{ display:block; margin-top:1rem; font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-style:normal; }

/* ---------- SELETTORE LINGUA ---------- */
.lang{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:7px;
  padding:.35rem .55rem; font:inherit; font-size:.8125rem; color:var(--on-dark);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.nav.stuck .lang-btn{ border-color:var(--line); color:var(--ink-2); }
.lang-btn:hover{ border-color:var(--brand); color:var(--brand); }
.lang-btn .flag{ width:20px; height:14px; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.12) inset; }
.lang-btn .caret{ width:8px; height:8px; flex:none; opacity:.7; }
.lang-menu{
  position:absolute; right:0; top:calc(100% + .45rem); min-width:172px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 40px -16px rgba(28,33,40,.34);
  padding:.3rem; display:none; z-index:70;
}
.lang[data-open="true"] .lang-menu{ display:block; }
.lang-menu button{
  display:flex; align-items:center; gap:.55rem; width:100%; cursor:pointer;
  background:transparent; border:0; border-radius:7px; padding:.5rem .6rem;
  font:inherit; font-size:.875rem; color:var(--ink-2); text-align:left;
}
.lang-menu button:hover{ background:var(--paper-2); color:var(--ink); }
.lang-menu button[aria-selected="true"]{ color:var(--brand); font-weight:600; }
.lang-menu .flag{ width:22px; height:15px; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.12) inset; }

/* accedi */
.login{ font-size:.875rem; color:var(--on-dark-2); text-decoration:none; white-space:nowrap; }
.nav.stuck .login{ color:var(--ink-2); }
.login:hover{ color:var(--brand); }
@media (max-width:820px){ .login{ display:none; } }

/* ---------- INTERRUTTORE MENSILE / ANNUALE ---------- */
.billing{
  display:inline-flex; align-items:center; gap:.25rem; margin-bottom:2rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:.28rem;
}
.billing button{
  font:inherit; font-size:.875rem; font-weight:600; cursor:pointer;
  background:transparent; border:0; border-radius:7px; padding:.5rem 1.1rem; color:var(--ink-3);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.billing button[aria-pressed="true"]{ background:var(--surface-2); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.billing .save{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand); padding-right:.75rem; padding-left:.35rem;
}
.plan .price .per{ font-family:var(--body); font-size:.875rem; font-weight:400; color:var(--ink-3); letter-spacing:0; }
.plan .yearnote{ font-size:.75rem; color:var(--ink-3); min-height:1.2em; margin:-.1rem 0 .2rem; }

/* ---------- BRICIOLE ---------- */
.crumbs{ font-size:.8125rem; color:var(--on-dark-2); margin-bottom:1.1rem; }
.crumbs a{ color:var(--on-dark-2); text-decoration:none; }
.crumbs a:hover{ color:var(--brand); }
.crumbs span{ color:var(--brand); }

/* ---------- PANNELLI "IL CAOS RICONOSCIBILE" ---------- */
.scenes{ display:grid; gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; }
@media (min-width:700px){ .scenes{ grid-template-columns:1fr 1fr; } }
.scene{ background:rgba(255,255,255,.03); padding:1.5rem; }
.scene b{ display:block; font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; color:var(--brand); margin-bottom:.5rem; }
.scene p{ margin:0; font-size:.9375rem; color:var(--on-dark-2); }

/* ---------- PRINCIPI (come lavoriamo) ---------- */
.principle{ border-left:3px solid var(--brand); padding:0 0 0 1.4rem; margin-bottom:2.5rem; }
.principle h3{ margin:0 0 .55rem; font-family:var(--display); font-size:1.1875rem; font-weight:600; color:var(--ink); letter-spacing:-0.018em; }
.principle .lesson{ margin:0 0 .55rem; font-size:.9375rem; color:var(--ink-2); }
.principle .effect{ margin:0; font-size:.9375rem; color:var(--ink); }
.principle .effect b{ color:var(--brand); font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:.2rem; }

/* ---------- NON FA ---------- */
.notdo{ border:1px solid var(--line); border-left:3px solid var(--ink-3); border-radius:0 12px 12px 0; background:var(--paper-2); padding:1.5rem; }
.notdo h3{ margin:0 0 .75rem; font-family:var(--display); font-size:1.0625rem; font-weight:600; color:var(--ink); }
.notdo ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; font-size:.9375rem; }
.notdo li{ display:flex; gap:.6rem; }
.notdo li::before{ content:"—"; color:var(--ink-3); flex:none; }

/* ---------- MODULO CONTATTI ---------- */
.form{ display:grid; gap:1rem; max-width:600px; }
@media (min-width:640px){ .form .two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } }
.field label{ display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem; }
.field input, .field textarea{
  width:100%; font:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.7rem .85rem;
  transition:border-color .2s var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(252,108,0,.13); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- LEGALI ---------- */
.legal{ max-width:74ch; }
.legal h2{ font-size:1.25rem; margin:2.5rem 0 .6rem; }
.legal h3{ font-size:1.0625rem; margin:1.75rem 0 .5rem; font-family:var(--display); font-weight:600; color:var(--ink); }
.legal p, .legal li{ font-size:.9375rem; }
.legal ul{ padding-left:1.15rem; }
.legal li{ margin-bottom:.4rem; }
.legal li::marker{ color:var(--brand); }
.legal .updated{ font-family:var(--mono); font-size:.75rem; color:var(--ink-3); }

/* modulo contatti: errori ed esito */
.field input[aria-invalid], .field textarea[aria-invalid]{ border-color:#C4342B; box-shadow:0 0 0 3px rgba(196,52,43,.12); }
.err{ margin:.35rem 0 0; font-size:.8125rem; color:#C4342B; }
.form-note{ margin:0; font-size:.875rem; min-height:1.2em; }
.form-note.bad{ color:#C4342B; font-weight:500; }
.sent{ border:1px solid var(--brand); border-radius:12px; padding:1.75rem; background:var(--surface); }
.sent h3{ margin:0 0 .6rem; font-family:var(--display); font-size:1.25rem; font-weight:600; color:var(--ink); }
.sent p{ margin:0 0 .5rem; color:var(--ink-2); font-size:.9375rem; }
.sent a{ color:var(--brand); font-weight:600; }


/* binario e avanzamento */
/* la prima versione della linea del tempo viveva qui: imponeva opacity:0 e si
   accendeva con .tl-item.on, classe che il JS non aggiunge più. Restava
   invisibile per sempre. Rimossa: comanda solo la versione coreografata. */

/* ============ LINEA DEL TEMPO ============
   Sequenza: prima si disegna il binario, poi ogni nodo si accende e subito
   dopo compare il suo testo. Una tappa alla volta, una volta sola. */
.timeline{ list-style:none; margin:0; padding:0; position:relative;
  --draw:1.8s;          /* durata del tracciamento */
  --gap:.62s;           /* distanza fra una tappa e la successiva */
  --hold:.28s;          /* attesa fra il punto e il suo testo */
}
.timeline::before{ content:""; position:absolute; background:var(--line); }
.timeline .rail{ position:absolute; background:var(--brand); transform-origin:top left; }

/* mobile: verticale */
.timeline{ display:flex; flex-direction:column; gap:2.25rem; padding-left:2.6rem; }
.timeline::before{ left:11px; top:6px; bottom:6px; width:2px; }
.timeline .rail{ left:11px; top:6px; width:2px; height:calc(100% - 12px);
  transform:scaleY(0); transition:transform var(--draw) cubic-bezier(.33,.9,.28,1); }
.timeline.play .rail{ transform:scaleY(1); }

.tl-item{ position:relative; }
.tl-node{ position:absolute; left:-2.6rem; top:.15rem; width:24px; height:24px;
  display:grid; place-items:center; }
.tl-node i{ width:12px; height:12px; border-radius:50%; display:block;
  background:var(--paper); border:2px solid var(--line);
  transform:scale(.55); opacity:0; }
.tl-node::after{ content:""; position:absolute; width:12px; height:12px;
  border-radius:50%; border:2px solid var(--brand); opacity:0; }
.tl-body{ opacity:0; transform:translateY(10px); }

/* ritardi a cascata: ogni tappa parte dopo il tracciamento, poi in fila */
.timeline.play .tl-node i{
  animation:tl-dot .42s cubic-bezier(.34,1.4,.5,1) forwards;
  animation-delay:calc(var(--draw) + .12s + var(--i) * var(--gap)); }
.timeline.play .tl-node::after{
  animation:tl-ping .85s var(--ease) forwards;
  animation-delay:calc(var(--draw) + .18s + var(--i) * var(--gap)); }
.timeline.play .tl-body{
  animation:tl-text .5s var(--ease) forwards;
  animation-delay:calc(var(--draw) + .12s + var(--i) * var(--gap) + var(--hold)); }

@keyframes tl-dot{
  from{ opacity:0; transform:scale(.55); background:var(--paper); border-color:var(--line); }
  60% { opacity:1; transform:scale(1.28); background:var(--brand); border-color:var(--brand); }
  to  { opacity:1; transform:scale(1);    background:var(--brand); border-color:var(--brand); } }
@keyframes tl-ping{ from{opacity:.6; transform:scale(1)} to{opacity:0; transform:scale(3)} }
@keyframes tl-text{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

.tl-year{ display:block; font-family:var(--mono); font-size:.8125rem; letter-spacing:.14em;
  color:var(--brand); margin-bottom:.35rem; font-variant-numeric:tabular-nums; }
.tl-item h3{ margin:0 0 .4rem; font-family:var(--display); font-size:1.0625rem; font-weight:600;
  color:var(--ink); letter-spacing:-0.012em; }
.tl-item p{ margin:0; font-size:.9375rem; color:var(--ink-2); max-width:46ch; }

/* desktop: orizzontale */
@media (min-width:900px){
  .timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.75rem; padding:3.25rem 0 0; }
  .timeline::before{ left:0; right:0; top:11px; bottom:auto; width:auto; height:2px; }
  .timeline .rail{ left:0; top:11px; width:100%; height:2px;
    transform-origin:left center; transform:scaleX(0);
    transition:transform var(--draw) cubic-bezier(.33,.9,.28,1); }
  .timeline.play .rail{ transform:scaleX(1); }
  .tl-node{ left:0; top:-3.25rem; }
  .tl-item{ padding-right:.5rem; }
  .tl-item p{ font-size:.875rem; }
}

@media (prefers-reduced-motion:reduce){
  .timeline .rail{ transform:none !important; transition:none; }
  .tl-node i{ opacity:1; transform:none; background:var(--brand); border-color:var(--brand); }
  .tl-body{ opacity:1; transform:none; }
  .timeline.play .tl-node i, .timeline.play .tl-body, .timeline.play .tl-node::after{ animation:none; }
}

/* ============ HERO A RETICOLO: testo su vetro, materia sotto ============ */
.hero-lattice{ padding:8.5rem 0 5rem; }
.hero-lattice .hero-in{ position:relative; z-index:2; }
@media (min-width:1000px){
  .hero-lattice .hero-in{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center; gap:5.5rem; }
}
/* la tessera di vetro fumé: il testo galleggia, il reticolo scorre sotto */
.tile{
  background:rgba(10,14,20,.55);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:2.25rem 2rem;
  box-shadow:0 28px 70px -24px rgba(0,0,0,.75);
}
@media (min-width:768px){ .tile{ padding:2.75rem 2.5rem; } }
.tile h1{ max-width:17ch; }
.tile .lede{ max-width:46ch; }
/* filo caldo in alto: il vetro prende luce dal marchio */
.tile::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,transparent,rgba(252,108,0,.55),transparent);
}
.tile{ position:relative; }

/* il marchio inciso nel vetro, accanto al testo */
.etched{ position:relative; display:grid; place-items:center; min-height:min(22vh,190px); }
.etched img{
  width:min(34%,132px); height:auto; display:block;
  opacity:.94; filter:drop-shadow(0 0 34px rgba(252,108,0,.22));
}
@media (max-width:999px){ .etched{ display:none; } }

@media (prefers-reduced-motion:reduce){ .tile{ backdrop-filter:none; background:rgba(10,14,20,.9); } }

/* ============ FONDO STATICO DELLA HERO ============ */
.hero-static{
  background:
    radial-gradient(120% 80% at 78% 42%, rgba(252,108,0,.075) 0%, transparent 58%),
    radial-gradient(90% 60% at 12% 110%, rgba(252,108,0,.05) 0%, transparent 55%),
    linear-gradient(168deg,#11161E 0%,#0E1218 46%,#0B0F14 100%);
}
.hero-static::after{                       /* griglia dichiarata, ferma */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 100%);
}


/* ============ RIVELAZIONE ALLO SCROLL, ovunque ============ */
[data-reveal] > *{ opacity:0; transform:translateY(16px);
  transition:opacity .62s var(--ease), transform .62s var(--ease); }
[data-reveal].in > *{ opacity:1; transform:none; }
[data-reveal].in > *:nth-child(1){ transition-delay:0s }
[data-reveal].in > *:nth-child(2){ transition-delay:.09s }
[data-reveal].in > *:nth-child(3){ transition-delay:.16s }
[data-reveal].in > *:nth-child(4){ transition-delay:.22s }
[data-reveal].in > *:nth-child(5){ transition-delay:.27s }
[data-reveal].in > *:nth-child(6){ transition-delay:.33s }
[data-reveal].in > *:nth-child(7){ transition-delay:0.33s }
[data-reveal].in > *:nth-child(8){ transition-delay:0.39s }
[data-reveal].in > *:nth-child(9){ transition-delay:0.44s }
[data-reveal].in > *:nth-child(10){ transition-delay:0.49s }
[data-reveal].in > *:nth-child(11){ transition-delay:0.55s }
[data-reveal].in > *:nth-child(12){ transition-delay:0.60s }
@media (prefers-reduced-motion:reduce){
  [data-reveal] > *{ opacity:1; transform:none; transition:none; }
}

/* ============ DIVISORI: un filetto che si traccia, al posto del salto di fondo ============ */
.seam{ position:relative; height:1px; border:0; margin:0; display:block;
  background:linear-gradient(90deg,transparent,var(--line-strong) 18%,var(--line-strong) 82%,transparent); }
.seam::after{                                  /* scintilla che percorre il filetto */
  content:""; position:absolute; top:-1px; left:0; width:120px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:0; }
.seam.in::after{ animation:seam-run 2.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes seam-run{ 0%{left:-120px; opacity:0} 12%{opacity:.9} 88%{opacity:.9} 100%{left:100%; opacity:0} }
@media (prefers-reduced-motion:reduce){ .seam::after{ display:none; } }

/* ============ PUNTINI SUL RETICOLO DELLA HERO ============ */
.sparks{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 25%,transparent 95%); }
.spark{ position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 10px 2px rgba(252,108,0,.55), 0 0 26px 6px rgba(252,108,0,.18); }
/* tre percorsi diversi, tutti a scatti ortogonali sul passo della griglia (72px) */
.spark.a{ animation:spark-a 19s linear infinite; }
.spark.b{ animation:spark-b 26s linear infinite 3.5s; opacity:.75; }
.spark.c{ animation:spark-c 23s linear infinite 8s; opacity:.6; width:4px; height:4px; }
@keyframes spark-a{
  0%   { left:8%;  top:88%; opacity:0 }  4%{ opacity:1 }
  16%  { left:8%;  top:34%; }
  30%  { left:38%; top:34%; }
  44%  { left:38%; top:62%; }
  58%  { left:66%; top:62%; }
  72%  { left:66%; top:18%; }
  88%  { left:94%; top:18%; opacity:1 }
  96%,100%{ left:94%; top:18%; opacity:0 } }
@keyframes spark-b{
  0%   { left:92%; top:12%; opacity:0 }  5%{ opacity:.75 }
  18%  { left:92%; top:56%; }
  34%  { left:60%; top:56%; }
  48%  { left:60%; top:80%; }
  64%  { left:26%; top:80%; }
  80%  { left:26%; top:30%; }
  92%  { left:4%;  top:30%; opacity:.75 }
  98%,100%{ left:4%; top:30%; opacity:0 } }
@keyframes spark-c{
  0%   { left:46%; top:96%; opacity:0 }  6%{ opacity:.6 }
  22%  { left:46%; top:52%; }
  40%  { left:80%; top:52%; }
  56%  { left:80%; top:24%; }
  74%  { left:52%; top:24%; }
  90%  { left:52%; top:4%; opacity:.6 }
  97%,100%{ left:52%; top:4%; opacity:0 } }

/* ============ LA CATENA: prima corsa, poi regime ============ */
.flow{ position:relative; padding:.5rem 0 .5rem 2.6rem; }
@media (min-width:1000px){ .flow, .flow-cap{ margin-left:1.75rem; } }
.flow .rail{ position:absolute; left:11px; top:18px; bottom:18px; width:2px;
  background:rgba(255,255,255,.10); transform:scaleY(0); transform-origin:top center; }
.flow .rail::after{ content:""; position:absolute; left:-3px; top:0; width:8px; height:8px;
  border-radius:50%; background:var(--brand);
  box-shadow:0 0 14px 3px rgba(252,108,0,.6); opacity:0; }

.flow-step{ position:relative; padding:.62rem 0; }
.flow-step .dot{ position:absolute; left:-2.6rem; top:.9rem; width:24px; height:24px;
  display:grid; place-items:center; }
.flow-step .dot i{ width:11px; height:11px; border-radius:50%; display:block;
  background:#161C25; border:2px solid rgba(255,255,255,.18);
  opacity:0; transform:scale(.5); }
.flow-step b{ display:block; font-family:var(--mono); font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; color:#5B6673; opacity:0; }
.flow-step span{ display:block; font-size:.9375rem; color:var(--on-dark); margin-top:.12rem; opacity:0; }
.flow-cap{ margin:1.1rem 0 0; padding-left:2.6rem; font-size:.8125rem;
  color:var(--on-dark-2); max-width:34ch; opacity:0; transition:opacity .6s var(--ease) 4.6s; }

/* — prima corsa: il binario si traccia, poi punto e parola, uno per volta — */
.flow.intro .rail{ transform:scaleY(1); transition:transform 1.5s cubic-bezier(.33,.9,.28,1); }
.flow.intro .flow-step .dot i{ animation:fl-in-dot .42s cubic-bezier(.34,1.4,.5,1) forwards;
  animation-delay:calc(1.65s + var(--k) * .52s); }
.flow.intro .flow-step b{ animation:fl-in-txt .45s var(--ease) forwards;
  animation-delay:calc(1.65s + var(--k) * .52s + .2s); }
.flow.intro .flow-step span{ animation:fl-in-txt .45s var(--ease) forwards;
  animation-delay:calc(1.65s + var(--k) * .52s + .26s); }
.flow.intro .flow-cap{ opacity:1; }
@keyframes fl-in-dot{ from{opacity:0; transform:scale(.5)}
  60%{opacity:1; transform:scale(1.3); background:var(--brand); border-color:var(--brand)}
  to{opacity:1; transform:scale(1); background:var(--brand); border-color:var(--brand)} }
@keyframes fl-in-txt{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* — regime: il dato scorre e riaccende la catena — */
/* — regime: tutto è già acceso, il passaggio del dato dà solo l'accento — */
.flow.loop .rail{ transform:scaleY(1); }
.flow.loop .flow-cap{ opacity:1; transition-delay:0s; }
.flow.loop .rail::after{ animation:flow-run 7s linear infinite; }
.flow.loop .flow-step .dot i{ opacity:1; background:var(--brand); border-color:var(--brand);
  animation:flow-pass 7s var(--ease) infinite; animation-delay:calc(var(--t, 0) * 1s); }
.flow.loop .flow-step b{ opacity:1; color:var(--brand);
  animation:flow-pass-lbl 7s var(--ease) infinite; animation-delay:calc(var(--t, 0) * 1s); }
.flow.loop .flow-step span{ opacity:1;
  animation:flow-pass-txt 7s var(--ease) infinite; animation-delay:calc(var(--t, 0) * 1s); }
@keyframes flow-run{
  /* fra il 3% e il 90% del ciclo il puntino copre TUTTO il binario, da 0 a 100.
     Prima andava da 3% a 90%: due scale diverse, e i punti in basso anticipavano. */
  0%  { top:-5%;  opacity:0 }
  3%  { top:0%;   opacity:1 }
  90% { top:100%; opacity:1 }
  97% { top:105%; opacity:0 }
  100%{ top:105%; opacity:0 } }
@keyframes flow-pass{
  0%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(252,108,0,0) }
  2.5% { transform:scale(1.55); box-shadow:0 0 14px 4px rgba(252,108,0,.55) }
  9%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(252,108,0,0) }
  100% { transform:scale(1);    box-shadow:0 0 0 0 rgba(252,108,0,0) } }
@keyframes flow-pass-lbl{ 0%{color:var(--brand)} 2.5%{color:#FFCFA6} 10%,100%{color:var(--brand)} }
@keyframes flow-pass-txt{ 0%{color:var(--on-dark)} 2.5%{color:#fff} 10%,100%{color:var(--on-dark)} }

@media (prefers-reduced-motion:reduce){
  .spark{ display:none; }
  .flow .rail{ transform:scaleY(1); }
  .flow-step .dot i{ opacity:1; transform:none; background:var(--brand); border-color:var(--brand); }
  .flow-step b{ opacity:1; color:var(--brand); } .flow-step span, .flow-cap{ opacity:1; }
  .flow.intro .rail, .flow.intro .flow-step .dot i, .flow.intro .flow-step b,
  .flow-step.lit .dot i, .flow-step.lit b, .flow-step.lit span,
  .flow.loop .rail::after, .flow.loop .flow-step .dot i,
  .flow.loop .flow-step b, .flow.loop .flow-step span{ animation:none; transition:none; }
}

/* ============ ATTIVAZIONE: modulo + carrello ============ */
.checkout{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:960px){ .checkout{ grid-template-columns:minmax(0,1fr) 340px; gap:3.5rem; } }
.co-cart{ position:sticky; top:96px; }
.cart{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.5rem;
  box-shadow:0 18px 40px -26px rgba(28,33,40,.3); }
.cart h3{ margin:0 0 1rem; font-family:var(--display); font-size:1.0625rem; font-weight:600; color:var(--ink); }
.cart dl{ margin:0; font-size:.9375rem; }
.cart dl > div{ display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0; }
.cart dt{ color:var(--ink-2); } .cart dd{ margin:0; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cart .muted dt, .cart .muted dd{ color:var(--ink-3); font-size:.875rem; }
.cart .rule{ height:1px; background:var(--line); padding:0; margin:.6rem 0; display:block; }
.cart .total dt{ color:var(--ink); font-weight:600; }
.cart .total dd{ font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--brand); letter-spacing:-.02em; }
.cart-note{ margin:.9rem 0 0; font-size:.8125rem; color:var(--ink-3); }
.cart .discount dd{ color:var(--ok); }

select{ width:100%; font:inherit; font-size:.9375rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:.7rem .85rem; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%237A8697' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:12px; }
select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(252,108,0,.13); }

.addon{ display:flex; gap:.75rem; align-items:flex-start; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem; margin-bottom:.6rem;
  background:var(--surface); transition:border-color .2s var(--ease), background .2s var(--ease); }
.addon:hover{ border-color:var(--brand); }
.addon:has(input:checked){ border-color:var(--brand); background:#FFF8F2; }
.addon input{ margin:.2rem 0 0; accent-color:var(--brand); width:17px; height:17px; flex:none; }
.addon span{ font-size:.9375rem; color:var(--ink-2); }
.addon b{ color:var(--ink); font-weight:600; }
.addon em{ display:block; font-style:normal; font-size:.8125rem; color:var(--ink-3); margin-top:.2rem; }

/* il dato durante la prima corsa: pilotato dal JS, non da un keyframe a tempo fisso */
.flow-pulse{ position:absolute; left:-3px; top:0; width:8px; height:8px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 14px 3px rgba(252,108,0,.6); opacity:0; }
.flow.loop .flow-pulse{ display:none; }


/* ---- messa a punto per il mondo scuro ---- */
body{ color:var(--ink-2); }
section.light{ background:var(--paper); }
section.light.alt{ background:var(--paper-2); }
section.light.ruled{ background-image:
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); }
.card:hover{ box-shadow:0 14px 34px -18px rgba(0,0,0,.75); }
.plan.best{ box-shadow:0 18px 40px -20px rgba(252,108,0,.35); }
.cart{ box-shadow:0 20px 46px -26px rgba(0,0,0,.8); }
.notdo{ background:var(--surface); border-left-color:var(--line-strong); }
.addon:has(input:checked){ background:rgba(252,108,0,.10); }
.sent{ background:var(--surface); }
thead th{ background:var(--surface-2); }
.rowhead th{ background:var(--paper-2); }
.field input, .field textarea, select{ background:var(--surface); color:var(--ink); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.billing{ background:var(--surface); }
footer{ background:var(--paper-2); border-top-color:var(--line); }
footer .brand .name{ color:var(--ink) !important; }
footer .brand .mark{ color:var(--ink) !important; }
.nav.stuck{ background:rgba(14,18,24,.92); border-bottom-color:var(--line); }
.nav.stuck .brand .name, .nav.stuck .brand .mark{ color:var(--ink); }
.nav.stuck .nav-links a{ color:var(--ink-2); }
.nav.stuck .lang-btn{ border-color:var(--line-strong); color:var(--ink-2); }
.nav.stuck .login{ color:var(--ink-2); }
.lang-menu{ background:var(--surface); border-color:var(--line-strong); box-shadow:0 18px 40px -16px rgba(0,0,0,.7); }
.lang-menu button{ color:var(--ink-2); }
.lang-menu button:hover{ background:var(--surface-2); color:var(--ink); }
.btn-outline{ color:var(--ink); border-color:var(--line-strong); }
.tl-node i{ background:var(--paper); border-color:var(--line-strong); }
.chain .step{ background:var(--surface); color:var(--ink); }
.sec-head h2, .card h3, .plan h3, .tl-item h3, .principle h3, .faq summary,
.legal h2, .legal h3, .notdo h3, .cart h3{ color:var(--ink); }
.close h2, h1{ color:#fff; }

/* su schermo piccolo lo spazio verticale pesa il doppio */
@media (max-width:700px){
  section.light{ padding:2.75rem 0; }
  section.tight{ padding:2.25rem 0; }
  .pagehead{ padding:6rem 0 2.25rem; }
  .hero{ padding:6.5rem 0 3rem; }
  .close{ padding:3rem 0; }
  .sec-head{ margin-bottom:1.75rem; }
}

/* ============ GRIGLIA DELLE SCHERMATE ============ */
.screens{ display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
@media (min-width:640px){ .screens{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .screens{ grid-template-columns:repeat(3,1fr); } }
.screen{ background:var(--surface); padding:1.35rem 1.4rem; position:relative;
  transition:background .3s var(--ease); }
.screen:hover{ background:var(--surface-2); }
.screen .n{ font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; color:var(--brand); }
.screen h3{ margin:.35rem 0 .3rem; font-family:var(--display); font-size:1rem;
  font-weight:600; color:var(--ink); letter-spacing:-.012em; }
.screen p{ margin:0; font-size:.8125rem; color:var(--ink-3); line-height:1.5; }
/* filo caldo che entra al passaggio del mouse */
.screen::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--brand); transform:scaleY(0); transform-origin:top;
  transition:transform .32s var(--ease); }
.screen:hover::before{ transform:scaleY(1); }
/* la griglia compare a scacchiera invece che a righe */
[data-reveal].in > .screen:nth-child(n+7){ transition-delay:.5s }
[data-reveal].in > .screen:nth-child(n+10){ transition-delay:.62s }

/* ============ GLEEM: l'acronimo che si apre ============ */
.gleem{ margin:0 0 2.25rem; }
.gleem-word{ display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; align-items:flex-start; }
.gl{ display:flex; flex-direction:column; min-width:0; }
.gl b{
  font-family:var(--display); font-weight:600; line-height:1;
  font-size:clamp(2.6rem,7vw,4.6rem); letter-spacing:-.045em; color:#fff;
  opacity:0; transform:translateY(12px) scale(.94);
}
.gl i{
  font-style:normal; font-family:var(--mono); font-size:.6875rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brand); margin-top:.55rem;
  opacity:0; transform:translateY(-6px); white-space:nowrap;
}
.gleem.in .gl b{ animation:gl-letter .5s cubic-bezier(.2,.9,.3,1) forwards; animation-delay:calc(var(--i)*.13s); }
.gleem.in .gl i{ animation:gl-word .55s var(--ease) forwards; animation-delay:calc(.75s + var(--i)*.16s); }
@keyframes gl-letter{ to{ opacity:1; transform:none } }
@keyframes gl-word{ to{ opacity:1; transform:none } }
/* filo che scorre sotto l'acronimo quando le parole sono uscite */
.gleem-rule{ height:1px; margin-top:1.25rem; background:var(--line); position:relative; overflow:hidden; }
.gleem-rule::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--brand),transparent);
  transform:translateX(-100%); }
.gleem.in .gleem-rule::after{ animation:gl-rule 2.2s cubic-bezier(.4,0,.2,1) 1.6s forwards; }
@keyframes gl-rule{ to{ transform:translateX(100%) } }
@media (prefers-reduced-motion:reduce){
  .gl b, .gl i{ opacity:1; transform:none; animation:none; }
  .gleem.in .gleem-rule::after{ animation:none; }
}

/* ============ LINEA DEL TEMPO: il dato che ripassa ============
   Finita la prima corsa, un punto percorre il binario e riaccende le tappe
   che incontra. Come sul diagramma della home, ma qui il binario è verticale
   su telefono e orizzontale su schermo grande: il verso lo decide il JS. */
.tl-pulse{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 14px 3px rgba(252,108,0,.6);
  opacity:0; pointer-events:none;
}
/* verticale: scende lungo il binario, centrato sui 2px di larghezza */
.tl-pulse{ left:-3.5px; top:0; }
.timeline.ripassa .tl-pulse{ animation:tl-run-v 7s linear infinite; }
@keyframes tl-run-v{
  0%{ top:-2%; opacity:0 } 3%{ top:0%; opacity:1 }
  90%{ top:100%; opacity:1 } 97%{ top:102%; opacity:0 } 100%{ top:102%; opacity:0 } }

@media (min-width:900px){
  .tl-pulse{ left:0; top:-3.5px; }
  .timeline.ripassa .tl-pulse{ animation:tl-run-h 7s linear infinite; }
}
@keyframes tl-run-h{
  0%{ left:-2%; opacity:0 } 3%{ left:0%; opacity:1 }
  90%{ left:100%; opacity:1 } 97%{ left:102%; opacity:0 } 100%{ left:102%; opacity:0 } }

/* al passaggio: il pallino pulsa e l'anno si schiarisce */
.timeline.ripassa .tl-item .tl-node i{
  animation:tl-pass 7s var(--ease) infinite; animation-delay:calc(var(--t, 0) * 1s); }
.timeline.ripassa .tl-item .tl-year{
  animation:tl-pass-anno 7s var(--ease) infinite; animation-delay:calc(var(--t, 0) * 1s); }
.timeline.ripassa .tl-item h3{
  animation:tl-pass-tit 7s var(--ease) infinite; animation-delay:calc(var(--t, 0) * 1s); }
@keyframes tl-pass{
  0%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(252,108,0,0) }
  2.5% { transform:scale(1.55); box-shadow:0 0 14px 4px rgba(252,108,0,.55) }
  9%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(252,108,0,0) }
  100% { transform:scale(1) } }
@keyframes tl-pass-anno{ 0%{color:var(--brand)} 2.5%{color:#FFCFA6} 10%,100%{color:var(--brand)} }
@keyframes tl-pass-tit{ 0%{color:var(--ink)} 2.5%{color:#fff} 12%,100%{color:var(--ink)} }

@media (prefers-reduced-motion:reduce){
  .tl-pulse{ display:none; }
  .timeline.ripassa .tl-item .tl-node i,
  .timeline.ripassa .tl-item .tl-year,
  .timeline.ripassa .tl-item h3{ animation:none; }
}

/* ---------- NAV: menu Prodotti (P44 M0.9) ----------
   Stesso vocabolario visivo del selettore lingua, ma senza JS:
   si apre al passaggio del mouse e resta apribile da tastiera. */
.nd{ position:relative; display:flex; align-items:center; }
.nd > a{ display:inline-flex; align-items:center; gap:.35rem; }
.nd .caret{ width:8px; height:8px; flex:none; opacity:.7; }
.nd-menu{ position:absolute; left:50%; top:100%; transform:translateX(-50%);
  padding-top:.9rem; display:none; z-index:70; }
.nd:hover .nd-menu, .nd:focus-within .nd-menu{ display:block; }
.nd-in{ min-width:176px; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:10px; padding:.3rem; display:flex; flex-direction:column;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7); }
.nav .nav-links .nd-in a{ display:block; padding:.5rem .65rem; border-radius:7px;
  font-size:.875rem; color:var(--ink-2); }
.nav .nav-links .nd-in a:hover{ background:var(--surface-2); color:var(--ink); }