:root{
      --blue-deep: #1E3A5F;
      --blue-dust: #4F7CAC;
      --beige:     #EADDC7;
      --ivory:     #F6F3EE;
      --terra:     #C77C4E;
      --ink:       #0f1b2e;
    }
    html,body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin:0; padding:0; background:var(--ivory); color:var(--ink); }

    /* NAVBAR */
    .navbar { transition: background .25s, color .25s; }
    .navbar-brand svg { width:34px; height:34px; margin-right:.5rem; vertical-align:middle; }
    .nav-link { font-weight:600; color:var(--ink); }
    .btn-accent { background:var(--terra); color:#fff; border:none; }
    .btn-accent:hover { filter:brightness(.95); }

    /* HERO */
    .hero{ background: linear-gradient(120deg,var(--blue-deep),var(--blue-dust)); color:#fff; padding:4.5rem 1rem; }
    .hero .badge-tag{ background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); }
    .hero-gear{ position:absolute; right:-6%; top:8%; width:420px; opacity:.10; filter:blur(1px); pointer-events:none; }

    /* SECTIONS */
    .section { padding:3.25rem 1rem; }
    .section-title { font-weight:800; letter-spacing:.3px; }
    .section-sub { color:#415a7a; }

    /* CARDS */
    .of-card{ border:0; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 10px 30px rgba(30,58,95,.06); transition:transform .18s; }
    .of-card:hover{ transform:translateY(-6px); }
    .of-card .icon { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:var(--beige); color:var(--blue-deep); font-size:20px; }

    .divider{ height:1px; width:100%; background:linear-gradient(90deg,transparent,#d7d7d7,transparent); margin:2.25rem 0; }

    /* PLACEHOLDER IMAGE (SVG) */
    .placeholder-svg { width:100%; height:180px; display:block; background:linear-gradient(90deg,#f2f2f2,#e9e6e1); border-bottom:1px solid #eee; }

    /* FOOTER */
    footer{ background:#0f1b2e; color:#ffffffcc; padding:1.5rem 0; }
    .feature-band {
      background: var(--beige);
      border-top: 1px solid rgba(0,0,0,.05);
      border-bottom: 1px solid rgba(0,0,0,.05);
    }
    /* DARK MODE */
    body.dark-mode { background: #0b0b0c; color:#eaeaea; }
    body.dark-mode .of-card { background:#151515; color:#eaeaea; box-shadow:0 10px 30px rgba(0,0,0,.6); }
    body.dark-mode .modal-content { background:#151515; color:#ece6e6; box-shadow:0 10px 30px rgba(0,0,0,.6); }
    
    body.dark-mode .feature-band { background:#141414; }
    body.dark-mode .btn-close { filter: invert(1) grayscale(1) brightness(2);}
    body.dark-mode .section-sub { color:#999; }
    body.dark-mode footer { background:#050507; color:#999; }
    body.dark-mode .nav-link { color:#eaeaea !important; }
    body.dark-mode .navbar-brand span { color:#eaeaea; }
    body.dark-mode .btn-outline-primary { color:var(--beige) !important; border-color:var(--beige) !important; }
    body.dark-mode .btn-outline-primary:hover { background:var(--blue-dust); color:#fff !important; }

    /* NAVBAR specifics in dark */
    body.dark-mode .navbar { background:#0f1113 !important; }
    body.dark-mode .navbar .navbar-toggler { border-color: rgba(255,255,255,.08); }
    body.dark-mode .navbar .navbar-toggler-icon { filter: invert(1) hue-rotate(180deg); }
    body.dark-mode .feature-band {
      background: #1a1a1a; /* oppure var(--ink) attenuato */
      color: #ddd;
      border-color: rgba(255,255,255,.05);
    }
    body.dark-mode #headPortfolio {
        background: #0b0b0c; 
        color:#eaeaea;
    }
/* py-5 text-center bg-light border-bottom   */
    /* ABOUT section in dark */
    #about { background: linear-gradient(180deg,#ffffff 0%, var(--beige) 100%); }
    body.dark-mode #about { background: linear-gradient(180deg,#121213 0%, #141416 100%); color:#ddd; }

    /* small responsive */
    @media (max-width:767px) { .hero { padding:3rem 1rem } .hero-gear{ display:none } }

    .language-switch .lang-btn.active {
    border: 2px solid var(--blue-deep);
    box-shadow: 0 0 4px rgba(30, 58, 95, 0.3);
    transform: scale(1.05);
    transition: all 0.2s ease;
  }
#categoryFilter {
  background-color: var(--ivory);
  color: var(--blue-deep);
  transition: 0.3s;
}

.dark-mode #categoryFilter {
  background-color: var(--blue-deep);
  color: var(--ivory);
  border-color: var(--blue-dust);
}
.navbar-brand img {
  transition: transform 0.4s ease;
}
.navbar-brand:hover img {
  transform: rotate(10deg);
}
body, .of-card, .navbar, footer, section {
  transition: background-color 0.3s ease, color 0.3s ease;
}
#scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--terra);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
}
.nav-link.active {
  color: var(--terra) !important;
  font-weight: 600;
}
/* Container principale dell'immagine della card */
.card-image-container {
    position: relative;
    overflow: hidden; /* Importante per contenere la cartolina */
}

/* Cartolina sovrapposta */
.collage-image-container {
    position: absolute;
    top: 7px;
    left: 15px;
    z-index: 10; /* Sopra l'immagine principale */
    transform: rotate(-8deg);
    transition: all 0.3s ease;
}
.collage-image-container-dx {
  position: absolute;
  top: -23px;
  left: 300px;
  z-index: 10;
  transform: rotate(-8deg);
  transition: all 0.3s ease;
}
.collage-image {
    width: 64px; /* Dimensione piccola */
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 
        0 6px 20px rgba(0,0,0,0.2),
        0 3px 10px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.4);
    border: 2px solid #fff;
    position: relative;
    z-index: 2;
    filter: sepia(0.2) contrast(1.1) saturate(1.1);
}

/* Nastro adesivo più piccolo */
.collage-tape {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    width: 40px;
    height: 15px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    z-index: 3;
    opacity: 0.8;
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
}

/* Ombra per effetto sollevato */
.collage-image-container::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, #6c757d, #495057);
    border-radius: 8px;
    z-index: 1;
    opacity: 0.15;
    filter: blur(3px);
}

/* Effetto hover sulla cartolina */
.collage-image-container:hover {
    transform: rotate(-5deg) scale(1.1);
    z-index: 11; /* Ancora più sopra durante l'hover */
}

.collage-image-container:hover .collage-image {
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.3),
        0 4px 15px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .collage-image-container {
        top: 10px;
        left: 10px;
        transform: rotate(-6deg);
    }
    
    .collage-image {
        width: 60px;
        height: 60px;
    }
    
    .collage-tape {
        width: 30px;
        height: 12px;
        top: -5px;
    }
}

@media (max-width: 576px) {
    .collage-image-container {
        top: 8px;
        left: 8px;
    }
    
    .collage-image {
        width: 50px;
        height: 50px;
    }
}