/* Rete commerciale — stile dei due pannelli. Chiaro rifinito (default del computer) e scuro blu notte. */
:root {
    --r-ink: #171b26; --r-soft: #4f586a; --r-mute: #6b7588; --r-line: #e3e7ee; --r-card: #ffffff; --r-bg2: #f4f6fb;
    --r-blue: #2f4ac0; --r-blue2: #5c7cfa; --r-amber: #f59f00; --r-green: #0e9f6e;
    --r-shadow: 0 1px 2px rgb(23 27 38 / .05), 0 12px 32px -12px rgb(23 27 38 / .14);
    --r-shadow-up: 0 2px 4px rgb(23 27 38 / .06), 0 28px 48px -18px rgb(47 74 192 / .30);
}
.dark {
    --r-ink: #eef1f8; --r-soft: #b4bccb; --r-mute: #8b95a8; --r-line: rgb(255 255 255 / .09); --r-card: #171b26; --r-bg2: #121620;
    --r-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .6);
    --r-shadow-up: 0 2px 4px rgb(0 0 0 / .3), 0 28px 48px -18px rgb(92 124 250 / .35);
}

/* Pulsanti primari in chiaro: colore pieno e testo bianco (Filament li schiarisce). */
:root:not(.dark) .fi-btn.fi-color-primary:not(.fi-outlined) { background: var(--r-blue); color: #fff; }
:root:not(.dark) .fi-btn.fi-color-primary:not(.fi-outlined):hover { background: #283d9c; }
:root:not(.dark) .fi-body { background: #f6f7fb; }

.rete-kicker { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--r-blue); margin: 0 0 .5rem; }
.dark .rete-kicker { color: var(--r-blue2); }

/* ---------- Inclinazione 3D comune ---------- */
.rete-tilt { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s; will-change: transform; position: relative; }
.rete-tilt.is-tilting { transition: transform .08s linear, box-shadow .3s; box-shadow: var(--r-shadow-up); }
.rete-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / .35), transparent 45%); }
.dark .rete-tilt::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgb(92 124 250 / .14), transparent 45%); }
.rete-tilt.is-tilting::after { opacity: 1; }

/* ---------- Scrivania: benvenuto ---------- */
.rete-hello { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center; padding: 2rem 2.25rem; border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--r-card), var(--r-bg2)); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); overflow: hidden; }
.rete-hello h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--r-ink); margin: 0 0 .5rem; letter-spacing: -.01em; }
.rete-hello p { color: var(--r-soft); max-width: 46ch; line-height: 1.55; margin: 0; }
.rete-hello__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.rete-alert { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.1rem; padding: .75rem 1rem; border-radius: .75rem;
    background: rgb(240 62 62 / .08); color: #c92a2a; font-size: .9rem; }
.dark .rete-alert { color: #ffa8a8; }
.rete-alert svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .1rem; }
.rete-alert a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.rete-stack { position: relative; height: 210px; perspective: 900px; }
.rete-stack__layer { position: absolute; left: 50%; top: 50%; width: 220px; height: 130px; margin: -65px 0 0 -110px; border-radius: 16px;
    border: 1px solid rgb(255 255 255 / .5); box-shadow: 0 18px 40px -16px rgb(23 27 38 / .45);
    transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--z) * 1px)); animation: rete-float 6s ease-in-out infinite; animation-delay: calc(var(--z) * -18ms);
    display: flex; align-items: flex-end; padding: .7rem .9rem; color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .04em; }
.rete-stack__layer span { transform: translateZ(1px); }
.rete-stack .l1 { --z: 0; background: linear-gradient(135deg, #2f4ac0, #5c7cfa); }
.rete-stack .l2 { --z: 34; background: linear-gradient(135deg, #0b7a55, #0e9f6e); }
.rete-stack .l3 { --z: 68; background: linear-gradient(135deg, #c26a00, #f59f00); }
.rete-stack .l4 { --z: 102; background: linear-gradient(135deg, #7e22ce, #a855f7); }
@keyframes rete-float {
    0%, 100% { transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--z) * 1px)); }
    50% { transform: rotateX(58deg) rotateZ(-34deg) translateZ(calc(var(--z) * 1.25px + 6px)); }
}

/* ---------- Obiettivi ---------- */
.rete-goals { display: grid; gap: 1rem; }
.rete-goals__head h2 { font-size: 1.1rem; font-weight: 800; color: var(--r-ink); margin: 0; }
.rete-goals__head p { color: var(--r-mute); font-size: .9rem; margin: .2rem 0 0; }
.rete-goal { --p: 0; display: grid; grid-template-columns: 96px 1fr; gap: 1.25rem; align-items: center; padding: 1.1rem 1.35rem; border-radius: 1rem;
    background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); }
.rete-goal__ring { position: relative; width: 96px; height: 96px; transform: translateZ(30px); }
.rete-goal__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rete-goal__ring circle { fill: none; stroke-width: 10; }
.rete-goal__ring .bg { stroke: var(--r-line); }
.rete-goal__ring .fg { stroke: var(--r-blue2); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.rete-goal.is-in .rete-goal__ring .fg { stroke-dashoffset: calc(100 - var(--p)); }
.rete-goal__ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: var(--r-ink); }
.rete-goal__body { transform: translateZ(14px); min-width: 0; }
.rete-goal__top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.rete-goal h3 { font-weight: 800; color: var(--r-ink); margin: 0; font-size: 1.02rem; }
.rete-goal__bonus { font-weight: 800; font-size: .82rem; padding: .25rem .65rem; border-radius: 999px; background: rgb(245 159 0 / .14); color: #b35c00; }
.dark .rete-goal__bonus { color: #ffc94d; }
.rete-goal__desc { color: var(--r-soft); font-size: .88rem; margin: .3rem 0 0; }
.rete-goal__bar { height: 8px; border-radius: 99px; background: var(--r-line); overflow: hidden; margin: .7rem 0 .5rem; }
.rete-goal__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--r-blue), var(--r-blue2)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.rete-goal.is-in .rete-goal__bar i { width: calc(var(--p) * 1%); }
.rete-goal__meta, .rete-goal__state { font-size: .84rem; color: var(--r-mute); margin: 0; }
.rete-goal__meta strong { color: var(--r-ink); }
.rete-goal__state { margin-top: .2rem; display: flex; gap: .35rem; align-items: center; font-weight: 600; color: var(--r-soft); }
.rete-goal__state svg { width: 1rem; height: 1rem; }
.rete-goal.is-won { border-color: rgb(14 159 110 / .45); background: linear-gradient(135deg, var(--r-card), rgb(14 159 110 / .07)); }
.rete-goal.is-won .fg { stroke: var(--r-green); }
.rete-goal.is-won .rete-goal__bar i { background: linear-gradient(90deg, #0b7a55, var(--r-green)); }
.rete-goal.is-won .rete-goal__state { color: var(--r-green); }
.rete-goal.is-ended { opacity: .65; }
.rete-empty { padding: 1.25rem; border: 1px dashed var(--r-line); border-radius: 1rem; color: var(--r-mute); text-align: center; font-size: .92rem; }
.rete-rules { color: var(--r-soft); line-height: 1.6; font-size: .93rem; }
.rete-rules__lead { color: var(--r-ink); margin: 0 0 .5rem; }

/* Mini barre negli obiettivi (pannello admin) */
.goal-mini { display: grid; grid-template-columns: 7.5rem 4rem 2.5rem; gap: .4rem; align-items: center; font-size: .78rem; }
.goal-mini i { --p: 0; height: 6px; border-radius: 9px; background: linear-gradient(90deg, var(--r-blue2) calc(var(--p) * 1%), var(--r-line) 0); }
.goal-mini b { text-align: right; }

/* Allegati */
.rete-files { display: flex; flex-wrap: wrap; gap: .5rem; }
.rete-file { display: inline-flex; gap: .4rem; align-items: center; padding: .45rem .75rem; border-radius: .6rem; border: 1px solid var(--r-line); font-size: .86rem; color: var(--r-ink); }
.rete-file:hover { border-color: var(--r-blue2); }
.rete-file__icon { width: 1rem; height: 1rem; }

/* ---------- Guida «Come lavoriamo» ---------- */
.guide { display: grid; gap: 2.5rem; color: var(--r-ink); }
.guide h2 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-weight: 800; letter-spacing: -.015em; margin: 0 0 1rem; }
.guide-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: center; padding: 2.5rem; border-radius: 1.5rem;
    background: radial-gradient(120% 120% at 100% 0%, rgb(92 124 250 / .14), transparent 55%), linear-gradient(160deg, var(--r-card), var(--r-bg2));
    border: 1px solid var(--r-line); box-shadow: var(--r-shadow); }
.guide-hero h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; }
.guide-hero p { color: var(--r-soft); line-height: 1.65; max-width: 56ch; }
.guide-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.guide-hero__chips a { padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; border: 1px solid var(--r-line); background: var(--r-card); color: var(--r-soft); transition: .2s; }
.guide-hero__chips a:hover { color: var(--r-blue); border-color: var(--r-blue2); transform: translateY(-2px); }

.guide-exploded { height: 330px; perspective: 1000px; border-radius: 1.25rem; }
.guide-exploded .ex { position: absolute; left: 50%; top: 50%; width: 250px; height: 150px; margin: -75px 0 0 -125px; border-radius: 18px; padding: .85rem 1rem;
    color: #fff; box-shadow: 0 24px 50px -20px rgb(23 27 38 / .55); border: 1px solid rgb(255 255 255 / .35);
    transform: rotateX(60deg) rotateZ(-40deg) translateZ(var(--z)); animation: ex-breathe 7s ease-in-out infinite; display: flex; flex-direction: column; gap: .5rem; }
.guide-exploded .ex b { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.ex-1 { --z: -30px; background: linear-gradient(135deg, #2f4ac0, #5c7cfa); }
.ex-2 { --z: 25px; background: linear-gradient(135deg, #0b7a55, #10b981); animation-delay: -.6s !important; }
.ex-3 { --z: 80px; background: linear-gradient(135deg, #c26a00, #fbbf24); animation-delay: -1.2s !important; }
.ex-4 { --z: 135px; background: linear-gradient(135deg, #7e22ce, #c084fc); animation-delay: -1.8s !important; }
@keyframes ex-breathe { 0%, 100% { transform: rotateX(60deg) rotateZ(-40deg) translateZ(var(--z)); } 50% { transform: rotateX(60deg) rotateZ(-36deg) translateZ(calc(var(--z) * 1.3 + 10px)); } }
.ex i { flex: 1; display: flex; gap: 6px; }
.ex s { display: block; text-decoration: none; background: rgb(255 255 255 / .55); border-radius: 6px; }
.ex-chart { align-items: flex-end; } .ex-chart s { flex: 1; height: var(--h); }
.ex-chat { flex-direction: column; } .ex-chat s { height: 14px; width: 70%; } .ex-chat s:nth-child(2) { align-self: flex-end; width: 50%; background: rgb(255 255 255 / .85); }
.ex-rows { flex-direction: column; } .ex-rows s { height: 10px; } .ex-rows s:nth-child(odd) { width: 80%; }
.ex-hero s { flex: 1; background: radial-gradient(circle at 30% 40%, rgb(255 255 255 / .9), rgb(255 255 255 / .2) 40%, transparent 41%), rgb(255 255 255 / .25); }

.guide-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.module { --accent: var(--r-blue); border-radius: 1.25rem; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); overflow: hidden;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s, opacity .8s, translate .8s; scroll-margin-top: 5rem; }
.module__visual { height: 150px; display: grid; place-items: center; background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--r-bg2);
    border-bottom: 1px solid var(--r-line); perspective: 700px; }
.module__body { padding: 1.4rem 1.6rem 1.6rem; transform: translateZ(18px); }
.module__num { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; }
.module h3 { font-size: 1.3rem; font-weight: 800; margin: .3rem 0 .5rem; }
.module p { color: var(--r-soft); line-height: 1.6; margin: 0; }
.module ul { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.module li { position: relative; padding-left: 1.4rem; color: var(--r-soft); font-size: .93rem; line-height: 1.5; }
.module li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55rem; height: .55rem; border-radius: 3px; background: var(--accent); transform: rotate(45deg); }
.module__say { margin-top: 1.1rem !important; padding: .85rem 1rem; border-radius: .8rem; background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--r-ink) !important; font-style: italic; }
.module__say span { display: block; font-style: normal; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .2rem; }

/* Mini schermi nei moduli */
.mock { width: 200px; height: 112px; border-radius: 12px; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: 0 18px 30px -16px rgb(23 27 38 / .4);
    transform: rotateX(22deg) rotateY(-18deg) translateZ(20px); position: relative; padding: 12px; display: grid; gap: 7px; align-content: start; animation: mock-sway 8s ease-in-out infinite; }
@keyframes mock-sway { 50% { transform: rotateX(16deg) rotateY(-8deg) translateZ(30px); } }
.mock span { display: block; border-radius: 5px; background: var(--r-line); }
.mock-site .orb { position: absolute; right: 14px; top: 14px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 45%, #121a3d); box-shadow: 0 10px 22px -6px var(--accent); }
.mock-site .line { height: 9px; } .mock-site .w70 { width: 55%; } .mock-site .w40 { width: 35%; }
.mock-site .btn { width: 64px; height: 18px; background: var(--accent); margin-top: 6px; border-radius: 99px; }
.mock-panel { grid-template-columns: 30px repeat(3, 1fr); }
.mock-panel .side { grid-row: span 3; background: color-mix(in srgb, var(--accent) 35%, var(--r-line)); }
.mock-panel .card { height: 30px; background: color-mix(in srgb, var(--accent) 16%, var(--r-line)); }
.mock-panel .row { grid-column: span 3; height: 10px; }
.mock-chat .b { height: 16px; width: 70%; border-radius: 10px 10px 10px 3px; }
.mock-chat .out { justify-self: end; width: 55%; background: var(--accent); border-radius: 10px 10px 3px 10px; }
.mock-chat .short { width: 40%; }
.mock-chat .dot { width: 34px; height: 10px; background: radial-gradient(circle, var(--r-mute) 2px, transparent 3px) 0 50% / 11px 10px repeat-x; animation: dots 1.2s steps(3) infinite; }
@keyframes dots { 0% { width: 12px; } 100% { width: 34px; } }
.mock-analyst .q { height: 12px; width: 60%; justify-self: end; background: var(--accent); }
.mock-analyst .bars { display: flex; gap: 6px; align-items: flex-end; height: 44px; background: none; }
.mock-analyst .bars s { flex: 1; height: var(--h); background: color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 4px 4px 0 0; text-decoration: none; }
.mock-analyst .a { height: 10px; width: 75%; }

.guide-block { scroll-margin-top: 5rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; counter-reset: s; }
.steps li { padding: 1.1rem 1rem 1.2rem; border-radius: 1rem; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow);
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s, opacity .7s, translate .7s; }
.steps li:nth-child(2) { transition-delay: 0s, 0s, .08s, .08s; } .steps li:nth-child(3) { transition-delay: 0s, 0s, .16s, .16s; }
.steps li:nth-child(4) { transition-delay: 0s, 0s, .24s, .24s; } .steps li:nth-child(5) { transition-delay: 0s, 0s, .32s, .32s; } .steps li:nth-child(6) { transition-delay: 0s, 0s, .4s, .4s; }
.steps b { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: var(--r-blue); color: #fff; font-weight: 800; transform: translateZ(26px); box-shadow: 0 8px 18px -8px var(--r-blue); }
.steps h4 { font-weight: 800; margin: .75rem 0 .3rem; font-size: .98rem; transform: translateZ(14px); }
.steps p { color: var(--r-soft); font-size: .86rem; line-height: 1.5; margin: 0; }
.steps .is-money { background: linear-gradient(150deg, var(--r-card), rgb(245 159 0 / .12)); border-color: rgb(245 159 0 / .4); }
.steps .is-money b { background: var(--r-amber); box-shadow: 0 8px 18px -8px var(--r-amber); }

.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.guide-card { padding: 1.4rem 1.5rem; border-radius: 1.1rem; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow);
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s, opacity .7s, translate .7s; }
.guide-card h3 { display: flex; gap: .5rem; align-items: center; font-weight: 800; font-size: 1.05rem; margin: 0 0 .8rem; }
.guide-card h3 svg { width: 1.35rem; height: 1.35rem; color: var(--r-blue2); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.checks li { position: relative; padding-left: 1.6rem; color: var(--r-soft); font-size: .92rem; line-height: 1.45; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center;
    font-size: .7rem; font-weight: 900; color: #fff; background: var(--r-green); }
.checks.no li::before { content: "✕"; background: #e03131; }

.faq { display: grid; gap: .6rem; }
.faq details { border-radius: .9rem; background: var(--r-card); border: 1px solid var(--r-line); padding: 0 1.2rem; transition: box-shadow .3s; }
.faq details[open] { box-shadow: var(--r-shadow); }
.faq summary { cursor: pointer; list-style: none; font-weight: 700; padding: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--r-blue2); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 1.1rem; color: var(--r-soft); line-height: 1.6; }

.guide-cta { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 2rem 2.25rem; border-radius: 1.4rem;
    background: linear-gradient(135deg, #1d2b63, #2f4ac0 55%, #5c7cfa); color: #fff; box-shadow: var(--r-shadow-up); }
.guide-cta h2 { margin: 0 0 .3rem; color: #fff; }
.guide-cta p { margin: 0; color: rgb(255 255 255 / .8); }
.guide-cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; transform: translateZ(24px); }
.guide-cta .fi-btn.fi-color-primary { background: #fff !important; color: #1d2b63 !important; }

/* Esito in evidenza nella scheda */
.rete-outcome { border-left: 4px solid var(--r-blue2) !important; }

@media (max-width: 1100px) {
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .rete-hello, .guide-hero { grid-template-columns: 1fr; padding: 1.5rem; }
    .rete-stack { height: 170px; }
    .guide-exploded { height: 260px; }
    .guide-exploded .ex { width: 200px; height: 120px; margin: -60px 0 0 -100px; }
    .guide-modules { grid-template-columns: 1fr; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rete-goal { grid-template-columns: 72px 1fr; gap: 1rem; padding: 1rem; }
    .rete-goal__ring { width: 72px; height: 72px; }
}

/* Comparsa allo scorrimento: solo con il JS attivo (classe su <html>), mai contenuti nascosti se lo script non parte. */
html.rete-reveal .module:not(.is-in), html.rete-reveal .steps li:not(.is-in), html.rete-reveal .guide-card:not(.is-in) { opacity: 0; translate: 0 22px; }
.guide-exploded { margin-top: 2.5rem; }
.guide-cta .fi-btn.fi-color-primary, .guide-cta .fi-btn.fi-color-primary * { color: #1d2b63 !important; }
.guide-cta .fi-btn.fi-color-gray { background: rgb(255 255 255 / .12) !important; border-color: rgb(255 255 255 / .35) !important; }
.guide-cta .fi-btn.fi-color-gray, .guide-cta .fi-btn.fi-color-gray * { color: #fff !important; }

/* ---------- Vetrina siti realizzati ---------- */
.vetrina { display: grid; gap: 1.75rem; }
.vetrina-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.vetrina-intro h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.015em; color: var(--r-ink); margin: 0 0 .35rem; }
.vetrina-intro p { color: var(--r-soft); max-width: 60ch; margin: 0; line-height: 1.55; }
.vetrina-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.vetrina-filters button { padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; border: 1px solid var(--r-line); background: var(--r-card); color: var(--r-soft); transition: .2s; }
.vetrina-filters button:hover { color: var(--r-blue); border-color: var(--r-blue2); }
.vetrina-filters button.is-on { background: var(--r-blue); border-color: var(--r-blue); color: #fff; }
.vetrina-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4rem; }
.vcard { --accent: var(--r-blue); display: flex; flex-direction: column; border-radius: 1.25rem; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); overflow: hidden; color: inherit; }
.vcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--accent); z-index: 2; }
.vcard__shot { position: relative; padding: 1rem 1rem 0; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--r-bg2); perspective: 800px; }
.vcard__browser { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; background: var(--r-card); border: 1px solid var(--r-line); border-bottom: 0; border-radius: .7rem .7rem 0 0; }
.vcard__dots { display: flex; gap: 4px; } .vcard__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--r-line); }
.vcard__dots i:first-child { background: #ff6b6b; } .vcard__dots i:nth-child(2) { background: #fcc419; } .vcard__dots i:nth-child(3) { background: #51cf66; }
.vcard__url { font-size: .7rem; color: var(--r-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; background: var(--r-bg2); border-radius: 99px; padding: .15rem .6rem; }
.vcard__shot img, .vcard__placeholder { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--r-line); border-top: 0;
    transform-origin: top center; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.vcard:hover .vcard__shot img { transform: translateZ(26px) scale(1.02); }
.vcard__placeholder { display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--accent), #121a3d); }
.vcard__status { position: absolute; top: 1.6rem; right: 1.6rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; padding: .25rem .6rem; border-radius: 99px; background: #fff; color: #495057; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .35); transform: translateZ(40px); }
.vcard__status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .35rem; background: #adb5bd; vertical-align: 1px; }
.vcard__status.is-online::before { background: #12b886; box-shadow: 0 0 0 3px rgb(18 184 134 / .25); }
.vcard__status.is-in_prova::before { background: #f59f00; }
.vcard__status.is-inline { position: static; box-shadow: none; border: 1px solid var(--r-line); background: var(--r-card); color: var(--r-ink); transform: none; margin-right: .4rem; }
.vcard__body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; transform: translateZ(16px); }
.vcard__sector { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0; }
.dark .vcard__sector { filter: brightness(1.4); }
.vcard h3 { font-size: 1.15rem; font-weight: 800; color: var(--r-ink); margin: 0; }
.vcard__tag { color: var(--r-soft); font-size: .9rem; line-height: 1.45; margin: 0; }
.vcard__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.vcard__chips span { font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 99px; background: var(--r-bg2); color: var(--r-soft); border: 1px solid var(--r-line); }
.vcard__go { margin-top: auto; padding-top: .8rem; display: inline-flex; gap: .35rem; align-items: center; font-weight: 800; font-size: .88rem; color: var(--r-blue); }
.dark .vcard__go { color: var(--r-blue2); }
.vcard__go svg { width: 1rem; height: 1rem; transition: transform .3s; } .vcard:hover .vcard__go svg { transform: translateX(4px); }

/* ---------- Scheda del sito ---------- */
.scheda { --accent: var(--r-blue); display: grid; gap: 2.25rem; color: var(--r-ink); }
.scheda.is-full { background: var(--r-bg2); padding: 2rem clamp(1rem, 4vw, 4rem); overflow-y: auto; }
.scheda-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.scheda-bar a, .scheda-bar button { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; font-size: .86rem; color: var(--r-soft); padding: .45rem .8rem; border-radius: .7rem; border: 1px solid var(--r-line); background: var(--r-card); transition: .2s; }
.scheda-bar a:hover, .scheda-bar button:hover { color: var(--r-blue); border-color: var(--r-blue2); }
.scheda-bar svg { width: 1rem; height: 1rem; }
.scheda-bar__nav { display: flex; gap: .4rem; }
.scheda-hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.scheda-hero__meta { font-size: .82rem; color: var(--r-mute); font-weight: 600; margin: 0 0 .8rem; display: flex; align-items: center; flex-wrap: wrap; }
.scheda-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.scheda-hero__client { color: var(--r-mute); margin: .35rem 0 0; font-size: .9rem; }
.scheda-hero__tag { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; color: var(--accent); margin: 1rem 0 .6rem; line-height: 1.35; }
.dark .scheda-hero__tag { filter: brightness(1.45); }
.scheda-hero__summary { color: var(--r-soft); line-height: 1.7; margin: 0; }
.scheda-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.scheda-cta__main { display: inline-flex; gap: .55rem; align-items: center; padding: .95rem 1.6rem; border-radius: 999px; font-weight: 800; font-size: 1.02rem; color: #fff;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #121a3d)); box-shadow: 0 14px 30px -12px var(--accent); transition: transform .25s, box-shadow .25s; }
.scheda-cta__main:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -12px var(--accent); }
.scheda-cta__main svg { width: 1.15rem; height: 1.15rem; }
.scheda-cta__host { font-size: .85rem; color: var(--r-mute); font-weight: 600; }
.scheda-cta__soon { padding: .8rem 1.2rem; border-radius: 999px; background: var(--r-bg2); border: 1px dashed var(--r-line); color: var(--r-soft); font-weight: 700; }
.scheda-access { display: flex; gap: .5rem; margin: 1rem 0 0; padding: .7rem .9rem; border-radius: .8rem; background: rgb(245 159 0 / .1); color: var(--r-soft); font-size: .85rem; line-height: 1.45; }
.scheda-access svg { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; color: #d97706; }
.scheda.is-full .scheda-access { display: none; }
.scheda-device { perspective: 1200px; position: relative; }
.scheda-device__frame { position: relative; z-index: 1; border-radius: 1rem; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(18 26 61 / .55), 0 0 0 1px var(--r-line); transform: rotateY(-8deg) rotateX(4deg); transition: transform .6s; background: var(--r-card); }
.scheda-device:hover .scheda-device__frame { transform: rotateY(-2deg) rotateX(1deg) translateZ(20px); }
.scheda-device__frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; cursor: zoom-in; }
.scheda-device__frame .vcard__browser { border-radius: 0; border: 0; border-bottom: 1px solid var(--r-line); }
.scheda-device__glow { position: absolute; inset: 10% 5% -8%; z-index: 0; border-radius: 50%; background: var(--accent); filter: blur(70px); opacity: .28; }
.scheda-concept { display: flex; gap: 1.2rem; align-items: center; padding: 1.3rem 1.5rem; border-radius: 1.1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--r-card)), var(--r-card)); border: 1px solid var(--r-line); }
.scheda-concept__badge { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 1rem; font-weight: 900; color: #fff; background: var(--accent); box-shadow: 0 12px 24px -10px var(--accent); transform: translateZ(30px) rotate(-6deg); }
.scheda-concept h3 { margin: 0 0 .2rem; font-weight: 800; }
.scheda-concept p { margin: 0; color: var(--r-soft); line-height: 1.55; }
.scheda-block h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; margin: 0 0 1rem; letter-spacing: -.01em; }
.scheda-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.scheda-gallery__item { padding: 0; border-radius: .9rem; overflow: hidden; border: 1px solid var(--r-line); box-shadow: var(--r-shadow); background: var(--r-card); cursor: zoom-in; }
.scheda-gallery__item img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.scheda-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.scheda-feature { padding: 1.2rem 1.25rem; border-radius: 1rem; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); }
.scheda-feature b { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: .7rem; font-size: .8rem; font-weight: 900; color: #fff; background: var(--accent); transform: translateZ(24px); }
.scheda-feature h4 { margin: .75rem 0 .3rem; font-weight: 800; font-size: 1rem; transform: translateZ(12px); }
.scheda-feature p { margin: 0; color: var(--r-soft); font-size: .9rem; line-height: 1.55; }
.scheda-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.scheda-mod { --m: var(--r-blue); padding: 1.3rem 1.4rem; border-radius: 1.1rem; background: var(--r-card); border: 1px solid var(--r-line); border-top: 4px solid var(--m); box-shadow: var(--r-shadow); }
.scheda-mod h3 { display: flex; gap: .5rem; align-items: center; font-weight: 800; margin: 0 0 .7rem; }
.scheda-mod h3 svg { width: 1.3rem; height: 1.3rem; color: var(--m); }
.scheda-mod p { margin: 0; color: var(--r-soft); line-height: 1.55; font-size: .92rem; }
.scheda-mod ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.scheda-mod li { position: relative; padding-left: 1.2rem; color: var(--r-soft); font-size: .9rem; line-height: 1.45; }
.scheda-mod li::before { content: ""; position: absolute; left: 0; top: .5em; width: .45rem; height: .45rem; border-radius: 2px; background: var(--m); transform: rotate(45deg); }
.scheda-tech { color: var(--r-mute); font-size: .85rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.scheda-tech span { padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--r-line); font-weight: 700; color: var(--r-soft); }
.scheda-lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 2rem; background: rgb(8 10 18 / .85); backdrop-filter: blur(6px); cursor: zoom-out; }
.scheda-lightbox img { max-width: 100%; max-height: 100%; border-radius: .8rem; box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
@media (max-width: 960px) {
    .scheda-hero { grid-template-columns: 1fr; }
    .scheda-trio { grid-template-columns: 1fr; }
    .scheda-device__frame { transform: none; }
}

/* ---------- La mia sfida (incentivi) ---------- */
.sfida { --lv: #3b5bdb; display: grid; gap: 1.75rem; color: var(--r-ink); position: relative; }
.arena { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; padding: clamp(1.5rem, 3.5vw, 2.75rem);
    border-radius: 1.6rem; color: #fff; isolation: isolate;
    background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--lv) 55%, transparent), transparent 60%),
                radial-gradient(60% 90% at 100% 100%, rgb(92 124 250 / .45), transparent 60%), linear-gradient(135deg, #0c1024, #151c3f 55%, #0c1024);
    box-shadow: 0 30px 70px -30px rgb(12 16 36 / .7); }
.arena__stars { position: absolute; inset: 0; z-index: -1; opacity: .55;
    background-image: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 72% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
        radial-gradient(1px 1px at 88% 60%, #fff, transparent), radial-gradient(1px 1px at 22% 85%, #fff, transparent), radial-gradient(1.5px 1.5px at 58% 40%, #fff, transparent);
    animation: stars 9s ease-in-out infinite alternate; }
@keyframes stars { to { opacity: .2; transform: translateY(-8px); } }
.arena__medal { display: flex; gap: 1.75rem; align-items: center; }
.arena__kicker { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; margin: 0 0 .35rem; color: color-mix(in srgb, var(--lv) 60%, #fff); }
.sfida .race .arena__kicker, .sfida .sim .arena__kicker { color: var(--r-blue); }
.dark .sfida .race .arena__kicker, .dark .sfida .sim .arena__kicker { color: var(--r-blue2); }
.arena__level h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; margin: 0; color: #fff;
    background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--lv) 55%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.arena__perk { margin: .5rem 0 0; color: rgb(255 255 255 / .72); font-size: .92rem; max-width: 40ch; }
.medal { flex: none; width: 132px; height: 150px; perspective: 700px; position: relative; }
.medal__coin { position: relative; width: 132px; height: 132px; transform-style: preserve-3d; animation: coin 7s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes coin { 0% { transform: rotateY(0) rotateX(8deg); } 45% { transform: rotateY(180deg) rotateX(-6deg); } 50% { transform: rotateY(180deg) rotateX(-6deg); } 95%, 100% { transform: rotateY(360deg) rotateX(8deg); } }
.medal__face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; backface-visibility: hidden;
    background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .9), color-mix(in srgb, var(--lv) 85%, #fff) 22%, var(--lv) 55%, color-mix(in srgb, var(--lv) 55%, #000) 100%);
    box-shadow: inset 0 0 0 7px rgb(255 255 255 / .28), inset 0 -10px 20px rgb(0 0 0 / .3), 0 0 50px -6px var(--lv); }
.medal__back { transform: rotateY(180deg); }
.medal__back svg { width: 54px; height: 54px; color: rgb(255 255 255 / .92); filter: drop-shadow(0 3px 4px rgb(0 0 0 / .3)); }
.medal__lv { font-size: 3.2rem; font-weight: 900; line-height: .9; color: #fff; text-shadow: 0 3px 6px rgb(0 0 0 / .35); }
.medal__front small { font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; color: rgb(255 255 255 / .85); }
.medal__shadow { position: absolute; left: 22px; right: 22px; bottom: 0; height: 12px; border-radius: 50%; background: rgb(0 0 0 / .45); filter: blur(7px); animation: coinshadow 7s ease-in-out infinite; }
@keyframes coinshadow { 25%, 70% { transform: scaleX(.55); opacity: .6; } }
.xp { margin-top: 1.1rem; }
.xp__bar { height: 14px; border-radius: 99px; background: rgb(255 255 255 / .12); overflow: hidden; box-shadow: inset 0 1px 3px rgb(0 0 0 / .4); }
.xp__bar i { --p: 0; display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; position: relative; overflow: hidden;
    background: linear-gradient(90deg, color-mix(in srgb, var(--lv) 70%, #fff), var(--lv)); box-shadow: 0 0 18px var(--lv); animation: grow 1.6s cubic-bezier(.2,.8,.2,1) both; }
.xp__bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); animation: shine 2.6s ease-in-out infinite; transform: translateX(-100%); }
@keyframes grow { from { width: 0; } }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.xp__legend { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; font-size: .82rem; color: rgb(255 255 255 / .75); }
.xp__legend strong { color: #fff; } .xp__legend em { font-style: normal; font-weight: 800; color: #ffd43b; margin-left: .3rem; }
.arena__stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.astat { padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); backdrop-filter: blur(6px); display: grid; gap: .15rem; }
.astat small { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: rgb(255 255 255 / .6); }
.astat strong { font-size: 1.9rem; font-weight: 900; letter-spacing: -.02em; display: flex; align-items: center; gap: .3rem; }
.astat strong em { font-style: normal; font-size: 1rem; opacity: .6; }
.astat span { font-size: .78rem; color: rgb(255 255 255 / .65); }
.astat--big { grid-column: span 2; background: linear-gradient(135deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04)); }
.astat--big strong { font-size: clamp(2.2rem, 4vw, 3rem); background: linear-gradient(180deg, #fff, #ffd43b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.astat__flame { width: 1.5rem; height: 1.5rem; color: rgb(255 255 255 / .35); }
.astat.is-hot .astat__flame { color: #ff922b; filter: drop-shadow(0 0 8px #ff922b); animation: flame 1.2s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(1.18) rotate(-6deg); } }

.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.ladder__step { --c: #64748b; padding: .95rem 1rem; border-radius: 1rem; background: var(--r-card); border: 1px solid var(--r-line); display: grid; gap: .15rem; opacity: .7; }
.ladder__gem { width: 1.6rem; height: 1.6rem; transform: rotate(45deg) translateZ(20px); border-radius: .35rem; margin-bottom: .45rem; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); box-shadow: 0 6px 14px -6px var(--c); filter: grayscale(.7); }
.ladder__step b { font-weight: 800; } .ladder__step small { color: var(--r-mute); font-size: .78rem; } .ladder__step em { font-style: normal; font-weight: 800; color: #d97706; font-size: .78rem; }
.ladder__step.is-done { opacity: 1; } .ladder__step.is-done .ladder__gem { filter: none; }
.ladder__step.is-here { opacity: 1; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent), var(--r-shadow); }
.ladder__step.is-here .ladder__gem { filter: none; animation: gem 2.4s ease-in-out infinite; }
@keyframes gem { 50% { transform: rotate(225deg) translateZ(20px) scale(1.1); } }

.race { --p: 0; padding: 1.5rem 1.6rem; border-radius: 1.3rem; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); }
.race__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.race__head h3 { font-size: 1.35rem; font-weight: 900; margin: 0; } .race__head p { margin: .25rem 0 0; color: var(--r-soft); font-size: .9rem; }
.race__prize { display: flex; gap: .6rem; align-items: center; padding: .6rem 1rem; border-radius: 1rem; background: linear-gradient(135deg, #fff4d6, #ffe08a); color: #8a4b00; box-shadow: 0 10px 24px -12px #f59f00; transform: translateZ(30px); }
.race__prize svg { width: 1.9rem; height: 1.9rem; color: #f08c00; animation: flame 1.6s ease-in-out infinite alternate; }
.race__prize small { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; opacity: .75; }
.race__prize span { font-size: 1.35rem; font-weight: 900; line-height: 1.1; }
.race__track { position: relative; height: 22px; margin: 2.4rem .8rem 1rem 0; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--r-line) 0 14px, transparent 14px 22px), var(--r-bg2); box-shadow: inset 0 1px 3px rgb(0 0 0 / .12); }
.race__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 1%); border-radius: inherit; background: linear-gradient(90deg, #2f4ac0, #5c7cfa, #22b8cf); box-shadow: 0 0 22px rgb(92 124 250 / .6); animation: grow 1.8s cubic-bezier(.2,.8,.2,1) both; }
.race__tick { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--r-line); }
.race__runner { position: absolute; top: 50%; left: calc(var(--p) * 1%); transform: translate(-50%, -50%); animation: run 1.8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes run { from { left: 0; } }
.race__runner span { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; font-size: .82rem; font-weight: 900; color: #fff; background: radial-gradient(circle at 35% 30%, #8eaaff, #2f4ac0); border: 3px solid #fff; box-shadow: 0 8px 20px -6px #2f4ac0, 0 0 0 6px rgb(92 124 250 / .2); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 8px 20px -6px #2f4ac0, 0 0 0 12px rgb(92 124 250 / .05); } }
.race__flag { position: absolute; right: -.9rem; top: 50%; transform: translateY(-80%); } .race__flag svg { width: 2rem; height: 2rem; color: #f59f00; }
.race__foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .88rem; color: var(--r-soft); }
.race__clock b { font-size: 1.1rem; color: var(--r-ink); } .race__won { font-weight: 800; color: #0e9f6e; }
.race.is-won .race__fill { background: linear-gradient(90deg, #0b7a55, #12b886, #96f2d7); }
.race.is-won .race__runner span { background: radial-gradient(circle at 35% 30%, #96f2d7, #0b7a55); }

.sim { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.75rem; border-radius: 1.4rem; background: linear-gradient(135deg, var(--r-card), var(--r-bg2)); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); }
.sim h3 { font-size: 1.5rem; font-weight: 900; margin: 0; letter-spacing: -.02em; } .sim__lead { color: var(--r-soft); margin: .35rem 0 1.2rem; }
.sim__field { display: grid; gap: .5rem; margin-bottom: 1.2rem; } .sim__field span { display: flex; justify-content: space-between; font-weight: 700; font-size: .92rem; }
.sim__field b { color: var(--r-blue); font-size: 1.05rem; } .dark .sim__field b { color: var(--r-blue2); }
.sim__field input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #2f4ac0, #5c7cfa); outline: none; }
.sim__field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 4px solid #2f4ac0; box-shadow: 0 4px 12px rgb(47 74 192 / .45); cursor: grab; transition: transform .2s; }
.sim__field input[type=range]::-webkit-slider-thumb:active { transform: scale(1.2); cursor: grabbing; }
.sim__field input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #2f4ac0; }
.sim__result { padding: 1.5rem; border-radius: 1.2rem; color: #fff; background: linear-gradient(145deg, #121a3d, #283d9c); box-shadow: 0 24px 50px -24px #283d9c; transform: translateZ(30px); display: grid; align-content: start; gap: .3rem; }
.sim__result > small { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; opacity: .7; }
.sim__total { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; background: linear-gradient(180deg, #fff, #ffd43b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sim__lines { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .45rem; }
.sim__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .75rem; border-radius: .7rem; background: rgb(255 255 255 / .08); font-size: .9rem; }
.sim__lines li.is-prize { background: rgb(255 212 59 / .16); color: #ffe066; } .sim__lines li.is-level { background: rgb(255 255 255 / .14); }
.sim__lines li b { font-weight: 900; } .sim__hint { margin: .6rem 0 0; font-size: .85rem; opacity: .75; }

.sfida-count { font-size: .85rem; font-weight: 700; color: var(--r-mute); margin-left: .5rem; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.badge3d { perspective: 800px; height: 170px; outline: none; }
.badge3d__inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.badge3d:hover .badge3d__inner, .badge3d:focus .badge3d__inner { transform: rotateY(180deg); }
.badge3d__front, .badge3d__back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 1.1rem; display: grid; place-content: center; justify-items: center; text-align: center; padding: 1rem; gap: .35rem;
    background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); }
.badge3d__back { transform: rotateY(180deg); background: linear-gradient(145deg, #121a3d, #2f4ac0); color: #fff; border: 0; }
.badge3d__back p { margin: 0; font-size: .88rem; line-height: 1.45; } .badge3d__back small { opacity: .75; font-size: .76rem; font-weight: 700; }
.badge3d__icon { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--r-bg2); color: var(--r-mute); border: 2px dashed var(--r-line); }
.badge3d__icon svg { width: 1.7rem; height: 1.7rem; }
.badge3d b { font-weight: 800; font-size: .95rem; } .badge3d small { font-size: .74rem; color: var(--r-mute); font-weight: 600; }
.badge3d:not(.is-earned) .badge3d__front { filter: grayscale(1); } .badge3d:not(.is-earned) .badge3d__front b { color: var(--r-mute); }
.badge3d.is-earned .badge3d__front { background: radial-gradient(120% 90% at 50% 0%, rgb(255 212 59 / .18), transparent 60%), var(--r-card); border-color: rgb(245 159 0 / .45); }
.badge3d.is-earned .badge3d__icon { border: 0; color: #fff; background: radial-gradient(circle at 35% 30%, #ffe066, #f59f00 55%, #c26a00); box-shadow: 0 8px 20px -8px #f59f00, inset 0 -4px 8px rgb(0 0 0 / .2); animation: gleam 3.5s ease-in-out infinite; }
.badge3d.is-earned small { color: #d97706; font-weight: 800; }
@keyframes gleam { 50% { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 14px 26px -10px #f59f00, inset 0 -4px 8px rgb(0 0 0 / .2); } }

.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: end; max-width: 760px; margin: 0 auto; perspective: 900px; }
.podium__place { display: grid; justify-items: center; text-align: center; gap: .2rem; }
.podium__avatar { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, #5c7cfa, #2f4ac0); box-shadow: 0 10px 22px -10px #2f4ac0; margin-bottom: .2rem; }
.podium__place b { font-weight: 800; } .podium__place small { font-size: .76rem; color: var(--r-mute); margin-bottom: .5rem; }
.podium__block { width: 100%; border-radius: .9rem .9rem .3rem .3rem; display: grid; place-items: start center; padding-top: .7rem; transform: rotateX(12deg); transform-origin: bottom; box-shadow: var(--r-shadow); }
.podium__block span { font-size: 2.2rem; font-weight: 900; color: rgb(255 255 255 / .92); text-shadow: 0 2px 6px rgb(0 0 0 / .25); }
.p1 .podium__block { height: 170px; background: linear-gradient(180deg, #ffd43b, #f59f00); } .p1 .podium__avatar { width: 4.4rem; height: 4.4rem; background: linear-gradient(135deg, #ffd43b, #f08c00); box-shadow: 0 0 0 4px rgb(255 212 59 / .35), 0 12px 26px -10px #f08c00; }
.p2 .podium__block { height: 120px; background: linear-gradient(180deg, #dee2e6, #94a3b8); } .p3 .podium__block { height: 90px; background: linear-gradient(180deg, #e8a87c, #c2703d); }
.podium__place.is-me b { color: var(--r-blue); } .dark .podium__place.is-me b { color: var(--r-blue2); }
.board { list-style: none; counter-reset: b 3; padding: 0; margin: 1.2rem auto 0; max-width: 760px; display: grid; gap: .4rem; }
.board li { counter-increment: b; display: grid; grid-template-columns: 2rem 1fr auto auto; gap: .8rem; align-items: center; padding: .65rem .9rem; border-radius: .8rem; background: var(--r-card); border: 1px solid var(--r-line); }
.board li::before { content: counter(b); font-weight: 900; color: var(--r-mute); } .board li small { color: var(--r-mute); font-size: .8rem; } .board li.is-me { border-color: var(--r-blue2); box-shadow: 0 0 0 3px rgb(92 124 250 / .18); }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }
.toast-badge { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 71; display: flex; gap: .8rem; align-items: center; padding: 1rem 1.2rem; border-radius: 1rem; color: #fff;
    background: linear-gradient(135deg, #f08c00, #f59f00); box-shadow: 0 20px 40px -14px #f08c00; }
.toast-badge svg { width: 2rem; height: 2rem; } .toast-badge b { display: block; } .toast-badge span { font-size: .88rem; opacity: .95; }

/* Striscia del livello nella scrivania */
.lvstrip { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; border-radius: 1rem; color: #fff; background: linear-gradient(135deg, #0c1024, #1d2b63); box-shadow: var(--r-shadow); }
.lvstrip__gem { width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, color-mix(in srgb, var(--c) 50%, #000)); box-shadow: 0 0 20px -2px var(--c); animation: gleam 3.5s ease-in-out infinite; }
.lvstrip__text { flex: 1; min-width: 0; } .lvstrip__text b { font-weight: 900; } .lvstrip__text span { display: block; font-size: .8rem; opacity: .75; }
.lvstrip .xp__bar { height: 8px; margin-top: .4rem; }
.lvstrip a { flex: none; font-weight: 800; font-size: .85rem; padding: .5rem .9rem; border-radius: 99px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2); }
.lvstrip a:hover { background: rgb(255 255 255 / .2); }

@media (max-width: 960px) {
    .arena, .sim { grid-template-columns: 1fr; }
    .arena__medal { flex-direction: column; align-items: flex-start; }
    .podium { gap: .5rem; } .p1 .podium__block { height: 130px; } .p2 .podium__block { height: 95px; } .p3 .podium__block { height: 70px; }
    .board li { grid-template-columns: 2rem 1fr auto; } .board li small { display: none; }
}
.arena__stats .astat:last-child:nth-child(even) { grid-column: span 2; }
.scheda .guide-cta h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 800; }

/* ---------- Coach (assistente del commerciale) ---------- */
[x-cloak] { display: none !important; }
.coach { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; font-size: .92rem; }
.coach__orb { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; position: relative;
    background: radial-gradient(circle at 32% 28%, #fff 0, #bccdff 18%, #5c7cfa 45%, #2f4ac0 70%, #121a3d 100%);
    box-shadow: 0 0 0 3px rgb(92 124 250 / .25), 0 8px 20px -6px #2f4ac0; animation: orb 4s ease-in-out infinite; }
.coach__orb::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgb(245 159 0 / .7); border-color: rgb(245 159 0 / .8) transparent transparent transparent; animation: spin 2.8s linear infinite; }
@keyframes orb { 50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgb(92 124 250 / .12), 0 10px 24px -6px #2f4ac0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.coach__fab { display: flex; align-items: center; gap: .7rem; padding: .5rem 1.1rem .5rem .5rem; border-radius: 999px; background: var(--r-card); border: 1px solid var(--r-line);
    box-shadow: 0 16px 40px -14px rgb(18 26 61 / .45); color: var(--r-ink); text-align: left; transition: transform .25s, box-shadow .25s; }
.coach__fab:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -14px rgb(18 26 61 / .5); }
.coach__fab b { display: block; font-weight: 800; } .coach__fab small { color: var(--r-mute); font-size: .75rem; }
.coach__fab.is-open { opacity: 0; pointer-events: none; }
.coach__panel { position: absolute; right: 0; bottom: 0; width: min(420px, calc(100vw - 2rem)); height: min(640px, calc(100vh - 6rem)); display: flex; flex-direction: column;
    border-radius: 1.4rem; overflow: hidden; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: 0 30px 70px -20px rgb(12 16 36 / .55); }
.coach__head { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; color: #fff; background: linear-gradient(135deg, #0c1024, #1d2b63 60%, #2f4ac0); }
.coach__head div { flex: 1; min-width: 0; } .coach__head b { display: block; font-weight: 800; } .coach__head small { font-size: .72rem; opacity: .75; }
.coach__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; color: #fff; background: rgb(255 255 255 / .1); }
.coach__icon:hover { background: rgb(255 255 255 / .2); } .coach__icon svg { width: 1.1rem; height: 1.1rem; }
.coach__list { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; background: var(--r-bg2); }
.coach__hello p { margin: 0 0 .8rem; color: var(--r-soft); line-height: 1.55; }
.coach__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.coach__chips button { text-align: left; padding: .45rem .75rem; border-radius: .8rem; font-size: .82rem; font-weight: 600; background: var(--r-card); border: 1px solid var(--r-line); color: var(--r-ink); transition: .2s; }
.coach__chips button:hover { border-color: var(--r-blue2); color: var(--r-blue); }
.coach__msg { max-width: 88%; padding: .65rem .85rem; border-radius: 1rem; line-height: 1.5; word-wrap: break-word; }
.coach__msg.is-user { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #2f4ac0, #5c7cfa); border-bottom-right-radius: .3rem; white-space: pre-wrap; }
.coach__msg.is-assistant { align-self: flex-start; background: var(--r-card); border: 1px solid var(--r-line); border-bottom-left-radius: .3rem; color: var(--r-ink); }
.coach__md p { margin: 0 0 .5rem; } .coach__md p:last-child { margin: 0; } .coach__md ul, .coach__md ol { margin: .3rem 0 .5rem; padding-left: 1.1rem; list-style: disc; }
.coach__md ol { list-style: decimal; } .coach__md li { margin: .15rem 0; } .coach__md a { color: var(--r-blue); font-weight: 700; text-decoration: underline; }
.dark .coach__md a { color: var(--r-blue2); } .coach__md strong { font-weight: 800; }
.coach__typing { gap: 4px; align-items: center; } .coach__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--r-mute); animation: typing 1s infinite; }
.coach__typing i:nth-child(2) { animation-delay: .15s; } .coach__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .4; } }
.coach__form { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--r-line); background: var(--r-card); }
.coach__form textarea { flex: 1; resize: none; border-radius: .9rem; border: 1px solid var(--r-line); background: var(--r-bg2); color: var(--r-ink); padding: .6rem .8rem; font: inherit; max-height: 7rem; }
.coach__form textarea:focus { outline: 2px solid rgb(92 124 250 / .4); border-color: var(--r-blue2); }
.coach__form button { flex: none; display: grid; place-items: center; width: 2.7rem; border-radius: .9rem; color: #fff; background: linear-gradient(135deg, #2f4ac0, #5c7cfa); }
.coach__form button svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 640px) { .coach { right: .75rem; bottom: .75rem; } .coach__fab-text { display: none; } .coach__fab { padding: .4rem; } }
.toast-badge { bottom: 6rem; }

/* Il Coach non deve coprire i pulsanti: spazio in fondo alle pagine e, nei moduli, solo la sfera. */
.fi-main { padding-bottom: 6.5rem; }
.fi-body:has(.fi-sc-wizard, .fi-sc-form) .coach__fab-text { display: none; }
.fi-body:has(.fi-sc-wizard, .fi-sc-form) .coach__fab { padding: .4rem; opacity: .9; }

/* ---------- Percorso del lavoro ---------- */
.journey__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; position: relative; }
.journey__steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: .45rem; font-size: .8rem; color: var(--r-mute); }
.journey__steps li::before { content: ""; position: absolute; top: 1.2rem; left: calc(-50% + 1.4rem); right: calc(50% + 1.4rem); height: 3px; border-radius: 3px; background: var(--r-line); }
.journey__steps li:first-child::before { display: none; }
.journey__steps li.is-done::before, .journey__steps li.is-now::before, .journey__steps li.is-refused::before { background: linear-gradient(90deg, #12b886, #5c7cfa); }
.journey__dot { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--r-bg2); border: 2px solid var(--r-line); color: var(--r-mute); position: relative; z-index: 1; }
.journey__dot svg { width: 1.15rem; height: 1.15rem; }
.journey__steps li b { font-weight: 700; line-height: 1.25; }
.journey__steps li.is-done .journey__dot { background: #12b886; border-color: #12b886; color: #fff; }
.journey__steps li.is-done b { color: var(--r-ink); }
.journey__steps li.is-now .journey__dot { background: var(--r-blue); border-color: var(--r-blue); color: #fff; box-shadow: 0 0 0 6px rgb(92 124 250 / .2); animation: pulse 2s ease-in-out infinite; }
.journey__steps li.is-now b { color: var(--r-blue); } .dark .journey__steps li.is-now b { color: var(--r-blue2); }
.journey__steps li.is-refused .journey__dot { background: #e03131; border-color: #e03131; color: #fff; } .journey__steps li.is-refused b { color: #e03131; }
.journey__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: .84rem; color: var(--r-mute); }
.journey__preview { display: inline-flex; gap: .4rem; align-items: center; font-weight: 800; color: #fff; padding: .55rem 1rem; border-radius: 99px; background: linear-gradient(135deg, #2f4ac0, #5c7cfa); box-shadow: 0 10px 22px -10px #2f4ac0; }
.journey__preview svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) { .journey__steps { grid-template-columns: 1fr; justify-items: start; } .journey__steps li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; } .journey__steps li::before { display: none; } }

/* ---------- Notifiche ---------- */
.feed { display: grid; gap: 1.5rem; max-width: 900px; }
.feed__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.feed__filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.feed__filters button { display: inline-flex; gap: .35rem; align-items: center; padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; border: 1px solid var(--r-line); background: var(--r-card); color: var(--r-soft); transition: .2s; }
.feed__filters button svg { width: 1rem; height: 1rem; }
.feed__filters button em { font-style: normal; font-size: .7rem; background: #e03131; color: #fff; border-radius: 99px; padding: 0 .4rem; }
.feed__filters button:hover { color: var(--r-blue); border-color: var(--r-blue2); }
.feed__filters button.is-on { background: var(--r-blue); border-color: var(--r-blue); color: #fff; }
.feed__group h3 { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--r-mute); margin: 0 0 .6rem; }
.feed__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.feed__item { --k: #5c7cfa; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow); }
.feed__item.is-success { --k: #12b886; } .feed__item.is-warning { --k: #f59f00; } .feed__item.is-danger { --k: #e03131; } .feed__item.k-sito { --k: #9333ea; } .feed__item.k-novita { --k: #f08c00; }
.feed__item.is-unread { border-left: 4px solid var(--k); background: linear-gradient(90deg, color-mix(in srgb, var(--k) 7%, var(--r-card)), var(--r-card) 40%); }
.feed__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--k) 70%, #fff), var(--k)); box-shadow: 0 8px 18px -8px var(--k); transform: translateZ(22px); }
.feed__icon svg { width: 1.3rem; height: 1.3rem; }
.feed__item:not(.is-unread) .feed__icon { filter: saturate(.55); opacity: .85; }
.feed__body { min-width: 0; transform: translateZ(10px); }
.feed__title { margin: 0; font-weight: 800; color: var(--r-ink); line-height: 1.35; }
.feed__item:not(.is-unread) .feed__title { font-weight: 600; }
.feed__text { margin: .25rem 0 0; color: var(--r-soft); font-size: .9rem; line-height: 1.5; word-break: break-word; }
.feed__meta { margin: .35rem 0 0; font-size: .76rem; color: var(--r-mute); }
.feed__actions { display: flex; align-items: center; gap: .5rem; }
.feed__open { display: inline-flex; gap: .3rem; align-items: center; font-size: .82rem; font-weight: 800; color: var(--r-blue); padding: .4rem .75rem; border-radius: .7rem; border: 1px solid var(--r-line); background: var(--r-bg2); white-space: nowrap; }
.dark .feed__open { color: var(--r-blue2); } .feed__open:hover { border-color: var(--r-blue2); } .feed__open svg { width: .95rem; height: .95rem; }
.feed__toggle { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; }
.feed__toggle:hover { background: var(--r-bg2); }
.feed__dot { width: .65rem; height: .65rem; border-radius: 50%; border: 2px solid var(--r-line); }
.feed__dot.is-on { background: var(--r-blue2); border-color: var(--r-blue2); box-shadow: 0 0 0 4px rgb(92 124 250 / .2); }
.feed__empty { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--r-line); border-radius: 1.2rem; color: var(--r-soft); }
.feed__empty h3 { font-weight: 800; color: var(--r-ink); margin: .8rem 0 .3rem; } .feed__empty p { margin: 0 auto; max-width: 46ch; font-size: .92rem; }
.feed__bell { display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--r-bg2); color: var(--r-mute); animation: gleam 3s ease-in-out infinite; }
.feed__bell svg { width: 1.8rem; height: 1.8rem; }
.feed__more { text-align: center; }
@media (max-width: 640px) { .feed__item { grid-template-columns: auto 1fr; } .feed__actions { grid-column: 2; } }

/* ---------- Telefono come un'app: barra in basso, aree sicure, tocchi comodi ---------- */
.appbar, .appinstall { display: none; }
[x-cloak] { display: none !important; }
@media (max-width: 1023px) {
    html { -webkit-tap-highlight-color: transparent; }
    body { overscroll-behavior-y: none; }
    /* Niente zoom automatico di iPhone sui campi: testo almeno 16px. */
    input, select, textarea, .fi-input, .fi-select-input { font-size: 16px !important; }

    /* Barra in alto: fissa, vetro smerigliato, rispetta la tacca. */
    .fi-topbar-ctn { position: sticky; top: 0; z-index: 30; }
    .fi-topbar { padding-top: env(safe-area-inset-top); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
        background: rgb(255 255 255 / .82) !important; }
    .dark .fi-topbar { background: rgb(12 15 22 / .82) !important; }
    .fi-main { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important; }
    .fi-header-heading { font-size: 1.45rem; line-height: 1.2; }

    /* Barra delle schede. */
    .appbar { display: flex; position: fixed; z-index: 40; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom));
        align-items: stretch; justify-content: space-around; gap: .15rem; padding: .35rem .4rem; border-radius: 1.4rem;
        background: rgb(255 255 255 / .86); border: 1px solid var(--r-line); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
        box-shadow: 0 18px 40px -18px rgb(23 27 38 / .35), 0 2px 6px rgb(23 27 38 / .06); }
    .dark .appbar { background: rgb(23 27 38 / .86); box-shadow: 0 18px 40px -18px rgb(0 0 0 / .8); }
    .appbar__item { flex: 1; min-width: 0; min-height: 3.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
        border-radius: 1rem; color: var(--r-mute); font: inherit; background: none; border: 0; cursor: pointer; transition: color .2s, background .2s, transform .15s; }
    .appbar__item svg { width: 1.45rem; height: 1.45rem; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
    .appbar__item:active { transform: scale(.92); }
    .appbar__item.is-on { color: var(--r-blue); background: rgb(47 74 192 / .09); }
    .dark .appbar__item.is-on { color: var(--r-blue2); background: rgb(92 124 250 / .14); }
    .appbar__item.is-on svg { transform: translateY(-1px) scale(1.06); }
    .appbar__label { font-size: .66rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }

    /* Pulsante centrale «Segnala»: sfera in rilievo che esce dalla barra. */
    .appbar__fab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .18rem; color: var(--r-blue); }
    .dark .appbar__fab { color: var(--r-blue2); }
    .appbar__fab-dot { width: 3.4rem; height: 3.4rem; margin-top: -1.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff;
        background: radial-gradient(circle at 32% 28%, #8eaaff, #3b5bdb 45%, #1d2b63); border: 3px solid var(--r-card);
        box-shadow: 0 14px 26px -8px rgb(47 74 192 / .65), inset 0 -4px 8px rgb(0 0 0 / .25), inset 0 3px 6px rgb(255 255 255 / .35);
        transition: transform .25s cubic-bezier(.2,.8,.2,1); }
    .appbar__fab-dot svg { width: 1.6rem; height: 1.6rem; stroke-width: 2.4; }
    .appbar__fab:active .appbar__fab-dot { transform: scale(.9) rotate(90deg); }
    .appbar__fab.is-on .appbar__fab-dot { background: radial-gradient(circle at 32% 28%, #ffd27a, #f59f00 50%, #b86e00); }

    /* Il Coach sale sopra la barra. */
    .coach { bottom: calc(5.6rem + env(safe-area-inset-bottom)) !important; right: .9rem !important; }
    .coach__panel { height: min(640px, calc(100dvh - 8rem - env(safe-area-inset-bottom))); }

    /* Invito a installare. */
    .appinstall { display: flex; position: fixed; z-index: 45; left: .8rem; right: .8rem; bottom: calc(5.4rem + env(safe-area-inset-bottom));
        align-items: center; gap: .75rem; padding: .75rem .8rem; border-radius: 1.1rem; background: var(--r-card); border: 1px solid var(--r-line); box-shadow: var(--r-shadow-up); }
    .appinstall__icon { width: 2.8rem; height: 2.8rem; border-radius: .75rem; flex: none; }
    .appinstall__text { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.35; color: var(--r-soft); }
    .appinstall__text strong { display: block; color: var(--r-ink); font-size: .9rem; }
    .appinstall__share { display: inline-block; width: 1rem; height: 1rem; vertical-align: -3px; color: var(--r-blue); }
    .appinstall__go { flex: none; border: 0; border-radius: 999px; padding: .55rem 1rem; font: inherit; font-weight: 800; font-size: .82rem; background: var(--r-blue); color: #fff; }
    .appinstall__x { flex: none; border: 0; background: none; color: var(--r-mute); padding: .3rem; }
    .appinstall__x svg { width: 1.2rem; height: 1.2rem; }

    /* Tabelle e schede più comode al pollice. */
    .fi-ta-record, .fi-ta-row { min-height: 3.25rem; }
    .fi-btn { min-height: 2.75rem; }
    .fi-modal-window { border-radius: 1.4rem 1.4rem 0 0 !important; }
}
/* Aperta dalla schermata Home: niente barra del browser, quindi più aria in alto. */
html.is-app .fi-topbar { padding-top: max(env(safe-area-inset-top), .25rem); }
@media (max-width: 640px) {
    /* Le schede colorate restano sotto i pulsanti, senza coprirli. */
    .rete-stack { height: 200px; margin-top: 1.5rem; transform: scale(.82); }
}