/* =====================================================================
   Home — stili specifici (hero, showcase, testimonianze, CTA)
   ===================================================================== */

/* — Hero — */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--brand-ink); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity 1.1s var(--ease); }
.hero-video.is-ready { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,26,35,.45) 0%, rgba(11,26,35,.3) 40%, rgba(11,26,35,.7) 100%); }
.hero-overlay::after { content: ''; position: absolute; inset: 0; background: radial-gradient(1100px 600px at 50% 30%, transparent 40%, rgba(11,26,35,.45) 100%); }

.hero-deco { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(circle, rgba(39,229,207,.18), transparent 70%); }
.hero-deco--1 { width: 560px; height: 560px; top: -160px; right: -160px; animation: floating 18s ease-in-out infinite; }
.hero-deco--2 { width: 420px; height: 420px; bottom: -140px; left: -120px; animation: floating 22s ease-in-out infinite reverse; }

.hero-content { position: relative; z-index: 2; text-align: center; padding: var(--gutter); color: #fff; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 1.5rem; opacity: 0; animation: heroUp 1s var(--ease) forwards .2s; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 26px; height: 1px; background: rgba(255,255,255,.55); }
.hero-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-hero); line-height: .95; letter-spacing: .02em; color: #fff; text-shadow: 0 8px 40px rgba(0,0,0,.35); opacity: 0; animation: heroUp 1.1s var(--ease) forwards .35s; }
.hero-divider { width: 0; height: 1px; background: rgba(255,255,255,.7); margin: 1.1rem auto; animation: heroLine 1s var(--ease) forwards 1s; }
.hero-sub { font-style: italic; font-family: var(--font-head); font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: .35em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.hero-sub span { display: inline-block; opacity: 0; transform: translateY(12px); animation: heroLetter .55s var(--ease) forwards; }
.hero-tagline { max-width: 46ch; margin: 1.6rem auto 0; color: rgba(255,255,255,.85); font-size: var(--fs-lead); opacity: 0; animation: heroUp 1s var(--ease) forwards 1.5s; }
.hero-cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; opacity: 0; animation: heroUp 1s var(--ease) forwards 1.7s; }

@keyframes heroUp { to { opacity: 1; transform: none; } }
@keyframes heroLine { to { width: 130px; } }
@keyframes heroLetter { to { opacity: 1; transform: none; } }

.scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px; opacity: 0; animation: heroUp 1s var(--ease) forwards 2s; }
.scroll-cue::before { content: ''; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: scrollDot 2s infinite; }
@keyframes scrollDot { 0%, 100% { transform: translate(-50%, 0); opacity: 0; } 50% { transform: translate(-50%, 12px); opacity: 1; } }

/* — Intro / statement — */
.intro-statement { font-family: var(--font-head); font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.35; font-weight: 500; max-width: 24ch; }
.intro-statement em { font-style: italic; color: var(--brand-aqua-deep); }

/* — Showcase cast (lista alternata) — */
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.showcase-row + .showcase-row { margin-top: clamp(3rem, 6vw, 5.5rem); }
.showcase-row:nth-child(even) .showcase-media { order: 2; }
.showcase-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.showcase-media:hover img { transform: scale(1.05); }
.showcase-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
@media (max-width: 820px) { .showcase-row { grid-template-columns: 1fr; } .showcase-row:nth-child(even) .showcase-media { order: 0; } }

/* — Parallax quote — */
.quote-band { position: relative; min-height: 60vh; display: grid; place-items: center; overflow: hidden; text-align: center; color: #fff; }
.quote-band .hero-media { z-index: 0; }
.quote-band__bg { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.quote-band__overlay { position: absolute; inset: 0; background: rgba(11,26,35,.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.quote-band__content { position: relative; z-index: 2; max-width: 820px; padding: var(--gutter); }
.quote-band blockquote { font-family: var(--font-head); font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.45; }
.quote-band cite { display: block; margin-top: 1.5rem; font-style: normal; letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; color: var(--brand-aqua); }

/* — Testimonianze — */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
.testi { display: flex; flex-direction: column; gap: 1rem; }
.testi__stars { color: #f5b301; letter-spacing: .1em; }
.testi__text { font-size: 1.02rem; color: var(--ink); }
.testi__who { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.testi__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #06231f; font-weight: 600; }
.testi__name { font-weight: 600; font-size: .95rem; }
.testi__role { font-size: .82rem; color: var(--ink-faint); }

/* — CTA finale — */
.cta-final { position: relative; overflow: hidden; text-align: center; color: #fff; background: var(--grad-brand); }
.cta-final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 400px at 80% 20%, rgba(255,255,255,.18), transparent 60%); }
.cta-final__inner { position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
.cta-final h2 { color: #06231f; }
.cta-final p { color: rgba(6,35,31,.78); margin-inline: auto; }