* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
    body { background:#f5f5f5; color:#333; }

    /* HERO */
    .hero { background:#232e41; color:white; padding:90px 20px; text-align:center; }
    .hero h1 { font-size:3rem; letter-spacing:2px; }

    /* GALLERY */
    .gallery {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
      gap:20px;
      padding:40px;
      max-width:1200px;
      margin:auto;
    }

    .art-card {
      background:white;
      border-radius:12px;
      overflow:hidden;
      box-shadow:0 4px 12px rgba(0,0,0,0.1);
      transition:0.25s ease;
      cursor:pointer;
    }

    .art-card:hover {
      transform:translateY(-6px) scale(1.01);
      box-shadow:0 12px 28px rgba(0,0,0,0.2);
    }

    .art-card img { width:100%; height:220px; object-fit:cover; display:block; }
    .art-info { padding:14px; }
    .art-info h3 { font-size:1.05rem; }

    /* LIGHTBOX */
    .lightbox {
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.9);
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      pointer-events:none;
      transition:0.3s ease;
      z-index:999;
    }

    .lightbox.active {
      opacity:1;
      pointer-events:all;
    }

    .lightbox img {
      max-width:90%;
      max-height:85vh;
      border-radius:8px;
      box-shadow:0 10px 40px rgba(0,0,0,0.5);
    }

    .close {
      position:absolute;
      top:20px;
      right:30px;
      font-size:2rem;
      color:white;
      cursor:pointer;
    }

    /* FOOTER */
    footer { background:#232e41; color:white; padding:40px 20px; margin-top:40px; }
    .footer-content {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
      gap:20px;
      max-width:1200px;
      margin:auto;
    }
    .footer-section h4 { margin-bottom:10px; }
    .footer-section p { font-size:0.9rem; color:#ccc; }
    .footer-bottom { text-align:center; margin-top:20px; font-size:0.8rem; color:#aaa; }

    @media(max-width:600px){ .hero h1{font-size:2rem;} }