/* ==========================================================================
   CALENDARBOOK v1.0.1 — WILTORD-STYLE MOTION LAYER (landing only)
   Depends on tokens in style.css. Each effect is tied to the topic it explains:
   - Hero ............ kinetic letters + calendar grid that lights up under the cursor
   - Ticker .......... marquee driven by scroll speed & direction
   - Funzionalità .... desk-calendar flip-book (drag to turn pages)
   - Segretaria ...... pinned day timeline: scroll books slots, blocks a conflict
   - Consulente ...... appointments sort themselves into Eisenhower quadrants
   - Verbali ......... TextRank: words get ranked and key sentences lift out
   - Ricerca ......... search types itself and filters live
   - CTA ............. headline lights up word by word while scrolling
   ========================================================================== */

/* ---------- shared helpers ---------- */
.fx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.95rem; font-weight: 700; color: var(--cobalt);
  margin-bottom: 18px;
}
.fx-eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--cobalt); box-shadow: 14px 0 0 var(--sky); margin-right: 14px; }

.fx-h2 {
  font-family: var(--font-editorial);
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.96;
  color: var(--ink);
}
.fx-lead { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; max-width: 34em; margin-top: 20px; }

/* Split text (chars) — load reveal */
.split .w { display: inline-block; white-space: nowrap; }
.split .c {
  display: inline-block;
  transform: translateY(110%) rotate(8deg);
  opacity: 0;
  animation: charIn 0.9s var(--ease) forwards;
  animation-delay: calc(var(--i) * 18ms + 120ms);
}
.split .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
@keyframes charIn { to { transform: none; opacity: 1; } }

/* In-view reveal (used sparingly, only where content arrives) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.fx-hero {
  position: relative;
  min-height: calc(100svh - 70px);
  padding: 56px 24px 40px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  isolation: isolate;
  --p: 0; /* scroll progress 0..1, set by JS */
}
.fx-hero .grid-layer {
  position: absolute; inset: 0; z-index: -2;
  display: grid;
  grid-template-columns: repeat(auto-fill, 72px);
  grid-auto-rows: 72px;
  gap: 8px;
  justify-content: center;
  align-content: start;
  pointer-events: none;
}
.fx-hero .grid-layer span { border-radius: 14px; background: rgba(14, 20, 48, 0.03); transition: background 1.4s ease; }
.fx-hero .grid-base span.on-1 { background: rgba(51, 70, 211, 0.12); }
.fx-hero .grid-base span.on-2 { background: rgba(124, 196, 238, 0.26); }
.fx-hero .grid-glow { z-index: -1; -webkit-mask-image: radial-gradient(circle 220px at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0,0,0,0.5) 45%, transparent 75%); mask-image: radial-gradient(circle 220px at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0,0,0,0.5) 45%, transparent 75%); }
.fx-hero .grid-glow span { background: rgba(51, 70, 211, 0.16); border: 1px solid rgba(51, 70, 211, 0.22); }
.fx-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,246,251,0) 55%, var(--mist) 100%),
              radial-gradient(ellipse 60% 55% at 22% 45%, rgba(244,246,251,0.92), rgba(244,246,251,0) 70%);
}

.fx-hero-inner {
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: center;
}
.fx-hero-copy {
  transform: translateY(calc(var(--p) * -60px)) scale(calc(1 - var(--p) * 0.06));
  transform-origin: left center;
  opacity: calc(1 - var(--p) * 0.9);
}
.fx-hero h1 {
  font-family: var(--font-editorial);
  font-size: clamp(2.6rem, 4.6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--ink);
  margin: 22px 0 28px;
}
.fx-hero h1 .line:last-child { color: var(--cobalt); }
.fx-hero .hero-editorial-sub { margin-bottom: 30px; }
.fx-hero .today-card {
  transform: translateY(calc(var(--p) * -120px)) rotate(calc(2deg - var(--p) * 2deg));
  animation: cardIn 1.1s var(--ease) 0.5s both;
}
@keyframes cardIn { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
.version-pill { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.version-pill .v { font-family: var(--font-mono); font-weight: 700; background: var(--ink); color: #fff; padding: 4px 10px; border-radius: 99px; font-size: 0.8rem; }

.fx-scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600; color: var(--text-sub);
  opacity: calc(1 - var(--p) * 3);
}
.fx-scroll-cue i { width: 22px; height: 34px; border: 2px solid var(--line-strong); border-radius: 12px; position: relative; }
.fx-scroll-cue i::after { content: ''; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--ink); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ==========================================================================
   VELOCITY MARQUEE
   ========================================================================== */
.fx-marquee { background: var(--ink); color: #fff; overflow: hidden; padding: 22px 0; white-space: nowrap; }
.fx-marquee-track { display: inline-flex; will-change: transform; }
.fx-marquee-track span {
  font-family: var(--font-editorial); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 32px; padding-right: 32px;
}
.fx-marquee-track span::after { content: ''; width: 18px; height: 18px; border-radius: 5px; background: var(--cobalt); box-shadow: 24px 0 0 var(--sky); margin-right: 24px; }
.fx-marquee-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.75); }

/* ==========================================================================
   FLIP-BOOK — a desk calendar you turn by dragging
   ========================================================================== */
.fx-book-section { padding-top: 120px; }
.fx-book-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; }
.fx-book-wrap { position: relative; max-width: 1040px; margin: 0 auto; }
.fx-book {
  position: relative;
  height: 560px;
  perspective: 2200px;
  perspective-origin: 50% 0%;
  cursor: none;
  user-select: none;
  touch-action: pan-y;
}
.fx-rings {
  position: absolute; top: -18px; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; gap: clamp(28px, 6vw, 72px);
  pointer-events: none;
}
.fx-rings i {
  width: 16px; height: 40px; border-radius: 10px;
  background: linear-gradient(90deg, #0b1027, #2a3152 50%, #0b1027);
  box-shadow: 0 4px 6px -2px rgba(14,20,48,0.4);
}
/* stack depth sheets */
.fx-book::before, .fx-book::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -10px; height: 100%;
  background: #e9ecf5; border-radius: 26px; z-index: 0; border: 1px solid var(--line);
}
.fx-book::after { left: 22px; right: 22px; bottom: -20px; background: #dfe3ef; z-index: -1; }

.fx-page {
  position: absolute; inset: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 56px 52px 44px;
  transform-origin: 50% 0;
  transform: rotateX(0deg);
  transition: transform 0.75s var(--ease), box-shadow 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  box-shadow: 0 30px 60px -30px rgba(14, 20, 48, 0.35);
  overflow: hidden;
}
.fx-page::before { /* punched holes along the top */
  content: ''; position: absolute; top: 14px; left: 0; right: 0; height: 10px;
  background: radial-gradient(circle 5px, var(--mist-2) 98%, transparent) center / clamp(44px, 8.1vw, 88px) 10px repeat-x;
  opacity: 0.9;
}
.fx-page.turned { transform: rotateX(178deg); pointer-events: none; }
.fx-page.dragging { transition: none; }
.fx-page .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,20,48,0.18), transparent 60%); opacity: 0; pointer-events: none; border-radius: inherit; }

.fx-page-num {
  font-family: var(--font-editorial); font-weight: 800;
  font-size: clamp(5rem, 12vw, 9.5rem); letter-spacing: -0.06em; line-height: 0.8;
  color: var(--cobalt);
}
.fx-page-num small { display: block; font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: 0; font-weight: 700; color: var(--text-sub); margin-top: 18px; }
.fx-page h3 { font-family: var(--font-editorial); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 18px 0 14px; }
.fx-page p { color: var(--text-muted); line-height: 1.65; font-size: 1rem; max-width: 30em; }
.fx-page .visual { background: var(--mist); border: 1px solid var(--line); border-radius: 20px; padding: 22px; min-height: 300px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.fx-page.ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.fx-page.ink h3 { color: #fff; } .fx-page.ink p { color: #b8bfd9; }
.fx-page.ink .fx-page-num { color: var(--sky); } .fx-page.ink .fx-page-num small { color: #8790b3; }
.fx-page.ink .visual { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.fx-page.ink .v-quads div { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); color: #c9cfe6; }
.fx-page.ink .v-quads b { color: #fff; }
.fx-page.cobalt { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.fx-page.cobalt h3 { color: #fff; } .fx-page.cobalt p { color: #dfe3ff; }
.fx-page.cobalt .fx-page-num { color: #fff; } .fx-page.cobalt .fx-page-num small { color: #c5ccff; }
.fx-page.cobalt .visual { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); }

/* small visuals inside pages */
.v-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 0.88rem; }
.v-row b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fx-page.ink .v-row, .fx-page.cobalt .v-row { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #fff; }
.v-quads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v-quads div { background: var(--paper); border-radius: 12px; padding: 14px; font-size: 0.84rem; border: 1px solid var(--line); min-height: 86px; }
.v-quads b { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.v-wave { display: flex; align-items: center; gap: 4px; height: 70px; justify-content: center; }
.v-wave i { width: 5px; border-radius: 9px; background: var(--sky); animation: wavePulse 1s ease-in-out infinite alternate; }
.v-phone { width: 190px; margin: 0 auto; background: #0b1027; border-radius: 28px; padding: 14px 10px; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6); }
.v-notif { background: rgba(255,255,255,0.95); color: var(--ink); border-radius: 14px; padding: 10px 12px; font-size: 0.76rem; line-height: 1.35; margin-bottom: 6px; }
.v-notif b { display: block; font-size: 0.8rem; }
.v-url { font-family: var(--font-mono); background: var(--paper); color: var(--ink); border-radius: 99px; padding: 8px 14px; font-size: 0.85rem; text-align: center; }
.v-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.v-slots span { text-align: center; font-family: var(--font-mono); font-size: 0.85rem; padding: 9px 0; border-radius: 10px; background: rgba(255,255,255,0.12); }
.v-slots span.sel { background: #fff; color: var(--cobalt); font-weight: 700; }

.fx-book-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.fx-book-progress { flex: 1; min-width: 160px; max-width: 420px; height: 4px; background: var(--line); border-radius: 9px; overflow: hidden; }
.fx-book-progress i { display: block; height: 100%; width: 16.66%; background: var(--ink); border-radius: 9px; transition: width 0.6s var(--ease); }
.fx-book-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-book-tabs button { border: 1px solid var(--line-strong); background: var(--paper); border-radius: 99px; padding: 7px 13px; font-size: 0.84rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); }
.fx-book-tabs button:hover { color: var(--ink); border-color: var(--ink); }
.fx-book-tabs button.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* drag cursor */
.fx-cursor {
  position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none;
  width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: var(--sky); color: var(--ink);
  box-shadow: 0 10px 30px -10px rgba(14,20,48,0.45);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.8rem; font-weight: 700; line-height: 1.15;
  transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) scale(0);
  transition: transform 0.25s var(--ease), background 0.2s ease;
  will-change: transform;
}
.fx-cursor.show { transform: translate3d(var(--cx), var(--cy), 0) scale(1); }
.fx-cursor.down { transform: translate3d(var(--cx), var(--cy), 0) scale(0.82); background: #fff; }

/* ==========================================================================
   SEGRETARIA — pinned timeline driven by scroll
   ========================================================================== */
.fx-pin { height: 340vh; position: relative; margin-top: 120px; }
.fx-pin-inner {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center;
  padding: 80px 24px 24px;
}
.fx-pin-grid { max-width: var(--maxw); width: 100%; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.fx-steps { list-style: none; margin-top: 36px; display: flex; flex-direction: column; gap: 6px; }
.fx-steps li { padding: 14px 0 14px 22px; border-left: 2px solid var(--line); color: var(--text-light); transition: color 0.4s ease, border-color 0.4s ease; }
.fx-steps li b { display: block; font-family: var(--font-editorial); font-size: 1.3rem; letter-spacing: -0.02em; color: inherit; }
.fx-steps li span { font-size: 0.95rem; display: block; max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease), margin 0.5s var(--ease); }
.fx-steps li.on { color: var(--ink); border-color: var(--cobalt); }
.fx-steps li.on span { max-height: 80px; margin-top: 6px; color: var(--text-muted); }

.fx-day {
  background: var(--paper); border: 1px solid var(--line); border-radius: 28px;
  padding: 24px; box-shadow: var(--shadow-card); position: relative;
}
.fx-day-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.fx-day-head b { font-family: var(--font-editorial); font-size: 1.3rem; letter-spacing: -0.02em; }
.fx-day-head span { font-family: var(--font-mono); color: var(--text-sub); font-size: 0.86rem; }
.fx-hours { position: relative; display: grid; grid-template-columns: 52px 1fr; }
.fx-hours .h { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-light); height: 48px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.fx-hours .lane { position: relative; border-left: 1px solid var(--line); }
.fx-hours .lane::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 48px); opacity: 0.8; }
.fx-blk {
  position: absolute; left: 10px; right: 0;
  border-radius: 12px; padding: 8px 12px; font-size: 0.84rem; line-height: 1.3;
  background: var(--cobalt-50); border: 1px solid var(--cobalt-100); border-left: 3px solid var(--cobalt);
  opacity: 0; transform: translateX(30px) scale(0.96);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), top 0.7s var(--ease), background 0.3s ease, border-color 0.3s ease;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.fx-blk small { color: var(--text-sub); display: block; }
.fx-blk.sky { background: var(--sky-50); border-color: #cfe9f8; border-left-color: var(--sky); }
.fx-blk.free { background: transparent; border: 1.5px dashed var(--ok); color: var(--ok); font-weight: 700; justify-content: center; }
.fx-blk.show { opacity: 1; transform: none; }
.fx-blk.ghost { background: var(--paper); border: 1.5px dashed var(--ink); border-left-width: 1.5px; z-index: 3; box-shadow: var(--shadow-card); }
.fx-blk.ghost.clash { background: var(--bad-50); border-color: var(--bad); color: #a3272b; animation: shake 0.45s ease; }
.fx-blk.ghost.moved { background: var(--ok-50); border: 1px solid #c4ead9; border-left: 3px solid var(--ok); color: #0b6b47; }
@keyframes shake { 0%,100% { translate: 0 0; } 20% { translate: -8px 0; } 40% { translate: 8px 0; } 60% { translate: -5px 0; } 80% { translate: 4px 0; } }
.fx-wa {
  position: absolute; right: -24px; bottom: -28px; width: 250px;
  background: #e7fbe9; border: 1px solid #c3eec9; color: #0f3d1a;
  border-radius: 18px 18px 4px 18px; padding: 12px 14px; font-size: 0.84rem; line-height: 1.4;
  box-shadow: 0 20px 40px -18px rgba(14,20,48,0.35);
  opacity: 0; transform: translateY(16px) scale(0.9); transform-origin: bottom right;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.fx-wa b { display: block; color: #128c3a; font-size: 0.78rem; margin-bottom: 2px; }
.fx-wa.show { opacity: 1; transform: none; }
.fx-pin-bar { position: absolute; left: 24px; right: 24px; bottom: 24px; max-width: var(--maxw); margin: 0 auto; height: 3px; background: var(--line); border-radius: 9px; overflow: hidden; }
.fx-pin-bar { transition: opacity .3s ease; }
.fx-pin-bar i { display: block; height: 100%; width: calc(var(--sp, 0) * 100%); background: var(--cobalt); }

/* ==========================================================================
   CONSULENTE — Eisenhower sorting + burnout gauge
   ========================================================================== */
.fx-eis-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 20px; align-items: stretch; }
.fx-eis { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 20px; }
.fx-inbox { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 10px; border: 1.5px dashed var(--line-strong); border-radius: 14px; align-items: center; }
.fx-inbox.done::before { content: 'Tutto classificato'; color: var(--ok); font-weight: 700; font-size: 0.88rem; }
.fx-q { border-radius: 18px; padding: 16px; min-height: 150px; background: var(--mist); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fx-q h4 { font-size: 0.95rem; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.fx-q h4::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.fx-q[data-q="1"] { --c: var(--bad); } .fx-q[data-q="2"] { --c: var(--cobalt); } .fx-q[data-q="3"] { --c: var(--warn); } .fx-q[data-q="4"] { --c: var(--text-light); }
.fx-chip { display: inline-flex; gap: 6px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line-strong)); border-radius: 10px; padding: 6px 10px; font-size: 0.82rem; font-weight: 600; box-shadow: var(--shadow-subtle); }
.fx-chip b { font-family: var(--font-mono); font-weight: 600; color: var(--text-sub); }

.fx-gauge { background: var(--ink); color: #fff; border-radius: 28px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.fx-gauge h4 { color: #fff; font-family: var(--font-editorial); font-size: 1.3rem; letter-spacing: -0.02em; }
.fx-gauge svg { width: 100%; max-width: 280px; margin: 0 auto; overflow: visible; }
.fx-gauge .track { stroke: rgba(255,255,255,0.1); }
.fx-gauge .arc { stroke: var(--ok); transition: stroke-dashoffset 0.5s var(--ease), stroke 0.3s ease; }
.fx-gauge .val { font-family: var(--font-editorial); font-size: 44px; font-weight: 800; fill: #fff; letter-spacing: -2px; }
.fx-gauge .lab { font-size: 12px; fill: #aab2d0; font-weight: 600; }
.fx-gauge .status { text-align: center; font-weight: 700; color: var(--ok); }
.fx-gauge label { font-size: 0.85rem; color: #aab2d0; }
.fx-gauge input[type="range"] { accent-color: var(--sky); }

/* ==========================================================================
   VERBALI — TextRank in motion
   ========================================================================== */
.fx-tr-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: start; }
.fx-transcript { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 30px; font-size: 1.08rem; line-height: 1.85; color: var(--text-light); }
.fx-transcript .s { transition: color 0.5s ease, background 0.5s ease; border-radius: 6px; }
.fx-transcript .s.read { color: var(--text-muted); }
.fx-transcript .s.top { color: var(--ink); background: linear-gradient(transparent 62%, var(--cobalt-100) 62%); }
.fx-transcript .k { transition: color 0.4s ease, background 0.4s ease; border-radius: 4px; padding: 0 2px; }
.fx-transcript .k.hit { color: var(--cobalt-600); background: var(--cobalt-50); font-weight: 700; }
.fx-rec { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 0.9rem; font-weight: 600; color: var(--text-sub); }
.fx-rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.fx-verbale { background: var(--ink); color: #fff; border-radius: 28px; padding: 28px; position: sticky; top: 100px; }
.fx-verbale h4 { color: #fff; font-family: var(--font-editorial); font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.fx-verbale .meta { color: #8790b3; font-size: 0.86rem; margin-bottom: 18px; }
.fx-verbale ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fx-verbale li { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 12px 14px; font-size: 0.92rem; line-height: 1.45; opacity: 0.15; transform: translateX(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.fx-verbale li b { display: block; color: var(--sky); font-size: 0.8rem; margin-bottom: 2px; }
.fx-verbale li.in { opacity: 1; transform: none; }
.fx-kw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.fx-kw span { font-family: var(--font-mono); font-size: 0.78rem; padding: 4px 9px; border-radius: 99px; background: rgba(124,196,238,0.14); color: var(--sky); opacity: 0; transition: opacity 0.5s ease; }
.fx-kw span.in { opacity: 1; }

/* ==========================================================================
   RICERCA — self-typing search
   ========================================================================== */
.fx-search { max-width: 820px; margin: 0 auto; }
.fx-search-box {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 22px;
  padding: 16px 20px; box-shadow: 0 30px 60px -30px rgba(14,20,48,0.35);
}
.fx-search-box svg { flex-shrink: 0; color: var(--ink); }
.fx-search-box input { flex: 1; border: none; outline: none; font-family: var(--font-editorial); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; background: transparent; min-width: 0; color: var(--ink); }
.fx-search-box .kbd-shortcut { font-size: 0.8rem; }
.fx-caret { display: inline-block; width: 3px; height: 1.6em; background: var(--cobalt); animation: blink 0.9s steps(1) infinite; }
.fx-search-meta { font-family: var(--font-mono); color: var(--cobalt); font-weight: 600; font-size: 0.9rem; margin: 16px 6px 10px; }
.fx-results { display: flex; flex-direction: column; gap: 8px; }
.fx-res { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; transition: opacity 0.3s ease, transform 0.35s var(--ease); }
.fx-res.hide { display: none; }
.fx-res strong { font-size: 1rem; }
.fx-res small { display: block; color: var(--text-sub); font-size: 0.84rem; margin-top: 2px; }

/* ==========================================================================
   NUMBERS STRIP
   ========================================================================== */
.fx-numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.fx-numbers > div { padding: 26px 24px 0 0; }
.fx-numbers > div + div { padding-left: 24px; border-left: 1px solid var(--line-strong); }
.fx-numbers .n { font-family: var(--font-editorial); font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-numbers .l { font-weight: 700; margin-top: 10px; }
.fx-numbers .d { color: var(--text-sub); font-size: 0.9rem; }

/* ==========================================================================
   CTA — word-by-word light-up
   ========================================================================== */
.fx-words { font-family: var(--font-editorial); font-size: clamp(2.6rem, 6.4vw, 6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; color: var(--ink); max-width: 15em; }
.fx-words .wd { opacity: 0.12; transition: opacity 0.25s linear; }
.fx-words .wd.lit { opacity: 1; }
.fx-words .wd.blue { color: var(--cobalt); }
.fx-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; align-items: center; }

/* magnetic buttons */
.magnetic { transition: transform 0.35s var(--ease), background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .fx-hero-inner { grid-template-columns: 1fr; }
  .fx-hero .today-card { max-width: 520px; }
  .fx-pin-grid { grid-template-columns: 1fr; gap: 24px; }
  .fx-pin-inner { padding-top: 76px; align-items: flex-start; }
  .fx-pin-grid .fx-lead { display: none; }
  .fx-steps { margin-top: 14px; }
  .fx-steps li { padding: 6px 0 6px 16px; }
  .fx-steps li:not(.on) { display: none; }
  .fx-steps li b { font-size: 1.1rem; }
  .fx-wa { right: 8px; bottom: -18px; }
  .fx-eis-grid, .fx-tr-grid { grid-template-columns: 1fr; }
  .fx-verbale { position: relative; top: 0; }
  .fx-page { grid-template-columns: 1fr; gap: 20px; padding: 48px 32px 32px; align-content: start; }
  .fx-page .visual { min-height: 0; }
  .fx-book { height: 760px; }
}
@media (max-width: 640px) {
  .fx-hero { padding: 36px 16px 70px; min-height: auto; }
  .version-pill { font-size: 0.78rem; padding: 5px 12px 5px 6px; }
  .fx-hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .fx-hero .grid-layer { grid-template-columns: repeat(auto-fill, 52px); grid-auto-rows: 52px; gap: 6px; }
  .fx-scroll-cue { display: none; }
  .fx-pin-inner { padding: 70px 16px 16px; }
  .fx-pin-grid .fx-h2 { font-size: 2rem; }
  .fx-hours .h { height: 38px; }
  .fx-hours .lane::before { background: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 38px); }
  .fx-day { padding: 16px; border-radius: 22px; }
  .fx-blk { font-size: 0.76rem; padding: 6px 9px; }
  .fx-wa { width: 210px; font-size: 0.78rem; }
  .fx-page { padding: 44px 20px 22px; border-radius: 22px; }
  .fx-page-num { font-size: 4.2rem; }
  .fx-book { height: 780px; }
  .fx-rings { gap: 22px; } .fx-rings i { width: 12px; height: 32px; }
  .fx-numbers { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .fx-numbers > div:nth-child(3) { padding-left: 0; border-left: none; }
  .fx-transcript { padding: 20px; font-size: 1rem; }
  .fx-eis { padding: 12px; } .fx-q { min-height: 120px; padding: 12px; }
  .v-quads div { min-height: 0; }
}
@media (hover: none) { .fx-book { cursor: grab; } .fx-cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .split .c { animation: none; transform: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .fx-pin { height: auto; }
  .fx-pin-inner { position: relative; height: auto; padding: 80px 24px; }
  .fx-hero-copy, .fx-hero .today-card { transform: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   TYPE CALIBRATION — Syne 800 is an extended face: keep it for display only
   ========================================================================== */
.fx-page h3, .fx-steps li b, .fx-day-head b, .today-head .day, .fx-gauge h4, .fx-verbale h4,
.pricing-card-wiltord h3, .modal-content h3, .fx-search-box input {
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.03em;
}
.fx-h2 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; }
.fx-hero h1 { font-size: clamp(2.2rem, 4.4vw, 4.6rem); line-height: 1; letter-spacing: -0.045em; }
.fx-page h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.fx-page-num { font-size: clamp(3.6rem, 8vw, 7rem); }
.fx-words { font-size: clamp(2rem, 4.8vw, 4.6rem); line-height: 1.02; }
.fx-numbers .n { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.fx-marquee-track span { font-size: clamp(1.2rem, 2.2vw, 2rem); }
.pricing-price-val { font-size: 2.6rem; }
.fx-gauge .val { font-size: 38px; }
@media (max-width: 640px) {
  .fx-hero h1 { font-size: 7.6vw; }
  .fx-h2, .fx-pin-grid .fx-h2 { font-size: 7.2vw; }
  .fx-words { font-size: 8vw; }
  .fx-page h3 { font-size: 1.35rem; }
  .fx-page-num { font-size: 3.2rem; }
  .fx-numbers .n { font-size: 2rem; }
  .pricing-price-val { font-size: 2.2rem; }
}
.fx-eis-grid > *, .fx-tr-grid > *, .fx-pin-grid > *, .fx-q, .fx-chip { min-width: 0; }
.fx-eis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ==========================================================================
   LOGO PALETTE PASS — coloured bands instead of white-only / navy surfaces
   ========================================================================== */
/* full-bleed colour bands behind centred sections */
.band { position: relative; isolation: isolate; padding-bottom: 112px; }
.band::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--band); z-index: -1; }
.band-sky    { --band: linear-gradient(180deg, #eaf6fd 0%, #e3eefd 100%); }
.band-blue   { --band: linear-gradient(180deg, #eef0fd 0%, #e6ebfd 100%); }
.band-pale   { --band: var(--blue-pale); }
.band-cobalt { --band: var(--grad-logo); color: #fff; }
.band-cta    { --band: linear-gradient(135deg, #eef0fd 0%, #eaf6fd 60%, #dff0fb 100%); }
.band + .section { padding-top: 112px; }
.band-cobalt .fx-h2 { color: #fff; }
.band-cobalt .fx-lead { color: #dfe5ff; }
.band-cobalt .fx-eyebrow { color: #fff; }
.band-cobalt .fx-eyebrow::before { background: #fff; box-shadow: 14px 0 0 var(--sky); }
.band-cobalt .fx-search-box { border-color: #fff; box-shadow: 0 30px 60px -30px rgba(20, 30, 120, 0.6); }
.band-cobalt .fx-search-meta { color: #fff; }
.band-cobalt .fx-res { border-color: transparent; }

/* eyebrow: the logo's three square tones */
.fx-eyebrow::before { background: var(--cobalt); box-shadow: 14px 0 0 var(--blue-light), 28px 0 0 var(--sky); margin-right: 28px; }

/* hero: richer calendar grid in logo colours */
.fx-hero .grid-base span { background: rgba(110, 143, 240, 0.07); }
.fx-hero .grid-base span.on-1 { background: rgba(51, 70, 211, 0.22); }
.fx-hero .grid-base span.on-2 { background: rgba(124, 196, 238, 0.45); }
.fx-hero .grid-glow span { background: rgba(51, 70, 211, 0.28); border-color: rgba(51, 70, 211, 0.3); }
.fx-hero::after {
  background: linear-gradient(180deg, rgba(244,246,251,0) 60%, #eaf6fd 100%),
              radial-gradient(ellipse 58% 55% at 22% 45%, rgba(244,246,251,0.9), rgba(244,246,251,0) 70%);
}
.version-pill .v { background: var(--cobalt); }
.fx-scroll-cue i::after { background: var(--cobalt); }
.today-float { background: var(--cobalt); }
.today-float b { color: #cfe9f8; }

/* marquee: cobalt band, ribbon-blue outlines */
.fx-marquee { background: var(--grad-logo); }
.fx-marquee-track span:nth-child(even) { -webkit-text-stroke-color: #cfe9f8; }
.fx-marquee-track span::after { background: var(--sky); box-shadow: 24px 0 0 var(--blue-light); }

/* flip-book */
.fx-rings i { background: linear-gradient(90deg, #1f2fa3, #5068e2 50%, #1f2fa3); }
.fx-book::before { background: #dfe8fb; border-color: #d3def8; }
.fx-book::after { background: #c9d7f7; border-color: #c0cff4; }
.fx-page.ink { background: var(--grad-sky); border-color: transparent; color: var(--ink); }
.fx-page.ink h3 { color: var(--ink); }
.fx-page.ink p { color: var(--ink-2); }
.fx-page.ink .fx-page-num { color: #fff; text-shadow: 0 6px 24px rgba(51, 70, 211, 0.25); }
.fx-page.ink .fx-page-num small { color: var(--cobalt-600); }
.fx-page.ink .visual { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.5); }
.fx-page.ink .v-quads div { background: rgba(255,255,255,0.75); border-color: transparent; color: var(--ink-2); }
.fx-page.ink .v-quads b { color: var(--ink); }
.fx-page.ink::before { background: radial-gradient(circle 5px, rgba(255,255,255,0.7) 98%, transparent) center / clamp(44px, 8.1vw, 88px) 10px repeat-x; }
.v-phone { background: var(--grad-logo); box-shadow: 0 20px 40px -20px rgba(51,70,211,0.7); }
.fx-book-progress i { background: var(--grad-logo); }
.fx-book-tabs button.active { background: var(--cobalt); border-color: var(--cobalt); }
.fx-cursor { background: #fff; color: var(--cobalt-600); border: 2px solid var(--cobalt); }
.fx-cursor.down { background: var(--cobalt); color: #fff; }

/* segretaria pin: tinted blue band */
.fx-pin { background: linear-gradient(180deg, #eaf6fd 0%, #eef0fd 100%); margin-top: 0; }
.fx-pin + .section { padding-top: 112px; }

/* consulente gauge: cobalt gradient, status colours tuned for blue */
.fx-gauge { background: var(--grad-logo); --ok: #5ff0a8; --warn: #ffd166; --bad: #ff9a9e; }
.fx-gauge .track { stroke: rgba(255,255,255,0.18); }
.fx-gauge .lab, .fx-gauge label { color: #dfe5ff; fill: #dfe5ff; }
.fx-gauge input[type="range"] { accent-color: #fff; }
.fx-q[data-q="2"] { background: #eef0fd; }
.fx-q[data-q="1"] { background: #fdf0f1; }
.fx-q[data-q="3"] { background: #fdf6e6; }
.fx-q[data-q="4"] { background: #f0f2f8; }

/* verbali: sky-to-cobalt card */
.fx-verbale { background: var(--grad-logo); }
.fx-verbale .meta { color: #c9d3ff; }
.fx-verbale li { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); }
.fx-verbale li b { color: #cfe9f8; }
.fx-kw span { background: rgba(255,255,255,0.18); color: #fff; }

/* numbers */
.fx-numbers { border-top-color: var(--cobalt); }
.fx-numbers .n { color: var(--cobalt); }

/* footer: logo stripe */
.site-footer { background: var(--cobalt-50); border-top: none; position: relative; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--cobalt) 0 40%, var(--blue-light) 40% 70%, var(--sky) 70% 100%); }

@media (max-width: 640px) {
  .band { padding-bottom: 80px; }
  .band + .section, .fx-pin + .section { padding-top: 80px; }
}
.band-cobalt .fx-res { color: var(--ink); }
.band-cobalt .fx-eyebrow::before { background: #fff; box-shadow: 14px 0 0 var(--blue-light), 28px 0 0 var(--sky); }
.band-cta ~ .site-footer { margin-top: 0; }
.site-footer { background: var(--paper); }

/* ==========================================================================
   WEEK LOAD SIMULATOR — every % books or frees a real half-hour slot
   ========================================================================== */
.fx-sim-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 16px; align-items: stretch; }
.fx-week { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.fx-week-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fx-week-head b { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.fx-week-head span { color: var(--text-sub); font-size: 0.86rem; }
.fx-week-pct { font-family: var(--font-mono); font-weight: 700; color: var(--cobalt) !important; background: var(--cobalt-50); border-radius: 99px; padding: 6px 12px; font-size: 0.9rem !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-week-grid { display: grid; grid-template-columns: 42px repeat(5, minmax(0, 1fr)); grid-auto-rows: 15px; gap: 3px 6px; }
.fx-week-grid .wh { height: 22px; }
.fx-week-grid .wd { height: 22px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-align: center; border-radius: 6px; transition: background .3s ease, color .3s ease; }
.fx-week-grid .wd.over { background: var(--bad-50); color: var(--bad); }
.fx-week-grid .wt { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-light); line-height: 15px; font-variant-numeric: tabular-nums; }
.fx-week-grid .ws { border-radius: 4px; background: var(--mist); border: 1px dashed transparent; transition: background .25s ease, transform .25s ease; }
.fx-week-grid .ws.lunch { background: repeating-linear-gradient(135deg, #eef1f8 0 4px, #f7f8fc 4px 8px); }
.fx-week-grid .ws.on[data-t="c"] { background: var(--cobalt); }
.fx-week-grid .ws.on[data-t="p"] { background: var(--blue-mid); }
.fx-week-grid .ws.on[data-t="r"] { background: var(--sky); }
.fx-week-grid .ws.on.skipped { background: var(--bad); }
.fx-week-grid .ws.pop { animation: slotPop .45s var(--ease); }
@keyframes slotPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.fx-week-control label { font-size: 0.92rem; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 8px; }
.fx-week-control label b { color: var(--cobalt); font-family: var(--font-mono); }
.fx-week-control input[type="range"] { height: 28px; }
.fx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; color: var(--text-sub); }
.fx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg-c { background: var(--cobalt); } .lg-p { background: var(--blue-mid); } .lg-r { background: var(--sky); } .lg-x { background: var(--bad); } .lg-f { background: var(--mist); border: 1px solid var(--line-strong); }

.fx-sim-stats { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fx-sim-stats li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: #dfe5ff; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.fx-sim-stats b { color: #fff; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-advice { background: rgba(255,255,255,0.14); border-radius: 14px; padding: 12px 14px; font-size: 0.9rem; font-weight: 600; line-height: 1.45; color: #fff; }
.fx-formula { font-size: 0.74rem; color: #c9d3ff; line-height: 1.4; }
.fx-gauge { gap: 14px; }
.fx-gauge svg { max-width: 230px; }
.fx-eis { grid-template-rows: auto 1fr 1fr auto; }
.fx-eis-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

@media (max-width: 1100px) { .fx-sim-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .fx-week { padding: 16px; border-radius: 22px; }
  .fx-week-grid { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 2px 4px; grid-auto-rows: 13px; }
  .fx-week-head { flex-direction: column; }
}

/* ==========================================================================
   v1.0.2 — HERO WOW STAGE (desk calendar flips to today + Booky)
   ========================================================================== */
.fx-stage { position: relative; padding-top: 22px; }
.fx-hero .fx-stage .today-card { transform: none; animation: none; position: relative; z-index: 1; }
.deck { position: relative; perspective: 1800px; perspective-origin: 50% 0; }
.deck-rings { position: absolute; top: 4px; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; gap: 22%; pointer-events: none; }
.deck-rings i { width: 13px; height: 36px; border-radius: 9px; background: linear-gradient(90deg, #1f2fa3, #5068e2 50%, #1f2fa3); box-shadow: 0 4px 6px -2px rgba(14,20,48,.35); }
.deck-page {
  position: absolute; inset: 0; border-radius: var(--radius-xl);
  background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transform-origin: 50% 0; backface-visibility: hidden;
  box-shadow: 0 30px 60px -30px rgba(51,70,211,.35);
  overflow: hidden;
}
.deck-page::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 70px; background: var(--grad-logo); }
.deck-page .dw { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 1rem; text-transform: capitalize; margin-top: -40px; margin-bottom: 40px; }
.deck-page .dn { font-family: var(--font-editorial); font-weight: 800; font-size: clamp(6rem, 12vw, 9rem); line-height: 1; letter-spacing: -.06em; color: var(--cobalt); }
.fx-stage.flipped .deck-page { animation: deckFlip .55s cubic-bezier(.55,.05,.6,1) forwards; animation-delay: calc(var(--i) * 170ms + 600ms); }
@keyframes deckFlip { 0% { transform: rotateX(0); } 100% { transform: rotateX(-178deg); opacity: 0; } }
.fx-stage .today-card { opacity: .25; transition: opacity .4s ease; }
.fx-stage.done .today-card { opacity: 1; }
.stage-burst { position: absolute; left: 50%; top: 50%; z-index: 30; pointer-events: none; }
.stage-burst i { position: absolute; width: 16px; height: 16px; border-radius: 5px; animation: burst 1.2s cubic-bezier(.15,.8,.3,1) forwards; }
@keyframes burst { 0% { transform: translate(0,0) scale(.3) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--r)); opacity: 0; } }
.stage-booky { position: absolute; left: -46px; bottom: -26px; z-index: 35; transform: translateY(40px) scale(.4) rotate(-12deg); opacity: 0;
  transition: transform .7s cubic-bezier(.34,1.7,.5,1), opacity .3s ease; filter: drop-shadow(0 16px 24px rgba(51,70,211,.3)); }
.fx-stage.done .stage-booky { transform: none; opacity: 1; }
.stage-bubble { position: absolute; left: 62px; bottom: 112px; z-index: 36; background: #fff; border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-weight: 700; font-size: .9rem; color: var(--ink);
  opacity: 0; transform: scale(.7); transform-origin: bottom left; transition: opacity .3s ease .55s, transform .45s cubic-bezier(.34,1.6,.6,1) .55s; box-shadow: 0 14px 30px -14px rgba(14,20,48,.4); white-space: nowrap; }
.stage-bubble b { color: var(--cobalt); }
.fx-stage.done .stage-bubble { opacity: 1; transform: none; }

/* ==========================================================================
   PER CHI È — advertising for everyone
   ========================================================================== */
.fx-ad-title { font-family: var(--font-editorial); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; font-size: clamp(2.2rem, 5vw, 4.4rem); color: var(--ink); }
.fx-rotator { display: inline-grid; vertical-align: bottom; color: var(--cobalt); overflow: hidden; height: 1.08em; }
.fx-rotator span { grid-area: 1 / 1; white-space: nowrap; }
.fx-rotator span.in { animation: rotIn .5s cubic-bezier(.2,.9,.3,1.2) both; }
.fx-rotator span.out { animation: rotOut .45s ease both; }
@keyframes rotIn { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rotOut { to { transform: translateY(-100%); opacity: 0; } }
.fx-personas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.fx-persona { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 22px; transition: transform .35s var(--ease), box-shadow .35s ease, border-color .3s ease; position: relative; overflow: hidden; }
.fx-persona::after { content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 26px; background: var(--c); opacity: .08; transform: rotate(18deg); transition: opacity .3s ease, transform .4s var(--ease); }
.fx-persona:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -22px rgba(51,70,211,.4); border-color: var(--c); }
.fx-persona:hover::after { opacity: .18; transform: rotate(30deg) scale(1.2); }
.fx-pi { width: 46px; height: 46px; border-radius: 14px; background: var(--c); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.fx-pi svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-persona h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.fx-persona p { color: var(--text-muted); font-size: .92rem; line-height: 1.55; }
.fx-persona-you { background: var(--grad-logo); border-color: transparent; }
.fx-persona-you h3, .fx-persona-you p { color: #fff; }
.fx-persona-you .fx-pi { background: rgba(255,255,255,.2); }
.fx-persona-you .btn-wiltord-primary { margin-top: 14px; background: #fff; color: var(--cobalt-600); box-shadow: none; }

/* ==========================================================================
   ISCRIZIONE
   ========================================================================== */
.fx-signup-band { padding-top: 96px; }
.fx-signup { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 48px; align-items: center; }
.fx-signup-booky { margin-bottom: 10px; }
.fx-signup-booky .booky { animation: bkFloat 3.2s ease-in-out infinite; }
.fx-signup-list { list-style: none; margin-top: 24px; display: grid; gap: 10px; }
.fx-signup-list li { color: #fff; font-weight: 600; font-size: 1.05rem; display: flex; gap: 10px; align-items: center; }
.fx-signup-list li::before { content: '✓'; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.fx-signup-card { background: #fff; color: var(--ink); border-radius: 28px; padding: 28px; box-shadow: 0 40px 80px -30px rgba(10,20,90,.6); }
.fx-signup-card h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 16px; }
.fx-terms { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--text-muted); line-height: 1.45; margin: 4px 0 16px; cursor: pointer; }
.fx-terms input { margin-top: 2px; flex-shrink: 0; }
.fx-signup-note { text-align: center; font-size: .82rem; color: var(--text-sub); margin-top: 10px; }

/* ==========================================================================
   FOOTER grande + sticky CTA
   ========================================================================== */
.site-footer-big { padding-top: 48px; }
.site-footer-big .inner { align-items: flex-start; }
.footer-brand { max-width: 320px; }
.footer-brand p { margin-top: 12px; line-height: 1.55; }
.footer-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 48px; }
.footer-cols div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer-cols strong { color: var(--ink); margin-bottom: 4px; }
.footer-legal { max-width: var(--maxw); margin: 36px auto 0; padding: 18px 24px 0; border-top: 1px solid var(--line); font-size: .78rem; color: var(--text-sub); line-height: 1.6; }
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; display: none; text-align: center; text-decoration: none;
  background: var(--cobalt); color: #fff; font-weight: 800; border-radius: 99px; padding: 14px; box-shadow: 0 16px 30px -10px rgba(51,70,211,.6);
  transform: translateY(150%); transition: transform .35s var(--ease); }
.sticky-cta span { font-weight: 500; opacity: .85; }
.sticky-cta.show { transform: none; }

@media (max-width: 1100px) {
  .fx-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-signup { grid-template-columns: 1fr; }
  .fx-stage { max-width: 520px; margin-left: 40px; }
  .footer-cols { grid-template-columns: repeat(2, auto); gap: 28px; }
}
@media (max-width: 640px) {
  .fx-personas { grid-template-columns: 1fr; }
  .fx-ad-title { font-size: 8.4vw; }
  .fx-stage { margin-left: 0; }
  .stage-booky { left: -8px; bottom: -40px; }
  .stage-booky .booky { width: 84px; height: 94px; }
  .stage-bubble { left: 64px; bottom: 50px; font-size: .8rem; }
  .sticky-cta { display: block; }
  .footer-cols { grid-template-columns: 1fr; }
  .fx-signup-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-stage .deck-page { display: none; }
  .fx-stage .today-card, .stage-booky, .stage-bubble { opacity: 1 !important; transform: none !important; transition: none; }
}

/* v1.0.2 fixes */
.stage-booky { left: -92px; bottom: 30px; }
.stage-bubble { left: -150px; right: auto; bottom: 168px; border-radius: 18px 18px 4px 18px; transform-origin: bottom right; }
.fx-ad-title { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .stage-booky { left: -40px; bottom: -34px; }
  .stage-bubble { left: 40px; bottom: 60px; border-radius: 18px 18px 18px 4px; transform-origin: bottom left; }
}
@media (max-width: 640px) {
  .fx-ad-title { font-size: 7.4vw; }
  .fx-rotator { display: grid; max-width: 100%; }
  .stage-booky { left: -6px; bottom: -44px; }
  .stage-bubble { left: 70px; bottom: 14px; }
}
.stage-bubble { left: -118px; bottom: 172px; border-radius: 18px 18px 18px 4px; transform-origin: bottom left; }
@media (max-width: 1100px) { .stage-bubble { left: 44px; bottom: 64px; } }
@media (max-width: 640px) { .stage-bubble { left: 74px; bottom: 16px; } }