Creative Studio Service Pricing Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="studio-card-572"><div class="banner"><h2>CREATIVE STUDIO</h2><span class="badge">PREMIUM</span></div><div class="body"><p class="intro">Award-winning design studio crafting bold brands and cutting-edge digital experiences.</p><div class="grid-services"><div class="s-item">🎨 UI/UX Design</div><div class="s-item">⚡ Development</div><div class="s-item">🏷️ Brand Identity</div><div class="s-item">⚙️ Marketing</div></div><div class="cut-line">✂️ ---------------------</div><div class="footer"><div class="price"><sup>$</sup>899<small>per project</small></div><button class="btn">GET STARTED</button></div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.studio-card-572 { width: 210px; background: #ffffff; border: 2px solid #000; border-radius: 12px; overflow: hidden; box-shadow: 4px 4px 0 #000; font-family: system-ui, sans-serif; margin: auto; }
.studio-card-572 .banner { background: #ff3b00; padding: 12px; color: #fff; position: relative; border-bottom: 2px solid #000; }
.studio-card-572 h2 { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: 0.5px; line-height: 1.1; width: 65%; }
.studio-card-572 .badge { position: absolute; top: 10px; right: 8px; background: #fff; color: #000; font-size: 7px; font-weight: 900; padding: 2px 6px; border-radius: 4px; border: 1.5px solid #000; transform: rotate(2deg); }
.studio-card-572 .body { padding: 12px; background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px); background-size: 8px 8px; }
.studio-card-572 .intro { font-size: 8px; color: #334155; margin: 0 0 10px; line-height: 1.3; font-weight: 600; }
.studio-card-572 .grid-services { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.studio-card-572 .s-item { font-size: 7px; font-weight: 800; background: #fff; border: 1px solid #000; padding: 4px 6px; border-radius: 6px; }
.studio-card-572 .cut-line { font-size: 8px; color: #94a3b8; text-align: center; margin: 8px 0; }
.studio-card-572 .footer { display: flex; align-items: center; justify-content: space-between; }
.studio-card-572 .price { font-size: 18px; font-weight: 900; color: #000; line-height: 1; }
.studio-card-572 .price sup { font-size: 10px; }
.studio-card-572 .price small { display: block; font-size: 7px; color: #64748b; font-weight: 600; }
.studio-card-572 .btn { background: #4f46e5; color: #fff; font-size: 8px; font-weight: 900; border: 1.5px solid #000; padding: 6px 10px; border-radius: 6px; box-shadow: 2px 2px 0 #000; cursor: pointer; }