.home {
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Hero: le strisce del marchio accendono la V ---------- */

.home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px 56px;
  min-height: min(760px, 92svh);
  justify-content: flex-end;
}

.neon {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2.6vw, 22px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
}

.neon-bar {
  position: relative;
  height: 100%;
  width: clamp(16px, 3.6vw, 30px);
  border-radius: 0 0 999px 999px;
  transform-origin: top;
  animation: bar-drop 1100ms var(--ease-out) both;
  overflow: hidden;
}

.neon-green { background: var(--brand-green); box-shadow: 0 0 48px rgba(46, 230, 160, 0.45); }
.neon-blue { background: var(--brand-blue); width: clamp(28px, 6.4vw, 54px); box-shadow: 0 0 56px rgba(79, 155, 239, 0.5); animation-delay: 120ms; }
.neon-magenta { background: var(--brand-magenta); box-shadow: 0 0 48px rgba(232, 71, 220, 0.45); animation-delay: 240ms; }

.neon-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  top: -40%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.85), transparent);
  mix-blend-mode: overlay;
  animation: bar-light 6.5s 2.2s ease-in-out infinite;
}

.neon-blue::after { animation-delay: 2.6s; }
.neon-magenta::after { animation-delay: 3s; }

.home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 46% at 50% 62%, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}

.hero-v {
  width: min(260px, 58vw);
  height: auto;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 28px rgba(54, 221, 245, 0.55)) drop-shadow(0 0 60px rgba(232, 71, 220, 0.25));
  animation: v-ignite 1500ms 650ms linear both;
}

.hero-word {
  margin: 0;
  font-size: clamp(54px, 15vw, 112px);
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1;
  padding-left: 0.09em;
  color: var(--text);
  animation: rise 900ms 1250ms var(--ease-out) both;
}

.hero-claim {
  max-width: 30ch;
  margin: 18px auto 22px;
  font-size: clamp(18px, 2.6vw, 21px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--text-2);
  animation: rise 900ms 1400ms var(--ease-out) both;
}

.hero-beta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--lime-surface);
  border: 1px solid var(--lime-border);
  color: var(--lime);
  font-size: 14px;
  font-weight: 800;
  animation: rise 900ms 1550ms var(--ease-out) both;
}

.hero-beta .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(198, 255, 58, 0.6);
  animation: beacon 2.4s 2.4s ease-out infinite;
}

@keyframes bar-drop {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes bar-light {
  0% { top: -40%; }
  45%, 100% { top: 110%; }
}

@keyframes v-ignite {
  0% { opacity: 0; }
  12% { opacity: 0.9; }
  16% { opacity: 0.15; }
  24% { opacity: 1; }
  28% { opacity: 0.4; }
  40%, 100% { opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes beacon {
  0% { box-shadow: 0 0 0 0 rgba(198, 255, 58, 0.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(198, 255, 58, 0); }
}

/* ---------- Corpo ---------- */

.home main.home-main {
  max-width: 1040px;
  padding: 24px 16px 72px;
}

.home h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.home .muted {
  color: var(--text-3);
}

.lumen {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 32px 0 72px;
}

.lumen-copy p {
  margin: 0 0 14px;
  max-width: 46ch;
  font-size: 17px;
  color: var(--text-2);
}

.lumen-copy p.muted {
  font-size: 15px;
  color: var(--text-3);
}

@media (min-width: 860px) {
  .lumen {
    grid-template-columns: 1fr 420px;
    gap: 56px;
  }
}

/* La card imita un pezzo della Home dell'app: anelli sopra, LUMEN sotto. */
.day {
  position: relative;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  backdrop-filter: saturate(160%) blur(24px);
  box-shadow: 0 30px 80px -30px rgba(41, 189, 255, 0.35);
}

.day::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(102, 255, 188, 0.35), rgba(41, 189, 255, 0.12) 40%, rgba(83, 87, 255, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

.day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
}

.day-head .muted {
  font-size: 14px;
  font-weight: 700;
}

.day-rings {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rings {
  width: 128px;
  height: 128px;
  flex: none;
  transform: rotate(-90deg);
}

.ring-track,
.ring {
  fill: none;
  stroke-width: 11;
}

.ring-track {
  stroke: rgba(255, 255, 255, 0.08);
}

.ring {
  stroke-linecap: round;
  stroke-dasharray: 100;
  transition: stroke-dashoffset 1400ms var(--ease-out);
}

.ring-move { stroke: var(--brand-green); stroke-dashoffset: 22; }
.ring-study { stroke: var(--brand-blue); stroke-dashoffset: 28; transition-delay: 150ms; }
.ring-food { stroke: var(--brand-magenta); stroke-dashoffset: 31; transition-delay: 300ms; }

.js .day:not(.is-live) .ring { stroke-dashoffset: 100; }

.stats {
  margin: 0;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.stat dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}

.stat dt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.stat dd {
  margin: 1px 0 0 15px;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.say {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  min-height: 132px;
}

.say-lumen {
  width: 52px;
  height: 52px;
  flex: none;
  filter: drop-shadow(0 0 14px rgba(54, 221, 245, 0.55));
}

.say-lumen.hop {
  animation: hop 520ms var(--ease-out);
}

@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-8px) scale(0.95, 1.06); }
  60% { transform: translateY(0) scale(1.05, 0.95); }
  100% { transform: none; }
}

.say-body {
  flex: 1;
  min-width: 0;
}

.say-text {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  min-height: 3em;
}

.say-text.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--lumen-2);
  animation: caret 900ms steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

.say-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 800;
  transition: opacity 250ms ease, transform 250ms var(--ease-out);
}

.say-action.is-hidden {
  opacity: 0;
  transform: translateY(4px);
}

.say-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}

.say-dots button {
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.say-dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--text-3);
  transition: width 300ms var(--ease-out), background 300ms ease;
}

.say-dots button[aria-pressed="true"]::before {
  width: 22px;
  background: var(--lumen-2);
}

/* ---------- Aree: stesso controllo a segmenti dell'app ---------- */

.areas {
  padding: 24px 0 72px;
}

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 520px;
  height: 68px;
  margin: 26px 0 18px;
  padding: 4px;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--border);
}

.seg-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease;
}

.seg-tab svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.seg-tab[aria-selected="true"] {
  background: var(--glass-strong);
  color: var(--c);
}

.seg-tab:hover {
  color: var(--text);
}

.seg-tab[aria-selected="true"]:hover {
  color: var(--c);
}

.panel[hidden] {
  display: none;
}

.panel.enter .feats li {
  animation: rise 520ms var(--ease-out) both;
}

.panel.enter .feats li:nth-child(2) { animation-delay: 50ms; }
.panel.enter .feats li:nth-child(3) { animation-delay: 100ms; }
.panel.enter .feats li:nth-child(4) { animation-delay: 150ms; }

.feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.feats li {
  margin: 0;
  padding: 16px 18px 16px 20px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c);
  color: var(--text-2);
  font-size: 15px;
}

.feats li strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 16px;
}

@media (min-width: 760px) {
  .feats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Privacy ---------- */

.trust {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(198, 255, 58, 0.1), rgba(198, 255, 58, 0.02) 60%);
  border: 1px solid var(--lime-border);
}

.trust img {
  width: 64px;
  height: 64px;
  flex: none;
}

.trust p {
  margin: 0 0 20px;
  max-width: 52ch;
  color: var(--text-2);
  font-size: 16px;
}

.trust h2 {
  font-size: clamp(24px, 3.6vw, 30px);
}

.trust .cta-row {
  justify-content: flex-start;
  margin: 0;
}

@media (max-width: 560px) {
  .trust {
    flex-direction: column;
    padding: 22px;
  }

  .day {
    padding: 16px;
  }

  .day-rings {
    gap: 16px;
  }

  .rings {
    width: 108px;
    height: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home *,
  .home *::before,
  .home *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Scorrimento: apertura bloccata, la V viene incontro ---------- */

.hero-track {
  position: relative;
  height: 210svh;
}

.home .hero-track .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  padding-bottom: 64px;
}

.z-v,
.z-text,
.neon,
.day,
.trust,
.statement-text span {
  will-change: transform, opacity;
}

/* La V e' disposta alla misura massima e rimpicciolita: il browser la
   disegna grande una volta sola, cosi' ingrandendola resta nitida. */
.z-v {
  --vb: min(236px, 52vw);
  --vz: 6;
  position: relative;
  width: var(--vb);
  height: var(--vb);
  margin-bottom: 8px;
}

.v-big {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vb) * var(--vz));
  height: calc(var(--vb) * var(--vz));
  margin-left: calc(var(--vb) * var(--vz) / -2);
  margin-top: calc(var(--vb) * var(--vz) / -2);
  transform: scale(calc(1 / var(--vz)));
  will-change: transform;
}

.home .v-big .hero-v {
  width: 100%;
  height: 100%;
  margin: 0;
  filter: none;
}

@media (max-width: 560px) {
  .z-v { --vz: 4.5; }
}

.hero-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 26px;
  height: 40px;
  margin-left: -13px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.28);
}

.hero-hint span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--text-2);
  animation: hint 1.8s 2.6s ease-in-out infinite;
}

@keyframes hint {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Frase che si accende parola per parola ---------- */

.statement-track {
  position: relative;
  z-index: 2;
  height: 230svh;
  margin-top: -80svh;
  pointer-events: none;
}

.statement {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.statement-text {
  max-width: 1040px;
  margin: 0;
  font-size: clamp(34px, 6.6vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text);
}

.statement-text .w {
  display: inline;
  opacity: 0.16;
  transition: color 300ms ease;
}

.statement-text .w.lit[data-c="green"] { color: var(--brand-green); }
.statement-text .w.lit[data-c="blue"] { color: var(--brand-blue); }
.statement-text .w.lit[data-c="magenta"] { color: var(--brand-magenta); }

/* ---------- Comparse ---------- */

.day-stage {
  perspective: 1400px;
}

.day {
  transform-origin: 50% 100%;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(10px);
  transition:
    opacity 900ms ease-out,
    transform 1100ms var(--ease-out),
    filter 900ms ease-out;
  transition-delay: calc(var(--d, 0) * 110ms);
}

.js [data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}

.js [data-reveal-group] .feats li {
  opacity: 0;
  transform: translateY(46px) scale(0.95);
  filter: blur(8px);
  transition:
    opacity 800ms ease-out,
    transform 1000ms var(--ease-out),
    filter 800ms ease-out;
}

.js [data-reveal-group] .feats li:nth-child(2) { transition-delay: 90ms; }
.js [data-reveal-group] .feats li:nth-child(3) { transition-delay: 180ms; }
.js [data-reveal-group] .feats li:nth-child(4) { transition-delay: 270ms; }

.js [data-reveal-group].in .feats li {
  opacity: 1;
  transform: none;
  filter: none;
}

.trust {
  transform-origin: 50% 100%;
}

.js .trust-lumen {
  transform: scale(0.4) translateY(30px);
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 250ms, opacity 400ms ease 250ms;
}

.js .trust.in .trust-lumen {
  transform: none;
  opacity: 1;
}

/* Senza movimento: niente blocchi, tutto gia' al suo posto. */
.calm .hero-track,
.calm .statement-track {
  height: auto;
  margin-top: 0;
}

.calm .home .hero-track .hero,
.calm .statement {
  position: relative;
  height: auto;
  min-height: 0;
}

.calm .home .hero-track .hero {
  min-height: min(760px, 92svh);
}

.calm .statement {
  padding: 72px 16px;
}

.calm .statement-text .w {
  opacity: 1;
}

.calm .hero-hint {
  display: none;
}

.calm [data-reveal],
.calm [data-reveal-group] .feats li,
.calm .trust-lumen {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 560px) {
  .hero-track { height: 190svh; }
  .statement-track { height: 210svh; }
}