:root {
    color-scheme: dark;
    --bg: #0a0c0d;
    --alt: #101415;
    --card: #141a1b;
    --fg: #f4f1ea;
    --mut: #b3b0a8;
    --line: #263033;
    --accent: #0e7c74;
    --accent-d: #4fd1c5;
    --soft: #0c2422;
    --ink: #f4f1ea;
    --cy: #e0b45a;
    --rgb: 14, 124, 116;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

:root,
.asw-widget,
.asw-container .asw-menu {
    --asw-primary: #0e7c74 !important;
    --asw-primary-subtle: color-mix(in srgb, var(--asw-primary), transparent 90%) !important;
    --asw-primary-faint: color-mix(in srgb, var(--asw-primary), transparent 95%) !important;
    --asw-border-radius: 50% !important;
    --asw-widget-size: 58px !important;
    --asw-icon-size: 36px !important;
}

.hideme{
    display: none !important;
    visibility: hidden !important;
}

.asw-widget .asw-menu-btn {
    right: 20px;
    left: auto;
    bottom: 100px;
    outline: #0a0c0d solid 5px !important;
    text-decoration: none !important;
    background: #0e7c74 !important;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
    background: var(--bg)
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 400 1rem/1.7 Sora, system-ui, -apple-system, "Segoe UI", sans-serif;
    padding-bottom: 88px;
    overflow-x: hidden
}

h1,
h2,
h3,
h4 {
    font-family: Sora, system-ui, sans-serif;
    margin: 0 0 .6em;
    letter-spacing: -.025em
}

h1 {
    font-size: clamp(2.1rem, 9vw, 4.6rem);
    font-weight: 400;
    line-height: 1.04
}

h2 {
    font-size: clamp(1.7rem, 6.2vw, 2.8rem);
    font-weight: 400;
    line-height: 1.1
}

h1 b,
h2 b {
    font-weight: 700
}

h3 {
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.3
}

.ac {
    font-weight: 700;
    color: var(--accent-d)
}

p {
    margin: 0 0 1em;
    max-width: 62ch;
    color: var(--mut)
}

a {
    color: inherit
}

:focus-visible {
    outline: 3px solid var(--accent-d);
    outline-offset: 3px;
    border-radius: 8px
}

.wrap {
    width: min(1120px, 100% - 2.4rem);
    margin-inline: auto
}

header .wrap,
footer .wrap{
  width:100%;
  max-width:none;
  padding-inline:25px;
}

section {
    padding: 4.5rem 0
}

.alt {
    background: var(--alt)
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.2rem;
    font: 500 .66rem Sora, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mut)
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--mut)
}

.eyebrow.c {
    justify-content: center
}

header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
    background: rgba(10, 10, 11, .78);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line)
}

header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 1rem
}

.logo {
    display: block;
    color: var(--ink);
    margin-top: -7px;
}

.logo svg {
    height: 30px;
    width: auto;
    display: block
}

nav {
    display: none;
    gap: 1.5rem;
    font-size: .82rem
}

nav a {
    font-size: 1rem;
    text-decoration: none;
    color: var(--mut);
    transition: color .2s
}

nav a:hover {
    color: var(--fg)
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 48px;
    padding: 0 1.3rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--ink);
    color: #0a0a0b;
    font: 500 .88rem Sora, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .3s
}

.btn .ar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0a0a0b;
    color: var(--ink);
    font-style: normal;
    transition: transform .35s
}

.btn:hover .ar {
    transform: rotate(45deg)
}

.btn:hover {
    box-shadow: 0 0 0 4px rgba(var(--rgb), .3)
}

.btn:active {
    transform: scale(.97)
}

.btn.ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--line)
}

.btn.accent {
    background: var(--accent);
    color: #fff
}

.btn.sm {
    min-height: 40px;
    font-size: .8rem;
    padding: 0 1.1rem
}

.btn.sm.btn-nav{
    font-size: 1rem;
    margin-left: 85px;
}

.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 4.2rem 0 5.2rem;
    background: radial-gradient(70% 55% at 50% 0, rgba(var(--rgb), .16), transparent 70%)
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.3px) 0 0/22px 22px;
    mask-image: linear-gradient(#000, transparent 80%)
}

.hero .wrap {
    position: relative
}

.lead {
    font-size: 1.04rem;
    max-width: 52ch;
    margin: 0 auto
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 1.6rem 0 2.4rem
}

.hero .cta {
    justify-content: center
}

.flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    max-width: 520px;
    margin: 0 auto
}

.flow::before,
.flow::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 16.6%;
    height: 2px;
    border-radius: 2px
}

.flow::before {
    width: 67%;
    background: var(--line)
}

.flow::after {
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--cy));
    animation: run 3.6s .6s cubic-bezier(.6, 0, .2, 1) forwards
}

.node {
    position: relative;
    z-index: 1;
    font-size: .78rem;
    color: var(--mut)
}

.node i {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto .5rem;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    font: 500 .8rem Sora, sans-serif;
    color: var(--mut);
    animation: lit .5s both
}

.node:nth-child(1) i {
    animation-delay: .6s
}

.node:nth-child(2) i {
    animation-delay: 2s
}

.node:nth-child(3) i {
    animation-delay: 3.5s
}

@keyframes run {
    to {
        width: 67%
    }
}

@keyframes lit {
    to {
        border-color: var(--accent);
        box-shadow: 0 8px 26px rgba(var(--rgb), .35);
        background: var(--soft)
    }
}

.chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.2rem
}

.chips span {
    padding: .3rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    font: 500 .72rem Sora, sans-serif;
    color: var(--mut);
    transition: transform .25s, color .25s, border-color .25s
}

.chips span:hover {
    transform: translateY(-3px);
    color: var(--accent-d);
    border-color: var(--accent)
}

.card,
.mcard,
.answer,
details,
.tile,
.pf,
.reg {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .7)
}

.card {
    padding: 1.4rem
}

.card p {
    margin: 0
}

.answer {
    padding: 1.4rem;
    margin-top: -1.8rem;
    z-index: 2
}

.answer p {
    margin: 0;
    color: var(--fg)
}

.answer strong {
    color: var(--accent-d);
    font-weight: 600
}

.grid {
    display: grid;
    gap: 1rem
}

.marq {
    overflow: hidden;
    padding: 3rem 0 1rem;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
}

.marq div {
    display: flex;
    gap: 3.2rem;
    width: max-content;
    animation: mq 30s linear infinite
}

.marq span {
    font: 600 1.5rem Sora, sans-serif;
    color: rgba(244, 241, 234, .22);
    white-space: nowrap
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 1rem;
    padding: 2.2rem 0 0
}

.stat {
    border-left: 2px solid var(--accent);
    padding-left: .9rem;
    line-height: 1.4
}

.stat b {
    display: block;
    font-weight: 600
}

.stat span {
    font-size: .8rem;
    color: var(--mut)
}

.scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 1.8rem -1.2rem 0;
    padding: 0 1.2rem 1.2rem;
    scrollbar-width: none
}

.scroll::-webkit-scrollbar {
    display: none
}

.scroll>* {
    flex: 0 0 74%;
    scroll-snap-align: center
}

.pf {
    padding: 1rem;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s
}

.pf:hover {
    transform: translateY(-6px);
    border-color: var(--accent)
}

.pv {
    height: 96px;
    border-radius: 14px;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-end;
    padding: .8rem 1rem;
    font: 700 1.15rem Sora, sans-serif;
    color: #fff;
    background: linear-gradient(135deg, var(--a), var(--b));
    background-size: 220% 220%;
    transition: background-position .9s
}

.pf:hover .pv {
    background-position: 100% 100%
}

.pf .tg {
    font: 500 .62rem Sora, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-d);
    margin-bottom: .4rem
}

.pf p {
    font-size: .86rem;
    margin: 0
}

.mstack {
    display: grid;
    gap: 1.1rem;
    margin-top: 2rem
}

.mcard {
    display: grid;
    gap: 1.4rem;
    padding: 1.5rem
}

.mcard .tg {
    font: 500 .64rem Sora, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut);
    margin-top: 1rem
}

.mcard p {
    margin: 0
}

.ui {
    background: var(--alt);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem
}

.ui h4 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .4rem;
    font: 500 .62rem Sora, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut)
}

.ui h4 b {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line)
}

.row {
    display: grid;
    gap: .55rem;
    margin-top: .55rem;
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    font-size: .8rem
}

.row i {
    display: block;
    position: relative;
    height: 4px;
    border-radius: 4px;
    background: var(--soft)
}

.row i::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), var(--cy));
    transition: width 1.3s .2s cubic-bezier(.2, .8, .2, 1)
}

.tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
    margin-top: 1.8rem
}

.tile {
    padding: 1rem;
    transition: transform .3s, border-color .3s
}

.tile:hover {
    transform: translateY(-4px);
    border-color: var(--accent)
}

.tile .ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--soft);
    font-size: 1.1rem;
    margin-bottom: .9rem
}

.tile h3 {
    font-size: .9rem;
    font-weight: 600;
    margin: 0 0 .3rem
}

.tile p {
    font-size: .74rem;
    line-height: 1.5;
    margin: 0
}

.why {
    display: grid;
    gap: 2rem;
    align-items: center
}

.ticks {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: grid;
    gap: .6rem;
    font-size: .9rem
}

.ticks li {
    position: relative;
    padding-left: 1.7rem
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--soft)
}

.reg {
    padding: 1.2rem
}

.reg h4 {
    margin: 0 0 .8rem;
    font: 500 .62rem Sora, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut)
}

.reg dl {
    margin: 0
}

.reg div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: .82rem
}

.reg dt {
    font: 500 .62rem Sora, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mut);
    padding-top: .2rem
}

.reg dd {
    margin: 0;
    text-align: right;
    font-weight: 500
}

.stamp {
    display: inline-block;
    margin-top: 1rem;
    padding: .4rem .9rem;
    border: 1.5px solid var(--accent);
    border-radius: 10px;
    color: var(--accent-d);
    font: 500 .62rem Sora, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: rotate(-2deg)
}

.cases {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 1.6rem -1.2rem 1rem;
    padding: 0 1.2rem 1rem;
    scrollbar-width: none
}

.cases::-webkit-scrollbar {
    display: none
}

.case {
    flex: 0 0 82%;
    scroll-snap-align: center;
    padding: 1.4rem;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s
}

.case:hover,
.case:focus-within {
    transform: translateY(-6px);
    border-color: var(--accent)
}

.vis {
    height: 150px;
    border-radius: 14px;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    font: 700 1.5rem Sora, sans-serif;
    color: #fff;
    background: linear-gradient(135deg, var(--a), var(--b));
    background-size: 220% 220%;
    transition: background-position .9s
}

.case:hover .vis {
    background-position: 100% 100%
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .9rem 0 1rem
}

.tags span {
    padding: .2rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font: 500 .66rem Sora, sans-serif;
    color: var(--mut)
}

.more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font-weight: 600;
    font-size: .88rem;
    color: var(--accent-d);
    text-decoration: none
}

.more i {
    font-style: normal;
    transition: transform .3s
}

.case:hover .more i {
    transform: translateX(6px)
}

.others {
    margin: 1rem 0 1.4rem
}

.faq {
    display: grid;
    gap: 2rem
}

.fq {
    counter-reset: q
}

details {
    counter-increment: q;
    padding: 0 1.2rem;
    margin-bottom: .7rem;
    border-radius: 18px
}

summary {
    cursor: pointer;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    list-style: none
}

summary::before {
    content: counter(q, decimal-leading-zero);
    font: 500 .64rem Sora, sans-serif;
    color: var(--mut)
}

summary::-webkit-details-marker {
    display: none
}

summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.5rem;
    color: var(--accent-d);
    transition: transform .25s
}

details[open] {
    border-color: var(--accent)
}

details[open] summary::after {
    transform: rotate(45deg)
}

details p {
    margin: 0 0 1.1rem
}

.final {
    text-align: center;
    padding: 3rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: radial-gradient(80% 90% at 50% 0, rgba(var(--rgb), .18), transparent 70%), var(--card);
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .7)
}

.final p {
    margin-inline: auto
}

.final .cta {
    justify-content: center;
    margin-bottom: 0
}

.final address {
    font-style: normal;
    margin: 1rem 0;
    color: var(--mut)
}

footer {
    background: var(--alt);
    border-top: 1px solid var(--line);
    padding: 3.4rem 0 1.6rem;
    font-size: .86rem
}

.fcols {
    display: grid;
    gap: 2rem
}

footer h4 {
    margin: 0 0 .8rem;
    font: 500 .62rem Sora, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mut)
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem
}

footer a {
    text-decoration: none
}

footer a:hover {
    color: var(--accent-d)
}

footer p {
    font-size: .8rem;
    max-width: 44ch
}

.legal {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    color: var(--mut);
    font-size: .76rem;
    max-width: none
}

.mark {
    font: 700 clamp(2.4rem, 13.5vw, 9.6rem)/1 Sora, sans-serif;
    letter-spacing: -.04em;
    text-align: center;
    color: transparent;
    background: radial-gradient(var(--accent) 1.2px, transparent 1.5px) 0 0/7px 7px;
    -webkit-background-clip: text;
    background-clip: text;
    margin-top: 2rem;
    user-select: none;
    opacity: .55
}

.mark{margin-top:2rem;user-select:none}
.mark svg{display:block;width:100%;height:auto}
.mark .cls-1{fill:url(#dots)}

.bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    gap: .6rem;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 11, .9);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line)
}

.bar .btn {
    flex: 1;
    min-height: 46px
}

.pfctl {
    display: none
}

.feat {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
    display: grid;
    gap: .6rem
}

.feat li {
    position: relative;
    padding: .95rem 1rem .95rem 2.8rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    font-size: .92rem;
    transition: border-color .25s, transform .25s
}

.feat li:hover {
    border-color: var(--accent);
    transform: translateX(4px)
}

.feat li::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 1.4rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(var(--rgb), .7)
}

.tl {
    display: grid;
    margin-top: 2.4rem
}

.steps {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.5rem;
    border-left: 1px solid var(--line)
}

.st {
    position: relative;
    padding: 0 0 2.4rem
}

.st::before {
    content: "";
    position: absolute;
    left: -1.95rem;
    top: .25rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--line);
    transition: background .4s, box-shadow .4s
}

.st.on::before {
    background: var(--accent);
    box-shadow: 0 0 0 5px var(--soft)
}

.st .n {
    font: 500 .66rem Sora, sans-serif;
    letter-spacing: .16em;
    color: var(--mut);
    margin-bottom: .5rem
}

.st h3 {
    font-size: clamp(1.3rem, 4.6vw, 1.9rem);
    font-weight: 500;
    margin-bottom: .5rem
}

.st p {
    margin: 0 0 1.2rem
}

.stage {
    display: none
}

.card2 {
    background: linear-gradient(180deg, #18181b, #0f0f11);
    color: #f3f1e8;
    border: 1px solid #2a2a2e;
    border-radius: 28px;
    padding: 1.4rem;
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8)
}

.bgcard{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.vis.bgcard{
  position:relative;
  isolation:isolate;                 /* crea un contesto per lo z-index del ::before */
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* sfumato sopra l'immagine, sotto il testo */
.vis.bgcard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--a) 70%,transparent),
    color-mix(in srgb,var(--b) 90%,transparent));
  transition:opacity .4s;
}

/* evita che l'hover sposti la foto, come faceva con il gradiente */
.case:hover .vis.bgcard{background-position:center}
.case:hover .vis.bgcard::before{opacity:.7}

.card-body{
    padding: 1rem;
    padding-bottom: 0;
}

.bar2 {
    display: flex;
    align-items: center;
    gap: .4rem;
    font: 500 .6rem Sora, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9a9aa8
}

.bar2 b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38383d
}

.bar2 span {
    margin-left: .5rem
}

.big {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 1rem 0;
    font: 500 clamp(3.2rem, 11vw, 5.4rem)/1 Sora, sans-serif
}

.seg {
    display: flex;
    gap: .3rem;
    padding-bottom: .6rem
}

.seg i {
    display: block;
    width: 20px;
    height: 4px;
    border-radius: 3px;
    background: #38383d
}

.seg i.on {
    background: var(--accent)
}

.ck {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem
}

.ck li {
    position: relative;
    padding: .75rem 1rem .75rem 2.3rem;
    border-radius: 12px;
    background: #1d1d20;
    font-size: .86rem;
    color: #ece9dc
}

.ck li::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1.2rem;
    width: .5rem;
    height: .5rem;
    border-radius: 2px;
    background: var(--accent)
}

.pill {
    display: inline-block;
    margin-top: .9rem;
    padding: .55rem 1rem;
    border: 1px solid #14524d;
    border-radius: 999px;
    background: #0b1f1d;
    color: #8ee6dc;
    font-size: .8rem
}

.crit {
    margin: 1rem 0 0;
    font-size: .82rem;
    color: #c9c7b8;
    max-width: none
}

.stage .card2 {
    animation: pop .45s ease
}

@keyframes pop {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (min-width:760px) {
    .pfctl {
        display: flex;
        margin-top: .2rem
    }

    .feat {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:960px) {
    .tl {
        grid-template-columns: 1fr 1fr;
        gap: 3rem
    }

    .st {
        min-height: 64vh;
        opacity: .32;
        transition: opacity .45s;
        padding-top: .45rem
    }

    .st.on {
        opacity: 1
    }

    .ph {
        display: none
    }

    .stage {
        display: block;
        position: sticky;
        top: 100px;
        align-self: start
    }

    .card2 {
        padding: 1.8rem
    }
}

@media (min-width:760px) {
    body {
        padding-bottom: 0
    }

    .bar {
        display: none
    }

    nav {
        display: flex
    }

    section {
        padding: 6.5rem 0
    }

    .hero {
        padding: 6rem 0 7rem
    }

    .grid.c4 {
        grid-template-columns: repeat(4, 1fr)
    }

    .stats {
        grid-template-columns: repeat(4, 1fr)
    }

    .scroll {
        margin: 1.8rem 0 0;
        padding: 2rem 0
    }

    .scroll>* {
        flex: 0 0 calc((100% - 3rem)/3);
        scroll-snap-align: start
    }

    .pfctl {
        display: flex;
        gap: .6rem
    }

    .tiles {
        grid-template-columns: repeat(4, 1fr)
    }

    .mcard {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 2.2rem
    }

    .why {
        max-width: 780px
    }

    .cases {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
        margin: 1.6rem 0 1rem;
        padding: 0
    }

    .case {
        flex: none
    }

    .faq {
        grid-template-columns: .8fr 1.2fr;
        gap: 3rem
    }

    .faq>div:first-child {
        position: sticky;
        top: 96px;
        align-self: start
    }

    .fcols {
        grid-template-columns: 1.4fr 1fr 1fr 1fr
    }

    .final {
        padding: 4.4rem 2rem
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        transition: none !important;
        animation: none !important
    }

    .flow::after {
        width: 67%
    }

    .node i {
        border-color: var(--accent)
    }

    .marq div {
        animation: none
    }
}

.mb5{
    margin-bottom: 2.5rem
}
/* immagini dei case study come <img> (alt e indicizzazione), sotto lo sfumato */
.vis.bgcard img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}
.vis.bgcard span{position:relative}
.case h3{
  font-size:1.1rem;
  margin:0 0 .35rem;
}
#modena{margin-top:2rem}
.others a{text-decoration:underline;text-underline-offset:3px}

/* ===== video.modena.it: tema nero ===== */
body{letter-spacing:.005em}
::selection{background:var(--accent);color:#fff}
h1{font-weight:300}
h1 b{font-weight:600}
h2{font-weight:300}
h2 b,.ac{font-weight:600}
.btn.ghost{color:var(--fg)}
.btn.ghost:hover{border-color:var(--fg)}
.hero{padding-bottom:3.4rem}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.rec{display:inline-flex;align-items:center;gap:.5rem}
.rec::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(var(--rgb),.9);animation:blink 1.6s steps(2,start) infinite}
.eyebrow.rec::before{width:.5rem;height:.5rem}
@keyframes blink{to{visibility:hidden}}
.node i{background:var(--card)}

/* showreel */
.reel-sec{padding:0 0 4rem}
.reel{position:relative;margin:0 auto;max-width:1120px}
.frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(var(--rgb),.45)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;margin-top:.9rem;font:500 .7rem Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.reel-meta a{color:var(--fg);text-underline-offset:3px}
.corner{position:absolute;width:22px;height:22px;border:1.5px solid var(--fg);opacity:.5;pointer-events:none;z-index:2}
.corner.k1{top:-10px;left:-10px;border-right:0;border-bottom:0}
.corner.k2{top:-10px;right:-10px;border-left:0;border-bottom:0}
.corner.k3{bottom:-10px;left:-10px;border-right:0;border-top:0}
.corner.k4{bottom:-10px;right:-10px;border-left:0;border-top:0}

/* card dei formati e case study senza immagini */
.pv{position:relative;overflow:hidden;height:120px;font-weight:500;letter-spacing:-.01em}
.pv::after,.vis::after{content:"";position:absolute;left:0;right:0;top:0;height:12px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 10px,transparent 10px 18px);opacity:.6}
.pv small,.vis small{position:absolute;top:1.1rem;right:1rem;font:500 .62rem Sora,sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.vis{position:relative;overflow:hidden;height:170px;font-weight:500}
.case h3{font-size:1.1rem;margin:0 0 .35rem}
.case .client{font:500 .64rem Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.4rem}
.others a{text-decoration:underline;text-underline-offset:3px}
.feat li{background:var(--card)}
.chips span{background:transparent}
.stat{border-left-color:var(--accent)}
#modena{margin-top:2rem}
.mb5{margin-bottom:2.5rem}
details{background:var(--card)}
.legal a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:760px){
  .reel-sec{padding:0 0 6rem}
  .why{max-width:none;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
  #modena{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.rec::before{animation:none}}
.fw{position:relative}
.frame iframe{background:#000}
/* il margine del pulsante in header spingeva la pagina oltre lo schermo su smartphone */
@media (max-width:759px){.btn.sm.btn-nav{margin-left:0}}
/* copertine dei case study: immagine piena, sfumatura solo in basso per il nome */
.vis.bgcard::before{background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8));opacity:1}
.case:hover .vis.bgcard::before{opacity:.85}
.vis.bgcard img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.case:hover .vis.bgcard img{transform:scale(1.04)}
.vis.bgcard small{z-index:1}
.vis{text-shadow:0 2px 12px rgba(0,0,0,.6)}
@media (min-width:1000px){.cases{grid-template-columns:repeat(3,1fr)}.case .vis{height:150px}}
.vis.bgcard::after{display:none}
.vis.bgcard img{filter:saturate(.92) contrast(1.04)}
/* smartphone stretti: logo e "Parliamone" stanno nella larghezza dello schermo */
@media (max-width:420px){header .wrap{padding-inline:16px}.logo svg{height:24px}.btn.sm.btn-nav{font-size:.85rem;padding:0 1rem}}