/* shell.css — nav + footer di sitoprime.it. UNICA fonte per TUTTE le pagine,
   home compresa. I valori sono quelli della home, che è il riferimento.
   Non duplicare queste regole altrove: se divergono, il sito torna ad avere due design. */
:root { --sp-accent: #3B5BDB; }
/* baseline di rendering testo, uguale su TUTTE le pagine (la home non carica pages.css):
   antialiased = tratti piu' sottili e netti, il look scelto da Riccardo. Solo macOS/Safari/Blink. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.sp-ast { display: inline-block; width: .92em; height: .92em; vertical-align: -.12em; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='white' stroke-width='13' stroke-linecap='round'%3E%3Cline x1='50' y1='12' x2='50' y2='88'/%3E%3Cline x1='12' y1='50' x2='88' y2='50'/%3E%3Cline x1='23.1' y1='23.1' x2='76.9' y2='76.9'/%3E%3Cline x1='76.9' y1='23.1' x2='23.1' y2='76.9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='white' stroke-width='13' stroke-linecap='round'%3E%3Cline x1='50' y1='12' x2='50' y2='88'/%3E%3Cline x1='12' y1='50' x2='88' y2='50'/%3E%3Cline x1='23.1' y1='23.1' x2='76.9' y2='76.9'/%3E%3Cline x1='76.9' y1='23.1' x2='23.1' y2='76.9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }

/* ── NAV ─────────────────────────────────────────────────────────── */
.pg-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, #0C0C0E 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid #1c1c20;
  transition: transform 220ms cubic-bezier(.2,.6,.2,1); will-change: transform; }
.pg-nav.nav-hidden { transform: translateY(calc(-1 * var(--nav-h, 96px) - 2px)); transition-duration: 160ms; }
@media (prefers-reduced-motion: reduce) { .pg-nav { transition: none; } .pg-nav.nav-hidden { transform: none; } }
.pg-nav-in { max-width: 1320px; margin: 0 auto; padding: 24px clamp(20px,4vw,56px); display: flex; align-items: center; justify-content: space-between; gap: 18px; line-height: 1.5; }
/* line-height esplicita: senza, la nav è alta 2px in più dove il body eredita 1.6 */

/* IL LOGO — unico per tutto il sito. Non crearne varianti. */
.pg-wm { font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: 25px; letter-spacing: -.02em; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.pg-wm .sp-ast { color: var(--sp-accent); font-weight: 600; margin: 0 1px; }

.pg-nav-links { display: flex; align-items: center; gap: clamp(18px,2.5vw,40px); font-size: 16px; }
.pg-nav-links a { color: #fff; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; transition: opacity .15s ease; }
.pg-nav-links a:not(.pg-cta):hover { opacity: .55; }
.pg-cta { background: #fff; color: #0C0C0E !important; padding: 11px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .15s ease; }
.pg-cta:hover { transform: translateY(-2px); }

/* menu mobile: <details> nativo, zero JS */
.cta-short { display: none; }
.pg-menu { display: none; position: relative; }
.pg-menu > summary { list-style: none; display: flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #2c2c32; border-radius: 12px; cursor: pointer; flex: none; }
.pg-menu > summary::-webkit-details-marker { display: none; }
.pg-menu > summary span { width: 20px; height: 2px; background: #fff; display: block; }
.pg-menu[open] > summary { border-color: #45454d; }
.pg-menu-panel { position: absolute; right: 0; top: calc(100% + 14px); min-width: 232px; background: #0C0C0E; border: 1px solid #1c1c20; border-radius: 14px; padding: 4px 18px 16px; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.pg-menu-panel a { color: #fff; text-decoration: none; padding: 14px 0; font-size: 17px; border-bottom: 1px solid #1c1c20; }
.pg-menu-panel a:last-child { border-bottom: 0; }
@media (max-width: 640px) {
  .pg-menu { display: block; }
  .pg-nav { backdrop-filter: none; background: #0C0C0E; }
  .pg-nav-in { padding: 12px 16px; gap: 10px; }
  .pg-nav-links { gap: 10px; }
  .pg-nav-links .hide-sm { display: none; }
  .pg-menu-panel a.pg-cta { display: none; }
  .pg-wm { font-size: 21px; }
  .pg-cta { padding: 12px 16px; font-size: 15px; }
  .cta-long { display: none; } .cta-short { display: inline; }
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.pg-foot { background: #08080A; color: #fff; }
.pg-foot-in { max-width: 1320px; margin: 0 auto; padding: clamp(40px,5vw,72px) clamp(20px,4vw,56px) 36px; container-type: inline-size; }
.pg-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 32px; padding-bottom: clamp(40px,5vw,72px); }
.pg-foot h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #5a5a60; margin: 0 0 18px; font-weight: 400; }
.pg-foot-cols > div { display: flex; flex-direction: column; gap: 11px; font-size: 16px; align-items: flex-start; }
.pg-foot a, .pg-foot button { color: #e6e6e9; text-decoration: none; font-size: 16px; transition: opacity .15s ease; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left; }
.pg-foot a:hover, .pg-foot button:hover { opacity: .55; }
/* wordmark gigante: cqi = larghezza della banda, non del viewport */
.pg-wm-big { font-family: 'Clash Display', sans-serif; font-weight: 700; font-size: clamp(40px, 15.5cqi, 200px); letter-spacing: -.03em; line-height: .86; border-top: 1px solid #1c1c20; padding-top: clamp(24px,3vw,44px); white-space: nowrap; overflow: hidden; }
.pg-wm-big .sp-ast { color: var(--sp-accent); }
.pg-foot-bar { margin-top: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #6a6a70; }