/* ═══════════════════════════════════════════════════════════════════════
   Ella Flow — home
   Marchio: sabbia #E7CFA8 · salvia #A3C1AD · inchiostro #2A302E
            perla #F8F9F9 · notte #314054 · argilla #7C6258

   Nessun carattere tipografico esterno e nessuno script: la pagina non
   fa NESSUNA richiesta a domini terzi. E' una scelta coerente con
   l'informativa privacy (nessun tracciamento) e rende la pagina piu'
   veloce: si carica solo la foto.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --sabbia: #E7CFA8;
  --salvia: #A3C1AD;
  --argilla: #7C6258;
  --inchiostro: #2A302E;
  --perla: #F8F9F9;
  --scuro: #1A1613;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--scuro);
  color: var(--perla);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }

/* ── prima schermata ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;          /* svh: tiene conto della barra del browser sul telefono */
  min-height: 100vh;           /* riserva per i browser che non conoscono svh */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 50% 18%: tiene in quadro la testa e le braccia quando lo schermo e'
     largo e basso, dove una foto verticale verrebbe tagliata a meta'. */
  object-position: 50% 18%;
  /* il velo caldo che avvicina la foto di studio all'atmosfera al tramonto */
  filter: sepia(0.32) saturate(0.92) contrast(1.04) brightness(0.86);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 55%, rgba(26,22,19,0.10) 0%, rgba(26,22,19,0.62) 70%, rgba(26,22,19,0.82) 100%),
    linear-gradient(180deg, rgba(26,22,19,0.55) 0%, rgba(26,22,19,0.15) 35%, rgba(26,22,19,0.75) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  width: 100%;
  max-width: 760px;
}

.badge {
  display: inline-block;
  margin: 0 0 1.6rem;
  padding: .42rem 1.1rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(248,249,249,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

h1 {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 400;
  /* Il MINIMO del clamp e' la trappola: con 3.2rem (51 px) la scritta ELLA FLOW
     era piu' larga di un telefono da 390 px, sfondava il contenitore e si
     trascinava fuori schermo anche i pulsanti. Il minimo dev'essere una misura
     che ci sta davvero; e' il massimo a poter essere generoso. */
  font-size: clamp(2.3rem, 11.5vw, 6.4rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
  overflow-wrap: break-word;
}

.firma {
  margin: .5rem 0 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sabbia);
}

.claim {
  margin: 2rem auto 0;
  /* 42ch: abbastanza da tenere "Torna al centro. Respira. Lascia scorrere."
     su una riga sola su schermo largo. Il min() impedisce che su un telefono
     stretto quei 42 caratteri diventino piu' larghi dello schermo. */
  max-width: min(42ch, 100%);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  color: rgba(248,249,249,.94);
  text-shadow: 0 1px 18px rgba(0,0,0,.5);
}

.cta {
  margin-top: 2.4rem;
  display: flex;
  gap: .9rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 56px;                 /* comodo da toccare col pollice */
  padding: .95rem 1.9rem;
  border-radius: 14px;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--perla);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.btn:hover, .btn:focus-visible {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.4);
  transform: translateY(-2px);
}
.btn.ghost { background: rgba(26,22,19,.34); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: rgba(26,22,19,.5); }
.ico { opacity: .85; }

.giu {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 14px;
}
.giu span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255,255,255,.8);
  animation: scendi 2s ease-in-out infinite;
}
@keyframes scendi {
  0%, 100% { transform: translateY(0);    opacity: 1;   }
  50%      { transform: translateY(14px); opacity: .25; }
}

/* ── Tala ────────────────────────────────────────────────────────────── */

.strip {
  padding: 6rem 0 5rem;
  background: var(--scuro);
  text-align: center;
}

.occhiello {
  margin: 0 0 .6rem;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--salvia);
}

h2 {
  margin: 0 0 1.2rem;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.9rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.testo { margin: 0 auto 1.8rem; max-width: 52ch; color: rgba(248,249,249,.78); }

.link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  color: var(--sabbia);
  text-decoration: none;
  border-bottom: 1px solid rgba(231,207,168,.4);
  transition: border-color .25s ease, gap .25s ease;
}
.link:hover, .link:focus-visible { border-color: var(--sabbia); gap: .85rem; }

/* ── piede ───────────────────────────────────────────────────────────── */

footer {
  padding: 3rem 0 4rem;
  border-top: 1px solid rgba(255,255,255,.09);
  text-align: center;
  font-size: .92rem;
  color: rgba(248,249,249,.55);
}
footer p { margin: .3rem 0; }
.marchio {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.15rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248,249,249,.8);
  margin-bottom: .8rem !important;
}
footer a { color: rgba(231,207,168,.85); text-decoration: none; }
footer a:hover, footer a:focus-visible { text-decoration: underline; }

/* ── rispetto delle preferenze di sistema ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .giu span { animation: none; }
  .btn, .link { transition: none; }
}

/* ── schermi stretti ─────────────────────────────────────────────────── */

/* su schermo largo entra hero-wide.jpg, gia' in formato panoramico:
   li' il taglio verticale non serve piu' e la figura va tenuta intera */
@media (min-width: 1000px) {
  .hero-img { object-position: 50% 50%; }
}

@media (max-width: 700px) {
  /* su una foto verticale a tutto schermo il taglio migliore e' piu' alto */
  .hero-img { object-position: 50% 12%; }
  .hero-inner { padding: 2rem 1.15rem; }
  h1 { letter-spacing: .02em; }        /* la spaziatura fra le lettere costa larghezza */
  .firma { letter-spacing: .12em; }
  .cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .strip { padding: 4.5rem 0 3.5rem; }
}

/* Rete di sicurezza: nessun elemento puo' far comparire lo scorrimento
   orizzontale, che su un telefono e' il difetto piu' evidente di tutti. */
html, body { max-width: 100%; overflow-x: hidden; }