/* ===========================================================
   Wanesa Kowal — Brand stylesheet v5
   Palette a base lilla piu neutri caldi, con un accento
   dedicato di blu indaco riservato agli elementi che devono
   comunicare fiducia in modo diretto (pulsante di contatto,
   credenziali, prova sociale). Il blu indaco resta minoritario,
   circa il 10% della palette, il lilla resta il colore dominante.
   Aggiunta introdotta dallo Studio di Brand Identity, luglio 2026.
   Font: Fraunces (titoli) + Manrope (testo)
   =========================================================== */

:root {
  --inchiostro: #35303D;   /* testo principale, mai usato come sfondo esteso */
  --lilla: #6E5B93;        /* colore brand primario */
  --lilla-deep: #574876;   /* hover / testo enfatizzato */
  --lilla-mid: #9483B0;    /* accento secondario, stessa famiglia del lilla */
  --lilla-chiaro: #EFEAF6; /* tint per sfondi di sezione e badge */
  --sabbia: #F1EAE0;       /* secondo tint neutro caldo, per alternare sezioni senza usare un'altra tinta */
  --panna: #FBF9F6;        /* sfondo principale, molto chiaro */
  --bianco: #FFFFFF;
  --bordo: #E9E3DC;
  --blu-indaco: #3E4A73;        /* accento fiducia, uso mirato: CTA di contatto, credenziali, prova sociale */
  --blu-indaco-deep: #2E3860;   /* hover del blu indaco */
  --blu-indaco-chiaro: #E7E9F0; /* tint per sfondi molto piccoli, badge e icone */

  --font-titoli: "Playfair Display", Georgia, serif;
  --font-testo: "DM Sans", "Segoe UI", sans-serif;

  --max-width: 1120px;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--panna);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--inchiostro);
  line-height: 1.18;
  margin: 0 0 0.5em;
}

a { color: var(--lilla); text-decoration: none; }
a:hover { color: var(--lilla-deep); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-size: 12.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--lilla-deep);
  font-weight: 700;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* ---------- Header / Nav ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 246, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
header.site-header.scrolled {
  background: rgba(251, 249, 246, 0.97);
  border-bottom-color: var(--bordo);
  box-shadow: 0 6px 24px rgba(53, 48, 61, 0.05);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  color: var(--lilla);
  line-height: 1;
}
.logo .brand-mark { display: block; transition: transform 0.25s ease; }
.logo:hover .brand-mark { transform: scale(1.06); }
.logo .mark-ring {
  fill: none;
  stroke: var(--lilla);
  stroke-width: 2.2;
  transition: stroke 0.2s ease;
}
.logo .mark-w {
  fill: none;
  stroke: var(--lilla);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}
.logo .mark-k {
  fill: none;
  stroke: var(--lilla-deep);
  stroke-width: 5;
  stroke-linecap: round;
}
.logo:hover .mark-ring,
.logo:hover .mark-w { stroke: var(--lilla-deep); }

/* Nome per esteso accanto al monogramma, nel font dei titoli del brand */
.logo { gap: 12px; }
.logo .logo-name {
  font-family: var(--font-titoli);
  font-size: 23px;
  font-weight: 700;
  color: var(--inchiostro);
  letter-spacing: 0.1px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.logo:hover .logo-name { color: var(--lilla-deep); }

/* Nav orizzontale con effetto "evidenziatore" al passaggio del mouse:
   una striscia di colore compare da sinistra dietro al testo. */
#nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
#nav-list li a {
  position: relative;
  color: var(--inchiostro);
  font-weight: 700;
  font-size: 15px;
  padding: 6px 5px;
  background-image: linear-gradient(rgba(110,91,147,0.45), rgba(110,91,147,0.45));
  background-repeat: no-repeat;
  background-size: 0% 55%;
  background-position: 3px 82%;
  transition: background-size 0.3s ease, color 0.15s ease 0.05s;
}
#nav-list li a:hover,
#nav-list li a.active {
  color: var(--inchiostro);
  background-size: calc(100% - 6px) 55%;
}

#nav-list li a.nav-cta {
  background-image: none;
  background: var(--blu-indaco);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
}
#nav-list li a.nav-cta:hover { background: var(--blu-indaco-deep); background-size: auto; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 22px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--inchiostro);
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-toggle.open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--lilla-chiaro) 0%, var(--panna) 65%);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%; right: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(110,91,147,0.16), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -25%; left: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(148,131,176,0.14), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1.eyebrow { font-family: var(--font-testo); line-height: 1.4; margin: 0; }
.hero .hero-title {
  font-family: var(--font-titoli);
  font-size: clamp(40px, 4.6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.08;
  color: var(--inchiostro);
  max-width: 620px;
  margin: 18px 0 26px;
}
/* "davvero": pennellata sottile sotto la parola. L'evidenziatore pieno e riservato ai link, cosi non sembra cliccabile */
.hero .hero-title em {
  font-style: normal;
  color: inherit;
  padding: 0 2px 0.08em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3,9 C38,4.5 112,3 197,5.5 C198.5,6 198.5,8 197,8.5 C128,8.5 62,10 6,12.5 C2.5,12.6 1.6,9.8 3,9 Z' fill='%238F7BB5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.2em;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-title em { animation: brush-in 0.9s ease 0.5s both; }
}
@keyframes brush-in { from { background-size: 0% 0.2em; } to { background-size: 100% 0.2em; } }
.hero p.lead {
  font-size: 19px;
  max-width: 560px;
  color: var(--inchiostro);
  opacity: 0.75;
  margin-bottom: 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--lilla);
  color: #fff;
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(110,91,147,0.3); background: var(--lilla-deep); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-outline {
  border: 1.5px solid var(--lilla);
  color: var(--lilla);
  margin-left: 12px;
  background: transparent;
}
.btn-outline:hover { color: #fff; background: var(--lilla); }

/* ---------- Marquee / trust bar ---------- */
.trust-bar {
  background: var(--bianco);
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  padding: 30px 0;
  overflow: hidden;
}
.trust-bar .label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.trust-bar .label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blu-indaco);
  font-weight: 700;
}
.marquee-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  cursor: grab;
}
.marquee-wrap::-webkit-scrollbar { display: none; }
.marquee-wrap:active { cursor: grabbing; }
.marquee {
  display: flex;
  width: max-content;
  gap: 20px;
}
.marquee a {
  font-family: var(--font-titoli);
  font-size: 19px;
  color: var(--inchiostro);
  white-space: nowrap;
  padding: 8px 22px;
  /* evidenziatore lilla come le voci del menu: la striscia scorre da sinistra */
  background-image: linear-gradient(rgba(110,91,147,0.45), rgba(110,91,147,0.45));
  background-repeat: no-repeat;
  background-size: 0% 42%;
  background-position: 22px 78%;
  transition: background-size 0.3s ease, color 0.15s ease;
}
.marquee a:hover,
.marquee a:focus-visible {
  color: var(--inchiostro);
  background-size: calc(100% - 44px) 42%;
}

/* ---------- Stats strip ---------- */
.stats-strip {
  background: var(--panna);
  border-bottom: 1px solid var(--bordo);
  padding: 44px 0;
}
.stats-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
.stats-row .stat { flex: 0 1 260px; }
.stat { text-align: center; }
.stat .num {
  display: block;
  font-family: var(--font-titoli);
  font-size: 40px;
  color: var(--blu-indaco);
  line-height: 1;
  margin-bottom: 10px;
}
.stat-label {
  font-size: 13.5px;
  color: var(--inchiostro);
  opacity: 0.7;
  line-height: 1.4;
}

/* Testimonianze: pannello unico con numeri a sinistra e citazioni in card */
.proof-panel {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px clamp(24px, 4vw, 56px);
  background: var(--lilla-chiaro);
  border-radius: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
/* Numeri chiave sotto la foto in "Chi sono" */
.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
  padding: 22px 14px;
  background: var(--lilla-chiaro);
  border-radius: var(--radius);
  text-align: center;
}
.proof-stats .stat { display: flex; flex-direction: column; align-items: center; }
.stat-icon .si-bg { fill: var(--bianco); }
.stat-icon .si-line { fill: none; stroke: var(--lilla); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stat-icon .si-dot { fill: var(--blu-indaco); }
.proof-stats .stat .num {
  font-size: 40px;
  font-weight: 700;
  /* Playfair usa di default le cifre "da testo" di altezze diverse: qui servono quelle allineate */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: var(--inchiostro);
  margin-bottom: 6px;
}
.proof-stats .stat-label { font-size: 13.5px; color: var(--lilla-deep); opacity: 1; max-width: 150px; }

.testimonial {
  position: relative;
  background: var(--bianco);
  border: 1.5px solid var(--inchiostro);
  border-radius: 32px;
  padding: 40px clamp(26px, 3vw, 44px) 36px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* La testimonianza lunga sta in alto, larga, col testo su due colonne */
.testimonial-long { margin-top: -110px; }

.testimonial-long .quote-preview, .testimonial-long .quote-full { columns: 2; column-gap: 44px; }
.testimonial-long .quote-preview p, .testimonial-long .quote-full p { margin: 0 0 0.9em; }
.testimonial-long .quote-preview p:last-child, .testimonial-long .quote-full p:last-child { margin-bottom: 0; }
/* "Leggi di più": espande la referenza completa di Danny */
.read-more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 2px 2px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-testo); font-size: 15px; font-weight: 700;
  color: var(--blu-indaco);
  background-image: linear-gradient(rgba(110,91,147,0.45), rgba(110,91,147,0.45));
  background-repeat: no-repeat; background-position: 0 85%; background-size: 0% 45%;
  transition: background-size 0.3s ease;
}
.read-more:hover, .read-more:focus-visible { background-size: 100% 45%; }
.read-more .arrow { transition: transform 0.25s ease; }
.read-more[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.testimonial-mark {
  font-family: var(--font-titoli);
  font-size: 110px;
  line-height: 1;
  height: 40px;
  margin-top: -8px;
  overflow: hidden;
  color: var(--lilla-mid);
  opacity: 0.55;
  display: block;
}
.testimonial blockquote {
  font-family: var(--font-testo);
  font-size: 16px;
  line-height: 1.75;
  color: var(--inchiostro);
  margin: 0;
  quotes: none;
}
.testimonial blockquote p { margin: 0 0 0.9em; }
.testimonial blockquote p:last-child { margin-bottom: 0; }
.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.testimonial-author .author-name {
  font-family: var(--font-testo);
  font-weight: 700;
  color: var(--lilla);
  font-size: 18px;
}
.testimonial-author .author-role {
  font-size: 14px;
  color: var(--inchiostro);
  opacity: 0.65;
  line-height: 1.4;
}
#testimonianze { padding: 48px 0 40px; }
#testimonianze .section-heading { margin-bottom: 130px; }

@media (max-width: 1080px) {
  .proof-panel { grid-template-columns: 1fr; margin: 0 24px; }
  .testimonial-long { margin-top: 0; }
  .testimonial-long .quote-preview, .testimonial-long .quote-full { columns: 1; }
  #testimonianze .section-heading { margin-bottom: 48px; }
}
@media (max-width: 760px) {
  .proof-panel { grid-template-columns: 1fr; margin: 0 16px; border-radius: 28px; padding: 36px 20px; }
  .proof-stats .stat .num { font-size: 30px; }
  .proof-stats .stat-label { font-size: 13.5px; }
  .proof-stats .stat-icon { width: 40px; height: 40px; }
  .testimonial { border-radius: 24px; padding: 32px 22px 28px; }
}

/* Contatti: fascia blu indaco con onda in alto, foto tonda che invita a scrivere */
#contatti {
  position: relative;
  background: var(--blu-indaco);
  color: #fff;
  padding: 110px 0 90px;
  overflow: hidden;
}
#contatti .contact-wave {
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 70px;
  display: block;
}
#contatti .contact-wave .wave-back { fill: var(--lilla-mid); opacity: 0.45; }
#contatti .contact-wave .wave-front { fill: var(--panna); }
.contact-band {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 60px;
  align-items: center;
}
.contact-band .eyebrow { color: #C9C2DD; display: inline-block; margin-bottom: 14px; }
.contact-band h2 {
  font-size: clamp(36px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 22px;
}
/* "da dove partire?" evidenziato come "davvero" nell'hero, in lilla per staccare dal blu */
.contact-band h2 .contact-mark {
  color: #fff;
  background-color: transparent;
  padding: 0 2px 0.08em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3,9 C38,4.5 112,3 197,5.5 C198.5,6 198.5,8 197,8.5 C128,8.5 62,10 6,12.5 C2.5,12.6 1.6,9.8 3,9 Z' fill='%23C9B8EC'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.contact-band p {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  max-width: 560px;
  margin: 0 0 38px;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}
.btn-light {
  background: #fff;
  color: var(--blu-indaco);
  padding: 18px 34px;
  font-size: 16.5px;
  box-shadow: 0 14px 30px rgba(20,24,45,0.25);
}
.btn-light:hover { color: var(--blu-indaco-deep); transform: translateY(-2px); background: var(--lilla-chiaro); }
.contact-links { display: flex; gap: 22px; }
.contact-links a {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid rgba(255,255,255,0.4);
  transition: border-color 0.2s ease;
}
.contact-links a:hover { color: #fff; border-bottom-color: #fff; }
.contact-photo { display: flex; justify-content: center; position: relative; }
/* La busta col sigillo WK appoggiata sul bordo della foto, con un leggero ondeggiare */
.contact-photo .contact-envelope {
  position: absolute;
  left: calc(50% - 250px);
  bottom: -26px;
  width: 190px;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(20,24,45,0.35));
}
@media (prefers-reduced-motion: no-preference) {
  .contact-photo .contact-envelope { animation: envelope-float 5s ease-in-out infinite; }
}
@keyframes envelope-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
}
.contact-photo img {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 48% 6%;
  border: 8px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 60px rgba(20,24,45,0.35);
}
@media (max-width: 900px) {
  #contatti { padding: 110px 0 80px; }
  .contact-band { grid-template-columns: 1fr; gap: 40px; }
  .contact-photo { order: -1; }
  .contact-photo img { max-width: 240px; }
  .contact-photo .contact-envelope { width: 120px; left: calc(50% - 170px); bottom: -14px; }
}

/* Floating action button "torna in cima" */
.fab-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--blu-indaco); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  box-shadow: 0 12px 28px rgba(53, 48, 61, 0.28);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.18s ease;
  z-index: 100; padding: 0;
}
.fab-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fab-top:hover { background: var(--blu-indaco-deep); }
.fab-top:focus-visible { outline: 2px solid var(--lilla); outline-offset: 3px; }
.fab-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Inline stats box (chi-sono section) */
.about-stats {
  margin-top: 28px;
  padding: 22px clamp(20px, 3vw, 32px);
  background: var(--panna);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
}
.about-stats .stat + .stat { border-left: 1px solid var(--bordo); padding-left: 16px; }
.about-stats .stat { display: flex; flex-direction: column; justify-content: center; min-height: 90px; }
.about-stats .stat .num { font-size: 34px; margin-bottom: 6px; }
.about-stats .stat-label { font-size: 12.5px; letter-spacing: 0.3px; }
.about-stats .stat-note { display: block; margin-top: 4px; font-size: 11px; color: var(--inchiostro); opacity: 0.55; letter-spacing: 0.4px; text-transform: uppercase; }
@media (max-width: 620px) {
  .about-stats { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .about-stats .stat + .stat { border-left: 0; border-top: 1px solid var(--bordo); padding-left: 0; padding-top: 16px; }
}

/* ---------- Sections ---------- */
section { padding: 72px 0; }
section.tight { padding: 70px 0; }
section.alt { background: var(--lilla-chiaro); }
section.alt-2 { background: var(--sabbia); }
/* Progetti in home: meno aria tra un progetto e l'altro */
section.case-section { padding: 56px 0; }
section#portfolio.case-section { padding-top: 90px; }

.section-heading { margin-bottom: 48px; max-width: 620px; }
.section-heading h2 { font-size: 36px; margin-top: 10px; }
.section-heading p { opacity: 0.7; font-size: 16.5px; margin-top: 10px; }

/* ---------- Chi sono ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  background: var(--bianco);
  border: 1px solid var(--bordo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, var(--lilla-chiaro), transparent 45%),
    radial-gradient(circle at 85% 90%, var(--sabbia), transparent 45%);
}
.photo-frame .frame-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 30px;
}
.photo-frame .profile-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-frame .monogram {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 72px;
  color: var(--lilla);
  line-height: 1;
  margin-bottom: 14px;
}
.photo-frame .caption {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lilla-deep);
  opacity: 0.8;
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid var(--lilla-chiaro);
  border-radius: calc(var(--radius) - 6px);
  z-index: 1;
  pointer-events: none;
}
.photo-frame .accent-ring {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.photo-frame .accent-ring-1 {
  width: 60px; height: 60px;
  top: 22px; right: 22px;
  border: 1.5px dashed var(--lilla-mid);
  opacity: 0.55;
}
.photo-frame .accent-ring-2 {
  width: 36px; height: 36px;
  bottom: 28px; left: 24px;
  border: 6px solid var(--sabbia);
  opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
  .photo-frame .accent-ring-1 { animation: float-slow 7s ease-in-out infinite; }
  .photo-frame .accent-ring-2 { animation: float-slow 8s ease-in-out infinite reverse; }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.about-lead {
  font-size: 20px;
  font-family: var(--font-titoli);
  color: var(--inchiostro);
  margin-bottom: 14px;
  line-height: 1.4;
}
/* Frecce tratteggiate tra i paragrafi di "Chi sono", come appunti a mano */
.flow-arrow {
  display: block;
  width: 54px;
  height: 64px;
  margin: -22px 0 -8px;
  overflow: visible;
}
.flow-arrow.flow-right { margin-left: auto; margin-right: 18%; }
.flow-arrow.flow-left { margin-left: 16%; transform: scaleX(-1); }
.flow-arrow .fa-line { fill: none; stroke: var(--lilla-deep); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 3.5 4.5; }
.flow-arrow .fa-head { fill: none; stroke: var(--lilla-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-grid h3.sub {
  font-size: 20px;
  margin-top: 24px;
  color: var(--lilla-deep);
}

.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tag {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  color: var(--lilla);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.tag:hover { background: var(--lilla); color: var(--bianco); }

/* ---------- Metodo ---------- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 20px;
  position: relative;
}
@media (min-width: 901px) {
  .method-grid::before {
    content: "";
    position: absolute;
    top: 54px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 1px;
    background-image: linear-gradient(90deg, var(--lilla-mid) 0 6px, transparent 6px 16px);
    background-size: 16px 1px;
    background-repeat: repeat-x;
    opacity: 0.55;
  }
}
.method-step {
  padding: 32px 26px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
}
.method-step:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(53,48,61,0.08); }
.method-step .step-num {
  font-family: var(--font-titoli);
  font-size: 34px;
  color: var(--lilla);
  display: block;
  margin-bottom: 14px;
}
.method-step h3 { font-size: 19px; }
.method-step p { font-size: 15px; opacity: 0.75; }

/* ---------- Portfolio filter ---------- */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.filter-btn {
  border: 1px solid var(--bordo);
  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-btn:hover { border-color: var(--lilla); color: var(--lilla); }
.filter-btn.active { background: var(--lilla); border-color: var(--lilla); color: #fff; }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.portfolio-cta { text-align: center; margin-top: 44px; }
.card {
  background: var(--bianco);
  border-radius: var(--radius);
  padding: 0;
  border: 1px solid var(--bordo);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(53, 48, 61, 0.1);
}
.card .card-media {
  height: 150px;
  background-color: var(--lilla-chiaro);
  background-image:
    radial-gradient(rgba(110,91,147,0.2) 1px, transparent 1.6px),
    linear-gradient(135deg, var(--lilla-chiaro), var(--sabbia));
  background-size: 16px 16px, 100% 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .card-media svg {
  width: 44px;
  height: 44px;
  color: var(--lilla-deep);
  opacity: 0.8;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}
.card:hover .card-media svg { transform: scale(1.1); }
.card .card-body { padding: 24px 26px 28px; }
.card .card-tag {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--lilla-deep);
  font-weight: 700;
  margin-bottom: 10px;
  display: inline-block;
}
.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { font-size: 14.5px; opacity: 0.75; margin-bottom: 16px; }
.card a.card-link {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--inchiostro);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card a.card-link .arrow { transition: transform 0.2s ease; }
.card a.card-link:hover .arrow { transform: translateX(4px); }
.card a.card-link:hover { color: var(--lilla); }

/* ---------- Testimonianze ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.testi-card {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  padding: 30px;
  position: relative;
}
.testi-card .quote-mark {
  font-family: var(--font-titoli);
  font-size: 46px;
  color: var(--lilla);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 6px;
}
.testi-card p.quote { font-size: 15.5px; margin-bottom: 18px; }
.testi-card .author { display: flex; align-items: center; gap: 12px; }
.testi-card .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lilla), var(--lilla-mid));
  flex-shrink: 0;
}
.testi-card .author strong { display: block; font-size: 14px; }
.testi-card .author span { font-size: 12.5px; opacity: 0.65; }

/* ---------- Contatti ---------- */
.contact-box {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.contact-box::before {
  content: "";
  position: absolute;
  bottom: -25%; left: -8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--sabbia), transparent 70%);
  pointer-events: none;
}
.contact-box::after {
  content: "";
  position: absolute;
  top: -25%; right: -8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--lilla-chiaro), transparent 70%);
  pointer-events: none;
}
.contact-box .container-inner { position: relative; z-index: 1; }
.contact-box h2 { margin-bottom: 8px; font-size: 32px; }
.contact-box p { opacity: 0.75; margin: 0; max-width: 460px; }

form.contact-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
  margin-top: 34px;
  position: relative;
  z-index: 1;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.contact-form input,
form.contact-form textarea {
  font-family: var(--font-testo);
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--bordo);
  background: var(--panna);
  color: var(--inchiostro);
  transition: border-color 0.2s ease, background 0.2s ease;
}
form.contact-form input::placeholder,
form.contact-form textarea::placeholder { color: rgba(53,48,61,0.4); }
form.contact-form input:focus,
form.contact-form textarea:focus {
  outline: none;
  border-color: var(--lilla);
  background: var(--bianco);
}
form.contact-form textarea { min-height: 130px; resize: vertical; }
form.contact-form button {
  justify-self: start;
  border: none;
  cursor: pointer;
  font-family: var(--font-testo);
}
/* Il pulsante di invio del form e' l'unico punto in cui il CTA primario
   diventa blu indaco: e' il momento in cui la fiducia conta di piu'. */
form.contact-form button.btn-primary {
  background: var(--blu-indaco);
}
form.contact-form button.btn-primary:hover {
  background: var(--blu-indaco-deep);
  box-shadow: 0 12px 26px rgba(62,74,115,0.3);
}

/* ---------- Footer ---------- */
footer {
  padding: 50px 0 30px;
  background: var(--panna);
  color: var(--inchiostro);
  border-top: 1px solid var(--bordo);
}
footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--bordo);
  padding-top: 26px;
  font-size: 13.5px;
  opacity: 0.85;
}
footer .footer-inner .legal-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
footer a { color: var(--inchiostro); font-weight: 700; }
footer a:hover { color: var(--inchiostro); }
/* Link del footer con l'evidenziatore del menu */
.footer-links a {
  padding: 4px 4px;
  background-image: linear-gradient(rgba(110,91,147,0.45), rgba(110,91,147,0.45));
  background-repeat: no-repeat;
  background-position: 2px 82%;
  background-size: 0% 55%;
  transition: background-size 0.3s ease;
}
.footer-links a:hover, .footer-links a:focus-visible { background-size: calc(100% - 4px) 55%; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}
.footer-links { display: flex; gap: 26px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.social-links { display: flex; gap: 14px; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  background: var(--bianco);
  color: var(--inchiostro);
  font-size: 13px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social-links a:hover { background: var(--lilla); border-color: var(--lilla); color: #fff; }

/* ---------- Case study (portfolio.html) ---------- */
.section-heading h1 { font-size: 38px; margin-top: 10px; }

/* Offset per l'header sticky quando si arriva a un progetto tramite ancora */
.case, .section-heading, .case-feature { scroll-margin-top: 96px; }

.case-grid { display: flex; flex-direction: column; gap: 90px; }
.case {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: center;
}
.case.reverse { grid-template-columns: 1.15fr 0.85fr; }
.case.reverse .case-media { order: 2; }
.case.reverse .case-body { order: 1; }
.case.text-only { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }

.case-media { display: flex; flex-direction: column; gap: 16px; }
.case-media img,
.case-media video {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  border: 1px solid var(--bordo);
  display: block;
  background: #0b0d13;
}
#sos-travel-felix-tours .case-media img { object-position: 62% 28%; }
#ente-turismo-polacco .case-media img {
  aspect-ratio: 3 / 4;
  object-position: 40% 20%;
  max-width: 360px;
  margin: 0 auto;
}
.case-media .logo-chip { max-width: 180px; }

.case-eyebrow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.case-role {
  font-family: var(--font-titoli);
  font-style: normal;
  font-weight: 600;
  color: var(--lilla-deep);
  font-size: 18px;
  margin-bottom: 10px;
}
.case-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.case-stat {
  background: var(--blu-indaco-chiaro);
  color: var(--blu-indaco-deep);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
}

/* Link "Per saperne di più" / "Visita il sito": evidenziatore lilla sempre visibile, che si riempie al passaggio */
.case .card-link,
.card a.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 0 6px;
  line-height: 1.5;
  font-weight: 700;
  font-size: 15px;
  color: var(--inchiostro);
  text-decoration: none;
  background-image: linear-gradient(rgba(110,91,147,0.4), rgba(110,91,147,0.4));
  background-repeat: no-repeat;
  background-position: 0 80%;
  background-size: 100% 48%;
  transition: background-size 0.3s ease;
}
.case .card-link:hover,
.card a.card-link:hover { color: var(--inchiostro); background-size: 100% 100%; }
.case .card-link .arrow { text-decoration: none; transition: transform 0.2s ease; }
.case .card-link:hover .arrow { transform: translateX(4px); }

.case-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.case-media .case-gallery { margin-top: 0; }
.case-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.case-gallery img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--bordo);
  display: block;
}
.case-gallery figcaption {
  font-size: 12.5px;
  opacity: 0.6;
  margin-top: 6px;
}
.case-gallery figure { margin: 0; }

.case-feature { border-top: 1px solid var(--bordo); padding-top: 70px; margin-top: 20px; }
.sub-case { margin-top: 56px; }
.sub-case:first-of-type { margin-top: 36px; }
.sub-case h3 { font-size: 22px; margin-bottom: 4px; }

/* ---------- Article page ---------- */
.article-header {
  background: var(--lilla-chiaro);
  padding: 70px 0 40px;
}
.article-header h1 { font-size: 42px; margin-top: 14px; }
.article-meta { font-size: 14px; opacity: 0.65; margin-top: 12px; }
article.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 90px;
  font-size: 18px;
}
article.article-body h2 { margin-top: 42px; font-size: 27px; }
article.article-body p { margin-bottom: 20px; }
article.article-body blockquote {
  border-left: 3px solid var(--lilla);
  margin: 34px 0;
  padding-left: 24px;
  font-style: italic;
  font-family: var(--font-titoli);
  font-size: 23px;
  color: var(--lilla);
}

/* ---------- Pagina legale (placeholder) ---------- */
.legal-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 70px 24px 100px;
}
.legal-body h1 { font-size: 36px; }
.legal-body p { margin-bottom: 18px; opacity: 0.85; }
.legal-note {
  background: var(--lilla-chiaro);
  border-radius: 12px;
  padding: 20px 24px;
  font-size: 14.5px;
  margin-top: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .blog-grid, .testi-grid, .method-grid { grid-template-columns: 1fr; }
  .hero .hero-title { font-size: 42px; }
  .hero-grid { grid-template-columns: 1fr; }
  .case, .case.reverse {
    grid-template-columns: 1fr;
  }
  .case.reverse .case-media, .case.reverse .case-body { order: initial; }
}


@media (max-width: 620px) {
  #nav-list {
    position: fixed;
    top: 68px;
    left: 16px;
    right: 16px;
    background: var(--bianco);
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    gap: 4px;
    display: none;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(53,48,61,0.15);
    border: 1px solid var(--bordo);
  }
  #nav-list.open { display: flex; }
  #nav-list li a { display: block; padding: 12px 16px; background-size: 0 0; }
  #nav-list li a.nav-cta { text-align: center; margin-top: 6px; }
  .nav-toggle { display: block; }
  .grid-cards { grid-template-columns: 1fr; }
  .hero { padding: 80px 0 50px; }
  .hero .hero-title { font-size: 32px; }
  .contact-box { padding: 36px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; }
  section { padding: 64px 0; }
}

/* ---------- Hero con foto ---------- */
.hero-rule {
  display: block;
  width: 84px; height: 4px;
  border-radius: 4px;
  background: var(--lilla);
  margin: -6px 0 26px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-indaco { background: var(--blu-indaco); color: #fff; padding: 16px 34px; font-size: 16px; }
.btn-indaco:hover { color: #fff; background: var(--blu-indaco-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(62,74,115,0.28); }
.btn-ghost { border: 1.5px solid var(--inchiostro); color: var(--inchiostro); background: transparent; padding: 15px 30px; font-size: 16px; }
.btn-ghost:hover { color: #fff; background: var(--inchiostro); }

.hero-photo { display: flex; justify-content: flex-end; }
.hero-photo-frame {
  width: 100%;
  max-width: 440px;
  padding: 14px;
  border-radius: 36px;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 24px 60px rgba(87,72,118,0.14);
}
.hero-photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 781 / 995;
  object-fit: contain;
  object-position: bottom center;
  border-radius: 26px;
  background:
    radial-gradient(circle at 30% 20%, #FFFFFF 0%, transparent 55%),
    linear-gradient(160deg, var(--lilla-chiaro) 0%, #DCD3EA 100%);
}

/* ---------- Metodo: tre crochi che crescono, ogni fiore è un progetto ---------- */
/* Sezione Metodo piu compatta: meno aria sopra e sotto */
#metodo { padding: 52px 0 44px; }
#metodo .section-heading { margin-bottom: 22px; }
.method-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}
.method-layout .method-steps { display: flex; flex-direction: column; gap: 12px; }
.method-layout .method-step { padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; }
.method-layout .method-step h3 { margin: 0 0 6px; }
.method-layout .method-step p { grid-column: 2; margin: 0; font-size: 15.5px; opacity: 0.82; }
.method-layout .method-step .step-num { font-size: 28px; margin: 0; line-height: 1; grid-row: span 2; }
.method-layout .method-step[hidden], .method-hint[hidden] { display: none; }
.method-panel { display: flex; flex-direction: column; }
.method-panel .section-heading { margin-bottom: 20px; }
@media (min-width: 901px) { .method-panel { min-height: 390px; } }
.method-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.method-tab { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--lilla); background: var(--bianco); color: var(--lilla); font-family: var(--font-titoli); font-size: 21px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.method-tab:hover { background: var(--lilla-chiaro); transform: translateY(-2px); }
.method-tab[aria-selected="true"] { background: var(--lilla); color: #fff; }
.method-tab:focus-visible { outline: 2px solid var(--blu-indaco); outline-offset: 3px; }
.method-hint { margin: 0; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 14px 18px; border: 1.5px dashed var(--lilla); border-radius: 16px; background: var(--bianco); font-size: 16px; font-weight: 600; color: var(--lilla-deep); }
.method-hint .hint-icon { display: inline-flex; color: var(--lilla); }
.method-hint .hint-arrow { font-size: 20px; color: var(--lilla); }
@media (prefers-reduced-motion: no-preference) { .method-hint .hint-arrow { animation: hint-nudge 1.2s ease-in-out infinite; } }
@keyframes hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 900px) { .method-hint .hint-arrow { transform: rotate(-90deg); animation: none; } }
.method-panel .method-step { animation: step-in 0.35s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.growth-visual .crocus-link.is-active .cr-bloom { filter: saturate(1.45) brightness(1.12) drop-shadow(0 0 10px rgba(150,115,212,0.85)); }
.growth-visual.has-active .heads .crocus-link:not(.is-active):not(:hover) .cr-bloom { filter: saturate(0.5) opacity(0.55); }
.growth-visual .crocus-link.is-active .cr-label { fill: var(--blu-indaco); }
.growth-visual .tap-ring { fill: none; stroke: var(--lilla); stroke-width: 3.5; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .growth-visual.play:not(.picked) .tap-ring { animation: tap-pulse 1.6s ease-out 6.2s infinite; }
  .growth-visual.play:not(.picked) .cr-3 .tap-ring { animation-delay: 6.7s; }
  .growth-visual.play:not(.picked) .cr-2 .tap-ring { animation-delay: 7.2s; }
}
@keyframes tap-pulse { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.5); } }
@media (max-width: 900px) { .method-panel { display: contents; } .growth-visual { order: 1; } .method-panel .method-step, .method-hint { order: 2; justify-self: start; } }
.growth-visual { margin: 0; display: flex; flex-direction: column; align-items: center; }
.growth-visual svg { width: 100%; max-width: 530px; height: auto; overflow: visible; }
.growth-hint { margin-top: 6px; font-size: 14.5px; font-style: italic; color: var(--lilla-deep); text-align: center; }

.growth-visual .ground-shadow { fill: #35303D; opacity: 0.08; }
.growth-visual .pot-line { stroke: #A898C4; stroke-width: 2; stroke-linejoin: round; }
.growth-visual .pot-crack { fill: none; stroke: #A898C4; stroke-width: 1.4; stroke-linecap: round; opacity: 0.35; }
.growth-visual .pot-mouth { fill: #4A2E20; stroke: #A898C4; stroke-width: 2; }
.growth-visual .soil { fill: #6A4532; }
.growth-visual .soil-wet { fill: #3B2418; opacity: 0.5; }
.growth-visual .soil-front { fill: #6A4532; }
.growth-visual .soil-front.soil-wet { fill: #3B2418; opacity: 0.5; }
.growth-visual .pot-lip { fill: none; stroke: #A898C4; stroke-width: 2; stroke-linecap: round; }
.growth-visual .soil-mound { fill: #5A3A29; }
.growth-visual .bulb-root { fill: none; stroke: #8A6A4A; stroke-width: 1.2; stroke-linecap: round; }
.growth-visual .bulb-body { stroke: #4A2E18; stroke-width: 1; }
.growth-visual .bulb-fiber { fill: none; stroke: #5A3820; stroke-width: 0.9; opacity: 0.55; }
.growth-visual .bulb-shine { fill: none; stroke: #E8CDA6; stroke-width: 1.6; stroke-linecap: round; opacity: 0.5; }
.growth-visual .bulb-plate { fill: none; stroke: #4A2E18; stroke-width: 1.2; opacity: 0.6; }
.growth-visual .bulb-drop, .growth-visual .water { opacity: 0; }

/* Foglia di croco: lama scanalata con la banda centrale argentata */
.growth-visual .cr-leaf { fill: url(#cr-leaf-fill); stroke: #183A20; stroke-width: 0.5; stroke-opacity: 0.55; }
.growth-visual .cr-leaf-shade { fill: #10291A; opacity: 0.28; }
.growth-visual .cr-leaf-stripe { fill: #D9E6CD; opacity: 0.85; }
.growth-visual .cr-stem-shadow { fill: none; stroke: #4A7040; stroke-width: 7; stroke-linecap: round; }
.growth-visual .cr-stem { fill: none; stroke: url(#cr-stem-fill); stroke-width: 4; stroke-linecap: round; }
.growth-visual .cr-petal { stroke-width: 0.6; }
.growth-visual .edge-viola { stroke: #2A104F; stroke-opacity: 0.45; }
.growth-visual .edge-lilla { stroke: #574088; stroke-opacity: 0.4; }
.growth-visual .edge-bianco { stroke: #7E6CAE; stroke-opacity: 0.45; }
.growth-visual .cr-vein { fill: none; stroke-width: 0.8; stroke-linecap: round; }
.growth-visual .stig { fill: none; stroke: #E0700E; stroke-width: 1.5; stroke-linecap: round; }
.growth-visual .stig-tip { fill: #F59B1C; stroke: #D2650B; stroke-width: 0.4; }
.growth-visual .stam { fill: none; stroke: #E9D9A0; stroke-width: 1; stroke-linecap: round; }
.growth-visual .anth { fill: #F3C93A; stroke: #C99A14; stroke-width: 0.3; }

.growth-visual .crocus-link { cursor: pointer; }
.growth-visual .crocus-link:focus-visible { outline: none; }
.growth-visual .cr-bloom { transition: filter 0.2s ease; }
.growth-visual .crocus-link:hover .cr-bloom,
.growth-visual .crocus-link:focus-visible .cr-bloom { filter: saturate(1.45) brightness(1.12) drop-shadow(0 0 10px rgba(150,115,212,0.85)); }
/* Al passaggio su un fiore gli altri due si spengono un po', cosi' quello scelto si illumina */
.growth-visual .heads:hover .crocus-link:not(:hover) .cr-bloom { filter: saturate(0.5) opacity(0.55); }
.growth-visual .heads:hover .crocus-link:not(:hover) .cr-anno { opacity: 0.45; }
.growth-visual .cr-anno { transition: opacity 0.2s ease; }
/* Anche passando sullo stelo si illumina il fiore giusto */
.growth-visual:has(.stems a[href="#method-step-1"]:hover) .cr-1 .cr-bloom,
.growth-visual:has(.stems a[href="#method-step-3"]:hover) .cr-2 .cr-bloom,
.growth-visual:has(.stems a[href="#method-step-2"]:hover) .cr-3 .cr-bloom { filter: saturate(1.45) brightness(1.12) drop-shadow(0 0 10px rgba(150,115,212,0.85)); }
.growth-visual .cr-line { fill: none; stroke: var(--lilla-mid); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease, stroke-width 0.2s ease; }
.growth-visual .cr-dot { fill: var(--lilla-mid); }
.growth-visual .cr-label { font-family: var(--font-testo); font-size: 14.5px; font-weight: 600; fill: var(--lilla-deep); transition: fill 0.2s ease; }
.growth-visual .crocus-link:hover .cr-label, .growth-visual .crocus-link:focus-visible .cr-label { fill: var(--blu-indaco); }
.growth-visual .crocus-link:hover .cr-line { stroke: var(--blu-indaco); stroke-width: 2; }

.growth-visual .can-handle-edge { fill: none; stroke: #3F3360; stroke-width: 12; stroke-linecap: round; }
.growth-visual .can-handle { fill: none; stroke: #A493CA; stroke-width: 8; stroke-linecap: round; }
.growth-visual .can-bracket { fill: #8C79B6; stroke: #3F3360; stroke-width: 1.5; }
.growth-visual .can-line, .growth-visual .can-spout, .growth-visual .can-rose, .growth-visual .can-top { stroke: #3F3360; stroke-width: 2; stroke-linejoin: round; }
.growth-visual .can-spout { fill: #8C79B6; }
.growth-visual .can-rose { fill: #7A67A3; }
.growth-visual .can-rose-face { fill: #5E4D86; stroke: #3F3360; stroke-width: 1.5; }
.growth-visual .rose-hole { fill: #E9E3F3; }
.growth-visual .can-band { fill: none; stroke: #3F3360; stroke-width: 1.4; opacity: 0.45; }
.growth-visual .can-top { fill: #B3A4D3; }
.growth-visual .can-hole { fill: #2E2542; }
.growth-visual .drop { fill: #7FB2DF; }

/* Posizione finale: annaffiatoio appoggiato accanto al vaso */
.growth-visual .can-move { transform-box: view-box; transform-origin: 0 0; transform: translate(96px, 466px); }
.growth-visual .cr-bloom { transform-box: fill-box; transform-origin: 50% 100%; }
.growth-visual .leaf-grow { transform-box: view-box; }

@media (prefers-reduced-motion: no-preference) {
  .growth-visual:not(.play) .flowers,
  .growth-visual:not(.play) .soil-mound,
  .growth-visual:not(.play) .can-move { opacity: 0; }

  /* 1. il bulbo cade nel vaso e viene coperto dal terriccio */
  .growth-visual.play .bulb-drop { animation: bulb-life 1.5s ease 0.1s both; }
  .growth-visual.play .soil-mound { animation: fade-in 0.4s ease 1.3s both; }
  /* 2. l'annaffiatoio versa */
  .growth-visual.play .can-move { animation: can-path 2.8s ease-in-out 0.6s both; }
  .growth-visual.play .water { animation: water-on 1s linear 1.4s both; }
  .growth-visual.play .drop { animation: drop-fall 0.45s ease-in 2 both; }
  .growth-visual.play .d1 { animation-delay: 1.45s; }
  .growth-visual.play .d2 { animation-delay: 1.5s; }
  .growth-visual.play .d3 { animation-delay: 1.55s; }
  .growth-visual.play .d4 { animation-delay: 1.6s; }
  .growth-visual.play .d5 { animation-delay: 1.65s; }
  .growth-visual.play .d6 { animation-delay: 1.7s; }
  .growth-visual.play .d7 { animation-delay: 1.75s; }
  .growth-visual.play .soil-wet { animation: soil-wet 0.8s ease 1.8s both; }
  /* 3. le foglie spuntano una alla volta (i ritardi sono nell'attributo style di ogni foglia) */
  .growth-visual.play .leaf-grow { animation: leaf-grow 1.1s ease-out both; }
  /* 4. gli steli salgono con i boccioli chiusi */
  .growth-visual.play .cr-stem, .growth-visual.play .cr-stem-shadow { stroke-dasharray: 1; animation: stem-grow 1s ease-out both; }
  .growth-visual.play .cr-bloom { animation: bloom 1.8s ease-out both; }
  .growth-visual.play .cr-1 .cr-bloom { animation-delay: 4.1s; }
  .growth-visual.play .cr-2 .cr-bloom { animation-delay: 4.3s; }
  .growth-visual.play .cr-3 .cr-bloom { animation-delay: 4.5s; }
  /* 5. i boccioli si aprono */
  .growth-visual.play .open-fl { animation: open-fl 1s ease-out both; }
  .growth-visual.play .open-fr { animation: open-fr 1s ease-out both; }
  .growth-visual.play .open-bl { animation: open-bl 1s ease-out both; }
  .growth-visual.play .open-br { animation: open-br 1s ease-out both; }
  .growth-visual.play .cr-1 [class^="open-"] { animation-delay: 4.9s; }
  .growth-visual.play .cr-2 [class^="open-"] { animation-delay: 5.1s; }
  .growth-visual.play .cr-3 [class^="open-"] { animation-delay: 5.3s; }
  .growth-visual.play .cr-anno { animation: fade-in 0.5s ease both; }
  .growth-visual.play .cr-1 .cr-anno { animation-delay: 5.7s; }
  .growth-visual.play .cr-line { stroke-dasharray: 1; animation: stem-grow 0.9s ease-out both; }
  .growth-visual.play .cr-1 .cr-line { animation-delay: 5.7s; }
  .growth-visual.play .cr-2 .cr-line { animation-delay: 5.9s; }
  .growth-visual.play .cr-3 .cr-line { animation-delay: 6.1s; }
  .growth-visual.play .cr-2 .cr-anno { animation-delay: 5.9s; }
  .growth-visual.play .cr-3 .cr-anno { animation-delay: 6.1s; }
}
/* Il bulbo cade, si pianta per meta nel terriccio e poi affonda: il clipPath lo nasconde sotto la terra */
@keyframes bulb-life {
  0% { transform: translateY(-170px); opacity: 0; }
  10% { opacity: 1; }
  38% { transform: translateY(14px); opacity: 1; }
  58% { transform: translateY(14px); }
  100% { transform: translateY(52px); opacity: 1; }
}
@keyframes can-path {
  0% { transform: translate(30px, 150px) rotate(0deg); opacity: 0; }
  16% { transform: translate(150px, 238px) rotate(0deg); opacity: 1; }
  30% { transform: translate(160px, 250px) rotate(40deg); }
  62% { transform: translate(160px, 250px) rotate(40deg); }
  74% { transform: translate(160px, 250px) rotate(0deg); }
  100% { transform: translate(96px, 466px) rotate(0deg); opacity: 1; }
}
@keyframes water-on { 0%, 100% { opacity: 0; } 6%, 90% { opacity: 1; } }
@keyframes drop-fall {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(30px); opacity: 0.2; }
}
@keyframes soil-wet { from { opacity: 0; } to { opacity: 0.5; } }
@keyframes leaf-grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes stem-grow {
  0% { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes bloom {
  0% { transform: scale(0.15, 0.3); opacity: 0; }
  18% { transform: scale(0.4, 0.6); opacity: 1; }
  50% { transform: scale(0.62, 0.92); }
  62% { transform: scale(0.64, 0.94); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes open-fl { from { transform: rotate(24deg); } to { transform: rotate(0deg); } }
@keyframes open-fr { from { transform: rotate(-24deg); } to { transform: rotate(0deg); } }
@keyframes open-bl { from { transform: rotate(12deg); } to { transform: rotate(0deg); } }
@keyframes open-br { from { transform: rotate(-12deg); } to { transform: rotate(0deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Su mobile le etichette nel disegno sarebbero illeggibili: diventano una legenda */
.growth-legend { display: none; list-style: none; margin: 14px 0 0; padding: 0; flex-direction: column; gap: 8px; align-items: center; }
.growth-legend a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--lilla-deep); }
.lg-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(53,48,61,0.25); }
.lg-viola { background: #6A3DB0; }
.lg-lilla { background: #A88FD8; }
.lg-bianco { background: #FFFFFF; }
@media (max-width: 620px) {
  .growth-visual { margin-top: -56px; }
  .method-layout { gap: 12px; }
  .growth-visual .cr-anno { display: none; }
  .growth-legend { display: flex; }
}
@media (max-width: 900px) {
  .method-layout { grid-template-columns: 1fr; }
  .growth-visual svg { max-width: 440px; }
}

@media (max-width: 900px) {
  .hero-photo { justify-content: center; }
  .hero-photo-frame { max-width: 360px; }
}
@media (max-width: 620px) {
  .hero { padding: 40px 0 56px; }
  .hero .hero-title { font-size: 38px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .logo .logo-name { font-size: 22px; }
}

/* ---------- Linchetto Studio: il secondo brand, per app e siti ---------- */
/* Fascia nei colori di Linchetto (viola notte) col cappello del logo animato */
.studio-band { padding: 0 0 56px; }
.studio-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 36px;
  padding: 30px 44px 30px 30px;
  border-radius: 28px;
  background: radial-gradient(circle at 18% 50%, #3A2558 0%, #1C1229 62%);
  color: #EFE9F7;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.studio-card:hover { color: #EFE9F7; transform: translateY(-3px); box-shadow: 0 22px 44px rgba(28,18,41,0.3); }
.studio-scene { width: 100%; height: auto; overflow: visible; }
.studio-text .eyebrow { display: inline-block; margin-bottom: 8px; color: #C9B8EC; }
.studio-text h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 8px; color: #fff; }
.studio-text p { margin: 0 0 20px; font-size: 16px; color: rgba(239,233,247,0.85); max-width: 560px; }
.btn-studio { background: #fff; color: #2A1B40; }
.studio-card:hover .btn-studio { background: #E8DDF7; }
.studio-card:hover .btn-studio .arrow { transform: translateX(4px); }

.ls-hat-body, .ls-hat-pom { fill: #FFFFFF; }
.ls-ico { fill: rgba(201,184,236,0.18); stroke: #C9B8EC; stroke-width: 2; stroke-linejoin: round; }
.ls-ico-line { fill: none; stroke: #C9B8EC; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-ico-dot { fill: #C9B8EC; }
.ls-spark { fill: #F3C93A; }
.ls-hat, .ls-hat-jump { transform-box: view-box; transform-origin: 120px 150px; }
.ls-hat-pom { transform-box: fill-box; transform-origin: 50% 100%; }
.ls-float > g, .ls-spark { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .ls-hat { animation: ls-wobble 3.2s ease-in-out infinite; }
  .ls-hat-pom { animation: ls-pom 1.6s ease-in-out infinite; }
  .studio-card:hover .ls-hat-jump { animation: ls-jump 0.7s cubic-bezier(.3,1.5,.5,1); }
  .ls-float > g { animation: ls-bob 3.6s ease-in-out infinite; }
  .ls-float.f2 > g { animation-delay: -0.9s; }
  .ls-float.f3 > g { animation-delay: -1.8s; }
  .ls-float.f4 > g { animation-delay: -2.7s; }
  .ls-spark { animation: ls-twinkle 2.4s ease-in-out infinite; }
  .ls-spark.s2 { animation-delay: -0.6s; }
  .ls-spark.s3 { animation-delay: -1.2s; }
  .ls-spark.s4 { animation-delay: -1.8s; }
}
@keyframes ls-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ls-pom { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -6px); } }
@keyframes ls-jump { 0% { transform: translateY(0); } 40% { transform: translateY(-22px) scale(1.04); } 100% { transform: translateY(0); } }
@keyframes ls-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
@keyframes ls-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.1); } }

.studio-credit { font-size: 14px; }
.studio-credit a {
  padding: 0 3px;
  background-image: linear-gradient(rgba(110,91,147,0.45), rgba(110,91,147,0.45));
  background-repeat: no-repeat;
  background-position: 0 85%;
  background-size: 100% 40%;
}
@media (max-width: 760px) {
  .studio-card { grid-template-columns: 1fr; gap: 10px; padding: 26px 22px 30px; text-align: left; }
  .studio-scene { max-width: 200px; margin: 0 auto; }
}

.legal-body h2 { font-size: 22px; margin: 32px 0 12px; }
.legal-body ul { margin: 0 0 18px 20px; opacity: 0.85; }
.legal-body li { margin-bottom: 10px; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }