:root {
  /* Palette: panna caldo, verde salvia, marrone scuro, ottone */
  --bg: #f9f6f0;          /* panna chiaro, sfondo della pagina */
  --paper: #f2e9d8;       /* panna caldo, testo chiaro su scuro e pulsanti chiari */
  --paper-deep: #e8ddc8;  /* panna scuro, divisori e barre dentro le card */
  --card: #fdfbf7;        /* panna chiarissimo per card e telefono demo */
  --ink: #3a2a20;         /* marrone scuro, testo */
  --ink-soft: #6a5646;    /* marrone medio, testo secondario */
  --sage: #a3b18a;        /* salvia pieno, fasce e decori: sopra solo testo --ink */
  --sage-deep: #4a5c3e;   /* salvia scuro, pulsanti e testo accentato */
  --brass: #b08d57;       /* ottone, solo dettagli: linee, sottolineature, barre */
  --line: #d6c8ad;

  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
}
.skip:focus { left: 0.5rem; z-index: 10; }

/* Pulsanti e link */

.button {
  display: inline-block;
  background: var(--sage-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  transition: background 0.2s;
}
.button:hover { background: #3d4d33; }
.button-small { padding: 0.5rem 1rem; font-size: 0.9375rem; }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: #fff; }

.text-link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-thickness: 2px; }
.text-link-light { color: var(--paper); }

/* Intestazione */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
  background: rgba(249, 246, 240, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
.brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  text-decoration: none;
}
.site-header nav { margin-left: auto; }
.site-header ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; color: var(--ink-soft); font-size: 0.9375rem; }
.site-header nav a:hover { color: var(--ink); }

/* Hero: testo centrato, poi la foto grande con il telefono vero sopra */

.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--sage-deep);
}

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}
.hero-text { max-width: 50rem; margin: 0 auto; text-align: center; }
.hero h1 {
  margin: 0.75rem auto 0;
  font-size: clamp(3rem, 8vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 13ch;
}
.lead {
  margin: 1.75rem auto 0;
  font-size: 1.1875rem;
  color: var(--ink-soft);
  max-width: 36rem;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.hero-stage {
  --overlap: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.stage-photo {
  display: block;
  width: 100%;
  height: clamp(300px, 44vw, 560px);
  object-fit: cover;
  border-radius: 1.5rem;
  background: var(--sage);
  filter: sepia(0.12) saturate(0.9);
}
.hero-stage .phone { margin-top: calc(var(--overlap) * -1); }
.stage-hint {
  order: 3;
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Biglietto d'invito (nella sezione "Cosa include") */

.invite-names {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  line-height: 1.1;
}
.invite-line {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.invite-url {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--sage-deep);
  font-weight: 500;
}

/* Telefono con il sito di esempio */

.phone {
  position: relative;
  z-index: 1;
  /* Grande come un telefono vero (schermo da 366 px), ma mai più alto della finestra */
  width: min(390px, calc((100svh - 6rem) * 0.49));
  height: min(800px, calc(100svh - 6rem));
  padding: 12px;
  background: var(--ink);
  border-radius: 52px;
  box-shadow: 0 30px 60px -30px rgba(58, 42, 32, 0.6);
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border-radius: 40px;
  overflow: hidden;
  font-size: 0.875rem;
}

.phone-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--card); }

/* Sezioni */

.features, .about, .example-cta, .price, .process, .faq {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
}
.features h2, .about h2, .example-cta h2, .price h2, .process h2, .faq h2, .contact h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

/* Cosa include: righe alternate, testo da una parte e pezzo di sito dall'altra */

.section-head { text-align: center; }
.section-head h2 { margin: 0.5rem auto 0; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
}
.feature:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature:nth-of-type(even) .feature-text { order: 2; }
.moment {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--sage-deep);
}
.feature h3 {
  margin-top: 0.5rem;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.feature-text > p:last-child { margin-top: 1.25rem; color: var(--ink-soft); max-width: 32rem; text-wrap: pretty; }

.feature-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--sage);
  border-radius: 1.5rem;
  overflow: hidden;
}
.feature:nth-of-type(even) .feature-visual { background: var(--paper-deep); }

/* Pezzi di sito finti dentro le righe: decorativi, aria-hidden nell'HTML */
.mock-card {
  width: min(19rem, 88%);
  padding: 1.25rem 1.35rem;
  background: var(--card);
  border-radius: 1rem;
  box-shadow: 0 24px 48px -28px rgba(58, 42, 32, 0.55);
  font-size: 0.9375rem;
}
.mock-float {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: auto;
  max-width: 13rem;
  font-size: 0.875rem;
}
.mock-title { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; margin-bottom: 0.5rem; }
.mock-schedule { list-style: none; margin: 0; padding: 0; }
.mock-schedule li { display: grid; grid-template-columns: 3.25rem 1fr; padding: 0.55rem 0; border-top: 1px solid var(--paper-deep); }
.mock-schedule b { color: var(--sage-deep); font-weight: 600; }
.mock-schedule small, .mock-map small { display: block; color: var(--ink-soft); }
.mock-map { display: flex; gap: 0.75rem; align-items: center; }
.pin { flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--sage-deep); }

.mock-field { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--ink-soft); }
.mock-field span { display: block; padding: 0.35rem 0 0.4rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 0.9375rem; }
.mock-btn { display: block; margin-top: 1.1rem; padding: 0.6rem; text-align: center; border-radius: 999px; background: var(--sage-deep); color: #fff; font-weight: 500; }
.mock-tally p { display: flex; align-items: baseline; gap: 0.5rem; }
.mock-tally b { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; min-width: 2ch; font-variant-numeric: tabular-nums; }

.mock-notice { border-left: 3px solid var(--brass); }
.mock-tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.35rem; }
.mock-table { display: flex; align-items: center; gap: 0.75rem; }
.mock-table .qr { width: 3.5rem; }

.qr { display: block; width: 4.5rem; height: auto; fill: var(--ink); }

.visual-invite { background: var(--sage); }
.mock-invite {
  width: 15rem;
  padding: 2rem 1.5rem 1.5rem;
  background: var(--card);
  text-align: center;
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -26px rgba(58, 42, 32, 0.55);
  transform: rotate(-4deg);
}
.mock-invite .qr { margin: 1.25rem auto 0; }
.mock-urlbar {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--card);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 12px 28px -18px rgba(58, 42, 32, 0.6);
}

.visual-album {
  height: 26rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem;
  place-items: stretch;
}
.visual-album img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
  background: var(--sage);
  filter: sepia(0.12) saturate(0.9);
}
.visual-album img:first-child { grid-row: span 2; }
.mock-count { line-height: 1.7; }
.mock-count b { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }

/* Chi siamo */

.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about-year {
  font-family: var(--serif);
  font-size: clamp(5rem, 14vw, 10rem);
  line-height: 0.9;
  color: var(--sage-deep);
  font-variant-numeric: lining-nums;
}
.about-year span {
  display: block;
  font-size: 0.3em;
  font-style: italic;
  color: var(--ink-soft);
}
.about-text p { margin-top: 1.25rem; max-width: 34rem; color: var(--ink-soft); }
.about-text h2 + p { margin-top: 1.75rem; }
.about-text .signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--ink);
}

/* Invito ad aprire il sito di esempio */

.example-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.example-cta p { margin-top: 1rem; max-width: 36rem; color: var(--ink-soft); }
.example-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* Prezzi */

.price-box {
  max-width: 40rem;
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--line);
}
.price-figure { font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1; }
.price-note { margin-top: 0.5rem; color: var(--ink-soft); }
.price-box h3 { margin-top: 2rem; font-size: 1.375rem; }
.price-extra { margin-top: 0.5rem; color: var(--ink-soft); }
.ticks { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.ticks li { position: relative; padding: 0.45rem 0 0.45rem 1.75rem; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.95em;
  width: 0.7rem;
  height: 0.35rem;
  border-left: 2px solid var(--sage-deep);
  border-bottom: 2px solid var(--sage-deep);
  transform: rotate(-45deg);
}

/* Come funziona: quattro passaggi in fila */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.steps li { counter-increment: step; padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--sage-deep);
  margin-bottom: 1rem;
}
.steps h3 { font-size: 1.375rem; line-height: 1.2; }
.steps p { margin-top: 0.5rem; color: var(--ink-soft); }

.faq { border-top: 1px solid var(--line); }
.faq h2 { margin-bottom: 2rem; }
.faq details { max-width: 46rem; border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2rem 1.25rem 0;
  font-weight: 500;
  font-size: 1.125rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sage-deep);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.25rem; color: var(--ink-soft); max-width: 60ch; }

.contact {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(4rem, 10vw, 7rem) var(--gutter);
  text-align: center;
}
.contact h2 { margin: 0 auto; }
.contact > p { margin: 1.25rem auto 0; color: #d9ccb8; max-width: 36rem; }
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

/* Form di contatto */

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 40rem;
  margin: 2.5rem auto 0;
  text-align: left;
}
.field { display: grid; gap: 0.4rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.field-wide { grid-column: 1 / -1; }
.field > span, .field legend { font-size: 0.9375rem; font-weight: 500; color: #d9ccb8; padding: 0; margin-bottom: 0.4rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
}
.field input:disabled { opacity: 0.45; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.9375rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--brass); }
.honeypot { position: absolute; left: -9999px; }

button.button { border: 0; font: inherit; font-weight: 500; cursor: pointer; }
button.button:disabled { opacity: 0.6; cursor: progress; }
.button-whatsapp { background: #25d366; color: #0b3d1f; }
.button-whatsapp:hover { background: #1fbb59; }

.form-status { min-height: 1.6em; text-align: center; color: #d9ccb8; }
.form-status.is-error { color: #f3b7a6; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.site-footer address { font-style: normal; }
.footer-brand { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink); }

/* Decorazioni: ghirigori disegnati a tratto (SVG nell'HTML) e forme astratte.
   animazioni.js disegna i ghirigori e muove le forme; senza JavaScript restano fermi. */

.deco {
  display: block;
  height: auto;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--sage-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.deco .bold { stroke: var(--brass); stroke-width: 2.4; }
.deco .fruit { fill: var(--brass); stroke: none; }

.accent { font-style: italic; font-weight: 500; color: var(--sage-deep); }

/* Forme astratte: cerchi pieni, anelli, archi e punti nei colori della palette */
.hero, .band, .about, .price, .faq { position: relative; isolation: isolate; }
main { overflow-x: clip; }
.band { overflow: clip; }
.hero > .shapes { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.shape { position: absolute; display: block; border-radius: 50%; }
.shape-disc { background: var(--sage); opacity: 0.4; }
.shape-ring { border: 1.5px solid var(--brass); }
.shape-dot { background: var(--brass); }
.shape-arch { border-radius: 999px 999px 0 0; background: var(--sage); }

.hero .shape-disc { width: 26rem; height: 26rem; left: -10rem; top: 3rem; }
.hero .shape-ring { width: 18rem; height: 18rem; right: -6rem; top: 1rem; }
.hero .shape-dot { width: 1.1rem; height: 1.1rem; right: 16%; top: 19rem; }

/* Fasce di colore a tutta larghezza */
.band { max-width: none; padding-left: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)); padding-right: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)); }
.band-dark { background: var(--sage-deep); color: var(--paper); }
.band-dark .deco { stroke: var(--paper); }
.band-dark .steps p { color: #d6dcc8; }
.band-dark .steps li::before { color: var(--sage); }
.band-dark .steps li::after { background: rgba(242, 233, 216, 0.5); }
.band-dark .shape-disc { background: var(--sage); opacity: 0.18; width: 26rem; height: 26rem; right: -8rem; bottom: -10rem; }
.band-dark .shape-ring { width: 12rem; height: 12rem; right: 12%; top: 2.5rem; }

.band-sage { background: var(--sage); border: 0; }
.band-sage p { color: var(--ink); }
.band-sage .shape-arch { width: 14rem; height: 20rem; right: 22%; bottom: 0; background: var(--sage-deep); opacity: 0.18; }
.band-sage .shape-ring { width: 9rem; height: 9rem; left: -3rem; top: -3rem; border-color: var(--ink); opacity: 0.35; }

.about-mark { position: relative; display: grid; place-items: center; justify-self: center; width: clamp(15rem, 28vw, 22rem); aspect-ratio: 1; }
.about-mark .shape-disc { inset: 12%; opacity: 0.45; }
.deco-orbit { position: absolute; inset: 0; width: 100%; stroke: var(--brass); }
.about-mark .about-year { position: relative; text-align: center; }

.price-art { left: auto; right: var(--gutter); top: 9rem; bottom: auto; width: clamp(14rem, 24vw, 19rem); height: 22rem; }
.price-art .shape-arch { width: 70%; height: 85%; right: 0; bottom: 0; opacity: 0.55; }
.price-art .shape-disc { width: 38%; aspect-ratio: 1; height: auto; left: 0; top: 18%; background: var(--brass); opacity: 0.75; }
.price-art .shape-ring { width: 55%; aspect-ratio: 1; height: auto; right: -10%; top: 0; border-color: var(--ink); }

.faq-art { left: auto; right: var(--gutter); top: 6rem; bottom: auto; width: clamp(12rem, 20vw, 16rem); aspect-ratio: 1; }
.faq-art .shape-ring { inset: 0; border-color: var(--sage-deep); }
.faq-art .shape-dot { width: 18%; aspect-ratio: 1; left: 10%; bottom: 8%; }

.contact .deco { stroke: var(--brass); }
.contact .accent { color: var(--sage); }

/* Le parole dei titoli salgono da una "finestra" (animazioni.js) */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.word > span { display: inline-block; }

/* Come funziona: la linea sopra ogni passaggio si può "disegnare" */
.steps li { position: relative; border-top: 0; }
.steps li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(var(--draw, 1));
  transform-origin: left;
}

/* Schermi piccoli */

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about-mark { margin: 1rem 0 2rem; }
  .price-art, .faq-art { display: none; }
  .feature, .feature:nth-of-type(even) { grid-template-columns: 1fr; gap: 2rem; }
  .feature:nth-of-type(even) .feature-text { order: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .site-header nav { display: none; }
  .site-header .button { margin-left: auto; }
  .site-header { gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .brand { font-size: 1.25rem; }
  .site-header .button { white-space: nowrap; }
  .hero-stage { --overlap: 120px; }
  .mock-float { position: relative; right: auto; bottom: auto; justify-self: end; margin-top: -1.75rem; }
  .stage-photo { height: 280px; border-radius: 1rem; }
  /* Lascia un po' di pagina sopra e sotto: sopra il telefono il dito scorre il sito di esempio, non la vetrina */
  .phone { width: min(340px, 100%); height: min(680px, 78svh); border-radius: 46px; }
  .phone-screen { border-radius: 34px; }
  .feature-visual { min-height: 20rem; border-radius: 1rem; }
  .visual-album { height: 22rem; }
  .visual-album .mock-float { position: absolute; right: 1rem; bottom: 1rem; margin: 0; }
  .steps { grid-template-columns: 1fr; }
  .hero .shape-disc { width: 14rem; height: 14rem; left: -7rem; top: 2rem; }
  .hero .shape-ring { width: 10rem; height: 10rem; right: -5rem; top: 0; }
  .hero .shape-dot { top: 15rem; right: 8%; }
  .band-dark .shape-ring { width: 8rem; height: 8rem; right: -4rem; top: 1rem; }
  .band-sage .shape-arch { right: -4rem; width: 10rem; height: 14rem; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-actions .button { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}