/* ==========================================================================
   Blueware — OpusDesign skin
   Solo stile: nessun elemento, testo, link o comportamento cambia.
   Si carica per ULTIMO (dopo style.css, gli <style> di pagina e site.css):
     <link rel="stylesheet" href="assets/opus-skin.css?v=17">
   Linguaggio: blu notte da sala di controllo, titoli che sfumano nel caldo,
   etichette maiuscole spaziate, angoli HUD, vetro sul menu.
   ========================================================================== */

/* Syne, Manrope e Nunito sono dichiarati in assets/style.css (font locali) */

:root, :root[data-theme="dark"] {
  /* tipografia: Syne resta il marchio sui titoli, Manrope per leggere e per le etichette;
     --font-mono resta quello del sito (solo per il codice negli articoli) */
  --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Syne', 'Segoe UI', system-ui, sans-serif;

  --bg: #030829;
  --text: #BCC0EA;
  --subtle: #BCC0EA;
  --muted: #8A8EC6;
  --heading: #F1F2FF;

  --warm-grad: linear-gradient(100deg, #FFFFFF 0%, #F4F1FF 38%, #FFD6A5 62%, #F5841A 82%, #E83B5C 100%);
  --warm-line: linear-gradient(90deg, #FFD6A5, #F5841A 55%, #E83B5C);
  /* verticale: sui titoli che vanno a capo il caldo prende righe intere, mai pezzi di parola */
  --warm-grad-v: linear-gradient(180deg, #FFFFFF 0%, #F1F2FF 44%, #FFD6A5 62%, #F5841A 84%, #E83B5C 110%);
  --hud: rgba(255, 214, 165, 0.55);
  --panel: linear-gradient(165deg, rgba(26, 36, 118, 0.5), rgba(6, 10, 46, 0.78));
  --panel-border: rgba(140, 150, 255, 0.18);

  /* angoli HUD riutilizzabili come livelli di sfondo (nessun elemento in più) */
  --hud-corners:
    linear-gradient(var(--hud), var(--hud)) left 14px top 14px / 18px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left 14px top 14px / 1px 18px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right 14px top 14px / 18px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right 14px top 14px / 1px 18px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left 14px bottom 14px / 18px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left 14px bottom 14px / 1px 18px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right 14px bottom 14px / 18px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right 14px bottom 14px / 1px 18px no-repeat;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: 1.02rem;
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(30, 50, 170, 0.35), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-attachment: fixed;
}
h1, h2, h3, h4,
.sv-title, .blue-card-name, .lab-card h2, .lab-card h3, .ep-door-name, .ep-door-question,
.article-title-link, .bp-card h3, .bp-featured h2, .bp-featured h3, .post-h1,
.agri-stat-value, .sv-sum-t, .bp-orient-tile-title {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
p, li { text-wrap: pretty; }

html { scrollbar-color: rgba(245, 132, 26, 0.55) #020520; scrollbar-width: thin; }
::selection { background: rgba(245, 132, 26, 0.38); color: #fff; }

/* ── Etichette, date, numeri: Manrope maiuscolo spaziato ───────────────── */
.section-label, .sv-eyebrow, .sm-eyebrow, .post-tag, .landing-eyebrow,
.sv-num, .sv-sum-n, .post-meta, .post-breadcrumb, .article-meta, .article-date,
.bp-card-meta, .bp-meta, .bp-date, .lab-tag, .sm-tag, .agri-label, .agri-stat-label,
.agri-feature-num, .ep-door-label, .ep-tab, .article-section-chip, .expertise-chip,
.quick-box-label, .cliff-box-label, .post-callout-label, .reframe-level-tag, .reframe-rule-label,
.bp-filter-btn, .lang-btn, .footer-copy, .stats-bar, .bottom-tag, .photo-label, .sm-preview-label {
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.section-label, .sv-eyebrow, .sm-eyebrow, .post-tag {
  font-size: 0.7rem !important;
  color: var(--warm-peach);
  text-transform: uppercase;
}
/* pallino acceso al posto della lineetta */
.section-label::before, .sv-eyebrow::before, .sm-eyebrow::before, .post-tag::before {
  width: 6px !important; height: 6px !important;
  border-radius: 50%;
  background: #F5841A !important;
  box-shadow: 0 0 10px #F5841A;
}

/* ── Titoli che sfumano nel caldo ──────────────────────────────────────── */
/* fit-content: la sfumatura segue il testo, non la larghezza della colonna */
.explore-hero h1, .bp-hero h1, .lab-hero h1, .sm-hero h1, .sv-intro h1, .post-h1,
.agri-hero h1, .agri-hero-text h1, .ep-hero h1, .author-hero h1, .ct-hero h1, main > h1 {
  width: fit-content;
  max-width: 100%;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: var(--warm-grad-v);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #F1F2FF;
}
.explore-hero h1, .bp-hero h1, .lab-hero h1, .sm-hero h1, .sv-intro h1 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); }
.post-h1 { line-height: 1.08; }

/* titoli di sezione degli articoli: bianchi, con indice caldo prima */
.post-body h2 { color: var(--heading); font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.post-body h2::after { width: 48px; height: 2px; }
.post-body { font-size: 1.08rem; line-height: 1.82; color: #C6C9EE; }
.post-body strong { color: #fff; }
.post-intro { font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--text); }

/* numerazione delle sezioni servizi: grande, a contorno caldo */
.sv-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 1;
  background: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(255, 214, 165, 0.6);
}
.sv-title { letter-spacing: -0.03em; }

/* ── Menu: vetro ───────────────────────────────────────────────────────── */
.nav {
  background: rgba(3, 6, 30, 0.62) !important;
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border-bottom: 1px solid rgba(140, 150, 255, 0.16);
  box-shadow: 0 1px 0 rgba(245, 132, 26, 0.12), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}
.nav-links a { font-family: var(--font); font-weight: 500; letter-spacing: 0.04em; }

/* ── Intestazioni di pagina: angoli HUD + vetro più profondo ───────────── */
.explore-hero, .bp-hero, .lab-hero, .sm-hero, .sv-intro {
  background:
    var(--hud-corners),
    radial-gradient(34rem 18rem at 92% 0%, rgba(232, 59, 92, 0.18), transparent 70%),
    radial-gradient(30rem 18rem at 88% 10%, rgba(245, 132, 26, 0.14), transparent 70%),
    radial-gradient(32rem 20rem at 0% 100%, rgba(61, 107, 255, 0.28), transparent 70%),
    rgba(8, 14, 56, 0.62);
  border-color: rgba(140, 150, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Pannelli: vetro con filo di luce in alto ──────────────────────────── */
.sv-section, .bp-card, .bp-featured, .lab-card, .blue-card, .ep-door, .bp-orient-tile,
.sv-sum-list a:not(.sv-sum-cta), .post-cluster li, .quick-box, .cliff-box, .post-callout,
.info-box, .reframe-rule, .vc-box, .agri-feature, .agri-req-item, .agri-stat, .sm-preview, .sm-cta-block, .sm-coming {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sv-sum-list a:hover .sv-sum-t,
.bp-card:hover h3, .blue-card:hover .blue-card-name, .lab-card:hover h2, .lab-card:hover h3, .ep-door:hover .ep-door-name {
  background: var(--warm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* riquadro finale dei servizi e simili: angoli HUD */
.sv-footer, .sm-cta-block, .agri-cta {
  background:
    var(--hud-corners),
    radial-gradient(30rem 14rem at 100% 0%, rgba(245, 132, 26, 0.2), transparent 70%),
    radial-gradient(26rem 14rem at 0% 100%, rgba(232, 59, 92, 0.14), transparent 70%),
    var(--panel);
}

/* ── Pulsanti e inviti ─────────────────────────────────────────────────── */
.btn { border-radius: 999px; font-family: var(--font); font-weight: 600; letter-spacing: 0.01em; }
.btn-primary { background: linear-gradient(135deg, #4F7BFF 0%, #2E55F0 55%, #1F3FD0 100%); box-shadow: 0 10px 36px -10px rgba(61, 107, 255, 0.75); }
.sv-cta, .sv-sum-list a.sv-sum-cta, .sv-sum-cta {
  background: linear-gradient(100deg, #FFD6A5 0%, #F5841A 55%, #E83B5C 120%);
  font-family: var(--font);
}

/* chip e categorie: pillole */
.article-section-chip, .lab-tag, .sm-tag, .expertise-chip, .agri-badge {
  border-radius: 999px;
  font-size: 0.66rem;
  text-transform: uppercase;
}

/* ── Articoli: colonna di lettura più ariosa ───────────────────────────── */
.post-pullquote p { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.post-body a:not([class]) { color: var(--warm-peach); text-decoration: none; border-bottom: 1px solid rgba(245, 132, 26, 0.55); }
.post-body a:not([class]):hover { border-bottom-color: #FFD6A5; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { background: linear-gradient(180deg, rgba(2, 4, 26, 0.85), #010319); }
.footer-copy { font-size: 0.68rem; text-transform: uppercase; }
.footer-links a { font-family: var(--font); }

/* ==========================================================================
   HOME (landing a schermo intero): stessa struttura, nuova finitura
   ========================================================================== */
/* angoli HUD in una cornice che lascia spazio al menu (sopra) e alla barra dati (sotto) */
.landing {
  --hx: max(1rem, 3vw);
  background:
    linear-gradient(var(--hud), var(--hud)) left var(--hx) top 84px / 26px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left var(--hx) top 84px / 1px 26px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right var(--hx) top 84px / 26px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right var(--hx) top 84px / 1px 26px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left var(--hx) bottom 92px / 26px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left var(--hx) bottom 92px / 1px 26px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right var(--hx) bottom 92px / 26px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right var(--hx) bottom 92px / 1px 26px no-repeat,
    linear-gradient(to bottom, #04061c 0%, #060a2a 40%, #0b1446 75%, #070c2c 100%);
}
@media (max-width: 700px) { .landing { background: linear-gradient(to bottom, #04061c 0%, #060a2a 40%, #0b1446 75%, #070c2c 100%); } }

.landing-headline { font-family: var(--font-display); font-weight: 700; }
.landing-headline em {
  background: linear-gradient(115deg, #93b4ff 0%, #ffffff 25%, #FFD6A5 50%, #F5841A 68%, #E83B5C 82%, #ffffff 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-eyebrow { font-size: 0.66rem; color: rgba(255, 214, 165, 0.75); }
.landing-tagline { font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 214, 165, 0.8); font-weight: 400; }
.landing-about { font-size: clamp(0.9rem, 1.2vw, 1rem); color: rgba(220, 224, 255, 0.62); }
.landing-links a { font-family: var(--font); letter-spacing: 0.12em; }
.corner-nav a:not(.btn):not(.corner-nav-logo) { font-family: var(--font); letter-spacing: 0.06em; }
.stats-bar { color: rgba(255, 255, 255, 0.32); }
.stats-live-dot { box-shadow: 0 0 8px #4ade80; animation: opus-blink 2.4s ease-in-out infinite; }
@keyframes opus-blink { 50% { opacity: 0.35; } }
/* ── Logo B dentro due orbite che girano in senso opposto (pseudo-elementi, nessun markup in più) ── */
.bw-logo-mark {
  --logo-h: clamp(64px, 17svh, 180px);
  position: relative;
  height: var(--logo-h);
  /* le orbite sporgono dal logo: spazio sopra e sotto perché non tocchino il testo */
  margin-block: calc(var(--logo-h) * 0.17);
  filter: none;
}
.bw-logo-mark svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 30px rgba(245, 132, 26, 0.3)) drop-shadow(0 0 40px rgba(61, 107, 255, 0.4));
}
.bw-logo-mark::before, .bw-logo-mark::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  aspect-ratio: 1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* esterna: puntinata, con un satellite pesca */
.bw-logo-mark::before {
  height: 150%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 230'><circle cx='115' cy='115' r='112' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1' stroke-dasharray='1 7'/><circle cx='115' cy='115' r='104' fill='none' stroke='rgba(124,147,255,0.25)' stroke-width='1'/><circle cx='115' cy='4' r='3' fill='%23FFD6A5'/></svg>");
  animation: opus-orbit 60s linear infinite;
}
/* interna: arco ambra + trattini blu, gira al contrario */
.bw-logo-mark::after {
  height: 124%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 230'><circle cx='115' cy='115' r='110' fill='none' stroke='rgba(245,132,26,0.75)' stroke-width='1.6' stroke-dasharray='86 605' stroke-linecap='round'/><circle cx='115' cy='115' r='110' fill='none' stroke='rgba(124,147,255,0.5)' stroke-width='1' stroke-dasharray='28 150 9 170'/></svg>");
  animation: opus-orbit 38s linear infinite reverse;
}
@keyframes opus-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Sfondo più ordinato: griglia che svanisce ai bordi, luci calde più contenute, base che sfuma ── */
.landing::before {
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 100%);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}
.landing::after {
  top: 50%;
  width: min(760px, 90vw);
  height: min(760px, 90vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(61, 107, 255, 0.16), transparent 100%);
}
.landing-warm { opacity: 0.6; }
#em-canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

/* ── Tutto in una schermata: misure legate all'altezza visibile ── */
.landing-content { gap: clamp(0.5rem, 2.1svh, 1.6rem); padding-block: 0; }
.landing-eyebrow { margin-bottom: 0; }
.landing-headline { font-size: min(clamp(2.2rem, 6vw, 5.2rem), 9svh); margin-bottom: 0; }
.landing-about { margin-top: 0; }
.landing-cta, .landing-links { margin-top: 0; }

@media (max-width: 700px) {
  body:has(.landing) { height: 100svh; overflow: hidden; }   /* solo la home: le altre pagine scorrono */
  .landing { height: 100svh; min-height: 0; padding: 4.25rem 0 2.6rem; }
  .landing-content { padding-inline: 1.25rem; }
  .bw-logo-mark { --logo-h: clamp(70px, 15svh, 130px); }
  .landing-headline { font-size: min(11vw, 7svh); }
  .landing-cta { flex-direction: row; }
  .landing-links { gap: 1.25rem; }
}
/* finestre desktop molto basse (es. portatile con barre del browser) */
@media (min-width: 701px) and (max-height: 640px) {
  .bw-logo-mark { --logo-h: 14svh; }
  .landing-content { gap: 0.45rem; }
}
/* telefoni bassi (es. 360×640): testo descrittivo più compatto */
@media (max-width: 700px) and (max-height: 700px) {
  .landing-about { font-size: 0.78rem; line-height: 1.5; }
}

/* ==========================================================================
   EXPLOREPATH: al posto dei raggi animati (canvas) le orbite della home,
   centrate sul titolo, con alone blu e angoli HUD
   ========================================================================== */
#ep-canvas { display: none; }
.ep-hero {
  --ep-top: 9rem;          /* padding-top della testata (dal CSS della pagina) */
  --ep-bottom: 0rem;
  isolation: isolate;
  background:
    linear-gradient(var(--hud), var(--hud)) left max(1rem, 3vw) top 92px / 22px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left max(1rem, 3vw) top 92px / 1px 22px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right max(1rem, 3vw) top 92px / 22px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right max(1rem, 3vw) top 92px / 1px 22px no-repeat,
    radial-gradient(closest-side, rgba(61, 107, 255, 0.2), transparent) center calc(50% + 4.5rem) / min(720px, 100vw) min(520px, 80vw) no-repeat,
    radial-gradient(closest-side, rgba(245, 132, 26, 0.08), transparent) 70% 30% / 520px 360px no-repeat;
}
.ep-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  width: min(860px, calc(100vw - 2rem));
  top: calc(var(--ep-top) - 2.25rem);
  bottom: calc(var(--ep-bottom) + 0.5rem);
  transform: translateX(-50%);
  /* orbite ellittiche: gli archi scorrono lungo il percorso (animazione interna all'SVG) */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'><ellipse cx='500' cy='200' rx='494' ry='194' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1' stroke-dasharray='1 7' vector-effect='non-scaling-stroke'/><ellipse cx='500' cy='200' rx='430' ry='158' fill='none' stroke='rgba(124,147,255,0.2)' stroke-width='1' vector-effect='non-scaling-stroke'/><ellipse cx='500' cy='200' rx='494' ry='194' fill='none' stroke='%23F5841A' stroke-opacity='0.75' stroke-width='1.6' stroke-linecap='round' pathLength='1000' stroke-dasharray='70 930' vector-effect='non-scaling-stroke'><animate attributeName='stroke-dashoffset' from='1000' to='0' dur='28s' repeatCount='indefinite'/></ellipse><ellipse cx='500' cy='200' rx='430' ry='158' fill='none' stroke='%237C93FF' stroke-opacity='0.6' stroke-width='1.2' stroke-linecap='round' pathLength='1000' stroke-dasharray='35 965' stroke-dashoffset='500' vector-effect='non-scaling-stroke'><animate attributeName='stroke-dashoffset' from='500' to='1500' dur='40s' repeatCount='indefinite'/></ellipse></svg>") center / 100% 100% no-repeat;
}
@media (max-width: 860px) {
  .ep-hero {
    --ep-top: 7rem; --ep-bottom: 2.5rem;
    background: radial-gradient(closest-side, rgba(61, 107, 255, 0.2), transparent) center calc(50% + 2.25rem) / 110vw 90vw no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-hero::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'><ellipse cx='500' cy='200' rx='494' ry='194' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1' stroke-dasharray='1 7' vector-effect='non-scaling-stroke'/><ellipse cx='500' cy='200' rx='430' ry='158' fill='none' stroke='rgba(124,147,255,0.2)' stroke-width='1' vector-effect='non-scaling-stroke'/><ellipse cx='500' cy='200' rx='494' ry='194' fill='none' stroke='%23F5841A' stroke-opacity='0.75' stroke-width='1.6' stroke-linecap='round' pathLength='1000' stroke-dasharray='70 930' vector-effect='non-scaling-stroke'></ellipse><ellipse cx='500' cy='200' rx='430' ry='158' fill='none' stroke='%237C93FF' stroke-opacity='0.6' stroke-width='1.2' stroke-linecap='round' pathLength='1000' stroke-dasharray='35 965' stroke-dashoffset='500' vector-effect='non-scaling-stroke'></ellipse></svg>"); }
  .stats-live-dot, .bw-logo-mark::before, .bw-logo-mark::after { animation: none; }
  .bw-logo-mark::before, .bw-logo-mark::after { transform: translate(-50%, -50%); }
}

/* pulsante principale della home: rettangolare, angoli 6px (anche l'anello caldo che gira lo segue) */
.landing-cta .btn-primary { border-radius: 6px; }

/* ── Home: pulsante in metallo blu spazzolato ─────────────────────────────
   livelli: riflesso orizzontale (luce dall'alto, linea di piega a metà),
   bande di riflesso verticali che scorrono al passaggio, spazzolatura fine */
.landing-cta .btn-primary {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 10, 60, 0.55), 0 1px 0 rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.07) 47%, rgba(0, 8, 50, 0.24) 50%, rgba(0, 8, 50, 0.08) 70%, rgba(255, 255, 255, 0.1) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px),
    linear-gradient(100deg, #132a8c 0%, #2c57ea 14%, #7d9bff 25%, #3866ff 33%, #142d96 48%, #2a55e6 63%, #84a1ff 75%, #3a68ff 85%, #132a8c 100%) 0 0 / 220% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 8, 50, 0.45),
    0 0 0 1px rgba(8, 18, 80, 0.7),
    0 0 26px rgba(37, 99, 235, 0.45),
    0 8px 22px -8px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-position 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-cta .btn-primary:hover {
  background-position: 0 0, 0 0, 100% 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 8, 50, 0.45),
    0 0 0 1px rgba(8, 18, 80, 0.7),
    0 0 36px rgba(37, 99, 235, 0.65),
    0 10px 26px -8px rgba(0, 0, 0, 0.7);
}
.landing-cta .btn-primary svg { filter: drop-shadow(0 -1px 0 rgba(0, 10, 60, 0.55)); }

/* link sotto il pulsante: acciaio satinato con la STESSA luce del pulsante
   (luce dall'alto, piega a metà, bande di riflesso a 100° che scorrono quando il pulsante è sotto il mouse).
   Il gradiente sta sul contenitore e si ritaglia sul testo di tutti e tre i link: una sola fonte di luce. */
.landing-links {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 47%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.08) 70%, rgba(255, 255, 255, 0.12) 100%),
    linear-gradient(100deg, #6f7388 0%, #a4a8ba 14%, #dfe1ea 25%, #b0b3c4 33%, #6c7086 48%, #a1a5b8 63%, #e2e4ec 75%, #b3b6c6 85%, #6f7388 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
  transition: background-position 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-content:has(.landing-cta .btn-primary:hover) .landing-links { background-position: 0 0, 100% 0; }
.landing-links a {
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.landing-links a:hover {
  /* al passaggio: stessa luce, metallo oro */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 47%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.08) 70%, rgba(255, 255, 255, 0.12) 100%),
    linear-gradient(100deg, #b8732e, #FFD6A5 40%, #e39a52 70%, #ffe2bd);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 1;
}

/* ==========================================================================
   MENU SU TELEFONO (pagine interne): stesso markup e stesso script (nav.js),
   ma il pannello scende, le voci entrano una dopo l'altra e sono righe da toccare
   ========================================================================== */
@media (max-width: 768px) {
  /* il pulsante: area di tocco 44px, si accende quando il menu è aperto */
  .nav-burger {
    width: 44px; height: 44px;
    padding: 12px 11px;
    border-radius: 10px;
    border-color: rgba(140, 150, 255, 0.35);
    transition: border-color 0.25s, background 0.25s;
  }
  .nav-burger.open { border-color: rgba(255, 214, 165, 0.7); background: rgba(245, 132, 26, 0.12); }
  .nav-burger.open span { background: #FFD6A5; }

  /* il pannello resta nel layout (display flex) per poter animare apertura e chiusura */
  .nav .nav-links {
    display: flex;
    counter-reset: navi;
    height: calc(100svh - 68px);
    overflow-y: auto;
    padding: 1.25rem max(1.25rem, 5vw) 2rem;
    gap: 0.6rem;
    background:
      radial-gradient(60% 40% at 100% 0%, rgba(232, 59, 92, 0.16), transparent 70%),
      radial-gradient(70% 45% at 0% 100%, rgba(61, 107, 255, 0.22), transparent 70%),
      #03061e;
    border-bottom: 0;
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, visibility 0s linear 0.45s;
  }
  .nav .nav-links.open {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s, visibility 0s;
  }
  /* la pagina sotto non scorre mentre il menu è aperto */
  html:has(.nav-links.open) { overflow: hidden; }
  .nav:has(.nav-links.open) { background: #03061e !important; }

  /* voci: entrano scorrendo, una dopo l'altra */
  .nav .nav-links li {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.25s, transform 0.25s;
  }
  .nav .nav-links.open li {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav .nav-links.open li:nth-child(1) { transition-delay: 0.08s; }
  .nav .nav-links.open li:nth-child(2) { transition-delay: 0.13s; }
  .nav .nav-links.open li:nth-child(3) { transition-delay: 0.18s; }
  .nav .nav-links.open li:nth-child(4) { transition-delay: 0.23s; }
  .nav .nav-links.open li:nth-child(5) { transition-delay: 0.28s; }

  /* ogni voce è una riga-pulsante: numero, nome grande, freccia */
  .nav .nav-links li a {
    counter-increment: navi;
    display: grid;
    grid-template-columns: 2.2rem 1fr auto;
    align-items: center;
    min-height: 58px;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(140, 150, 255, 0.2);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(26, 36, 118, 0.55), rgba(6, 10, 46, 0.7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--heading);
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
  }
  .nav .nav-links li:last-child a { border-bottom: 1px solid rgba(140, 150, 255, 0.2); }
  .nav .nav-links li a::before {
    content: counter(navi, decimal-leading-zero);
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #F5841A;
  }
  .nav .nav-links li a::after {
    content: '→';
    position: static;
    width: auto; height: auto;
    background: none;
    font-family: var(--font);
    font-size: 1.1rem;
    color: #FFD6A5;
    transition: transform 0.2s;
  }
  .nav .nav-links li a[href^="mailto:"]::after { content: '↗'; }
  /* tocco: la riga si accende e si abbassa appena */
  .nav .nav-links li a:active { transform: scale(0.98); }
  .nav .nav-links li a:active, .nav .nav-links li a:hover {
    border-color: rgba(255, 214, 165, 0.55);
    background: linear-gradient(165deg, rgba(245, 132, 26, 0.16), rgba(6, 10, 46, 0.7));
  }
  .nav .nav-links li a:hover::after { transform: translateX(4px); }
  /* pagina corrente */
  .nav .nav-links li a[aria-current="page"] {
    border-color: rgba(245, 132, 26, 0.6);
    background: linear-gradient(100deg, rgba(245, 132, 26, 0.2), rgba(232, 59, 92, 0.08) 60%, rgba(6, 10, 46, 0.7));
    color: #fff;
  }
  .nav .nav-links li a[aria-current="page"]::after { content: '●'; font-size: 0.6rem; color: #F5841A; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav .nav-links, .nav .nav-links li { transition: none !important; }
}