/* ===============================================================================================================
       Design tokens
       =============================================================================================================== */
    /* Structural tokens (theme-independent) */
    :root {
      --radius: 16px;
      --radius-lg: 24px;
      --maxw: 1120px;
      --nav-h: 68px;
      /* System font stacks: no external font requests (privacy-coherent with the no-tracker claim) */
      --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      --font-display: ui-serif, Georgia, 'Times New Roman', Times, serif;
    }

    /* Dark theme (default) — cool slate, G&G signature emerald */
    :root {
      color-scheme: dark;
      --bg: #0d1220;
      --bg-soft: #121a2b;
      --panel: #172136;
      --panel-2: #1e2a43;
      --border: rgba(255, 255, 255, 0.09);
      --border-strong: rgba(255, 255, 255, 0.17);
      --text: #eef1f8;
      --muted: #aab3c9;
      --faint: #8f98ad;          /* >= 4.5:1 on bg and panel (WCAG AA) */
      --accent: #34d399;         /* emerald — G&G signature */
      --accent-strong: #10b981;
      --accent-text: #6ee7b7;    /* readable accent for text on dark */
      --accent-1: #34d399;
      --accent-2: #22c3a6;
      --accent-3: #38bdf8;       /* cyan — Podz.AI bridge note */
      --gradient: linear-gradient(100deg, #5eecab, #34d399 45%, #10b981);
      --header-bg: rgba(13, 18, 32, 0.82);
      --menu-bg: rgba(18, 26, 43, 0.98);
      --chip-bg: rgba(23, 33, 54, 0.94);
      --ring: rgba(255, 255, 255, 0.14);
      --tint-1: rgba(52, 211, 153, 0.12);
      --tint-2: rgba(56, 189, 248, 0.09);
      --glow-a: rgba(52, 211, 153, 0.18);
      --glow-b: rgba(56, 189, 248, 0.12);
      --btn-shadow: rgba(52, 211, 153, 0.30);
      --btn-shadow-hover: rgba(52, 211, 153, 0.45);
      --btn-text: #05221a;
      --feature-bg: rgba(13, 18, 32, 0.55);
      --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    }

    /* Light theme tokens — cool off-white, G&G signature emerald */
    html[data-theme="light"] {
      color-scheme: light;
      --bg: #f6f8fc;
      --bg-soft: #eaeef7;
      --panel: #ffffff;
      --panel-2: #eef2fa;
      --border: rgba(13, 18, 32, 0.10);
      --border-strong: rgba(13, 18, 32, 0.18);
      --text: #0d1220;
      --muted: #4a5266;
      --faint: #5b6377;          /* >= 4.5:1 on bg and bg-soft (WCAG AA) */
      --accent: #059669;
      --accent-strong: #047857;
      --accent-text: #047857;    /* deep emerald, readable on off-white */
      --accent-1: #059669;
      --accent-2: #0891a6;
      --accent-3: #0ea5c4;
      --gradient: linear-gradient(100deg, #059669, #047857);
      --header-bg: rgba(246, 248, 252, 0.85);
      --menu-bg: rgba(246, 248, 252, 0.98);
      --chip-bg: rgba(255, 255, 255, 0.94);
      --ring: rgba(13, 18, 32, 0.16);
      --tint-1: rgba(5, 150, 105, 0.09);
      --tint-2: rgba(14, 165, 196, 0.10);
      --glow-a: rgba(5, 150, 105, 0.12);
      --glow-b: rgba(14, 165, 196, 0.12);
      --btn-shadow: rgba(5, 150, 105, 0.25);
      --btn-shadow-hover: rgba(5, 150, 105, 0.38);
      --btn-text: #ffffff;
      --feature-bg: rgba(255, 255, 255, 0.78);
      --shadow: 0 18px 45px rgba(13, 18, 32, 0.10);
    }

    /* OS preference fallback when JS has not set a theme (e.g. no-JS visitors) */
    @media (prefers-color-scheme: light) {
      html:not([data-theme]) {
        color-scheme: light;
        --bg: #f6f8fc;
        --bg-soft: #eaeef7;
        --panel: #ffffff;
        --panel-2: #eef2fa;
        --border: rgba(13, 18, 32, 0.10);
        --border-strong: rgba(13, 18, 32, 0.18);
        --text: #0d1220;
        --muted: #4a5266;
        --faint: #5b6377;
        --accent-text: #047857;
        --accent-3: #0ea5c4;
        --gradient: linear-gradient(100deg, #059669, #047857);
        --header-bg: rgba(246, 248, 252, 0.85);
        --menu-bg: rgba(246, 248, 252, 0.98);
        --chip-bg: rgba(255, 255, 255, 0.94);
        --ring: rgba(13, 18, 32, 0.16);
        --tint-1: rgba(5, 150, 105, 0.09);
        --tint-2: rgba(14, 165, 196, 0.10);
        --glow-a: rgba(5, 150, 105, 0.12);
        --glow-b: rgba(14, 165, 196, 0.12);
        --btn-shadow: rgba(5, 150, 105, 0.25);
        --btn-shadow-hover: rgba(5, 150, 105, 0.38);
        --btn-text: #ffffff;
        --feature-bg: rgba(255, 255, 255, 0.78);
        --shadow: 0 18px 45px rgba(13, 18, 32, 0.10);
      }
    }

    /* ===============================================================================================================
       Base
       =============================================================================================================== */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      transition: background 0.25s ease, color 0.25s ease;
    }

    /* Language visibility: html[lang] decides which localized nodes are shown */
    html[lang="it"] .en { display: none !important; }
    html[lang="en"] .it { display: none !important; }

    ::selection { background: rgba(52, 211, 153, 0.35); }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }

    .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

    section { padding: 96px 0; position: relative; }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-text);
      margin-bottom: 16px;
    }
    .kicker::before {
      content: "";
      width: 22px; height: 2px;
      background: var(--gradient);
      border-radius: 2px;
    }

    h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
    /* Display headings in serif, Claude-style */
    h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
    h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
    .section-intro { color: var(--muted); max-width: 640px; font-size: 1.05rem; }

    .grad-text {
      background: var(--gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* Reveal-on-scroll animation — scoped to html.js so content stays visible without JavaScript */
    html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
    html.js .reveal.visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      html.js .reveal { opacity: 1; transform: none; transition: none; }
    }

    /* Keyboard focus */
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 6px;
    }

    /* Skip link (visible only when focused) */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 200;
      background: var(--panel-2);
      color: var(--text);
      padding: 12px 20px;
      border: 1px solid var(--border-strong);
      border-radius: 0 0 12px 0;
      font-weight: 600;
    }
    .skip-link:focus { left: 0; }

    /* ===============================================================================================================
       Buttons
       =============================================================================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 26px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.95rem;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
      white-space: nowrap;
    }
    .btn-primary {
      background: var(--gradient);
      color: var(--btn-text);
      box-shadow: 0 8px 28px var(--btn-shadow);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px var(--btn-shadow-hover); }
    .btn-ghost {
      background: transparent;
      border-color: var(--border-strong);
      color: var(--text);
    }
    .btn-ghost:hover { background: rgba(127, 127, 127, 0.12); transform: translateY(-2px); }

    /* ===============================================================================================================
       Header / nav
       =============================================================================================================== */
    .site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      background: var(--header-bg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      transition: background 0.25s ease;
    }
    .nav {
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
    .brand-mark {
      display: grid; place-items: center;
    }
    .brand-mark svg { width: 30px; height: 30px; display: block; }
    .brand-mark svg .wire { fill: var(--faint); opacity: 0.7; }
    .brand-text { display: inline-flex; flex-direction: column; line-height: 1.08; }
    .brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
    .brand-payoff { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); margin-top: 2px; }
    /* Power-on plays once on load; then the lit LED breathes. No off/on loop. */
    .brand-mark svg path.lit {
      stroke-dasharray: 200 300;
      stroke-linecap: butt;
      animation: gg-draw 1.9s ease-in-out 1.5s both, gg-gbreath 3.2s ease-in-out 3.4s infinite;
    }
    .brand-mark svg circle.led {
      fill: #ef4444;
      transform-box: fill-box;
      transform-origin: center;
      animation: gg-power 1.9s ease-out 1.5s both, gg-breath 3.2s ease-in-out 3.4s infinite;
    }
    .brand-mark svg circle.click {
      fill: none;
      stroke: #34d399;
      stroke-width: 3;
      opacity: 0;
      animation: gg-click 0.8s ease-out 1.7s both;
    }
    /* Click feedback: a ripple radiates from the LED on hover */
    .brand:hover .brand-mark svg circle.click { animation: gg-click 0.65s ease-out; }
    @keyframes gg-draw {
      0%, 18%   { stroke-dashoffset: 205; }
      72%, 100% { stroke-dashoffset: 0; }
    }
    @keyframes gg-power {
      0%, 8%   { fill: #ef4444; filter: drop-shadow(0 0 0 rgba(52,211,153,0)); transform: scale(1); }
      15%      { fill: #ef4444; filter: drop-shadow(0 0 0 rgba(52,211,153,0)); transform: scale(0.5); }
      24%      { fill: var(--text); filter: drop-shadow(0 0 13px rgba(52,211,153,1)) drop-shadow(0 0 22px rgba(52,211,153,0.6)); transform: scale(1.3); }
      42%      { fill: var(--text); filter: drop-shadow(0 0 6px rgba(52,211,153,0.8)); transform: scale(1); }
      100%     { fill: var(--text); filter: drop-shadow(0 0 5px rgba(52,211,153,0.75)); transform: scale(1); }
    }
    @keyframes gg-breath {
      0%, 100%  { filter: drop-shadow(0 0 5px rgba(52,211,153,0.75)); transform: scale(1); }
      50%       { filter: drop-shadow(0 0 15px rgba(52,211,153,1)) drop-shadow(0 0 24px rgba(52,211,153,0.55)); transform: scale(1.22); }
    }
    @keyframes gg-gbreath {
      0%, 100%  { filter: drop-shadow(0 0 0.5px rgba(52,211,153,0.25)); }
      50%       { filter: drop-shadow(0 0 4px rgba(52,211,153,0.7)); }
    }
    @keyframes gg-click {
      0%   { opacity: 0; r: 9px; }
      22%  { opacity: 0.95; r: 11px; }
      100% { opacity: 0; r: 32px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .brand-mark svg path.lit { stroke-dashoffset: 0; animation: none; filter: none; }
      .brand-mark svg circle.led { fill: var(--text); filter: none; animation: none; }
      .brand-mark svg circle.click { display: none; }
    }

    .nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
    .nav-links a {
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--muted);
      transition: color 0.18s ease;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--text); }

    .nav-actions { display: flex; align-items: center; gap: 14px; }

    /* Lo switch è uno <span class="current"> più un <a>, in tutte le pagine: la home ha un URL
       per lingua come le altre, e i <button> con il toggle in JS non esistono più. Le regole
       stanno qui una volta sola e valgono ovunque — se le scrivi per un selettore che non c'è,
       il difetto si vede solo sulla home, che è l'unica pagina a usare questo blocco così com'è. */
    .lang-switch {
      display: inline-flex;
      flex: 0 0 auto;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      overflow: hidden;
    }
    .lang-switch a, .lang-switch .current {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      background: transparent;
      border: none;
      color: var(--faint);
      font: 600 0.78rem var(--font);
      padding: 7px 12px;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .lang-switch .current { background: rgba(127, 127, 127, 0.16); color: var(--text); }
    .lang-switch a:hover { color: var(--text); }

    /* Theme toggle (sun shown in dark -> switches to light, moon shown in light) */
    .theme-toggle {
      background: transparent;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      cursor: pointer;
      color: var(--muted);
      transition: color 0.18s ease, background 0.18s ease;
    }
    .theme-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }
    .theme-toggle svg { width: 18px; height: 18px; }
    html[data-theme="light"] .icon-sun { display: none; }
    html:not([data-theme="light"]) .icon-moon { display: none; }
    html:not(.js) .theme-toggle { display: none; }

    .nav-cta { padding: 9px 20px; font-size: 0.88rem; }

    /* Mobile menu toggle */
    .menu-toggle {
      display: none;
      background: transparent;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      width: 40px; height: 40px;
      cursor: pointer;
      position: relative;
    }
    .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
      content: "";
      position: absolute;
      left: 10px;
      width: 18px; height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .menu-toggle span { top: 19px; }
    .menu-toggle span::before { left: 0; top: -6px; }
    .menu-toggle span::after { left: 0; top: 6px; }
    .menu-toggle.open span { background: transparent; }
    .menu-toggle.open span::before { transform: translateY(6px) rotate(45deg); }
    .menu-toggle.open span::after { transform: translateY(-6px) rotate(-45deg); }

    @media (max-width: 900px) {
      .nav { gap: 12px; }
      .brand { font-size: 0.95rem; white-space: nowrap; }
      .lang-switch a, .lang-switch .current { min-width: 34px; padding: 6px 10px; }
      .nav-links {
        position: fixed;
        top: var(--nav-h); left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--menu-bg);
        border-bottom: 1px solid var(--border);
        padding: 12px 24px 20px;
        display: none;
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 10px 0; font-size: 1.05rem; width: 100%; }
      .menu-toggle { display: block; margin-left: auto; }
      .nav-cta { display: none; }
    }

    /* ===============================================================================================================
       Hero
       =============================================================================================================== */
    .hero {
      min-height: 100vh; /* fallback for browsers without svh support */
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: calc(var(--nav-h) + 72px) 0 80px;
      position: relative;
    }
    .hero-bg {
      position: absolute; inset: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.65;
    }
    .glow-1 { width: 500px; height: 500px; background: var(--glow-a); top: -160px; right: -100px; }
    .glow-2 { width: 440px; height: 440px; background: var(--glow-b); bottom: -180px; left: -140px; }
    .glow-3 { width: 300px; height: 300px; background: var(--glow-b); top: 42%; left: 44%; opacity: 0.4; }

    .hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }

    .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 800; margin-bottom: 22px; }
    .hero-sub { color: var(--muted); font-size: 1.13rem; max-width: 560px; margin-bottom: 34px; }
    .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }

    .hero-note { color: var(--faint); font-size: 0.9rem; margin-bottom: 46px; }
    .hero-note a {
      color: var(--muted);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .hero-note a:hover { color: var(--text); }

    .hero-stats { display: flex; flex-wrap: wrap; gap: 40px; }
    .stat .num {
      font-size: 1.9rem; font-weight: 800;
      background: var(--gradient);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .stat .label { color: var(--faint); font-size: 0.86rem; margin-top: 2px; }

    /* Hero visual: orbit diagram of the three practice areas */
    .hero-visual { position: relative; display: grid; place-items: center; min-height: 380px; }
    .orbit-core {
      width: 132px; height: 132px;
      border-radius: 32px;
      background: linear-gradient(160deg, var(--panel-2), var(--panel));
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow), 0 0 60px var(--glow-a);
      display: grid; place-items: center;
      text-align: center;
      z-index: 2;
      /* Button reset: the core is clickable and radiates energy to the three chips */
      font-family: inherit;
      color: inherit;
      padding: 0;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      transition: scale 0.2s ease, border-color 0.2s ease;
      /* Slow breathing halo — starts in sync with the logo power-on */
      animation: core-breath 4.6s ease-in-out 3.4s infinite;
    }
    .orbit-core:hover { border-color: var(--accent-1); scale: 1.03; }
    @keyframes core-breath {
      0%, 100% { box-shadow: var(--shadow), 0 0 60px var(--glow-a); }
      50%      { box-shadow: var(--shadow), 0 0 100px var(--glow-a), 0 0 46px var(--glow-a); }
    }
    .orbit-core strong { font-size: 1.05rem; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .orbit-core small { color: var(--faint); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .orbit-ring {
      position: absolute;
      border: 1px dashed var(--ring);
      border-radius: 50%;
    }
    .ring-1 { width: 270px; height: 270px; }
    .ring-2 { width: 400px; height: 400px; }
    .orbit-chip {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--chip-bg);
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      padding: 9px 16px;
      font-size: 0.82rem;
      font-weight: 600;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
      animation: float 6s ease-in-out infinite;
      /* Button reset: the chips are interactive and jump to the matching service card */
      font-family: inherit;
      color: inherit;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      transition: scale 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .orbit-chip:hover { border-color: var(--accent-1); }
    .orbit-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
    /* Ripple radiating from the chip border, same language as the logo LED */
    .orbit-chip::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid var(--accent-1);
      opacity: 0;
      pointer-events: none;
    }
    .orbit-chip.activated { scale: 1.06; border-color: var(--accent-1); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 22px var(--glow-a); }
    .orbit-chip.activated::after { animation: chip-ripple 0.7s ease-out; }
    .orbit-chip.activated .dot { animation: chip-dot 0.7s ease-out; }
    @keyframes chip-ripple {
      0%   { opacity: 0; transform: scale(1); }
      20%  { opacity: 0.9; transform: scale(1.05); }
      100% { opacity: 0; transform: scale(1.55); }
    }
    @keyframes chip-dot {
      0%   { box-shadow: 0 0 0 rgba(52, 211, 153, 0); }
      25%  { box-shadow: 0 0 12px rgba(52, 211, 153, 1), 0 0 22px rgba(52, 211, 153, 0.6); }
      100% { box-shadow: 0 0 0 rgba(52, 211, 153, 0); }
    }
    /* Light pulse travelling from the clicked chip to the core; --dx/--dy are set by JS */
    .orbit-spark {
      position: absolute;
      width: 10px; height: 10px;
      margin: -5px 0 0 -5px;
      border-radius: 50%;
      background: var(--accent-1);
      box-shadow: 0 0 12px rgba(52, 211, 153, 0.95), 0 0 24px rgba(52, 211, 153, 0.5);
      pointer-events: none;
      z-index: 3;
      animation: orbit-spark 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes orbit-spark {
      0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
      18%  { transform: translate(calc(var(--dx) * 0.18), calc(var(--dy) * 0.18)) scale(1); opacity: 1; }
      100% { transform: translate(var(--dx), var(--dy)) scale(0.5); opacity: 0; }
    }
    /* The core lights up when a pulse reaches it, and flares when it emits its own */
    .orbit-core.energized { animation: core-energize 0.7s ease-out; }
    .orbit-core.emitting { animation: core-emit 0.9s ease-out; }
    @keyframes core-energize {
      0%   { box-shadow: var(--shadow), 0 0 60px var(--glow-a); border-color: var(--border-strong); }
      30%  { box-shadow: var(--shadow), 0 0 90px rgba(52, 211, 153, 0.75); border-color: var(--accent-1); }
      100% { box-shadow: var(--shadow), 0 0 60px var(--glow-a); border-color: var(--border-strong); }
    }
    @keyframes core-emit {
      0%   { box-shadow: var(--shadow), 0 0 60px var(--glow-a); border-color: var(--border-strong); scale: 1; }
      14%  { box-shadow: var(--shadow), 0 0 30px rgba(52, 211, 153, 0.9); border-color: var(--accent-1); scale: 0.95; }
      34%  { box-shadow: var(--shadow), 0 0 110px rgba(52, 211, 153, 0.9), 0 0 40px rgba(52, 211, 153, 0.7); border-color: var(--accent-1); scale: 1.06; }
      100% { box-shadow: var(--shadow), 0 0 60px var(--glow-a); border-color: var(--border-strong); scale: 1; }
    }
    /* Shockwave ring expanding from the core on click */
    .core-wave {
      position: absolute;
      width: 132px; height: 132px;
      left: 50%; top: 50%;
      margin: -66px 0 0 -66px;
      border-radius: 32px;
      border: 1px solid var(--accent-1);
      opacity: 0;
      pointer-events: none;
      z-index: 1;
      animation: core-wave 0.9s ease-out forwards;
    }
    @keyframes core-wave {
      0%   { opacity: 0; transform: scale(1); }
      18%  { opacity: 0.75; transform: scale(1.05); }
      100% { opacity: 0; transform: scale(2.6); }
    }
    /* Target service card acknowledges the jump */
    .card.flash { border-color: var(--accent-1); box-shadow: var(--shadow), 0 0 0 1px var(--accent-1); }
    .card.flash::before { opacity: 1; }
    .chip-1 { top: 8%; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
    .chip-1 .dot { background: var(--accent-1); }
    .chip-2 { bottom: 16%; left: 2%; animation-delay: 1.5s; }
    .chip-2 .dot { background: var(--accent-2); }
    .chip-3 { bottom: 16%; right: 2%; animation-delay: 3s; }
    .chip-3 .dot { background: var(--accent-3); }
    @keyframes float {
      0%, 100% { margin-top: 0; }
      50% { margin-top: -10px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .orbit-chip { animation: none; transition: none; }
      .orbit-chip.activated { scale: 1; }
      .orbit-chip.activated::after,
      .orbit-chip.activated .dot,
      .orbit-core,
      .orbit-core.energized,
      .orbit-core.emitting { animation: none; }
      .orbit-core { transition: none; }
      .orbit-core:hover { scale: 1; }
      .orbit-spark, .core-wave { display: none; }
    }

    @media (max-width: 900px) {
      .hero { min-height: auto; }
      .hero-inner { grid-template-columns: 1fr; gap: 40px; }
      .hero-visual { min-height: 340px; transform: scale(0.88); }
      .hero-stats { gap: 26px; }
    }
    @media (max-width: 480px) {
      /* Shrink the orbit so the outer ring never causes horizontal overflow */
      .hero-visual { min-height: 300px; transform: scale(0.85); }
      .ring-2 { width: 300px; height: 300px; }
      .orbit-chip { font-size: 0.74rem; padding: 8px 12px; }
      .chip-2 { left: 0; }
      .chip-3 { right: 0; }
    }

    /* ===============================================================================================================
       Services
       =============================================================================================================== */
    .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
    .card {
      background: linear-gradient(170deg, var(--panel-2), var(--panel) 60%);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 30px 28px;
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
      position: relative;
      overflow: hidden;
    }
    .card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--gradient);
      opacity: 0;
      transition: opacity 0.22s ease;
    }
    .card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow); }
    .card:hover::before { opacity: 1; }

    .card-icon {
      width: 50px; height: 50px;
      border-radius: 14px;
      display: grid; place-items: center;
      margin-bottom: 20px;
      background: rgba(52, 211, 153, 0.10);
      border: 1px solid var(--border);
    }
    .card-icon svg { width: 25px; height: 25px; }
    .card h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 10px; }
    .card p { color: var(--muted); font-size: 0.94rem; }
    .card ul { margin-top: 16px; display: grid; gap: 8px; }
    .card ul li {
      color: var(--muted);
      font-size: 0.88rem;
      padding-left: 20px;
      position: relative;
    }
    .card ul li::before {
      content: "";
      position: absolute;
      left: 0; top: 8px;
      width: 9px; height: 9px;
      border-radius: 3px;
      background: var(--gradient);
      opacity: 0.85;
    }

    .sectors-note { margin-top: 30px; color: var(--faint); font-size: 0.92rem; }

    @media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }

    /* ===============================================================================================================
       Why us
       =============================================================================================================== */
    #why { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
    .pillar {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 26px 22px;
      background: rgba(255, 255, 255, 0.02);
      transition: border-color 0.22s ease, background 0.22s ease;
    }
    .pillar:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.04); }
    .pillar .n {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--accent-text);
      letter-spacing: 0.1em;
    }
    .pillar h3 { font-size: 1.05rem; margin: 10px 0 8px; }
    .pillar p { color: var(--muted); font-size: 0.88rem; }
    /* Il percorso è una successione di periodi, non un insieme di pari grado: incolonnarlo lo
       rende leggibile in ordine e regge qualunque numero di voci, che una griglia a quattro no. */
    /* 820px come .faq-list e il pannello della ricerca: a piena larghezza le schede restano
       larghe il doppio del testo che contengono, e ogni riga finisce con un vuoto a destra. */
    .pillars.pillars-stack { grid-template-columns: 1fr; gap: 14px; max-width: 820px; }
    .pillars.pillars-stack .pillar p { max-width: 78ch; }
    @media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

    /* ===============================================================================================================
       Podz.AI spotlight
       =============================================================================================================== */
    .podz-panel {
      margin-top: 48px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-strong);
      background:
        radial-gradient(ellipse 80% 90% at 85% 10%, var(--tint-1), transparent 60%),
        radial-gradient(ellipse 60% 80% at 10% 90%, var(--tint-2), transparent 60%),
        linear-gradient(170deg, var(--panel-2), var(--panel) 70%);
      padding: 56px;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 52px;
      align-items: center;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .podz-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent-text);
      border: 1px solid rgba(56, 189, 248, 0.4);
      background: rgba(56, 189, 248, 0.10);
      border-radius: 999px;
      padding: 6px 14px;
      margin-bottom: 20px;
    }
    .podz-panel h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 600; margin-bottom: 14px; }
    .podz-panel > div > p { color: var(--muted); font-size: 1.02rem; margin-bottom: 26px; }
    .podz-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
    .podz-note { margin-top: 18px; color: var(--faint); font-size: 0.82rem; }

    .podz-features { display: grid; gap: 14px; }
    .podz-feature {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      border: 1px solid var(--border);
      background: var(--feature-bg);
      border-radius: var(--radius);
      padding: 18px 20px;
    }
    .podz-feature .f-icon {
      flex: 0 0 auto;
      width: 38px; height: 38px;
      border-radius: 11px;
      display: grid; place-items: center;
      background: rgba(56, 189, 248, 0.10);
      border: 1px solid var(--border);
    }
    .podz-feature .f-icon svg { width: 19px; height: 19px; }
    .podz-feature h4 { font-size: 0.98rem; margin-bottom: 3px; }
    .podz-feature p { color: var(--muted); font-size: 0.86rem; }

    @media (max-width: 900px) {
      .podz-panel { grid-template-columns: 1fr; padding: 36px 26px; gap: 36px; }
    }

    /* ===============================================================================================================
       About
       =============================================================================================================== */
    #about { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; margin-top: 8px; }
    .about-text p { color: var(--muted); margin-bottom: 18px; font-size: 1.02rem; }
    .about-text p strong { color: var(--text); }
    .about-facts { display: grid; gap: 14px; }
    .fact {
      display: flex;
      gap: 14px;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.02);
      padding: 16px 20px;
    }
    .fact .f-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gradient); flex: 0 0 auto; }
    .fact h4 { font-size: 0.95rem; }
    .fact p { color: var(--muted); font-size: 0.85rem; }
    @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }

    /* ===============================================================================================================
       Contact
       =============================================================================================================== */
    .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
    .contact-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: linear-gradient(170deg, var(--panel-2), var(--panel) 60%);
      padding: 28px 26px;
      transition: transform 0.22s ease, border-color 0.22s ease;
    }
    .contact-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
    .contact-card h3 { font-size: 1rem; color: var(--faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; margin-bottom: 12px; }
    .contact-card .big { font-size: 1.12rem; font-weight: 700; word-break: break-word; }
    .contact-card .big a:hover { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .contact-card p { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }
    @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

    /* ===============================================================================================================
       Footer
       =============================================================================================================== */
    .site-footer {
      border-top: 1px solid var(--border);
      padding: 48px 0 40px;
      background: var(--bg-soft);
    }
    .footer-inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; }
    .footer-brand p { color: var(--faint); font-size: 0.86rem; max-width: 380px; margin-top: 12px; }
    .footer-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 14px; }
    .footer-col ul { display: grid; gap: 8px; }
    .footer-col a { color: var(--muted); font-size: 0.9rem; transition: color 0.18s ease; }
    .footer-col a:hover { color: var(--text); }
    .footer-legal {
      margin-top: 40px;
      padding-top: 22px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      color: var(--faint);
      font-size: 0.8rem;
    }

    /* Service cards link to their dedicated page */
    .card-link {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 18px; font-size: 0.9rem; font-weight: 600;
      color: var(--accent-text); text-decoration: none;
    }
    .card-link:hover { text-decoration: underline; }

    /* Home: teaser del progetto in sviluppo */
    #project { border-top: 1px solid var(--border); }
    .home-photo { margin: 0; }
    .home-photo img {
      width: 100%; height: auto; display: block;
      border-radius: var(--radius-lg); border: 1px solid var(--border);
    }
    .home-photo figcaption { color: var(--faint); font-size: 0.8rem; margin-top: 10px; }
    .project-cta { margin-top: 26px; }
  
/* ===============================================================================================================
   Inner pages — rules that do not exist on the homepage
   =============================================================================================================== */
/* Inner hero: the homepage hero without the full-viewport height, since here the content
   below the fold is the point of the page. */
.page-hero { min-height: auto; padding: calc(var(--nav-h) + 56px) 0 72px; }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 20px; }
.page-hero .hero-sub { margin-bottom: 30px; }
.page-hero .hero-note { margin-bottom: 0; }
.page-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

/* Core and chips are anchors, not buttons: neutralise the link defaults. */
.page-hero .orbit-core, .page-hero .orbit-chip { text-decoration: none; color: var(--text); }
.page-hero .orbit-chip { text-align: center; }

.breadcrumb { font-size: 0.8rem; color: var(--faint); margin-bottom: 18px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--border-strong); }
.breadcrumb a { color: var(--faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); }

/* Same treatment the homepage gives #why and #about: tint plus a hairline top and bottom. */
section.tinted {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* The facts sit in the narrow column of the about grid, stacked, exactly as on the homepage. */
.page-facts { align-content: start; }

.faq-list { margin-top: 40px; max-width: 820px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 4px 22px;
  margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  font-weight: 600;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item p { color: var(--muted); padding: 0 0 20px; margin: 0; max-width: 68ch; }

.photo { margin: 40px 0 0; }
.photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.photo figcaption, .diagram figcaption { color: var(--faint); font-size: 0.82rem; margin-top: 12px; }

.diagram { margin: 40px 0 8px; }
.diagram svg { width: 100%; height: auto; display: block; }

/* The research panel. Built from the card recipe on purpose — same gradient fill, same large
   radius, same top hairline — so it reads as part of this site and not as something pasted in.
   The one difference: the hairline is always on, because the panel is not a hover target. */
.research {
  position: relative;
  overflow: hidden;
  margin: 48px 0 0;
  max-width: 820px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
}
.research::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
}
.research .kicker { margin-bottom: 12px; }
/* Headings that follow a kicker are serif everywhere else on this site: match them. */
/* 36ch, measured in the browser and not guessed: below it the Italian heading breaks into three
   lines and splits the highlighted phrase across two of them. Both languages fit in two lines here. */
.research h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: 0 0 18px;
  max-width: 36ch;
}
.research p { color: var(--muted); font-size: 0.94rem; margin: 0 0 14px; max-width: 68ch; }
.research-cite {
  font-size: 0.85rem;
  line-height: 1.7;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.research-cite strong { color: var(--text); }
.research-link { margin: 0 0 6px; }
.research-link a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.research-link a:hover { text-decoration: underline; }
.research-note { color: var(--faint); font-size: 0.8rem; margin: 0; }

/* Il caso cliente riusa il pannello della ricerca — stessa scatola, stesso filo in alto — e
   aggiunge solo la citazione. Un cliente che parla e uno studio citato sono la stessa cosa per
   il lettore: prova che qualcuno di esterno conferma. Vale che si somiglino. */
.case-quote {
  margin: 22px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.case-quote blockquote { margin: 0; }
/* 58ch, misurati: la citazione è in serif e più grande del corpo, quindi 68ch le darebbero una
   riga fisicamente più lunga dei paragrafi sopra e il bordo destro si vedrebbe sfalsato. */
.case-quote blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 58ch;
  margin: 0 0 16px;
}
.case-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.case-author { color: var(--accent-text); font-weight: 600; font-size: 0.9rem; }
.case-role { color: var(--faint); font-size: 0.82rem; }
.case-note { color: var(--faint); font-size: 0.78rem; margin: 16px 0 0; }

@media (max-width: 640px) { .research { padding: 26px 22px; } }

/* ---------------------------------------------------------------------------------------------------------------
   Insights — long-form prose. One measure, one rhythm, nothing decorative: these pages are read
   top to bottom, not scanned like the service pages.
   --------------------------------------------------------------------------------------------------------------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  margin: 56px 0 18px;
  max-width: 26ch;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.prose > h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); margin: 0 0 20px; line-height: 1.75; }
.prose strong { color: var(--text); }
.prose a { color: var(--accent-text); }
.prose ul, .prose ol { color: var(--muted); margin: 0 0 22px; padding-left: 22px; line-height: 1.75; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--accent); }
.prose blockquote.pull {
  position: relative;
  overflow: hidden;
  margin: 0 0 26px;
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, var(--panel-2), var(--panel) 60%);
}
.prose blockquote.pull::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
}
.prose blockquote.pull p:last-child { margin-bottom: 0; }
.prose .table-wrap { overflow-x: auto; margin: 0 0 26px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.prose th, .prose td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.prose th { color: var(--text); font-weight: 600; border-bottom-color: var(--border-strong); }
.prose td { color: var(--muted); }

/* Article banner: the illustration is inlined SVG, so it follows the theme like .diagram does.
   The frame is the same hairline-on-soft-fill used everywhere else — no new vocabulary.

   The section's own 96px would stack on top of the hero's 72px and the drawing's internal
   breathing room, leaving the title floating a long way above its illustration. The banner reads
   as part of the hero, so here the gap is closed instead. */
.article-body { padding-top: 36px; }
/* Same width as .prose: the banner belongs to the article, and one wider than the column it
   introduces reads as a separate object sitting above the text. */
.article-art { max-width: 720px; margin: 0 auto 44px; }
.article-art svg {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

/* The browser's own [hidden] rule is `display: none`, and any author rule that sets `display`
   beats it. Both of these do, so setting el.hidden from JavaScript would change nothing unless
   they say it themselves: the filter would mark cards as hidden and leave them on screen, and the
   bar would show up for visitors without JavaScript. */
.insight-card[hidden], .filters[hidden] { display: none; }

/* Tags and filter: the same pill again, quieter. A tag is a label, not a call to action. */
.tag, .filter-btn {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.tag:hover, .filter-btn:hover { border-color: var(--border-strong); color: var(--text); }
.filter-btn[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent-text);
  background: var(--tint-1);
}
.article-tags {
  max-width: 720px; margin: -22px auto 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tag-label, .filter-label { color: var(--faint); font-size: 0.85rem; margin-right: 4px; }
/* No top margin: the section already provides the space, and the two would stack into a hole
   between the hero and the first thing the reader can act on. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-empty { color: var(--faint); margin-top: 32px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Inside a card the whole tile is the link, so the tags must not look clickable on their own. */
.insight-card .tag { pointer-events: none; }

/* Share bar: the same pill as .btn-ghost, one size down. Nothing new invented, and no third-party
   widget — the networks' own buttons ship a tracker with them. */
.share {
  max-width: 720px; margin: 44px auto 0; padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.share-label { color: var(--faint); font-size: 0.85rem; margin-right: 4px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.share-btn:hover { background: rgba(127, 127, 127, 0.12); transform: translateY(-2px); }
.share-btn svg { width: 15px; height: 15px; flex: none; }
.share-btn[data-copied] { color: var(--accent-text); border-color: var(--accent); }

.article-meta {
  max-width: 720px; margin: 0 auto 40px;
  padding-bottom: 22px; border-bottom: 1px solid var(--border);
  color: var(--faint); font-size: 0.88rem;
}
.article-meta strong { color: var(--text); font-weight: 600; }
/* Both notices borrow the .fact treatment: hairline, soft fill, small text. Nothing new invented. */
.article-disclaimer, .article-draft {
  max-width: 720px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  color: var(--faint);
  font-size: 0.85rem;
}
.article-disclaimer { margin: 48px auto 0; }
.article-draft { margin: 0 auto 32px; border-color: var(--border-strong); color: var(--muted); }

/* Same recipe as .card, minus the icon: the index has to look like the rest of the site. */
/* Two columns, dropping to one when there is no room for two. No breakpoint is written here: the
   column count comes from the card's own minimum width, so it stays right the day the card grows.
   The cap at two is the container: it is --maxw minus its 48px of padding, 1.072px, and a third
   360px track would need 1.120px. There is no max-width of its own here — one used to be, set to
   1.000px, and since a grid does not centre itself it left 72px of dead space on the right while
   the filter bar above spanned the full width. The two right edges did not line up.
   If --maxw ever passes 1.168px a third column appears: that is the line to watch.

   auto-fill, not auto-fit: auto-fit would collapse the empty track, so a single card — the last
   article left after filtering, or the first one ever published — would suddenly stretch to
   double width. Keeping the track reserved makes the grid stable while the filter runs. */
.insight-list {
  display: grid; gap: 20px; margin-top: 48px;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}
.insight-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, var(--panel-2), var(--panel) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.insight-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.insight-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.insight-card:hover::before { opacity: 1; }
/* The thumbnail bleeds to the card's edges: the card padding would otherwise frame it twice,
   once with its own border and once with the drawing's enclosure. */
.insight-thumb {
  display: block; margin: -30px -28px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.insight-thumb svg { display: block; width: 100%; height: auto; }
.insight-card .kicker { margin-bottom: 10px; }
.insight-card h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 10px; }
.insight-card p { color: var(--muted); font-size: 0.94rem; margin: 0; }

@media (max-width: 640px) {
  .prose h2 { margin-top: 42px; }
  .article-disclaimer, .article-draft { padding: 16px 18px; }
}

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.related-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.related-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.related-card h3 { font-size: 1.05rem; margin: 0 0 8px; }
.related-card p { color: var(--faint); font-size: 0.9rem; margin: 0; }

/* The closing band sits on the page background, like the homepage contact section, with a hairline
   to separate it from the related pages above. */
.cta-band { border-top: 1px solid var(--border); }
.cta-band h2 { max-width: 20ch; }
.cta-band .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Lo switch di lingua non compare qui: le sue regole stanno in _src/home.html e valgono per
   tutte le pagine, home compresa. Restare in un posto solo è il punto. */

/* Four-capability pages (AI) lay out 2x2 instead of leaving an orphan card. */
.cards-3.cards-4 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .related-grid { grid-template-columns: 1fr; }
  .cards-3.cards-4 { grid-template-columns: 1fr; }
  .page-hero h1 { max-width: none; }
}