/* ===========================================================================
   Penso — landing (heypenso.app)
   "un pensiero, senza parole"
   Palette espresso scuro · testo crema · accento oro
   Stile condiviso tra index.html e attesa/index.html
   =========================================================================== */

:root {
  --espresso:        #1c130c;   /* fondo espresso scuro */
  --espresso-soft:   #241810;   /* card / superfici */
  --espresso-line:   rgba(243, 234, 216, 0.10);
  --cream:           #f3ead8;   /* testo crema */
  --cream-dim:       rgba(243, 234, 216, 0.66);
  --cream-faint:     rgba(243, 234, 216, 0.40);
  --gold:            #f5e1a4;   /* accento oro */
  --gold-soft:       rgba(245, 225, 164, 0.62);
  --gold-faint:      rgba(245, 225, 164, 0.30);
  --rose:            #e7c6c0;   /* colore-per-persona (firma) */

  --maxw:            980px;
  --radius:          22px;
  --font-serif:      'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:       'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--espresso);
  color: var(--cream);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* firma serif italica per titoli e wordmark */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* soft radial glow sul fondo, non invadente */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% -4%, rgba(245, 225, 164, 0.07), transparent 72%),
    radial-gradient(42% 34% at 82% 68%, rgba(231, 198, 192, 0.05), transparent 74%);
}

.content { position: relative; z-index: 1; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */
header { padding: 26px 0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.3px;
  color: var(--cream);
}
.brand svg { width: 30px; height: 30px; display: block; }

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn-primary {
  background: var(--gold);
  color: var(--espresso);
  box-shadow: 0 10px 30px -12px rgba(245, 225, 164, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary svg { width: 20px; height: 20px; }

.store-note {
  font-size: 14px;
  color: var(--cream-faint);
  margin-top: 15px;
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 42px 0 78px;
}

.hero-symbol {
  width: 168px;
  height: 168px;
  margin: 0 auto 40px;
  display: block;
}

.wordmark {
  font-size: clamp(58px, 15vw, 104px);
  line-height: 0.95;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
  color: var(--cream);
}

.tagline {
  font-size: clamp(19px, 5vw, 25px);
  color: var(--gold-soft);
  margin-bottom: 22px;
}

.manifesto {
  font-size: clamp(17px, 4.4vw, 20px);
  color: var(--cream-dim);
  max-width: 30ch;
  margin: 0 auto 38px;
  line-height: 1.66;
}

/* -------------------------------------------------------------------------- */
/* Sezioni brevi (il gesto / la sincronia / il filo)                          */
/* -------------------------------------------------------------------------- */
.threads {
  padding: 20px 0 40px;
  display: grid;
  gap: 16px;
}

.thread {
  background: var(--espresso-soft);
  border: 1px solid var(--espresso-line);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.thread .ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: block;
}
.thread h2 {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cream);
  letter-spacing: 0.1px;
}
.thread p {
  font-size: 16px;
  color: var(--cream-dim);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------- */
/* Privacy strip (tenera, non tecnica)                                        */
/* -------------------------------------------------------------------------- */
.whisper {
  text-align: center;
  padding: 48px 0 10px;
}
.whisper p {
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.5;
  color: var(--cream);
  max-width: 22ch;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* CTA di chiusura                                                            */
/* -------------------------------------------------------------------------- */
.closing {
  text-align: center;
  padding: 64px 0 24px;
}
.closing h2 {
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.15;
  margin-bottom: 26px;
  color: var(--cream);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */
footer {
  padding: 56px 0 46px;
  margin-top: 40px;
  border-top: 1px solid var(--espresso-line);
  text-align: center;
}
footer .brand { margin-bottom: 18px; }
.footer-links {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 15px;
  margin-bottom: 18px;
}
.footer-links a { color: var(--cream-dim); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--cream); }
.copy { font-size: 14px; color: var(--cream-faint); }
.copy a { color: var(--cream-faint); }
.copy a:hover { color: var(--cream-dim); }

/* -------------------------------------------------------------------------- */
/* Pagina "attesa" — pensiero in attesa                                       */
/* -------------------------------------------------------------------------- */
.waiting {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 22px 48px;
}
.waiting .hero-symbol { margin-bottom: 44px; }
.waiting .eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--gold-faint);
  margin-bottom: 18px;
}
.waiting h1 {
  font-size: clamp(34px, 9vw, 62px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 22px;
  color: var(--cream);
}
.waiting .lead {
  font-size: clamp(17px, 4.6vw, 21px);
  color: var(--cream-dim);
  max-width: 26ch;
  margin: 0 auto 40px;
  line-height: 1.62;
}
.waiting .btn-primary { font-size: 17px; padding: 16px 32px; }
.waiting .waiting-foot {
  margin-top: 44px;
  font-size: 14px;
  color: var(--cream-faint);
}
.waiting .waiting-foot a { color: var(--cream-faint); }

/* -------------------------------------------------------------------------- */
/* Animazione onda (rispetta prefers-reduced-motion)                          */
/* -------------------------------------------------------------------------- */
@keyframes ripple {
  0%   { transform: scale(0.55); opacity: 0.65; }
  100% { transform: scale(1.7);  opacity: 0; }
}
.ripple {
  transform-origin: center;
  transform-box: fill-box;
  animation: ripple 3.4s ease-out infinite;
}
.ripple.r2 { animation-delay: 1.13s; }
.ripple.r3 { animation-delay: 2.26s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ripple { animation: none; opacity: 0.28; }
  .btn-primary:hover { transform: none; }
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  body { font-size: 18px; }
  .hero { padding: 60px 0 92px; }
  .threads { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .thread { flex-direction: column; text-align: left; }
  .thread .ico { margin-bottom: 6px; }
  .manifesto { max-width: 34ch; }
}