/* ============================================================
   PROMETEO LABS — Sito (direzione "Orizzonte")
   Smeraldo su nero · Space Grotesk + JetBrains Mono
   ============================================================ */
:root {
  --bg-0: #05080a;
  --bg-1: #080d0f;
  --bg-2: #0b1316;
  --line: rgba(180, 230, 210, 0.10);
  --line-2: rgba(180, 230, 210, 0.055);
  --em: #10b981;
  --em-bright: #34d399;
  --em-light: #6ee7b7;
  --em-glow: rgba(52, 211, 153, 0.5);
  --hi: #e9f1ec;
  --mid: #8ea49b;
  --dim: #56655e;
  --f-disp: 'Space Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --gut: clamp(22px, 5vw, 80px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-0);
  color: var(--hi);
  font-family: var(--f-disp);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(52,211,153,.25); color: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- utility ---------- */
.kicker {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.32em;
  color: var(--em-bright); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 13px;
}
.kicker::before { content: ''; width: 30px; height: 1px; background: var(--em); }
.grad {
  background: linear-gradient(115deg, var(--em-light), var(--em) 55%, #0e9c74);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mono { font-family: var(--f-mono); }
.sec { position: relative; padding: clamp(90px,12vw,170px) var(--gut); scroll-margin-top: 70px; }
#vision { padding-top: clamp(44px,5vw,74px); scroll-margin-top: 24px; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- progress + nav ---------- */
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--em), var(--em-light)); z-index: 100; box-shadow: 0 0 12px var(--em-glow); }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut); transition: background .4s, backdrop-filter .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.solid { background: rgba(5,8,10,.72); backdrop-filter: blur(14px); border-bottom-color: var(--line); padding: 15px var(--gut); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand .wm { display: flex; flex-direction: column; line-height: 1; }
.brand .wm b { font-weight: 600; font-size: 16px; letter-spacing: 0.16em; }
.brand .wm span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.42em; color: var(--em-bright); margin-top: 4px; }
.navlinks { display: flex; align-items: center; gap: 30px; }
.navlinks a { font-family: var(--f-mono); font-size: 12.5px; color: var(--mid); white-space: nowrap; transition: color .2s; }
.navlinks a:hover { color: var(--hi); }
.btn {
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.05em;
  padding: 11px 19px; border: 1px solid var(--line); border-radius: 2px;
  display: inline-flex; align-items: center; gap: 9px; transition: border-color .25s, background .25s, color .25s;
}
.btn:hover { border-color: var(--em); background: rgba(16,185,129,.08); }
.btn .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--em-bright); box-shadow: 0 0 10px var(--em-glow); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 760px) { .navlinks a:not(.btn) { display: none; } }

/* ---------- side index ---------- */
.sidedex { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 16px; }
.sidedex a { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--dim); writing-mode: vertical-rl; transition: color .25s; }
.sidedex a.active { color: var(--em-bright); }
.sidedex a::after { content: ''; display: block; }
@media (max-width: 1100px) { .sidedex { display: none; } }

/* ============================================================
   HERO — Orizzonte
   ============================================================ */
#hero { height: 100vh; min-height: 680px; position: relative; display: flex; flex-direction: column; overflow: hidden; }
#grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(75% 55% at 50% 30%, rgba(16,185,129,.13), transparent 72%); }
.hero-vig { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(130% 100% at 50% 12%, transparent 42%, rgba(0,0,0,.6) 100%); }
.hero-inner { position: relative; z-index: 5; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gut); }
.hero-inner h1 { font-weight: 500; letter-spacing: -0.025em; line-height: 0.98; font-size: clamp(44px, 9vw, 116px); margin-top: 26px; }
.type-line { margin-top: 30px; font-family: var(--f-mono); font-size: clamp(13px,1.4vw,16px); color: var(--mid); letter-spacing: .02em; min-height: 1.4em; }
.type-line .p { color: var(--em-bright); }
.caret { display: inline-block; width: 9px; height: 1.05em; background: var(--em-bright); margin-left: 2px; transform: translateY(2px); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-foot { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--gut) 34px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
.hero-foot .proj { color: var(--mid); }
.hero-foot .row { display: flex; gap: 26px; flex-wrap: wrap; }
.scrollcue { display: flex; align-items: center; gap: 10px; }
.scrollcue .ln { width: 1px; height: 36px; background: linear-gradient(var(--em), transparent); position: relative; overflow: hidden; }
.scrollcue .ln::after { content: ''; position: absolute; top: -12px; left: 0; width: 1px; height: 12px; background: var(--em-light); animation: drop 1.8s infinite; }
@keyframes drop { 0% { top: -12px; } 100% { top: 36px; } }

/* ============================================================
   MANIFESTO
   ============================================================ */
#manifesto { padding-block: clamp(110px,16vw,220px); }
.manifesto-txt { font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(26px, 4.6vw, 58px); max-width: 24ch; }
.manifesto-txt .dim { color: var(--dim); }
/* illuminazione progressiva allo scroll */
.scrolltext { color: var(--hi); }
.scrolltext .w { display: inline-block; opacity: .14; transition: opacity .12s linear; }
.manifesto-meta { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 14px; }
.manifesto-meta .cell { position: relative; background: var(--bg-1); padding: 28px 26px; border: 1px solid var(--line); overflow: hidden; transition: background .35s, transform .4s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.manifesto-meta .cell::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--em-bright), var(--em-light)); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.manifesto-meta .cell:hover { transform: translateY(-5px); background: rgba(16,185,129,.06); border-color: rgba(52,211,153,.3); }
.manifesto-meta .cell:hover::before { transform: scaleX(1); }
.manifesto-meta .cell .n { font-family: var(--f-mono); font-size: 11px; color: var(--em-bright); letter-spacing: .14em; transition: color .3s; }
.manifesto-meta .cell .t { margin-top: 12px; font-size: 16px; color: var(--mid); line-height: 1.45; transition: color .3s; }
.manifesto-meta .cell:hover .t { color: var(--hi); }
.manifesto-meta .cell:hover .n { color: var(--em-light); }

/* ============================================================
   PROGETTI
   ============================================================ */
#progetti { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(40px,5vw,72px); scroll-margin-top: 24px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(50px,7vw,90px); }
.sec-head h2 { font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-size: clamp(34px,5.5vw,68px); }
.sec-head p { color: var(--mid); max-width: 360px; font-size: 16px; line-height: 1.55; }

.project { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,80px); align-items: center; padding: clamp(40px,6vw,72px) 0; border-top: 1px solid var(--line-2); }
.project:first-of-type { border-top: none; }
.project.flip .pj-visual { order: 2; }
.pj-body { }
.pj-visual { position: relative; }
.pj-visual image-slot { display: block; width: 100%; height: auto; aspect-ratio: 16/11; }
.pj-frame { position: relative; border: 1px solid var(--line); padding: 12px; background: linear-gradient(160deg, rgba(16,185,129,.05), transparent); }
.pj-frame::before { content: ''; position: absolute; inset: -1px; border: 1px solid transparent; border-top-color: var(--em); border-left-color: var(--em); width: 26px; height: 26px; }
.pj-frame::after { content: ''; position: absolute; right: -1px; bottom: -1px; border: 1px solid transparent; border-bottom-color: var(--em); border-right-color: var(--em); width: 26px; height: 26px; }
.pj-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pj-num { font-family: var(--f-mono); font-size: 12px; color: var(--dim); letter-spacing: .2em; }
.pj-badge { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.pj-badge.product { color: #06080a; background: var(--em-bright); font-weight: 600; }
.pj-badge.client { color: var(--mid); border: 1px solid var(--line); }
.pj-name { font-weight: 500; letter-spacing: -0.02em; font-size: clamp(30px,4.2vw,52px); line-height: 1; margin: 14px 0 8px; }
.pj-role { font-family: var(--f-mono); font-size: 12px; color: var(--em-bright); letter-spacing: .08em; margin-bottom: 22px; }
.pj-desc { color: var(--mid); font-size: 17px; line-height: 1.62; max-width: 460px; }
.pj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pj-tags span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--mid); border: 1px solid var(--line); padding: 7px 12px; border-radius: 2px; cursor: default; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.pj-tags span:hover { border-color: var(--em); color: var(--hi); background: rgba(16,185,129,.10); transform: translateY(-2px); }
.pj-link { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 13px; color: var(--hi); }
.pj-link .arr { transition: transform .25s; }
.pj-link:hover .arr { transform: translateX(5px); }
.pj-link .arr, .pj-link i { color: var(--em-bright); font-style: normal; }

/* geo nodes for GiesseHome */
.geo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.geo span { font-family: var(--f-mono); font-size: 11.5px; color: var(--mid); display: inline-flex; align-items: center; gap: 7px; }
.geo span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--em-bright); box-shadow: 0 0 8px var(--em-glow); }
.geo span.more { color: var(--dim); }
.geo span.more::before { background: var(--dim); box-shadow: none; }

/* ContaGest: descrizione a sinistra · programma a destra */
#progetti .project .pj-body { order: 1; }
#progetti .project .pj-visual { order: 2; }

@media (max-width: 820px) {
  .project { grid-template-columns: 1fr; }
  .project.flip .pj-visual { order: 0; }
}

/* ============================================================
   STUDIO / VISION
   ============================================================ */
#studio { position: relative; overflow: hidden; }
.studio-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px,6vw,90px); align-items: center; }
.vision-quote { font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(26px,4.4vw,52px); }
.vision-quote .grad { font-weight: 600; }
.vision-sub { margin-top: 28px; color: var(--mid); font-size: 17px; line-height: 1.62; max-width: 480px; }
.vision-sub.codetype { font-family: var(--f-mono); font-size: 14.5px; line-height: 1.66; letter-spacing: -0.01em; min-height: 4.9em; }
.codetype.typing::after { content: '▋'; color: var(--em-bright); margin-left: 2px; animation: blink 1s steps(1) infinite; }
.principi { margin-top: 44px; display: flex; flex-direction: column; }
.principi .pr { position: relative; display: flex; align-items: baseline; gap: 20px; padding: 22px 18px 22px 16px; border-top: 1px solid var(--line-2); border-radius: 6px; cursor: default; transition: background .3s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.principi .pr::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 14%; width: 2px; background: linear-gradient(var(--em-light), var(--em)); border-radius: 2px; transform: scaleY(0); transform-origin: top; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.principi .pr:hover { background: rgba(16,185,129,.06); transform: scale(1.035); transform-origin: left center; box-shadow: 0 18px 50px rgba(0,0,0,.45); z-index: 2; }
.principi .pr.active { background: rgba(16,185,129,.05); transform: scale(1.015); transform-origin: left center; }
.principi .pr:hover::before, .principi .pr.active::before { transform: scaleY(1); }
.principi .pr .pn { font-family: var(--f-mono); font-size: 11px; color: var(--em-bright); letter-spacing: .14em; min-width: 34px; transition: color .3s, transform .3s; }
.principi .pr:hover .pn, .principi .pr.active .pn { color: var(--em-light); transform: scale(1.18); }
.principi .pr .pt { font-size: clamp(18px,2vw,23px); font-weight: 500; transition: transform .3s, color .3s; }
.principi .pr:hover .pt { transform: translateX(5px); }
.principi .pr.active .pt { color: var(--em-light); }
.principi .pr .pd { color: var(--mid); font-size: 14.5px; line-height: 1.5; margin-left: auto; max-width: 300px; text-align: right; transition: color .3s; }
.principi .pr:hover .pd, .principi .pr.active .pd { color: var(--hi); }
.studio-visual image-slot { display: block; width: 100%; height: auto; aspect-ratio: 4/5; }

/* ---- logo interattivo (sezione Studio) ---- */
.studio-visual { perspective: 1000px; }
.vlogo { position: relative; width: 100%; aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: radial-gradient(62% 52% at 50% 56%, rgba(16,185,129,.07), transparent 72%); transform-style: preserve-3d; }
.vlogo::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 40px 40px; opacity: .6; }
.vlogo-glow { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(52,211,153,.20), transparent 64%); filter: blur(12px); transition: transform .25s ease; }
.vlogo.pulse .vlogo-glow { animation: vpulse .7s ease; }
@keyframes vpulse { 0% { transform: scale(1); } 42% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); } }
.vlogo.pulse .vch { animation-duration: .9s; }
.vlogo-ring { position: absolute; width: 64%; aspect-ratio: 1; border: 1px solid rgba(52,211,153,.14); border-radius: 50%; }
body.loaded .vlogo-ring { animation: vring 4s ease-in-out infinite; }
@keyframes vring { 0%,100% { transform: scale(.92); opacity: .5; } 50% { transform: scale(1.04); opacity: 1; } }
.vlogo-svg { position: relative; width: 56%; max-width: 240px; overflow: visible; transition: transform .25s ease; transform-style: preserve-3d; }
.vbk { stroke: var(--em); stroke-width: 3; opacity: .45; }
body.loaded .vbk { animation: vbk 4s ease-in-out infinite; }
@keyframes vbk { 0%,100% { opacity: .3; } 50% { opacity: .6; } }
.vch { stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; opacity: 0; }
.v1 { stroke: rgba(52,211,153,.5); } .v2 { stroke: rgba(52,211,153,.82); } .v3 { stroke: var(--em-light); }
body.loaded .vch { animation: vrise 2.3s cubic-bezier(.4,0,.2,1) infinite; }
body.loaded .v1 { animation-delay: 0s; } body.loaded .v2 { animation-delay: .22s; } body.loaded .v3 { animation-delay: .44s; }
@keyframes vrise {
  0% { opacity: 0; transform: translateY(26px); }
  28% { opacity: 1; }
  58% { opacity: 1; transform: translateY(0); }
  82% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 0; transform: translateY(-12px); }
}
.vlogo-cap { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-size: 10px; letter-spacing: .34em; color: var(--em-bright); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .vch { opacity: 1 !important; transform: none !important; animation: none !important; }
  .vlogo-ring, .vbk { animation: none !important; }
}

/* ---- ContaGest sidebar cliccabile ---- */
.cg-nav:not(.sp) { cursor: pointer; transition: background .15s, color .15s; }
.cg-nav:not(.sp):not(.on):hover { background: #f3f4fb; color: #4f46e5; }
@media (max-width: 880px) {
  /* Vision: tre moduli a sinistra · logo adattato a destra */
  .studio-text { display: contents; }
  .studio-grid {
    grid-template-columns: 1fr clamp(120px, 34vw, 230px);
    grid-template-areas:
      "quote    quote"
      "sub      sub"
      "principi visual";
    column-gap: clamp(16px, 4vw, 34px);
    row-gap: 0;
    align-items: start;
  }
  .vision-quote  { grid-area: quote; }
  .vision-sub    { grid-area: sub; margin-bottom: clamp(26px, 5vw, 42px); }
  .principi      { grid-area: principi; }
  .studio-visual { grid-area: visual; align-self: stretch; }
  /* la carta del logo si allunga su tutta l'altezza dei tre moduli */
  .vlogo { aspect-ratio: auto; height: 100%; }
  .principi .pr .pd { display: none; }
  .principi .pr { padding-right: 10px; padding-left: 14px; gap: 14px; }
  .vlogo-cap { font-size: clamp(7px, 2.2vw, 10px); letter-spacing: .2em; }
}

/* ============================================================
   CONTATTI
   ============================================================ */
#contatti { background: var(--bg-1); border-top: 1px solid var(--line); text-align: center; }
.contatti-kick { justify-content: center; margin-bottom: 34px; }
.contatti h2 { font-weight: 500; letter-spacing: -0.025em; line-height: 1.02; font-size: clamp(32px,5.2vw,78px); margin: 0 0 30px; text-wrap: balance; }
.contatti .lead { color: var(--mid); font-size: 18px; line-height: 1.55; max-width: 480px; margin: 0 auto 66px; }
.tel { display: inline-flex; align-items: center; gap: 16px; font-family: var(--f-mono); font-size: clamp(20px,3vw,34px); color: var(--hi); border: 1px solid var(--line); padding: 22px 34px; border-radius: 3px; transition: border-color .3s, background .3s; }
.tel:hover { border-color: var(--em); background: rgba(16,185,129,.07); }
.tel .ic { width: 11px; height: 11px; border-radius: 50%; background: var(--em-bright); box-shadow: 0 0 14px var(--em-glow); }
.contatti-methods { margin: 26px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 880px; }
.cmethod { display: flex; align-items: center; gap: 20px; text-align: left; padding: 32px 32px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.012); transition: border-color .3s, background .3s, transform .3s; }
.cmethod:hover { border-color: var(--em); background: rgba(16,185,129,.06); transform: translateY(-3px); }
.cm-ic { flex-shrink: 0; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 23px; color: var(--em-bright); font-family: var(--f-mono); transition: border-color .3s, box-shadow .3s; }
.cmethod:hover .cm-ic { border-color: var(--em); box-shadow: 0 0 18px var(--em-glow); }
.cm-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cm-l { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.cm-v { font-size: clamp(14px, 1.55vw, 19px); font-weight: 500; letter-spacing: -0.01em; color: var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-arr { margin-left: auto; color: var(--em-bright); font-size: 18px; transition: transform .3s; }
.cmethod:hover .cm-arr { transform: translateX(5px); }
@media (max-width: 640px) { .contatti-methods { grid-template-columns: 1fr; max-width: 420px; } }
.contatti-meta { margin-top: 54px; display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.contatti-meta b { color: var(--mid); font-weight: 400; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { padding: 54px var(--gut) 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
footer .fnav { display: flex; gap: 24px; font-family: var(--f-mono); font-size: 12px; color: var(--mid); }
footer .fnav a:hover { color: var(--hi); }
footer .copy { font-family: var(--f-mono); font-size: 11px; color: var(--dim); letter-spacing: .08em; }

/* ============================================================
   MOTION — animazioni extra
   ============================================================ */

/* sheen su tutto il testo gradiente */
.grad { background-size: 220% auto; }
body.loaded .grad { animation: sheen 6s linear infinite; }
@keyframes sheen { to { background-position: 220% center; } }

/* sparks layer sopra la griglia */
#sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* entrata hero */
.hero-inner .kicker, .hero-inner h1, .hero-inner .type-line { opacity: 0; transform: translateY(28px); }
body.loaded .hero-inner .kicker { animation: heroIn .9s .15s cubic-bezier(.2,.7,.2,1) forwards; }
body.loaded .hero-inner h1 { animation: heroIn 1s .32s cubic-bezier(.2,.7,.2,1) forwards; }
body.loaded .hero-inner .type-line { animation: heroIn .9s .6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ticker / marquee */
.ticker { position: relative; overflow: hidden; padding: 26px 0; background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; }
.ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14vw; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg-1), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--bg-1), transparent); }
.ticker .track { display: flex; flex-shrink: 0; align-items: center; gap: 46px; padding-left: 46px; white-space: nowrap; animation: tick 32s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker .it { font-family: var(--f-disp); font-weight: 500; font-size: clamp(22px,2.8vw,38px); letter-spacing: -0.01em; color: var(--mid); display: inline-flex; align-items: center; gap: 46px; }
.ticker .it b { color: var(--em-bright); font-weight: 500; }
.ticker .star { color: var(--em); font-size: .6em; transform: translateY(-2px); }
@keyframes tick { to { transform: translateX(-50%); } }

/* card progetto: tilt 3D + zoom + lift */
.pj-visual { perspective: 1100px; }
.pj-frame { overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .4s; transform-style: preserve-3d; will-change: transform; }
.project:hover .pj-frame { box-shadow: 0 34px 90px rgba(0,0,0,.55); border-color: rgba(52,211,153,.3); }
.pj-frame image-slot { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.project:hover .pj-frame image-slot { transform: scale(1.045); }
.pj-name { transition: color .3s; }
/* nome prodotto/azienda sempre bianco: niente verde su hover/tap */

/* custom cursor */
.cur, .cur-ring { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.cur { width: 7px; height: 7px; background: var(--em-bright); }
.cur-ring { width: 34px; height: 34px; border: 1px solid rgba(52,211,153,.55); transition: width .25s, height .25s, background .25s, border-color .25s; }
.cur-ring.hot { width: 60px; height: 60px; background: rgba(52,211,153,.08); border-color: var(--em-bright); }
@media (hover: hover) and (pointer: fine) { body.cursor-on { cursor: none; } body.cursor-on a, body.cursor-on button, body.cursor-on .btn { cursor: none; } }
@media (hover: none), (pointer: coarse) { .cur, .cur-ring { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-inner .kicker, .hero-inner h1, .hero-inner .type-line { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ticker .track { animation: none !important; }
  body.loaded .grad { animation: none !important; }
}

/* ============================================================
   CONTAGEST — riproduzione fedele dello screenshot (tema chiaro)
   ============================================================ */
.cg { width: 100%; aspect-ratio: 16/14; background: #eef1f5; display: flex; flex-direction: column; font-family: var(--f-disp); color: #1a2030; overflow: hidden; container-type: inline-size; }
.cg-top { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: #ffffff; border-bottom: 1px solid #e9edf2; flex-shrink: 0; }
.cg-dots { display: flex; gap: 5px; }
.cg-dots i { width: 7px; height: 7px; border-radius: 50%; }
.cg-dots i:nth-child(1){ background:#ec6a5e; } .cg-dots i:nth-child(2){ background:#f3bf4f; } .cg-dots i:nth-child(3){ background:#61c554; }
.cg-title { font-size: clamp(7px, 1.25cqw, 10px); color: #818b9a; font-weight: 500; }
.cg-app { flex: 1; display: flex; min-height: 0; }
.cg-side { width: clamp(82px, 15cqw, 128px); background: #fff; border-right: 1px solid #e4e9ef; display: flex; flex-direction: column; gap: clamp(3px, 0.7cqw, 6px); padding: clamp(8px, 1.5cqw, 14px) clamp(6px, 1.1cqw, 11px); flex-shrink: 0; }
.cg-logo { font-weight: 700; font-size: clamp(11px, 1.9cqw, 15px); color: #4f46e5; letter-spacing: -0.01em; margin-bottom: clamp(2px,0.5cqw,4px); }
.cg-company { margin-bottom: clamp(4px,0.9cqw,8px); font-family: var(--f-mono); font-size: clamp(7px, 1.2cqw, 9px); color: #4a5161; background: #f1f3f8; border: 1px solid #e4e9ef; border-radius: 5px; padding: clamp(4px,0.8cqw,7px) clamp(6px,1cqw,9px); display: flex; justify-content: space-between; }
.cg-company span { color: #9aa3b2; }
.cg-nav { font-size: clamp(7px, 1.3cqw, 10px); color: #6b7484; padding: clamp(3px,0.7cqw,6px) clamp(4px,0.9cqw,7px); border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-nav.on { background: #eef0fe; color: #4f46e5; font-weight: 600; }
.cg-nav.sp { margin-top: auto; }
.cg-user { font-family: var(--f-mono); font-size: clamp(6.5px,1.1cqw,8.5px); color: #9aa3b2; display: flex; justify-content: space-between; padding: clamp(3px,0.6cqw,5px) clamp(4px,0.9cqw,7px); border-top: 1px solid #eef1f5; margin-top: clamp(3px,0.6cqw,5px); }
.cg-user em { font-style: normal; }
.cg-content { flex: 1; padding: clamp(8px, 1.7cqw, 16px); display: flex; flex-direction: column; gap: clamp(5px, 1cqw, 9px); min-width: 0; overflow: hidden; }
.cg-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cg-h1 { font-size: clamp(13px, 2.4cqw, 20px); font-weight: 700; letter-spacing: -0.02em; }
.cg-toggle { font-family: var(--f-mono); font-size: clamp(6.5px, 1.2cqw, 9px); color: #818b9a; border: 1px solid #dfe5ec; border-radius: 6px; padding: clamp(3px,0.7cqw,6px) clamp(6px,1.1cqw,10px); white-space: nowrap; }

.cg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1.2cqw, 11px); }
.cg-panel { background: #fff; border: 1px solid #e4e9ef; border-radius: 8px; padding: clamp(7px,1.3cqw,12px); position: relative; }
.cg-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 8px 8px 0 0; }
.cg-panel.red::before { background: #e0463c; } .cg-panel.green::before { background: #2fa84f; }
.cg-p-h { font-size: clamp(8px,1.5cqw,11.5px); font-weight: 600; color: #2a3142; margin-bottom: clamp(5px,1cqw,9px); }
.cg-hl { display: flex; justify-content: space-between; gap: 8px; padding: clamp(5px,1cqw,9px) clamp(6px,1.2cqw,11px); border-radius: 6px; background: #fafbfc; }
.cg-hl.red { border-left: 3px solid #e0463c; } .cg-hl.green { border-left: 3px solid #2fa84f; }
.cg-hl-lab { display: block; font-size: clamp(6.5px,1.1cqw,8.5px); color: #818b9a; }
.cg-hl-big { display: block; font-size: clamp(13px,2.4cqw,19px); font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; color: #1a2030; }
.cg-hl-big.red { color: #e0463c; }
.cg-hl-r { display: flex; flex-direction: column; justify-content: center; gap: 3px; text-align: right; font-family: var(--f-mono); font-size: clamp(6px,1cqw,8px); color: #939cab; }
.cg-hl-r b { color: #4a5161; font-weight: 600; }
.cg-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(4px,0.8cqw,7px); margin-top: clamp(5px,1cqw,9px); }
.cg-sub { border: 1px solid #eef1f5; border-radius: 5px; padding: clamp(4px,0.9cqw,8px); background: #fcfdfe; }
.cg-s-l { display: block; font-size: clamp(6px,1cqw,8px); color: #818b9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-s-v { display: block; font-size: clamp(8px,1.5cqw,12px); font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.cg-s-n { display: block; font-family: var(--f-mono); font-size: clamp(5.5px,0.95cqw,7.5px); color: #aab2bf; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cg-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px,1.2cqw,11px); }
.cg-mc { background: #fff; border: 1px solid #e4e9ef; border-radius: 8px; padding: clamp(6px,1.2cqw,11px); display: flex; flex-direction: column; }
.cg-mc-t { font-size: clamp(7px,1.3cqw,10px); font-weight: 600; color: #2a3142; }
.cg-mc-v { font-size: clamp(11px,2.1cqw,17px); font-weight: 700; letter-spacing: -0.02em; margin-top: clamp(2px,0.5cqw,5px); }
.cg-mc-n { font-family: var(--f-mono); font-size: clamp(5.5px,1cqw,8px); color: #aab2bf; margin-top: auto; padding-top: clamp(3px,0.6cqw,5px); }
.cg-mc-rows { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: clamp(5.5px,0.95cqw,7.5px); color: #939cab; margin-top: 3px; }
.cg-mc-rows em { font-style: normal; } .cg-mc-rows b { color: #4a5161; font-weight: 600; }

.cg-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px,1.2cqw,11px); }
.cg-ctrl { background: #fff; border: 1px solid #e4e9ef; border-left: 3px solid #2fa84f; border-radius: 8px; padding: clamp(6px,1.2cqw,11px); }
.cg-ctrl-t { font-size: clamp(7px,1.3cqw,10px); font-weight: 600; color: #2a3142; }
.cg-ctrl-ok { font-size: clamp(10px,1.9cqw,15px); font-weight: 700; color: #1f9d55; margin-top: clamp(2px,0.5cqw,4px); }
.cg-ctrl-s { font-family: var(--f-mono); font-size: clamp(5.5px,1cqw,8px); color: #939cab; margin-top: clamp(3px,0.6cqw,5px); line-height: 1.4; }
.cg-ctrl-s b { color: #4a5161; font-weight: 600; }

/* ---- tabs + stage + crossfade screens ---- */
.cg-tabs { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.cg-tab { font-family: var(--f-mono); font-size: clamp(6px,1.1cqw,9px); color: #7c8696; background: transparent; border: none; border-radius: 5px; padding: clamp(2px,0.5cqw,4px) clamp(4px,0.9cqw,8px); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.cg-tab.on { color: #4f46e5; background: #eef0fe; font-weight: 600; }
.cg-stage { position: relative; flex: 1; min-height: 0; }
.cg-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease; pointer-events: none; }
.cg-screen.on { opacity: 1; visibility: visible; pointer-events: auto; }
.cg-screen .cg-app { height: 100%; }

/* ---- generic actions / search in headers ---- */
.cg-actions { display: flex; gap: clamp(4px,0.9cqw,8px); }
.cg-act { font-family: var(--f-mono); font-size: clamp(6.5px,1.2cqw,9px); color: #6b7484; border: 1px solid #dfe5ec; border-radius: 6px; padding: clamp(4px,0.8cqw,6px) clamp(6px,1.1cqw,10px); white-space: nowrap; }
.cg-act.pri { background: #6d5ef0; color: #fff; border-color: #6d5ef0; font-weight: 600; }
.cg-search { display: flex; gap: clamp(4px,0.9cqw,8px); align-items: center; }
.cg-sb { flex: 1; font-family: var(--f-mono); font-size: clamp(6.5px,1.2cqw,9px); color: #aab2bf; border: 1px solid #dfe5ec; border-radius: 6px; padding: clamp(5px,1cqw,8px) clamp(7px,1.3cqw,11px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-chip { font-family: var(--f-mono); font-size: clamp(6.5px,1.2cqw,9px); color: #6b7484; border: 1px solid #dfe5ec; border-radius: 6px; padding: clamp(5px,1cqw,8px) clamp(6px,1.1cqw,10px); white-space: nowrap; }

/* ---- Prima Nota: banks + table ---- */
.cg-banks { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(6px,1.2cqw,11px); }
.cg-bank { border: 1px solid #e4e9ef; border-radius: 8px; padding: clamp(7px,1.3cqw,12px); display: flex; flex-direction: column; }
.cg-bank.cassa { background: #f0faf3; border-color: #cdecd6; } .cg-bank.uni { background: #fdefe9; border-color: #f6d6c6; } .cg-bank.rev { background: #fff8e6; border-color: #f3e6b5; }
.cg-bk-l { font-family: var(--f-mono); font-size: clamp(6.5px,1.1cqw,9px); color: #818b9a; letter-spacing: .04em; }
.cg-bk-v { font-size: clamp(13px,2.4cqw,19px); font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; }
.cg-bk-v.red { color: #e0463c; }
.cg-bk-s { font-family: var(--f-mono); font-size: clamp(5.5px,0.95cqw,7.5px); color: #939cab; margin-top: auto; padding-top: 3px; }
.cg-bk-s em { color: #d68a2a; font-style: normal; }
.cg-table { border: 1px solid #e4e9ef; border-radius: 8px; overflow: hidden; background: #fff; }
.cg-tr { display: grid; grid-template-columns: 0.75fr 1.2fr 1.1fr 0.85fr 0.7fr 0.7fr; gap: 6px; align-items: center; padding: clamp(4px,0.85cqw,7px) clamp(7px,1.3cqw,12px); border-top: 1px solid #f0f2f6; font-size: clamp(6.5px,1.2cqw,9.5px); }
.cg-tr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-tr.cg-th { background: #f7f8fb; color: #9aa3b2; font-family: var(--f-mono); font-size: clamp(6px,1cqw,8px); border-top: none; text-transform: uppercase; }
.cg-ta { text-align: right; font-family: var(--f-mono); }
.cg-ta.grn { color: #1f9d55; font-weight: 600; } .cg-ta.red { color: #e0463c; font-weight: 600; }
.cg-mut { color: #c2cbd5; }
.cg-bdg { font-family: var(--f-mono); font-style: normal; font-size: clamp(5.5px,1cqw,8px); padding: 2px 6px; border-radius: 999px; }
.cg-bdg.rev { background: #fff3cd; color: #b88a13; } .cg-bdg.uni { background: #fde0d2; color: #c1572a; } .cg-bdg.gray { background: #eef1f5; color: #aab2bf; }

/* ---- Controparti ---- */
.cg-grp { border: 1px solid #e4e9ef; border-radius: 8px; margin-bottom: clamp(5px,1cqw,9px); overflow: hidden; }
.cg-grp-h { display: flex; align-items: center; gap: clamp(5px,1cqw,9px); padding: clamp(6px,1.2cqw,11px); font-weight: 600; font-size: clamp(8px,1.5cqw,12px); }
.cg-grp.forn .cg-grp-h { background: #f3f0fe; color: #5b4fd6; border-left: 3px solid #6d5ef0; }
.cg-grp.soci .cg-grp-h { background: #eefaf1; color: #1f9d55; border-left: 3px solid #2fa84f; }
.cg-grp.altro .cg-grp-h { background: #fef6ec; color: #c8842a; border-left: 3px solid #f0a93b; }
.cg-grp-c { font-family: var(--f-mono); font-size: clamp(6px,1.05cqw,8px); background: #fff; border-radius: 999px; padding: 1px 7px; }
.cg-grp-r { margin-left: auto; font-family: var(--f-mono); font-size: clamp(6px,1.05cqw,8px); color: #939cab; font-weight: 400; }
.cg-cpt-r { display: grid; grid-template-columns: 1.5fr 0.5fr 0.9fr; gap: 8px; padding: clamp(5px,1cqw,8px) clamp(8px,1.5cqw,13px); border-top: 1px solid #f0f2f6; font-size: clamp(7px,1.3cqw,10px); background: #fff; align-items: center; }
.cg-cpt-r.h { color: #9aa3b2; font-family: var(--f-mono); font-size: clamp(5.5px,1cqw,7.5px); text-transform: uppercase; }
.cg-cpt-r .ta { text-align: right; font-family: var(--f-mono); }
.cg-neg { color: #e0463c; font-weight: 600; }

/* ---- F24 ---- */
.cg-f24t-r { display: grid; grid-template-columns: 0.7fr 1.7fr 0.8fr 0.7fr 0.7fr; gap: 7px; align-items: center; padding: clamp(5px,1cqw,8px) clamp(6px,1.2cqw,11px); border-top: 1px solid #f0f2f6; font-size: clamp(6.5px,1.2cqw,10px); }
.cg-f24t-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-f24t-r.h { color: #9aa3b2; font-family: var(--f-mono); font-size: clamp(5.5px,1cqw,7.5px); border-top: none; text-transform: uppercase; }
.cg-f24t-r .ta { text-align: right; font-family: var(--f-mono); }
.cg-tag { font-family: var(--f-mono); font-size: clamp(5.5px,1cqw,7.5px); padding: 2px 7px; border-radius: 999px; justify-self: start; }
.cg-tag.altro { background: #eefaf1; color: #1f9d55; } .cg-tag.rit { background: #fdeef3; color: #d6477e; }
.cg-tot { display: flex; justify-content: flex-end; gap: 10px; align-items: baseline; padding: clamp(6px,1.2cqw,10px); border-top: 2px solid #eef1f5; font-size: clamp(7px,1.3cqw,11px); color: #818b9a; }
.cg-tot b { font-size: clamp(11px,2cqw,16px); color: #1a2030; }
.cg-f24cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px,1.2cqw,11px); }
.cg-f24c { border: 1px solid #e4e9ef; border-radius: 8px; padding: clamp(6px,1.2cqw,11px); }
.cg-f24c.green { background: #f4fbf6; border-color: #cdecd6; } .cg-f24c.pink { background: #fdf3f7; border-color: #f5d7e3; }
.cg-f24c-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: clamp(8px,1.6cqw,13px); }
.cg-f24c.green .cg-f24c-h { color: #1f9d55; } .cg-f24c.pink .cg-f24c-h { color: #d6477e; }
.cg-f24c-s { font-family: var(--f-mono); font-size: clamp(5.5px,1cqw,7.5px); color: #939cab; margin-top: 5px; }

/* ---- DDT ---- */
.cg-subtabs { display: flex; gap: clamp(3px,0.7cqw,6px); }
.cg-subtab { font-size: clamp(6.5px,1.2cqw,10px); padding: clamp(4px,0.8cqw,7px) clamp(6px,1.2cqw,11px); border-radius: 6px; color: #6b7484; white-space: nowrap; }
.cg-subtab.on { background: #6d5ef0; color: #fff; font-weight: 600; }
.cg-ddtt-r { display: grid; grid-template-columns: 0.35fr 0.75fr 1.2fr 0.8fr 0.85fr 0.35fr; gap: 7px; align-items: center; padding: clamp(4px,0.85cqw,7px) clamp(6px,1.2cqw,11px); border-top: 1px solid #f0f2f6; font-size: clamp(6px,1.15cqw,9.5px); }
.cg-ddtt-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-ddtt-r.h { color: #9aa3b2; font-family: var(--f-mono); font-size: clamp(5px,0.95cqw,7px); border-top: none; text-transform: uppercase; }
.cg-trk { font-family: var(--f-mono); color: #5b4fd6; }
.cg-flag { width: 8px; height: 11px; border-radius: 1px; justify-self: center; }
.cg-flag.g { background: #2fa84f; } .cg-flag.r { background: #e0463c; } .cg-flag.o { background: #d3dae2; }

/* ---- Calendario ---- */
.cg-cal-month { text-align: center; font-weight: 600; font-size: clamp(8px,1.5cqw,12px); margin-bottom: clamp(3px,0.6cqw,5px); }
.cg-cal-wrap { display: grid; grid-template-columns: 1fr clamp(96px,22cqw,160px); gap: clamp(6px,1.2cqw,11px); flex: 1; min-height: 0; }
.cg-cal-cal { border: 1px solid #e4e9ef; border-radius: 8px; padding: clamp(4px,0.8cqw,7px); background: #fff; display: flex; flex-direction: column; min-height: 0; }
.cg-cal-dow { display: grid; grid-template-columns: repeat(7,1fr); font-family: var(--f-mono); font-size: clamp(5px,0.9cqw,7px); color: #9aa3b2; text-align: center; margin-bottom: 3px; }
.cg-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); grid-auto-rows: 1fr; gap: 2px; flex: 1; min-height: 0; }
.cg-cal-d { border: 1px solid #f0f2f6; border-radius: 3px; padding: 2px 3px; font-size: clamp(5px,0.95cqw,7.5px); color: #6b7484; overflow: hidden; }
.cg-cal-d.today { border-color: #6d5ef0; background: #f6f5fe; color: #5b4fd6; font-weight: 700; }
.cg-cal-ev { display: block; font-size: clamp(4px,0.8cqw,6px); background: #fde8e8; color: #d6453c; border-radius: 2px; padding: 1px 2px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-cal-side { border: 1px solid #e4e9ef; border-radius: 8px; padding: clamp(5px,1cqw,9px); overflow: hidden; display: flex; flex-direction: column; }
.cg-cal-side-h { font-weight: 700; font-size: clamp(7px,1.3cqw,10px); margin-bottom: clamp(4px,0.8cqw,7px); }
.cg-sc { border: 1px solid #eef1f5; border-left: 3px solid #6d5ef0; border-radius: 5px; padding: clamp(3px,0.7cqw,6px) clamp(4px,0.9cqw,7px); margin-bottom: 4px; }
.cg-sc-t { font-size: clamp(6px,1.1cqw,8.5px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-sc-d { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: clamp(5px,0.95cqw,7.5px); color: #e0463c; margin-top: 2px; }
.cg-sc-d b { color: #1a2030; }

@container (max-width: 560px) { .cg-row4 { grid-template-columns: repeat(2,1fr); } .cg-hl-r { display: none; } }
@container (max-width: 380px) { .cg-side { display: none; } }
/* embed iframe ContaGest (demo statico reale) */
.cg-hidden { display: none !important; }
.cg-embed { width: 100%; aspect-ratio: 1440 / 1024; overflow: hidden; position: relative; background: #fff; border-radius: 3px; }
.cg-embed iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 1024px; border: 0; transform-origin: top left; pointer-events: auto; }
/* pulsante ingrandisci + modale demo */
.cg-expand { position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(5,8,10,.5); color: #6ee7b7; font-size: 14px; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .2s, border-color .2s; }
.cg-expand:hover { background: rgba(16,185,129,.22); border-color: var(--em); }
.cg-modal { position: fixed; inset: 0; z-index: 250; background: rgba(3,5,7,.88); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 28px; }
.cg-modal.open { display: flex; }
.cg-modal-stage { position: relative; width: min(95vw, 1520px); aspect-ratio: 1440 / 980; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.cg-modal-stage iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 980px; border: 0; transform-origin: top left; }
.cg-modal-close { position: absolute; top: -16px; right: -16px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #0a0e11; color: #fff; font-size: 22px; cursor: pointer; display: grid; place-items: center; }
.cg-modal-close:hover { border-color: var(--em); color: var(--em-bright); }

/* ============================================================
   GIESSEHOME — mockup interattivo (brand serif blu/terracotta)
   ============================================================ */
.gh {
  --gh-blue: #1f4f67; --gh-blue-d: #163d50; --gh-coral: #cc7a59; --gh-coral-d: #b9663f;
  --gh-gold: #dcb985; --gh-cream: #f7efe5; --gh-ink: #2b3a43; --gh-mut: #7e8a91;
  --gh-serif: 'Cormorant Garamond', Georgia, serif; --gh-sans: 'Poppins', system-ui, sans-serif;
  width: 100%; aspect-ratio: 16/12; background: var(--gh-cream); color: var(--gh-ink);
  font-family: var(--gh-sans); overflow: hidden; container-type: inline-size; display: flex; flex-direction: column;
}
.gh-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #ffffff; border-bottom: 1px solid #ece3d6; flex-shrink: 0; }
.gh-url { font-family: var(--gh-sans); font-weight: 400; font-size: clamp(7px,1.25cqw,10px); color: #9c8f7d; }
.gh-stage { position: relative; flex: 1; min-height: 0; }
.gh-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease; pointer-events: none; }
.gh-screen.on { opacity: 1; visibility: visible; pointer-events: auto; }
.gh-site { height: 100%; display: flex; flex-direction: column; overflow: hidden; }

/* hero wrap (blu→coral) */
.gh-herowrap { position: relative; flex-shrink: 0; padding: clamp(9px,1.7cqw,16px) clamp(11px,2.1cqw,20px) clamp(14px,2.6cqw,24px); background: linear-gradient(125deg, var(--gh-blue) 0%, #2c6075 42%, #c2865f 100%); color: #fff; }
.gh-herowrap.sv { background: linear-gradient(125deg, var(--gh-blue) 0%, #2c6075 46%, #cf8a64 100%); }
.gh-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gh-wm { font-family: var(--gh-serif); font-weight: 600; font-size: clamp(11px,2cqw,16px); letter-spacing: .18em; line-height: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.gh-wm span { font-family: var(--gh-sans); font-size: clamp(4.5px,0.8cqw,6.5px); letter-spacing: .42em; opacity: .8; font-weight: 300; }
.gh-links { display: flex; align-items: center; gap: clamp(7px,1.4cqw,14px); font-size: clamp(6.5px,1.1cqw,9px); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.gh-pill { background: var(--gh-coral); color: #fff; padding: clamp(4px,0.8cqw,7px) clamp(7px,1.3cqw,12px); border-radius: 999px; font-weight: 500; }
.gh-back { cursor: pointer; color: #fff; border: 1px solid rgba(255,255,255,.5); padding: clamp(3px,0.7cqw,6px) clamp(6px,1.1cqw,10px); border-radius: 999px; transition: background .2s; }
.gh-back:hover { background: rgba(255,255,255,.16); }
.gh-hero { text-align: center; padding: clamp(8px,1.7cqw,17px) 0 clamp(2px,0.6cqw,6px); }
.gh-eyebrow { font-size: clamp(6px,1.05cqw,8.5px); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: clamp(3px,0.7cqw,6px) clamp(8px,1.5cqw,14px); display: inline-block; }
.gh-h { font-family: var(--gh-serif); font-weight: 500; font-size: clamp(18px,4cqw,40px); line-height: 1.04; letter-spacing: .01em; margin-top: clamp(8px,1.6cqw,16px); }
.gh-h i { font-style: italic; color: var(--gh-gold); }
.gh-sub { font-weight: 300; font-size: clamp(7px,1.2cqw,11px); color: rgba(255,255,255,.85); margin-top: clamp(7px,1.4cqw,13px); max-width: 70%; margin-inline: auto; line-height: 1.5; }

/* destinazioni (hub) */
.gh-dest { flex: 1; background: var(--gh-cream); padding: clamp(10px,2cqw,18px) clamp(11px,2.1cqw,20px) clamp(11px,2.1cqw,20px); display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 0; }
.gh-kick { font-size: clamp(6px,1.05cqw,8.5px); letter-spacing: .26em; text-transform: uppercase; color: var(--gh-coral); }
.gh-h2 { font-family: var(--gh-serif); font-weight: 500; font-size: clamp(15px,2.9cqw,28px); color: var(--gh-blue); margin-top: clamp(3px,0.7cqw,6px); }
.gh-h2 i { font-style: italic; color: var(--gh-coral); }
.gh-rule { width: 30px; height: 2px; background: var(--gh-coral); border-radius: 2px; margin-top: clamp(4px,0.9cqw,8px); opacity: .65; }
.gh-dcard { position: relative; width: 100%; max-width: clamp(150px,40cqw,300px); margin-top: clamp(8px,1.6cqw,15px); flex: 1; min-height: 0; border: none; padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(31,79,103,.2); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; background: linear-gradient(168deg, #2a6075 0%, #4d87a0 42%, #c98a6b 100%); }
.gh-dcard:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(31,79,103,.3); }
.gh-dcard .gh-badge { position: absolute; top: 11px; left: 11px; z-index: 2; background: var(--gh-coral); color: #fff; font-size: clamp(5.5px,0.95cqw,7.5px); letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.gh-dcard-ov { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(10px,2cqw,18px); text-align: left; color: #fff; background: linear-gradient(to top, rgba(18,42,56,.74), rgba(18,42,56,.18) 58%, transparent); }
.gh-dcard-t { font-family: var(--gh-serif); font-weight: 600; font-size: clamp(15px,3cqw,28px); line-height: .98; }
.gh-dcard-d { font-weight: 300; font-size: clamp(6px,1.1cqw,9.5px); color: rgba(255,255,255,.9); margin-top: clamp(4px,0.9cqw,8px); line-height: 1.45; max-width: 94%; }
.gh-dcard-link { font-size: clamp(6.5px,1.15cqw,10px); color: #fff; font-weight: 500; margin-top: clamp(6px,1.2cqw,11px); transition: transform .25s; }
.gh-dcard:hover .gh-dcard-link { transform: translateX(4px); }

/* booking bar (san vito) */
.gh-book { margin: clamp(-14px,-2.4cqw,-24px) clamp(14px,2.8cqw,28px) 0; position: relative; background: #fff; border-radius: 10px; box-shadow: 0 14px 34px rgba(31,79,103,.16); padding: clamp(8px,1.6cqw,15px); display: grid; grid-template-columns: 1fr 1fr 0.6fr 1.1fr; gap: clamp(6px,1.2cqw,11px); align-items: end; }
.gh-bk-f { display: flex; flex-direction: column; gap: 4px; }
.gh-bk-f label { font-size: clamp(6px,1.05cqw,8.5px); font-weight: 500; color: var(--gh-ink); }
.gh-bk-f span { font-size: clamp(7px,1.2cqw,10px); color: var(--gh-ink); background: #f8efe3; border: 1px solid #ecd9c4; border-radius: 6px; padding: clamp(5px,1cqw,8px) clamp(6px,1.1cqw,10px); }
.gh-bk-btn { background: var(--gh-coral); color: #fff; font-size: clamp(6.5px,1.15cqw,10px); font-weight: 500; text-align: center; padding: clamp(7px,1.3cqw,12px); border-radius: 7px; white-space: nowrap; }

/* strutture (san vito) */
.gh-strutture { flex: 1; padding: clamp(11px,2.2cqw,22px) clamp(11px,2.1cqw,20px); text-align: center; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.gh-props { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(7px,1.4cqw,13px); margin-top: clamp(9px,1.8cqw,17px); width: 100%; }
.gh-prop { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(31,79,103,.12); text-align: left; transition: transform .3s, box-shadow .3s; }
.gh-prop:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(31,79,103,.2); }
.gh-prop-img { height: clamp(40px,7.5cqw,76px); }
.gh-prop-img.a { background: linear-gradient(150deg,#3a6f86,#7fa6b6); }
.gh-prop-img.b { background: linear-gradient(150deg,#caa17f,#e6cdb0); }
.gh-prop-img.c { background: linear-gradient(150deg,#6f8f5e,#aac28a); }
.gh-prop-b { padding: clamp(7px,1.3cqw,12px); }
.gh-prop-t { font-family: var(--gh-serif); font-weight: 600; font-size: clamp(9px,1.7cqw,15px); color: var(--gh-blue); line-height: 1.05; }
.gh-prop-d { font-weight: 300; font-size: clamp(5.5px,1cqw,8.5px); color: var(--gh-mut); margin-top: clamp(3px,0.7cqw,6px); line-height: 1.45; }
.gh-prop-m { font-size: clamp(5.5px,0.95cqw,8px); color: var(--gh-ink); margin-top: clamp(5px,1cqw,9px); padding-top: clamp(5px,1cqw,9px); border-top: 1px solid #efe6da; }
.gh-prop-btn { display: inline-block; margin-top: clamp(5px,1cqw,9px); background: var(--gh-coral); color: #fff; font-size: clamp(5.5px,1cqw,8.5px); font-weight: 500; padding: clamp(4px,0.8cqw,7px) clamp(8px,1.5cqw,14px); border-radius: 999px; }
@container (max-width: 420px) { .gh-links span:not(.gh-pill):not(.gh-back) { display: none; } }

/* ============================================================
   PARKING BEACH — mockup interattivo (sito + admin)
   ============================================================ */
.pb {
  --pb-navy: #0f2547; --pb-blue: #2563eb; --pb-blue-d: #1d4ed8; --pb-red: #e0352a;
  --pb-bg: #eef2f8; --pb-ink: #1f2d3d; --pb-mut: #6b7a90; --pb-sans: 'Poppins', system-ui, sans-serif;
  width: 100%; aspect-ratio: 16/15; background: #fff; color: var(--pb-ink); font-family: var(--pb-sans);
  overflow: hidden; container-type: inline-size; display: flex; flex-direction: column;
}
.pb-top { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: #fff; border-bottom: 1px solid #e6ebf3; flex-shrink: 0; }
.pb-url { font-size: clamp(7px,1.25cqw,10px); color: #9aa6b6; }
.pb-tabs { margin-left: auto; display: flex; gap: 3px; }
.pb-tab { font-family: var(--pb-sans); font-size: clamp(6.5px,1.15cqw,9.5px); color: #6b7a90; background: transparent; border: none; border-radius: 5px; padding: clamp(2px,0.5cqw,4px) clamp(5px,1cqw,9px); cursor: pointer; }
.pb-tab.on { color: #fff; background: var(--pb-blue); font-weight: 500; }
.pb-stage { position: relative; flex: 1; min-height: 0; }
.pb-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; pointer-events: none; }
.pb-screen.on { opacity: 1; visibility: visible; pointer-events: auto; }

/* sito pubblico */
.pb-site { height: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--pb-bg); }
.pb-nav { display: flex; align-items: center; justify-content: space-between; padding: clamp(7px,1.4cqw,13px) clamp(11px,2.1cqw,20px); background: #fff; flex-shrink: 0; }
.pb-logo { font-weight: 800; font-style: italic; font-size: clamp(11px,2cqw,16px); color: var(--pb-navy); letter-spacing: -.01em; }
.pb-logo-p { color: var(--pb-blue); } .pb-logo-b { color: var(--pb-red); margin-left: 3px; }
.pb-nav-r { display: flex; align-items: center; gap: clamp(8px,1.6cqw,16px); font-size: clamp(7px,1.2cqw,10px); color: var(--pb-ink); }
.pb-prenota { border: 1px solid var(--pb-blue); color: var(--pb-blue); font-weight: 600; padding: clamp(4px,0.8cqw,7px) clamp(8px,1.5cqw,14px); border-radius: 999px; }
.pb-hero { background: linear-gradient(120deg,#0c1f3d 0%,#14346b 55%,#1f57c4 100%); color: #fff; text-align: center; padding: clamp(9px,1.8cqw,18px) clamp(11px,2.1cqw,20px) clamp(16px,3cqw,32px); flex-shrink: 0; }
.pb-eyebrow { display: inline-block; font-size: clamp(6px,1.05cqw,8.5px); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: clamp(3px,0.7cqw,6px) clamp(8px,1.5cqw,13px); }
.pb-h { font-weight: 800; font-size: clamp(16px,3.4cqw,33px); line-height: 1.02; margin-top: clamp(7px,1.4cqw,13px); letter-spacing: -.02em; }
.pb-h-sub { font-weight: 600; font-size: clamp(8px,1.5cqw,13px); margin-top: clamp(5px,1cqw,9px); color: rgba(255,255,255,.92); }
.pb-lead { font-size: clamp(7px,1.2cqw,10px); color: rgba(255,255,255,.82); margin-top: clamp(6px,1.2cqw,11px); font-weight: 300; }
.pb-form { background: #fff; border: 1.5px solid #aac3f2; border-radius: 12px; margin: clamp(-14px,-2.6cqw,-26px) clamp(12px,2.6cqw,28px) clamp(10px,1.9cqw,18px); padding: clamp(8px,1.5cqw,14px); position: relative; box-shadow: 0 14px 34px rgba(15,37,71,.12); display: flex; flex-direction: column; gap: clamp(5px,1cqw,9px); overflow: hidden; }
.pb-form-h { display: flex; align-items: center; gap: 9px; }
.pb-fp { width: clamp(20px,3.6cqw,30px); height: clamp(20px,3.6cqw,30px); border-radius: 6px; background: var(--pb-blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: clamp(10px,1.8cqw,15px); flex-shrink: 0; }
.pb-fp.sm { width: 22px; height: 22px; border-radius: 5px; font-size: 12px; }
.pb-form-t { font-weight: 700; font-size: clamp(9px,1.7cqw,14px); }
.pb-form-s { font-size: clamp(6px,1.1cqw,9px); color: var(--pb-mut); }
.pb-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(5px,1cqw,8px); }
.pb-fgrid.four { grid-template-columns: repeat(4,1fr); }
.pb-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb-f label { font-size: clamp(5.5px,1cqw,8px); font-weight: 600; color: var(--pb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-f span { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: clamp(6.5px,1.1cqw,9px); color: var(--pb-ink); background: #fff; border: 1px solid #d3ddec; border-radius: 6px; padding: clamp(4px,0.85cqw,6px) clamp(5px,1cqw,9px); white-space: nowrap; }
.pb-f span.cal::after { content: '📅'; font-size: .85em; opacity: .5; }
.pb-f span.sel::after { content: '▾'; color: #8a97a8; }
.gh-logo { height: clamp(16px,3.6cqw,34px); width: auto; filter: brightness(0) invert(1); }
.pb-logo-img { height: clamp(20px,4.4cqw,42px); width: auto; }
.pb-f span.ph { color: #aab4c2; }
.pb-save { background: #eafaf0; border: 1px solid #c7ebd5; border-radius: 7px; padding: clamp(6px,1.2cqw,10px); font-size: clamp(6px,1.1cqw,9px); color: #1f9d55; }
.pb-save b { color: #15803d; } .pb-save span { color: #3f9d6b; display: block; font-size: .92em; margin-top: 2px; }
.pb-quote { display: flex; justify-content: space-between; align-items: flex-end; background: #eef2fb; border-radius: 8px; padding: clamp(7px,1.4cqw,12px); }
.pb-q-l { font-size: clamp(7px,1.3cqw,11px); font-weight: 600; }
.pb-q-ok { font-size: clamp(6px,1.1cqw,9px); color: #1f9d55; margin-top: 3px; }
.pb-q-r { text-align: right; }
.pb-q-v { font-weight: 800; font-size: clamp(13px,2.5cqw,22px); color: var(--pb-blue-d); }
.pb-q-s { font-size: clamp(5.5px,1cqw,8px); color: var(--pb-mut); }
.pb-pay { background: var(--pb-blue); color: #fff; text-align: center; font-weight: 600; font-size: clamp(8px,1.5cqw,12px); padding: clamp(8px,1.5cqw,13px); border-radius: 8px; }
.pb-secure { text-align: center; font-size: clamp(5.5px,1cqw,8px); color: var(--pb-mut); }
.pb-secure b { color: var(--pb-ink); }

/* admin */
.pb-admin { display: flex; height: 100%; background: #eef2f7; }
.pb-side { width: clamp(96px,19cqw,160px); background: #0f2547; display: flex; flex-direction: column; gap: clamp(2px,0.5cqw,4px); padding: clamp(9px,1.7cqw,15px) clamp(7px,1.3cqw,11px); flex-shrink: 0; }
.pb-side-h { display: flex; align-items: center; gap: 7px; margin-bottom: clamp(6px,1.2cqw,11px); }
.pb-side-h div { line-height: 1.15; }
.pb-side-h b { font-size: clamp(8px,1.4cqw,11px); color: #fff; display: block; }
.pb-side-h span { font-size: clamp(5.5px,0.95cqw,7.5px); color: #8a99b3; }
.pb-nav-i { font-size: clamp(7px,1.25cqw,10px); color: #aeb9cc; padding: clamp(4px,0.8cqw,7px) clamp(5px,1cqw,8px); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-nav-i.on { background: var(--pb-blue); color: #fff; font-weight: 500; }
.pb-nav-i.sp { margin-top: auto; }
.pb-logout { font-size: clamp(6.5px,1.1cqw,9px); color: #f08a82; padding: clamp(3px,0.6cqw,5px) clamp(5px,1cqw,8px); }
.pb-main { flex: 1; padding: clamp(9px,1.8cqw,16px); display: flex; flex-direction: column; gap: clamp(7px,1.3cqw,12px); min-width: 0; }
.pb-main-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pb-main-t { font-weight: 700; font-size: clamp(12px,2.2cqw,19px); }
.pb-year { font-size: clamp(5.5px,1cqw,8.5px); color: var(--pb-mut); white-space: nowrap; }
.pb-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(7px,1.3cqw,12px); }
.pb-chart { background: #fff; border: 1px solid #e2e8f1; border-radius: 9px; padding: clamp(7px,1.3cqw,12px); }
.pb-chart-t { font-size: clamp(6px,1.05cqw,8.5px); font-weight: 600; color: var(--pb-mut); text-transform: uppercase; letter-spacing: .04em; }
.pb-bars { display: flex; align-items: flex-end; gap: clamp(2px,0.6cqw,5px); height: clamp(40px,7cqw,72px); margin-top: 9px; }
.pb-bars i { flex: 1; height: var(--h); background: #dbe3f0; border-radius: 2px 2px 0 0; }
.pb-bars i.blu { background: var(--pb-blue); } .pb-bars i.grn { background: #16a34a; }
.pb-cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(7px,1.3cqw,12px); }
.pb-stat { background: #fff; border: 1px solid #e2e8f1; border-radius: 9px; padding: clamp(7px,1.3cqw,12px); }
.pb-stat-l { font-size: clamp(5.5px,1cqw,8px); font-weight: 600; color: var(--pb-mut); text-transform: uppercase; letter-spacing: .03em; }
.pb-stat-v { font-weight: 800; font-size: clamp(15px,2.8cqw,24px); color: var(--pb-blue-d); margin-top: 5px; }
.pb-stat-v small { font-size: .45em; font-weight: 500; color: var(--pb-mut); }
.pb-stat-s { font-size: clamp(5px,0.95cqw,7.5px); color: var(--pb-mut); margin-top: 5px; }
.pb-prov { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.pb-prov-r { display: flex; justify-content: space-between; font-size: clamp(5.5px,1cqw,8px); }
.pb-prov-r b { color: var(--pb-ink); }
.pb-prov-bar { height: 4px; background: #e8edf5; border-radius: 999px; overflow: hidden; }
.pb-prov-bar i { display: block; height: 100%; background: var(--pb-blue); }
.pb-prov-bar.gold i { background: #eab308; }
@container (max-width: 520px) { .pb-fgrid.four { grid-template-columns: 1fr 1fr; } .pb-cards3 { grid-template-columns: 1fr; } }
@container (max-width: 380px) { .pb-side { display: none; } }

/* ============================================================
   GALLERIA ORIZZONTALE — Su commissione
   ============================================================ */
#commissioni { padding-top: clamp(40px,5vw,72px); }
#commissioni .hscroll {
  display: flex; gap: clamp(28px,5vw,72px);
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x proximity; scroll-padding-left: var(--gut);
  margin-inline: calc(-1 * var(--gut));
  padding: 10px var(--gut) 30px;
  scrollbar-width: thin; scrollbar-color: var(--em) var(--line-2);
  overscroll-behavior-x: contain;
}
#commissioni .hscroll > .project {
  flex: 0 0 min(92%, 1180px);
  scroll-snap-align: start;
  padding-block: 0; border-top: none;
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px,3.5vw,64px); align-items: center;
}
#commissioni .hscroll > .project > .pj-body { order: 1; }
#commissioni .hscroll > .project > .pj-visual { order: 2; min-width: 0; }
#commissioni .hscroll > .project .pj-body { order: 1; }
#commissioni .hscroll > .project .pj-visual { order: 2; }
#commissioni .hscroll::-webkit-scrollbar { height: 6px; }
#commissioni .hscroll::-webkit-scrollbar-track { background: var(--line-2); border-radius: 999px; }
#commissioni .hscroll::-webkit-scrollbar-thumb { background: var(--em); border-radius: 999px; }
#commissioni .hscroll::-webkit-scrollbar-thumb:hover { background: var(--em-bright); }
#commissioni .sec-head { margin-bottom: clamp(34px,4vw,56px); }
#commissioni .sec-head::after {
  content: 'Scorri →'; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--em-bright); white-space: nowrap; align-self: flex-end;
  display: inline-flex; align-items: center; border: 1px solid rgba(52,211,153,.34);
  border-radius: 999px; padding: 7px 14px; background: rgba(16,185,129,.08);
  box-shadow: 0 0 0 0 var(--em-glow); animation: scrollHint 1.7s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(52,211,153,0); }
  50% { transform: translateX(7px); box-shadow: 0 0 16px 0 rgba(52,211,153,.25); }
}

/* indicatore a pallini per lo scroll orizzontale */
.hscroll-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 4px; }
.hscroll-dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 1px solid var(--em); background: transparent; cursor: pointer; transition: width .3s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s; }
.hscroll-dot:hover { border-color: var(--em-bright); background: rgba(52,211,153,.25); }
.hscroll-dot.on { width: 24px; background: var(--em-bright); border-color: var(--em-bright); }

@media (prefers-reduced-motion: reduce) { #commissioni .sec-head::after { animation: none; } }

@media (max-width: 820px) { #commissioni .hscroll > .project { grid-template-columns: 1fr; flex: 0 0 80%; } }
/* su telefono: niente tag nei prodotti (ContaGest + su commissione) */
@media (max-width: 640px) { .pj-tags { display: none; } }