/* ==========================================================================
   VETRINA
   Regole che mi sono dato: niente librerie, niente immagini pesanti,
   animazioni solo in CSS e solo dove servono. Deve aprirsi in un attimo
   anche su un telefono vecchio con la rete lenta — è lì che sta chi cerca compagnia.
   ========================================================================== */

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--ink-700); padding: .6rem 1rem; border-radius: var(--r-md); }

/* ---------- barra in alto ---------- */
.nav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--ink-900) 72%, transparent); border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease); }
.nav.stuck { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 1.4rem; padding: .85rem 0; }
.nav .brand { margin: 0; text-decoration: none; font-size: 1.2rem; }
.nav .brand em { display: none; }
.nav__links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--muted); font-size: .9rem; transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__right { display: flex; align-items: center; gap: .7rem; }
.lang { display: flex; gap: .2rem; }
.lang button { background: none; border: 0; cursor: pointer; font-size: 1rem; padding: .25rem .3rem;
  border-radius: var(--r-sm); opacity: .45; transition: .2s var(--ease); }
.lang button:hover, .lang button.on { opacity: 1; background: rgba(255,255,255,.07); }
.btn.small { padding: .55rem 1.1rem; font-size: .9rem; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.5rem; align-items: center; padding: 4.5rem 0 5rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; text-transform: uppercase;
  letter-spacing: .18em; font-size: .72rem; color: var(--warm); margin-bottom: 1.1rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 0 var(--warm); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 10px rgba(255,176,138,0); } }
.hero h1 { font-size: clamp(2.7rem, 6.2vw, 4.6rem); margin-bottom: 1.2rem; }
.lead { font-size: 1.12rem; max-width: 50ch; }
.hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.8rem 0 1.4rem; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; padding: 0; margin: 0; }
.trust li { font-size: .85rem; color: var(--faint); display: flex; align-items: center; gap: .4rem; }
.trust li::before { content: '✓'; color: var(--ok); font-weight: 600; }

/* ---------- telefono ---------- */
.hero__demo { position: relative; display: grid; place-items: center; }
.hero__glow { position: absolute; inset: 10% 5%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,143,158,.22), transparent 70%); filter: blur(40px); }
.phone { position: relative; width: min(370px, 100%); border-radius: 38px; overflow: hidden;
  background: color-mix(in srgb, var(--ink-800) 94%, transparent);
  border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.phone__notch { width: 120px; height: 22px; background: var(--ink-900); border-radius: 0 0 14px 14px; margin: 0 auto; }
.phone__top { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.phone__top svg { border-radius: 50%; flex: none; }
.phone__who { flex: 1; min-width: 0; }
.phone__who b { font-family: var(--font-display); font-weight: 400; display: block; }
.phone__live { font-size: .68rem; color: var(--ok); display: flex; align-items: center; gap: .3rem; }
.phone__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.phone__thread { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; min-height: 340px; }
.phone .bubble { font-size: .92rem; max-width: 85%; }

/* ---------- sezioni ---------- */
.band { padding: 5rem 0; }
.kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; color: var(--warm); margin-bottom: .6rem; }
.band > h2, .band .wrap > h2 { margin-bottom: 1rem; }

.steps { list-style: none; padding: 0; margin: 2.6rem 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem; counter-reset: s; }
.step { position: relative; padding-top: .5rem; }
.step__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--font-display); font-size: 1.2rem; color: #2a1318;
  background: linear-gradient(135deg, var(--warm), var(--warm-2)); margin-bottom: .9rem; }
.step h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.step p { font-size: .95rem; margin: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split--rev .memo { order: -1; }

.ways { display: grid; gap: .9rem; margin-top: 1.8rem; }
.way { padding: 1.1rem 1.2rem; border-radius: var(--r-md); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink-800) 60%, transparent); transition: .2s var(--ease); }
.way:hover { border-color: color-mix(in srgb, var(--warm) 45%, transparent); transform: translateX(4px); }
.way b { display: block; font-weight: 500; margin-bottom: .2rem; }
.way span { font-size: .92rem; color: var(--muted); }

/* anteprima live */
.live-demo { text-align: center; }
.live-demo__face { display: inline-block; }
.live-demo__face svg { border-radius: 28px; box-shadow: var(--shadow-soft); animation: breathe 5s ease-in-out infinite; }
.live-demo__wave { display: flex; gap: 4px; justify-content: center; align-items: flex-end; height: 34px; margin: 1.2rem 0 .6rem; }
.live-demo__wave i { width: 4px; background: linear-gradient(180deg, var(--warm), var(--warm-2));
  border-radius: 4px; animation: wave 1.1s ease-in-out infinite; }
.live-demo__wave i:nth-child(2n) { animation-delay: .12s; }
.live-demo__wave i:nth-child(3n) { animation-delay: .26s; }
.live-demo__wave i:nth-child(4n) { animation-delay: .38s; }
@keyframes wave { 0%, 100% { height: 8px; opacity: .5; } 50% { height: 30px; opacity: 1; } }

/* memoria */
.memo { padding: 1.6rem; }
.memo h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0 0 1rem; }
.memo__row { display: flex; gap: .8rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.memo__row:last-child { border: 0; }
.memo__row b { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--warm); min-width: 108px; }
.memo__row span { font-size: .93rem; color: var(--muted); }

/* galleria che scorre */
.marquee { display: flex; gap: 1rem; margin: 2.4rem 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 1rem; animation: slide 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.mcard { text-align: center; flex: none; width: 128px; }
.mcard svg, .mcard img { border-radius: 50%; width: 104px; height: 104px; object-fit: cover; }
.mcard b { display: block; font-family: var(--font-display); font-weight: 400; font-size: .98rem; margin-top: .5rem; }

/* prezzi */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-top: 2.6rem; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); max-width: 780px; margin-inline: auto; }
.feature { padding: 1.7rem; text-align: left; }
.feature h3 { font-size: 1.2rem; margin: 0 0 .3rem; }

/* domande */
.faq { margin-top: 2rem; max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq summary { cursor: pointer; font-size: 1.04rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--warm); font-size: 1.4rem; line-height: 1; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: .8rem 0 0; font-size: .95rem; max-width: 66ch; }

.honest { border-top: 1px solid var(--line); }

/* piede */
.footer { padding: 3.5rem 0 4rem; border-top: 1px solid var(--line); }
.footer__top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.footer__links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer__links a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.footer__links a:hover { color: var(--text); }
.footer p { font-size: .82rem; }

/* comparsa al primo sguardo, senza librerie */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track, .live-demo__face svg, .dot { animation: none; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2.6rem; padding: 2.5rem 0 3rem; }
  .split, .split--rev { grid-template-columns: 1fr; gap: 2rem; }
  .split--rev .memo { order: 0; }
  .nav__links { display: none; }
  .band { padding: 3.5rem 0; }
}

/* le sei carte "chi vorresti accanto" in vetrina: link, non bottoni */
.home .intent__card { text-decoration: none; }
.home .intent__grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); max-width: 1000px; }
@media (min-width: 1000px) { .home .intent__grid { grid-template-columns: repeat(3, 1fr); } }
.plan .price { font-family: var(--font-display); font-size: 2.4rem; margin: .2rem 0 .6rem; }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.plan li { padding-left: 1.5rem; position: relative; font-size: .92rem; color: var(--muted); margin-bottom: .45rem; }
.plan li::before { content: '✦'; position: absolute; left: 0; color: var(--warm); }

/* ---------- pagine di testo (privacy, termini) ---------- */
.doc { max-width: 780px; padding: 3rem 0 5rem; }
.doc h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: .3rem; }
.doc .updated { color: var(--faint); font-size: .85rem; margin-bottom: 2.5rem; }
.doc h2 { font-size: 1.35rem; margin: 2.4rem 0 .6rem; }
.doc p, .doc li { color: var(--muted); font-size: .97rem; line-height: 1.65; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: .4rem; }
.doc a { color: var(--warm); }
.doc .todo { background: rgba(255,196,107,.1); border: 1px solid rgba(255,196,107,.3);
  border-radius: var(--r-md); padding: .9rem 1.1rem; color: var(--warn); font-size: .9rem; }

/* ---------- vetrina delle persone ---------- */
.vetrina {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.persona {
  position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  aspect-ratio: 3 / 4; background: var(--ink-700); border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  text-decoration: none; display: block;
}
.persona:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--warm) 55%, transparent); box-shadow: 0 20px 44px rgba(0,0,0,.45); }
.persona img, .persona svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,6,12,.92) 0%, rgba(8,6,12,.35) 38%, transparent 62%);
}
.persona__testo { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .85rem; }
.persona__testo b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; }
.persona__testo span { font-size: .74rem; color: var(--muted); display: block; line-height: 1.35; }
.persona__bio { margin-top: .25rem; max-height: 2.7em; overflow: hidden; }
.persona__stato {
  position: absolute; top: .7rem; right: .7rem; font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: #cfe9d6; background: rgba(12,28,18,.72);
  border: 1px solid rgba(127,209,164,.35); padding: .2rem .5rem; border-radius: var(--r-full);
  backdrop-filter: blur(6px); display: flex; align-items: center; gap: .3rem;
}
.persona__stato::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }
@media (max-width: 640px) { .vetrina { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; } }

/* il piano consigliato si distingue senza urlare */
.plan { position: relative; }
.plan__nastro {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--warm), var(--warm-2)); color: #2a1318;
  padding: .2rem .7rem; border-radius: var(--r-full); white-space: nowrap;
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: 1000px; }

/* i filmati nella vetrina */
.persona video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* e chi non ha il filmato si muove lo stesso: deriva lenta, diversa per ognuno.
   Costa zero e basta a togliere l'aria da fotografia ferma. */
.persona img { animation: deriva 26s ease-in-out infinite alternate; transform-origin: center 35%; }
.persona:nth-child(3n) img { animation-duration: 19s; transform-origin: 40% 30%; }
.persona:nth-child(3n+1) img { animation-duration: 31s; transform-origin: 60% 40%; }
.persona:nth-child(4n) img { animation-direction: alternate-reverse; }
@keyframes deriva { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .persona img { animation: none; } }

/* ==========================================================================
   IMPIANTO DA PIATTAFORMA (ispirato a come è costruito kupid.ai)
   striscia promo · barra laterale · pannello centrale · volti tondi
   Colori nostri: notte calda, non neon da sexy shop.
   ========================================================================== */

/* --- striscia promo: la prima riga che si legge --- */
.promo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .55rem 1rem; font-size: .85rem;
  background: linear-gradient(90deg, #2a1a2e, #3a2030 45%, #2a1a2e);
  border-bottom: 1px solid color-mix(in srgb, var(--warm) 30%, transparent);
}
.promo b { font-weight: 500; color: var(--text); }
.promo__btn {
  background: linear-gradient(135deg, var(--warm), var(--warm-2)); color: #2a1318;
  padding: .3rem .9rem; border-radius: var(--r-full); font-size: .8rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.promo__btn:hover { filter: brightness(1.08); }

/* --- barra laterale sempre presente --- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: 66px; z-index: 35;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .8rem 0; background: color-mix(in srgb, var(--ink-900) 92%, transparent);
  border-right: 1px solid var(--line); backdrop-filter: blur(14px);
}
.rail__logo { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .6rem; }
.rail__logo .brand__mark { width: 30px; height: 30px; }
.rail__voce {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  color: var(--faint); transition: .18s var(--ease); border: 1px solid transparent;
}
.rail__voce:hover { color: var(--text); background: rgba(255,255,255,.06); }
.rail__voce.on { color: var(--warm); background: rgba(255,176,138,.12); border-color: rgba(255,176,138,.28); }
.rail__voce--oro {
  margin-top: auto; background: linear-gradient(135deg, var(--warm), var(--warm-2));
  color: #2a1318; box-shadow: 0 6px 20px rgba(255,143,158,.3);
}
.rail__voce--oro:hover { color: #2a1318; filter: brightness(1.08); }

/* il contenuto si sposta per far posto alla barra */
body.home { padding-left: 66px; }
.promo { margin-left: -66px; padding-left: calc(1rem + 66px); }

/* --- pannello centrale: è qui che si sceglie --- */
.pannello {
  padding: 2.2rem 1.8rem 2rem; border-radius: var(--r-xl);
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,176,138,.08), transparent 60%),
              color-mix(in srgb, var(--ink-800) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--warm) 26%, transparent);
  box-shadow: 0 0 60px rgba(255,143,158,.07), inset 0 1px 0 rgba(255,255,255,.05);
}
.pannello h2 { margin-bottom: .4rem; }
.pannello .lead { max-width: 60ch; margin-bottom: 1.6rem; }

/* --- riga di volti tondi, tipo storie --- */
.storie {
  display: flex; align-items: flex-start; gap: .9rem; overflow-x: auto;
  padding: .3rem .2rem 1.2rem; scrollbar-width: none;
}
.storie::-webkit-scrollbar { display: none; }
.storia { flex: none; width: 82px; text-align: center; text-decoration: none; }
.storia__anello {
  /* era uno <span>, cioè in linea: larghezza e altezza non venivano applicate
     e i volti uscivano ovali. Deve essere un blocco. */
  display: block; box-sizing: border-box;
  width: 74px; height: 74px; aspect-ratio: 1; border-radius: 50%; padding: 2px; margin-inline: auto;
  background: linear-gradient(135deg, var(--warm), var(--warm-2), var(--lilac));
  transition: transform .2s var(--ease);
}
.storia:hover .storia__anello { transform: scale(1.07); }
.storia__anello img, .storia__anello video, .storia__anello svg {
  width: 100%; height: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--ink-800); box-sizing: border-box;
}
.storia b { display: block; font-size: .76rem; font-weight: 500; color: var(--muted); margin-top: .35rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storia b::after { content: ' ●'; color: var(--ok); font-size: .55rem; vertical-align: middle; }

/* --- barra dei filtri dentro il pannello --- */
.filtri {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .7rem .9rem; margin-bottom: 1.2rem; border-radius: var(--r-md);
  background: rgba(0,0,0,.25); border: 1px solid var(--line);
}
.filtri__eti { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }

@media (max-width: 900px) {
  .rail { flex-direction: row; top: auto; bottom: 0; right: 0; width: auto; height: 60px;
          border-right: 0; border-top: 1px solid var(--line); justify-content: space-around; padding: 0 .4rem; }
  .rail__logo { display: none; }
  .rail__voce--oro { margin-top: 0; }
  body.home { padding-left: 0; padding-bottom: 60px; }
  .promo { margin-left: 0; padding-left: 1rem; font-size: .78rem; flex-wrap: wrap; }
  .pannello { padding: 1.4rem 1rem 1.6rem; border-radius: var(--r-lg); }
}

/* il marchio nella barra in alto: un filo più grande, respira meglio */
.nav .brand { gap: .5rem; }
.nav .brand__mark { width: 30px; height: 30px; }
.rail__logo .brand__mark { width: 30px; height: 30px; }

/* ---------------------------------------------------------------------------
   IL PEZZO DEL TITOLO CHE DEVE RESTARE IN TESTA
   Il titolo intero in bianco pieno non si legge: l'occhio non sa dove posarsi.
   Una metà in grigio caldo e una in bianco con l'alone dà la gerarchia —
   è il trucco che usa Kupid su "Perfect Match!".
   --------------------------------------------------------------------------- */
.display .spicca {
  font-style: normal;
  color: #fff;
  text-shadow: 0 0 42px rgba(255, 176, 138, .5), 0 0 90px rgba(224, 106, 140, .25);
}
.hero .display { color: #e6dcd6; }

/* la spunta: piccola, accanto al nome, mai più alta della riga */
.spunta {
  width: 13px !important; height: 13px !important; margin-left: .32em;
  vertical-align: -.08em; flex: none; display: inline-block;
}
.storia .spunta { width: 11px !important; height: 11px !important; }
/* nome e spunta sono un blocco solo: altrimenti su schede strette la spunta
   scivola sulla riga sotto e sembra un errore */
.persona__testo b { display: flex; align-items: center; gap: .1em; white-space: nowrap; }

/* le icone social sulla scheda: in alto a sinistra, discrete finché non passi sopra */
.persona__social {
  position: absolute; top: .55rem; left: .6rem; z-index: 3;
  pointer-events: none;          /* decorative: il clic deve arrivare alla scheda */
  display: flex; gap: .35rem; color: rgba(255,255,255,.75);
  opacity: .55; transition: opacity .25s var(--ease);
}
.persona:hover .persona__social { opacity: 1; }
.persona__social svg {
  width: 15px; height: 15px; display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.storia b { display: inline-flex; align-items: center; justify-content: center; }