/* Caratteri ospitati sul sito: vedi css/fonts.css e la cartella fonts/ */
@import url('fonts.css');

:root[data-theme="night"] {
  --bg-grad: radial-gradient(900px 600px at 88% -8%, rgba(192,38,211,0.20), transparent 60%),
             radial-gradient(900px 700px at -8% 108%, rgba(124,58,237,0.24), transparent 60%),
             linear-gradient(165deg, #0B0B26 0%, #15103A 52%, #21103E 100%);
  --text: #F4F1FF;
  --text-dim: #A39DC6;
  --text-dim2: #C9C3E6;
  --placeholder: #9690BD;
  --panel-bg: rgba(255,255,255,0.045);
  --panel-border: rgba(255,255,255,0.09);
  --pill-off-bg: rgba(255,255,255,0.04);
  --pill-off-border: rgba(255,255,255,0.22);
  --field-bg: rgba(8,8,30,0.55);
  --field-border: rgba(255,255,255,0.14);
  --accent: #C026D3;
  --accent2: #7C3AED;
  --accent3: #E11D74;
  --highlight-from: #dd4cb7;
  --highlight-to: #74f2f4;
  --ring: #F0ABFC;
  --badge-border: #e6e1ff;
  --bubble-bg: rgba(38,27,84,0.90);
  --tag-bg: rgba(255,255,255,0.06);
  --tag-border: rgba(255,255,255,0.14);
  --affinity-bg: rgba(192,38,211,0.16);
  --affinity-border: rgba(240,171,252,0.45);
  --affinity-text: #F5C6FF;
  --quote-mark: #74f2f4;
  --link: #F0ABFC;
  --link-hover: #FFFFFF;
  --cta-shadow: 0 8px 28px rgba(192,38,211,0.30);
  --quiz-track: rgba(255,255,255,0.40);
  --quiz-filled-border: #1B1030;
  --quiz-selected-from: var(--accent);
  --quiz-selected-to: var(--accent2);
  --quiz-glow: rgba(192,38,211,0.18);
  --quiz-glow-soft: rgba(192,38,211,0.30);
  --bottle-cap-bg: #0B0B26;
  --bottle-cap-border: rgba(255,255,255,0.20);
  --panel-glow: 0 30px 80px -20px rgba(192,38,211,0.35), 0 10px 40px rgba(124,58,237,0.25);
}

:root[data-theme="day"] {
  --bg-grad: radial-gradient(900px 600px at 88% -8%, rgba(62,168,181,0.18), transparent 60%),
             radial-gradient(900px 700px at -8% 108%, rgba(232,211,169,0.20), transparent 60%),
             linear-gradient(165deg, #FBF8F3 0%, #F6EFE1 55%, #F1E6CF 100%);
  --text: #13344A;
  --text-dim: #5A6663;
  --text-dim2: #4A5553;
  --placeholder: #6B7673;
  --panel-bg: rgba(255,255,255,0.55);
  --panel-border: rgba(19,52,74,0.26);
  --pill-off-bg: rgba(255,255,255,0.5);
  --pill-off-border: rgba(19,52,74,0.20);
  --field-bg: rgba(255,255,255,0.65);
  --field-border: rgba(19,52,74,0.14);
  --accent: #3EA8B5;
  --accent2: #0E4C6B;
  --accent3: #C9873A;
  --highlight-from: #3EA8B5;
  --highlight-to: #E8D3A9;
  --ring: #0E4C6B;
  --badge-border: #C9873A;
  --bubble-bg: rgba(255,255,255,0.90);
  --tag-bg: rgba(19,52,74,0.05);
  --tag-border: rgba(19,52,74,0.12);
  --affinity-bg: rgba(62,168,181,0.12);
  --affinity-border: rgba(62,168,181,0.40);
  --affinity-text: #0E4C6B;
  --quote-mark: #C9873A;
  --link: #0E4C6B;
  --link-hover: #3EA8B5;
  --cta-shadow: 0 8px 28px rgba(62,168,181,0.26);
  --quiz-track: rgba(19,52,74,0.28);
  --quiz-filled-border: #13344A;
  --quiz-selected-from: #7ECBEC;
  --quiz-selected-to: #3E9FCB;
  --quiz-glow: rgba(94,189,232,0.22);
  --quiz-glow-soft: rgba(94,189,232,0.32);
  --bottle-cap-bg: #FBF8F3;
  --bottle-cap-border: rgba(19,52,74,0.20);
  --panel-glow: 0 30px 70px -20px rgba(62,168,181,0.24), 0 10px 35px rgba(201,135,58,0.15);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Lato', sans-serif;
  min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
/* I pulsanti non ereditano il carattere della pagina: senza questa regola il
   browser usa il suo (es. Arial) invece di Lato. */
button { font-family: inherit; }

textarea::placeholder { color: var(--placeholder); opacity: 0.75; }

.font-heading { font-family: 'Cormorant Garamond', serif; font-size: 33px; }
.font-logo { font-family: 'Cormorant SC', serif; }

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 48px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.logo {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text);
}

.tagline {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lang-select {
  position: relative;
  display: inline-block;
}

.lang-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--pill-off-border);
  background: var(--pill-off-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.lang-select-btn:hover { color: var(--text); background: var(--panel-bg); }

.lang-select-caret {
  width: 10px;
  height: 6px;
  flex: none;
  transition: transform 0.15s ease;
}
.lang-select[data-open="true"] .lang-select-caret { transform: rotate(180deg); }

.lang-select-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--pill-off-border);
  background: var(--pill-off-bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.lang-select-menu[hidden] { display: none; }

.lang-select-option {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.lang-select-option:hover,
.lang-select-option:focus-visible { background: var(--panel-bg); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--pill-off-border);
  background: var(--pill-off-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 28px;
}

.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 920px; margin: 0 auto; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }

h1.hero-title {
  margin: 0;
  font-weight: 400;
  font-size: 65px;
  line-height: 1.1;
  white-space: nowrap;
}
h1.hero-title .grad {
  font-weight: 600;
  font-style: italic;
  color: inherit;
}

.hero-subtitle {
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-dim2);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.badge {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--badge-border);
  color: var(--badge-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.steps { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 40px; }
.step { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 10px; }
.step-num {
  width: 70px; height: 70px;
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-num svg { width: 50px; height: 50px; display: block; }
.step-num .icon-star { position: relative; top: -4px; }
.step-label { font-size: 18px; font-weight: 300; }

/* ----- Sezione "Come funziona Profumium", fra promo-group e faq-section -----
   Stesso trattamento a piena larghezza di .promo-group: sfondo bianco
   continuo che esce dal contenitore .page, con un wrapper interno che
   riallinea il contenuto alla larghezza/padding delle altre sezioni. */
.how-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #FFFFFF;
  padding-top: 100px;
  padding-bottom: 170px;
}
.how-inner { max-width: 1120px; margin: 0 auto; padding: 0 64px; text-align: center; }
.how-title { margin: 0 0 14px; font-weight: 500; font-size: 36px; color: #13344A; }
.how-subtitle { margin: 0 auto 64px; font-size: 18px; font-weight: 300; line-height: 1.5; color: #13344A; max-width: 520px; }
:root[data-theme="night"] .how-section { background: #10081C; }
:root[data-theme="night"] .how-title,
:root[data-theme="night"] .how-subtitle { color: #F4F1FF; }
.steps-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: nowrap; margin-top: 0; }
.steps-grid .step {
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.steps-grid .step-num {
  width: 76px; height: 76px;
}
.steps-grid .step-label { font-size: 17px; font-weight: 400; white-space: nowrap; color: #13344A; }
:root[data-theme="night"] .steps-grid .step-label { color: #F4F1FF; }

/* Variante della how-section con testo a sinistra e immagine a destra. */
.how-inner-split {
  display: flex;
  align-items: center;
  gap: 40px;
  text-align: left;
  flex-wrap: wrap;
}
/* L'immagine a destra contiene del testo: le si lascia la quota maggiore
   della riga (flex-grow 2) per restare leggibile, senza allargare la fascia. */
.how-copy { flex: 1 1 300px; }
.how-copy .how-title { text-align: left; }
.how-copy .how-subtitle { margin: 0 0 40px; text-align: left; max-width: 480px; }
.how-list { display: flex; flex-direction: column; gap: 28px; }
.how-item { display: flex; align-items: flex-start; gap: 20px; text-align: left; }
.how-item .step-num { flex-shrink: 0; }
.how-item-text { display: flex; flex-direction: column; gap: 6px; }
.how-item .step-label { white-space: normal; }
.how-item-desc { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--text-dim2); max-width: 420px; }
.how-visual { flex: 2 1 520px; min-width: 260px; }
.how-visual img {
  display: block; width: 100%; height: auto; object-fit: contain;
  border-radius: 18px;
}

.hero-visual {
  flex: 1 1 420px;
  height: 360px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
}
.hero-visual img {
  position: absolute; left: 50%; top: 50%; height: 360px; width: auto;
  transform: translate(-50%, -50%); pointer-events: none;
}
.bubble {
  position: absolute;
  max-width: 170px;
  text-align: center;
  background: var(--bubble-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-dim2);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.bubble.fading { opacity: 0; }
.bubble-a { left: 70px; top: 40px; animation: floatA 12s linear infinite; }
.bubble-b { right: 60px; top: 90px; animation: floatB 15s linear infinite; }
.bubble-c { right: 90px; bottom: 40px; animation: floatC 10s linear infinite; }

/* traiettorie circolari a velocità costante: il testo "orbita" intorno al flacone, senza scatti */
@keyframes floatA {
  0%    { transform: translate(10px, 0); }
  12.5% { transform: translate(7.1px, 7.1px); }
  25%   { transform: translate(0, 10px); }
  37.5% { transform: translate(-7.1px, 7.1px); }
  50%   { transform: translate(-10px, 0); }
  62.5% { transform: translate(-7.1px, -7.1px); }
  75%   { transform: translate(0, -10px); }
  87.5% { transform: translate(7.1px, -7.1px); }
  100%  { transform: translate(10px, 0); }
}
@keyframes floatB {
  0%    { transform: translate(-11px, 0); }
  12.5% { transform: translate(-7.8px, -7.8px); }
  25%   { transform: translate(0, -11px); }
  37.5% { transform: translate(7.8px, -7.8px); }
  50%   { transform: translate(11px, 0); }
  62.5% { transform: translate(7.8px, 7.8px); }
  75%   { transform: translate(0, 11px); }
  87.5% { transform: translate(-7.8px, 7.8px); }
  100%  { transform: translate(-11px, 0); }
}
@keyframes floatC {
  0%    { transform: translate(0, 9px); }
  12.5% { transform: translate(-6.4px, 6.4px); }
  25%   { transform: translate(-9px, 0); }
  37.5% { transform: translate(-6.4px, -6.4px); }
  50%   { transform: translate(0, -9px); }
  62.5% { transform: translate(6.4px, -6.4px); }
  75%   { transform: translate(9px, 0); }
  87.5% { transform: translate(6.4px, 6.4px); }
  100%  { transform: translate(0, 9px); }
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 32px;
  backdrop-filter: blur(6px);
}
.panel h2 { margin: 0; font-weight: 500; font-size: 36px; }

.field-group { display: flex; flex-direction: column; gap: 12px; }
.field-label { font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }

.pill-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pills-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer;
  background: var(--pill-off-bg); color: var(--text); border: 1px solid var(--pill-off-border);
}
.pill.on {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  background-clip: padding-box;
  color: #fff; border: 1px solid var(--accent2);
}
.hint { font-size: 12px; font-style: italic; color: var(--text-dim); letter-spacing: 0.5px; }
/* Riga sotto la casella di testo della prima pagina: avviso sui dati personali. */
.privacy-note { margin: 8px 0 0; line-height: 1.5; }

textarea.input {
  box-sizing: border-box; width: 100%; padding: 16px;
  border: 1px solid var(--field-border); border-radius: 12px;
  font-size: 14px; font-weight: 300; font-family: inherit; background: var(--field-bg);
  color: var(--text); resize: none; height: 96px; overflow-y: auto;
}

/* Pannello "Raccontaci chi sei" della prima pagina: area più stretta, con
   margini laterali maggiori, e spaziature interne su misura. */
.panel-home {
  align-self: center;
  width: 100%;
  max-width: 860px;
  margin-top: 0;
  box-shadow: var(--panel-glow);
}
.panel-home .field-group { margin-top: 5px; }      /* +20% circa sul gap di base (26px -> 31px) */
.panel-home .ta-wrap { position: relative; margin-bottom: 4px; }
#self-description {
  height: 150px;
  font-size: 18px;
  line-height: 1.5;
  margin-top: 0px;
  margin-bottom: 0;
  padding-bottom: 8px;
}
.placeholder-rotator {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 16px 16px 8px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--placeholder);
  opacity: 0.75;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
/* Frase uscente: sale e sfuma (stesso effetto del placeholder animato di iMean) */
.placeholder-rotator.out { opacity: 0; transform: translateY(-14px); }
/* Frase entrante: parte da sotto, senza transizione, prima che venga rimossa la classe per animarla verso la posizione finale */
.placeholder-rotator.in-start { opacity: 0; transform: translateY(14px); transition: none; }

/* Pannello "Tipologia di profumi" + testo libero del passo 2: stesso
   trattamento di .panel-home (area più stretta, margini laterali
   maggiori), ma con un aumento di spazio diverso (+50% invece di +100%). */
.panel-extra {
  align-self: center;
  width: 100%;
  max-width: 860px;
}
.panel-extra textarea.input { margin-top: 13px; }  /* +50% circa sul gap di base (26px -> 39px) */
#extra-description {
  height: 200px;   /* come nella prima pagina */
  font-size: 18px;      /* come nella prima pagina */
  line-height: 1.5;
}

.examples { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.examples span { font-size: 13px; font-style: italic; color: var(--text-dim); }

.cta-row { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-weight: 600; font-size: 16px; padding: 15px 32px;
  border-radius: 999px; box-shadow: var(--cta-shadow); border: none; cursor: pointer;
}
.cta-note { font-size: 13px; color: var(--text-dim); } /* +10% circa (12px -> 13px) */

/* Nota sotto il riquadro dei sei assi (passo 2): staccata dal gap verticale
   standard della pagina, per restare "attaccata" al box sopra. */
.axes-note {
  display: block;
  margin-top: -32px;
  text-align: right;
  font-size: 13px;
  color: var(--text-dim);
}
.cta-error { font-size: 13px; color: var(--accent3); }

.cta.cta-disabled {
  background: var(--pill-off-bg);
  color: var(--text-dim);
  border: 1px solid var(--pill-off-border);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----- Step 2: Aggettivi ----- */
.panel-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-top: 32px; }
.panel-header > div { display: flex; flex-direction: column; gap: 18px; }
.panel-header h1 { margin: 0; font-weight: 500; font-size: 32px; }
.panel-header p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--text-dim2); max-width: 680px; }
.framing { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.framing span.lbl { font-size: 13px; color: var(--text-dim2); }

.scale-header {
  display: grid; grid-template-columns: minmax(0,1fr) 448px minmax(0,1fr) 104px;
  column-gap: 24px; align-items: end;
  margin-top: 16px;
}
.scale-labels { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.scale-labels span { text-align: center; font-size: 13px; color: var(--text-dim); }

.axis-row {
  display: grid; grid-template-columns: minmax(0,1fr) 448px minmax(0,1fr) 104px;
  column-gap: 24px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--panel-border);
}
.axis-row.skipped { opacity: 0.45; }
.axis-side { display: flex; flex-direction: column; gap: 3px; }
.axis-side.left { text-align: right; }
.axis-side.right { text-align: left; }
.axis-side .term { font-size: 18px; font-weight: 600; }
.axis-side .desc { font-size: 14px; line-height: 1.4; color: var(--text-dim); }
.dots { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); justify-items: center; }
.dot-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; }
.dot { display: block; border-radius: 50%; background: transparent; border: 1.5px solid var(--quiz-track); }
.dot.selected {
  background: linear-gradient(135deg, var(--quiz-selected-from), var(--quiz-selected-to));
  border: 1px solid var(--quiz-filled-border);
  box-shadow: 0 0 0 4px var(--quiz-glow), 0 0 14px var(--quiz-glow-soft);
}
.skip-btn {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; font-size: 12px;
  font-family: inherit; cursor: pointer; background: transparent; color: var(--text);
  border: 1px solid var(--pill-off-border);
}

/* ----- Step 3: Risultati ----- */
.back-link { font-size: 14px; color: var(--text-dim2); }
.result-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.result-title { margin: 0; font-weight: 500; font-size: 32px; }

.results-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; flex: 0 1 auto; max-width: 100%; }
.pdf-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--pill-off-border); color: var(--text);
  font-family: inherit; font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
}
.pdf-cta:hover { background: var(--pill-off-bg); }
.pdf-cta[disabled] { opacity: 0.6; cursor: not-allowed; }
.results-status { font-size: 15px; color: var(--text-dim2); }
.results-status.is-error { color: var(--accent3); }

.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.alt-col { display: flex; flex-direction: column; }

.result-card {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 20px; padding: 40px;
  overflow: hidden;
}
.result-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
}
.result-body { display: flex; flex-direction: column; gap: 12px; }
.brand-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { font-size: 13px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.affinity-badge {
  background: var(--affinity-bg); border: 1px solid var(--affinity-border); color: var(--affinity-text);
  font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
}
.perfume-name { margin: 0; margin-top: 6px; margin-bottom: 12px; font-weight: 700; font-size: 38px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  background: var(--tag-bg); border: 1px solid var(--tag-border); color: var(--text);
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
}
.result-desc { margin: 0; margin-top: 10px; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--text-dim2); max-width: 560px; }
.why-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-top: 20px; } /* raddoppia lo spazio prima (16px -> 32px totali col gap) */
.why-quote { margin: 0; font-style: italic; font-size: 18px; line-height: 1.6; color: var(--affinity-text); }
.why-quote .mark { color: var(--affinity-text); }
.secondary-cta {
  width: fit-content; margin-top: 24px; background: transparent;
  border: 1px solid var(--pill-off-border); color: var(--text);
  font-family: inherit; font-weight: 600; font-size: 14px; padding: 12px 24px; border-radius: 999px; cursor: pointer;
}
.more-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;           /* +50% circa (16px -> 24px) */
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 24px;       /* spazio sotto */
}
.alt-grid { display: flex; flex-direction: column; gap: 24px; flex: 1; }
.alt-card {
  position: relative; overflow: hidden;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 22px 22px 22px 26px;
}
.alt-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
}
.alt-body { display: flex; flex-direction: column; gap: 6px; }
.alt-body .brand-row { font-size: 12px; }
.alt-name { margin-top: 6px; margin-bottom: 16px; font-weight: 700; font-size: 36px; }
.alt-desc { margin: 10px 0 0; }
.alt-link { font-size: 13px; text-decoration: underline; margin-top: 2px; width: fit-content; }

/* ----- Sezioni promo (regalo / sé stessi) e FAQ, in fondo alla prima pagina -----
   Gli sfondi devono arrivare fino ai bordi della finestra: le sezioni escono dal
   contenitore .page (width 100vw) e un wrapper interno riallinea il contenuto
   alla stessa larghezza/padding delle altre sezioni della pagina. */
.promo-group {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Le due sezioni promo condividono un unico sfondo bianco continuo: il wrapper
   .promo-group porta il colore e lo spazio esterno, le .promo-section interne
   sono solo blocchi di contenuto separati da un gap (niente striscia di
   sfondo pagina visibile fra loro). */
.promo-group {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  margin-top: 0;
  padding-top: 100px;
  padding-bottom: 100px;
  gap: 90px;
}
.panel-home { margin-bottom: 100px; }
/* .how-section segue .promo-group a schermo intero: niente striscia di
   sfondo pagina fra le due, pur restando separate dal rispettivo padding. */
.promo-group + .how-section { margin-top: -48px; }
.promo-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}
.promo-section.alt .promo-inner { flex-direction: row-reverse; }
.promo-copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; }
.promo-copy h2 { margin: 0; font-weight: 500; font-size: 32px; color: #13344A; }
.promo-copy p { margin: 0; font-weight: 300; font-size: 20px; line-height: 1.6; color: #13344A; max-width: 480px; }
:root[data-theme="night"] .promo-group { background: #10081C; }
:root[data-theme="night"] .promo-copy h2,
:root[data-theme="night"] .promo-copy p { color: #F4F1FF; }
.promo-visual { flex: 1 1 320px; min-width: 260px; }
.promo-visual img {
  display: block; width: 100%; height: 320px; object-fit: cover;
  border-radius: 18px;
}

/* FAQ: lo sfondo sabbia/notte della pagina resta visibile; le domande sono
   raccolte in un riquadro elegante con bordo sottile, coerente con .panel. */
.faq-section {
  margin-top: 8px;
}
.faq-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 90px 64px 90px;
}
.faq-box {
  max-width: 740px;
  margin: 0 auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 10px;
  backdrop-filter: blur(6px);
}
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  overflow: hidden;
  border-bottom: 1px solid var(--panel-border);
  transition: background 0.2s ease;
}
.faq-item:last-child { border-bottom: none; }
.faq-item.open {
  background: #FFFFFF;
  border-radius: 14px;
  border-bottom-color: transparent;
}
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 20px 22px; font-family: inherit; font-size: 20px; font-weight: 600; color: var(--text);
  transition: color 0.2s ease;
}
.faq-item.open .faq-question { color: #13344A; }
.faq-question::after {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--text-dim);
  border-bottom: 1.6px solid var(--text-dim);
  transform: rotate(45deg);
  transition: transform 0.25s ease, border-color 0.2s ease;
}
.faq-item.open .faq-question::after {
  transform: rotate(225deg);
  border-color: var(--accent2);
}
.faq-answer {
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height 0.3s ease, visibility 0s linear 0.3s;
}
.faq-item.open .faq-answer { visibility: visible; transition-delay: 0s; padding-bottom: 40px; }
.faq-answer p { margin: 0; padding: 0 22px; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--text-dim2); }
.faq-answer p + p,
.faq-answer p + ul,
.faq-answer ul + p { margin-top: 14px; }
.faq-item.open .faq-answer p { color: #4A5553; }
.faq-item.open .faq-answer { max-height: 600px; }

@media (max-width: 720px) {
  .pill-row { flex-direction: column; align-items: flex-start; }
  .cta-row { align-items: flex-start; }
  .promo-inner { flex-direction: column; padding: 20px; }
  .promo-section.alt .promo-inner { flex-direction: column; }
  .faq-inner { padding: 20px; }
  /* Ritmo verticale compattato: su telefono i distacchi pensati per il
     desktop (fino a 232px fra una sezione e l'altra) lasciano mezzo schermo
     vuoto. Qui scendono a ~80-90px. Il gap di .page fa da pavimento a tutti
     gli stacchi fra sezioni, quindi va ridotto insieme ai padding. */
  .page { padding: 32px 20px 40px; gap: 20px; }
  .panel-home { margin-bottom: 20px; }
  .promo-group { padding-top: 32px; padding-bottom: 24px; gap: 40px; }
  /* Le due fasce hanno lo stesso sfondo e sono adiacenti: il gap di .page fra
     loro mostrerebbe una striscia di sabbia, quindi va annullato esattamente
     (tenere questo valore allineato al gap di .page qui sopra). */
  .promo-group + .how-section { margin-top: -20px; }
  .how-section { padding-top: 28px; padding-bottom: 36px; }
  .hero { gap: 32px; }
  h1.hero-title { font-size: 32px; white-space: normal; }
  .hero-subtitle { font-size: 16px; }
  .panel { padding: 24px; }
  .scale-header, .axis-row { grid-template-columns: 1fr; row-gap: 8px; }
  .dots { grid-template-columns: repeat(7, 1fr); }
  .scale-labels { display: none; }
  .steps-grid { flex-wrap: wrap; }
  .steps-grid .step { flex: 1 1 100%; max-width: none; }
  .steps-grid .step-label { white-space: normal; }
  .how-inner { padding: 0 20px; }
  /* In colonna flex-basis vale sull'altezza: azzerandola si eliminano i
     vuoti verticali fra testo e immagine. */
  .how-inner-split { flex-direction: column; gap: 32px; }
  .how-copy { flex: 0 0 auto; width: 100%; }
  .how-visual { flex: 0 0 auto; width: 100%; }
  .promo-inner { gap: 32px; }
  .promo-copy, .promo-visual { flex: 0 0 auto; width: 100%; }
  .results-grid { grid-template-columns: 1fr; }
}

/* FAQ: elenchi e collegamento alla guida dentro le risposte */
.faq-answer ul { margin: 0; padding: 6px 22px 0; list-style: none; }
.faq-answer li {
  position: relative;
  padding-left: 22px;
  font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--text-dim2);
}
.faq-answer li + li { margin-top: 8px; }
.faq-answer li::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.faq-answer strong { color: var(--text); font-weight: 600; }
.faq-item.open .faq-answer li { color: #4A5553; }
.faq-item.open .faq-answer li::before { background: #C9873A; }
.faq-item.open .faq-answer strong { color: #13344A; }
.guide-open.faq-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.guide-open.faq-link:hover { color: var(--link-hover); }
.faq-item.open .guide-open.faq-link { color: #0E4C6B; }
.faq-item.open .guide-open.faq-link:hover { color: #3EA8B5; }

/* Guida "Come descriverti al meglio": pulsante sotto la casella, suggerimento
   e finestra modale (sul telefono sale dal basso). */
.desc-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.desc-wrap #self-description { margin-bottom: 0; }
.guide-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.guide-open, .info-open {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--link); text-align: left;
}
.guide-open:hover, .info-open:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
.guide-open:focus-visible, .info-open:focus-visible, .guide-close:focus-visible, .guide-use:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 3px;
}

/* Intestazione dei gruppi facoltativi del passo 2 (parole): titoletto +
   suggerimento + pulsante info sulla stessa riga; il popup riusa lo stile
   della guida. */
.age-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
/* Domanda degli assi (passo 2) con accanto il pulsante "Come rispondere?":
   il titolo resta separato perché il suo testo cambia con "Come sei" /
   "Come vuoi apparire". */
.scale-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
/* Parole "Ti riconosci in…" (passo 2): chip più compatte delle altre,
   perché sono 20; con tre scelte le altre si attenuano e non si cliccano. */
.words-group .pills { gap: 8px; }
.words-group .pill { min-height: 38px; padding: 7px 16px; }
.pill.pill-locked { opacity: 0.45; cursor: not-allowed; }
/* Pagina risultati: riga "Ti riconosci in: …" sotto le etichette, solo se il
   profumo ha almeno una delle parole scelte dal visitatore. */
.words-line { margin: 10px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.words-line-label { font-weight: 600; color: var(--text); }
#words-modal .guide-body p { margin: 0 0 10px; }
.guide-nudge { font-size: 13px; font-style: italic; color: var(--text-dim); }
.guide-nudge:empty { display: none; }

body.guide-lock { overflow: hidden; }
.guide-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(8,8,30,0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: guide-fade 0.2s ease;
}
.guide-modal[hidden] { display: none; }
.guide-card {
  position: relative; width: 100%; max-width: 600px;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--panel-border);
  background: #FBF8F3; color: var(--text); box-shadow: var(--panel-glow);
  animation: guide-rise 0.25s ease;
}
:root[data-theme="night"] .guide-card { background: #171238; }
.guide-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 36px 36px 24px; }
.guide-foot { flex: none; padding: 16px 36px 24px; border-top: 1px solid var(--panel-border); }
.guide-card h2 { margin: 0 44px 10px 0; font-weight: 500; font-size: 32px; }
.guide-card h3 { margin: 24px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); }
.guide-card p, .guide-card li { font-size: 15px; line-height: 1.6; }
.guide-intro { margin: 0; color: var(--text-dim2); }
.guide-questions, .guide-tips { margin: 0; padding-left: 20px; }
.guide-questions li { margin-bottom: 4px; }
.guide-tips li { margin-bottom: 10px; }
.guide-example {
  margin: 0; padding: 14px 18px; border-left: 3px solid var(--accent);
  background: var(--tag-bg); border-radius: 0 12px 12px 0;
  font-style: italic; font-size: 15px; line-height: 1.6;
}
.guide-use { font-size: 14px; padding: 12px 24px; }
.guide-use[hidden] { display: none; }
.guide-gift { margin: 12px 0 0; color: var(--text-dim); font-size: 14px; }
.guide-use[hidden] + .guide-gift { margin-top: 0; }
.guide-close {
  position: absolute; top: 14px; right: 16px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--panel-border); background: transparent;
  color: var(--text); font-size: 26px; line-height: 1; cursor: pointer;
}
.guide-close:hover { background: var(--tag-bg); }

/* Finestra "Condividi il tuo risultato" (pagina risultati): riusa la guida
   (.guide-modal / .guide-card); quattro anteprime verticali 9:16 da scegliere,
   poi Condividi (telefono) o Scarica (computer). Vedi js/share-image.js. */
.share-options {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-top: 22px;
}
.share-option {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px; border-radius: 14px; border: 2px solid transparent;
  background: transparent; color: var(--text); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
}
.share-option:hover { background: var(--tag-bg); }
.share-option[aria-checked="true"] { border-color: var(--accent); background: var(--tag-bg); }
.share-option:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.share-thumb {
  display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--panel-border); background: var(--tag-bg);
}
.share-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.share-thumb img:not([src]) { visibility: hidden; }
.share-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.share-go { font-size: 15px; padding: 13px 28px; }
.share-go[disabled] { opacity: 0.6; cursor: wait; }
.share-link {
  background: none; border: none; padding: 8px 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--link);
}
.share-link:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
.share-link[hidden], .share-error[hidden] { display: none; }
.share-link:focus-visible, .share-go:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.share-error { width: 100%; margin: 0; font-size: 13px; color: var(--accent3); }
@media (max-width: 720px) {
  .share-options { gap: 8px; }
  .share-option { padding: 4px; font-size: 12px; }
  .share-go { width: 100%; justify-content: center; }
}

@keyframes guide-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes guide-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes guide-sheet { from { transform: translateY(40px); } to { transform: none; } }

@media (max-width: 720px) {
  .guide-modal { align-items: flex-end; padding: 0; }
  .guide-card {
    max-width: none; max-height: 88vh; max-height: 88dvh;
    border-radius: 20px 20px 0 0; animation-name: guide-sheet;
  }
  .guide-body { padding: 28px 22px 20px; }
  .guide-foot { padding: 14px 22px 22px; }
  .guide-use { width: 100%; justify-content: center; }
  .guide-card h2 { font-size: 28px; }
  .guide-open { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-modal, .guide-card { animation: none; }
}

.site-footer {
  border-top: 1px solid var(--pill-off-border);
  padding-top: 28px;
}
.footer-spaced { margin-top: 100px; }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-quote {
  margin: 0;
  max-width: 560px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-dim2);
}

.footer-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.footer-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  cursor: default;
}

.footer-bottom {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { text-decoration: underline; }

/* Avviso di affiliazione sotto i risultati */
.affiliate-note { margin: 20px 0 0; text-align: center; line-height: 1.5; }

@media (max-width: 640px) {
  .footer-top { flex-direction: column; }
  .footer-links { align-items: flex-start; }
}

/* ----- Pagina "Chi sono" ----- */
.about { max-width: 720px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.about-title { margin: 0; font-weight: 500; font-size: 44px; line-height: 1.15; }
.about-text { display: flex; flex-direction: column; gap: 22px; }
.about-text p {
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text);
}
.footer-link-current { color: var(--text); }
@media (max-width: 720px) {
  .about-title { font-size: 36px; }
}
a.footer-link { cursor: pointer; }
a.footer-link:hover { color: var(--text); }

/* Logo personale: pagina "Chi sono" e footer. In modalità notte il rosso scuro
   si illumina per restare leggibile sullo sfondo blu. */
.about-author { display: flex; align-items: flex-start; gap: 22px; padding-top: 28px; border-top: 1px solid var(--pill-off-border); }
.about-logo { flex-shrink: 0; display: block; }
.about-logo img { display: block; width: 64px; height: auto; }
.about-author-text { display: flex; flex-direction: column; gap: 10px; }
.about-author-text p { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--text-dim2); }
.about-author-text a { text-decoration: underline; text-underline-offset: 3px; }
.footer-logo { display: block; color: var(--text-dim); }
.footer-logo:hover { color: var(--text); }
.footer-logo svg { display: block; width: 36px; height: auto; }
:root[data-theme="night"] .about-logo img { filter: brightness(2.2); }
@media (max-width: 480px) { .about-author { flex-direction: column; } }

/* Versetto biblico sotto la presentazione dell'autore */
.about-verse { margin: 12px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--pill-off-border); font-family: 'Cormorant Garamond', serif; font-style: italic; }
.about-verse p { margin: 0; font-size: 23px; font-weight: 400; line-height: 1.6; color: var(--text); }
.about-verse cite { display: block; margin-top: 10px; font-size: 18px; font-style: italic; font-weight: 400; color: var(--text-dim2); }
@media (max-width: 480px) { .about-verse p { font-size: 21px; } }

/* Pagine legali (riservatezza e note legali): stessa impaginazione di "Chi sono" */
.legal-updated { margin: -16px 0 0; font-size: 14px; color: var(--text-dim2); }
.legal-text h2 {
  margin: 14px 0 -8px; font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500; line-height: 1.25; color: var(--text);
}
.legal-text ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal-text li { font-size: 17px; font-weight: 300; line-height: 1.7; }
.legal-text a { text-decoration: underline; text-underline-offset: 3px; }
.legal-table { width: 100%; overflow-x: auto; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 15px; font-weight: 300; line-height: 1.55; }
.legal-table th { text-align: left; font-weight: 600; font-size: 13px; letter-spacing: 0.3px; color: var(--text); }
.legal-table th, .legal-table td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--pill-off-border); }
.legal-table th:first-child, .legal-table td:first-child { padding-left: 0; }
@media (max-width: 640px) {
  .legal-table table { min-width: 520px; }
  .legal-text h2 { font-size: 23px; }
}