*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #110e0a;
      --murk: #1a1510;
      --card-bg: #1e1914;
      --curtain: #5a1525;
      --curtain-deep: #3a0c16;
      --rust: #c94432;
      --blood: #9e2028;
      --amber: #e8a93e;
      --amber-dim: #a87830;
      --bone: #f2ece0;
      --bone-dim: #b5a998;
      --midnight: #0c0a07;
      --gold-glow: rgba(232, 169, 62, 0.15);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Cabin', sans-serif;
      background: var(--bg);
      color: var(--bone);
      min-height: 100vh;
      overflow-x: hidden;
      line-height: 1.6;
    }

    body::before {
      content: '';
      position: fixed;
      top: -30%; left: -10%;
      width: 120%; height: 55%;
      background: radial-gradient(ellipse at 50% 0%, rgba(192, 57, 43, 0.08) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    body::after {
      content: '';
      position: fixed;
      bottom: -20%; left: 15%;
      width: 70%; height: 45%;
      background: radial-gradient(ellipse at 50% 100%, rgba(232, 169, 62, 0.05) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0;
    }

    .marquee-wrap {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      padding: 44px 24px 10px;
    }
    .marquee {
      position: relative;
      border: 3px solid var(--amber-dim);
      border-radius: 14px;
      padding: 44px 70px 38px;
      text-align: center;
      width: 92%;
      max-width: 960px;
      background: var(--curtain);
      box-shadow:
        0 0 50px rgba(184, 55, 46, 0.06),
        0 0 100px rgba(212, 148, 58, 0.03),
        0 8px 60px 0 rgba(232,169,62,0.10),
        inset 0 0 80px rgba(0,0,0,0.6);
    }
    .marquee::before {
      content: '';
      position: absolute;
      inset: -14px;
      border-radius: 22px;
      pointer-events: none;
      z-index: -1;
      background-image:
        radial-gradient(circle, var(--amber) 3px, transparent 4px),
        radial-gradient(circle, var(--rust) 3px, transparent 4px),
        radial-gradient(circle, var(--amber) 3px, transparent 4px),
        radial-gradient(circle, var(--rust) 3px, transparent 4px),
        radial-gradient(circle, var(--amber) 3px, transparent 4px),
        radial-gradient(circle, var(--rust) 3px, transparent 4px),
        radial-gradient(circle, var(--amber) 3px, transparent 4px),
        radial-gradient(circle, var(--rust) 3px, transparent 4px);
      background-size:
        28px 14px, 28px 14px,
        28px 14px, 28px 14px,
        14px 28px, 14px 28px,
        14px 28px, 14px 28px;
      background-position:
        7px 0px, 21px 0px,
        7px 100%, 21px 100%,
        0px 7px, 0px 21px,
        100% 7px, 100% 21px;
      background-repeat:
        repeat-x, repeat-x,
        repeat-x, repeat-x,
        repeat-y, repeat-y,
        repeat-y, repeat-y;
      filter: drop-shadow(0 0 6px rgba(212, 148, 58, 0.4));
      animation: bulbGlow 2s ease-in-out infinite alternate;
    }
    @keyframes bulbGlow {
      0%   { filter: drop-shadow(0 0 3px rgba(212, 148, 58, 0.35)); opacity: 0.8; }
      100% { filter: drop-shadow(0 0 8px rgba(212, 148, 58, 0.6)); opacity: 1; }
    }

    .marquee::after {
      content: '';
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(212, 148, 58, 0.12);
      border-radius: 10px;
      pointer-events: none;
    }

    .marquee-top {
      font-family: 'Special Elite', cursive;
      font-size: 0.8rem;
      letter-spacing: 8px;
      text-transform: uppercase;
      color: var(--amber-dim);
      margin-bottom: 14px;
      opacity: 0.7;
      text-shadow: 0 0 8px rgba(212,148,58,0.15);
    }
    .marquee h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.6rem, 4.5vw, 2.8rem);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 3px;
      color: var(--bone);
      text-shadow:
        0 0 30px rgba(184, 55, 46, 0.25),
        0 0 60px rgba(184, 55, 46, 0.06),
        2px 2px 0 var(--curtain);
      animation: titlePulse 5s ease-in-out infinite alternate;
    }
    .marquee h1 em {
      font-style: italic;
      color: var(--amber);
    }
    @keyframes titlePulse {
      0%   { text-shadow: 0 0 30px rgba(184,55,46,0.25), 0 0 60px rgba(184,55,46,0.06), 2px 2px 0 var(--curtain); }
      100% { text-shadow: 0 0 40px rgba(184,55,46,0.35), 0 0 80px rgba(212,148,58,0.06), 2px 2px 0 var(--curtain); }
    }
    .marquee-subtitle {
      font-family: 'Nosifer', cursive;
      font-weight: 400;
      font-size: clamp(1.1rem, 2.5vw, 1.6rem);
      color: var(--amber);
      letter-spacing: 7px;
      margin-top: 14px;
      opacity: 0.95;
      text-shadow: 0 0 12px rgba(232,169,62,0.25), 0 2px 8px rgba(17,14,10,0.18);
    }

    .project-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      width: 92%;
      max-width: 960px;
      margin: 40px auto 60px auto;
    }

    .project-card {
      position: relative;
      background: var(--card-bg);
      border-radius: 12px;
      overflow: hidden;
      aspect-ratio: 16 / 10;
      cursor: pointer;
      transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s ease;
      box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(232,169,62,0.1);
    }
    .project-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      border: 1px solid rgba(232,169,62,0.12);
      z-index: 5;
      pointer-events: none;
      transition: border-color 0.25s ease;
    }
    .project-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 30px var(--gold-glow), 0 0 0 1px rgba(232,169,62,0.25);
    }
    .project-card:hover::before {
      border-color: rgba(232,169,62,0.35);
    }

    .card-stripe {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: repeating-linear-gradient(90deg,
        var(--blood) 0px, var(--blood) 8px,
        var(--amber-dim) 8px, var(--amber-dim) 16px
      );
      z-index: 4;
    }

    .project-thumb {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      background-size: cover;
      background-position: center;
      background-color: var(--curtain-deep);
      z-index: 1;
      transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    }
    .project-card:hover .project-thumb {
      transform: scale(1.05);
    }

    .project-card::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 60%;
      background: linear-gradient(to top, rgba(17,14,10,0.94) 25%, rgba(17,14,10,0.4) 65%, transparent 100%);
      z-index: 2;
      pointer-events: none;
    }

    .card-text {
      position: absolute;
      left: 0; bottom: 0;
      z-index: 3;
      padding: 18px 20px;
      width: 100%;
    }
    .project-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--amber);
      letter-spacing: 0.5px;
      margin-bottom: 3px;
      text-shadow: 0 1px 6px rgba(0,0,0,0.7);
    }
    .project-dev {
      font-family: 'Special Elite', cursive;
      font-size: 0.82rem;
      color: var(--bone);
      letter-spacing: 1px;
      margin-bottom: 3px;
      opacity: 0.9;
    }
    .project-desc {
      font-family: 'Cabin', sans-serif;
      font-size: 0.78rem;
      color: var(--bone-dim);
      line-height: 1.45;
    }

    /* ━━ Footer ━━ */
    .footer {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 24px;
      font-family: 'Special Elite', cursive;
      font-size: 0.72rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--amber-dim);
      opacity: 0.4;
      border-top: 1px solid rgba(212,148,58,0.06);
    }

    /* ━━ Responsive ━━ */
    @media (max-width: 560px) {
      .project-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .marquee {
        padding: 28px 20px 24px;
      }
      .marquee h1 { font-size: 1.2rem; letter-spacing: 2px; }
      .marquee { padding: 28px 20px 24px; }
    }