:root {
    color-scheme: light;
    --bg: #fff;
    --alt: #f3f5fb;
    --card: #fff;
    --fg: #000;
    --mut: #000;
    --line: #dce2f0;
    --accent: #2f54eb;
    --accent-d: #1e3bb8;
    --soft: #e3e9ff;
    --ink: #000;
    --cy: #6f9bff;
    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: #000000 !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: rgb(0, 0, 0) solid 5px !important;
    text-decoration: none !important;
    background: rgb(0, 0, 0) !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(255, 255, 255, .82);
    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: #fff;
    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: #fff;
    color: var(--ink);
    font-style: normal;
    transition: transform .35s
}

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

.btn:hover {
    box-shadow: 0 0 0 4px rgba(47, 84, 235, .2)
}

.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(47, 84, 235, .14), transparent 70%)
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(47, 84, 235, .5) 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: #fff;
    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(47, 84, 235, .3);
        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: #fff;
    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(10, 25, 80, .3)
}

.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(11, 16, 32, .25);
    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: #fff;
    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(47, 84, 235, .16), transparent 70%), #fff;
    box-shadow: 0 18px 40px -28px rgba(10, 25, 80, .3)
}

.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(255, 255, 255, .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: #fff;
    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(47, 84, 235, .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, #171a2b, #0e1020);
    color: #f3f1e8;
    border: 1px solid #2c2f45;
    border-radius: 28px;
    padding: 1.4rem;
    box-shadow: 0 30px 60px -34px rgba(10, 25, 80, .6)
}

.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: #3a3d55
}

.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: #3a3d55
}

.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: #1b1e32;
    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 #2a3f9e;
    border-radius: 999px;
    background: #141c3d;
    color: #a9c0ff;
    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}