/* CSS originale di /portfolio-websites/ con scope sulla pagina WordPress (body.id-p-portfolio-websites). Generato da scripts: non modificare a mano le regole originali, aggiungere override in fondo. */
body.id-p-portfolio-websites #content *, body.id-p-portfolio-websites #content *::before, body.id-p-portfolio-websites #content *::after { box-sizing: border-box; margin: 0; padding: 0;
}
body.id-p-portfolio-websites {
      --bg-0: #000000;
      --bg-1: #07070A;
      --bg-2: #0E0E13;
      --bg-3: #16161B;
      --bg-4: #1E1E25;
      --line-1: rgba(255,255,255,0.06);
      --line-2: rgba(255,255,255,0.10);
      --fg-1: #FFFFFF;
      --fg-2: rgba(255,255,255,0.72);
      --fg-3: rgba(255,255,255,0.50);
      --id-blue: #02A8F6;
      --id-violet: #6A37EB;
      --id-magenta: #DD00AF;
      --id-red: #FA2142;
      --id-orange: #FC9202;
      --id-rainbow: linear-gradient(90deg, #02A8F6, #6A37EB, #DD00AF, #FA2142, #FC9202);
}
body.id-p-portfolio-websites { scroll-behavior: smooth;
}
body.id-p-portfolio-websites {
      background: var(--bg-0);
      color: var(--fg-2);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
}
body.id-p-portfolio-websites #content .hero {
      max-width: 900px;
      margin: 0 auto;
      padding: 96px 24px 80px;
      text-align: center;
}
body.id-p-portfolio-websites #content .badge {
      display: inline-block;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--fg-3);
      background: rgba(255,255,255,.05);
      border: 1px solid var(--line-1);
      border-radius: 999px;
      padding: 4px 12px;
      margin-bottom: 20px;
}
body.id-p-portfolio-websites #content .hero h1 {
      font-size: clamp(36px, 6vw, 64px);
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--fg-1);
      line-height: 1.05;
      margin-bottom: 20px;
}
body.id-p-portfolio-websites #content .hero h1 .gradient {
      background: linear-gradient(90deg, #02A8F6, #6A37EB, #DD00AF);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
}
body.id-p-portfolio-websites #content .hero p {
      font-size: clamp(15px, 2vw, 18px);
      color: var(--fg-3);
      max-width: 580px;
      margin: 0 auto;
      line-height: 1.6;
}
body.id-p-portfolio-websites #content .grid-section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px 120px;
}
body.id-p-portfolio-websites #content .sites-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 24px;
}
body.id-p-portfolio-websites #content .site-card {
      display: flex;
      flex-direction: column;
      background: var(--bg-2);
      border: 1px solid var(--line-1);
      border-radius: 20px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: border-color .25s, transform .25s, box-shadow .25s;
}
body.id-p-portfolio-websites #content .site-card:hover {
      border-color: var(--line-2);
      transform: translateY(-4px);
      box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
body.id-p-portfolio-websites #content .card-screenshot {
      height: 220px;
      overflow: hidden;
      position: relative;
      background: var(--bg-4);
}
body.id-p-portfolio-websites #content .card-screenshot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      display: block;
      transition: transform .4s ease;
}
body.id-p-portfolio-websites #content .site-card:hover .card-screenshot img {
      transform: scale(1.03);
}
body.id-p-portfolio-websites #content .card-screenshot .img-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--fg-3);
      font-size: 13px;
}
body.id-p-portfolio-websites #content .card-screenshot .img-placeholder svg {
      opacity: .3;
}
body.id-p-portfolio-websites #content .card-body {
      padding: 24px 24px 28px;
      display: flex;
      flex-direction: column;
      flex: 1;
}
body.id-p-portfolio-websites #content .card-tag {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--fg-3);
      margin-bottom: 8px;
}
body.id-p-portfolio-websites #content .card-title {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--fg-1);
      line-height: 1.2;
      margin-bottom: 10px;
}
body.id-p-portfolio-websites #content .card-desc {
      font-size: 13.5px;
      color: var(--fg-3);
      line-height: 1.6;
      flex: 1;
      margin-bottom: 20px;
}
body.id-p-portfolio-websites #content .card-cta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--id-blue);
      padding-top: 16px;
      border-top: 1px solid var(--line-1);
}
body.id-p-portfolio-websites #content .card-cta svg { transition: transform .2s;
}
body.id-p-portfolio-websites #content .site-card:hover .card-cta svg { transform: translateX(4px);
}
@media (max-width: 600px) {
body.id-p-portfolio-websites #content .hero { padding: 64px 20px 56px;
}
body.id-p-portfolio-websites #content .sites-grid { grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
body.id-p-portfolio-websites #content *, body.id-p-portfolio-websites #content *::before, body.id-p-portfolio-websites #content *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
}
}

body.id-p-portfolio-websites #content p.id-txt { display: contents; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; margin: 0; padding: 0; max-width: none; background: none; border: 0; box-shadow: none; }

/* Reset dei margini automatici dei blocchi WordPress (il sito originale non li ha) */
body.id-p-portfolio-websites #content :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }

/* Nel sito originale la nav era "sticky" (occupava spazio): qui l header è fisso */
body.id-p-portfolio-websites #content { padding-top: 82px; }