<section class="ba-dgs" aria-label="Diagonal slash banner demo">
  <span class="section-mark">// Diagonal slash banners</span>

  <div class="banner--promo">
    <div class="slash-badge">
      <div><div class="badge-text">40% OFF</div><div class="badge-sub">Today Only</div></div>
    </div>
    <div class="promo-content">
      <div class="promo-title">Summer Sale — <span>ends midnight</span></div>
      <button class="promo-cta" type="button">Shop Now</button>
    </div>
  </div>

  <div class="banner--new">
    <div class="new-fill" aria-hidden="true"></div>
    <div class="new-left">
      <span class="new-label">New Feature</span>
      <span class="new-divider" aria-hidden="true"></span>
      <div class="new-headline">AI Autocomplete</div>
    </div>
    <div class="new-right">
      <span class="new-desc">Smart code suggestions powered by your team's codebase. Available on all plans from today.</span>
      <button class="new-btn" type="button">Try It →</button>
    </div>
  </div>

  <div class="banner--system">
    <div class="system-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
    <div class="system-body">
      <div class="system-title">Scheduled Maintenance Window</div>
      <div class="system-desc">All services will be unavailable Fri 02:00–05:00 UTC. Please save your work before this window begins.</div>
    </div>
    <div class="system-timestamp">FRI · 02:00 UTC</div>
  </div>

  <div class="banner--countdown">
    <div class="countdown-left">
      <span class="countdown-tag">Offer Ends In</span>
      <span class="countdown-title">Limited Launch Pricing</span>
    </div>
    <div class="countdown-right">
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-h>08</div><div class="cd-label">Hrs</div></div>
      <div class="cd-colon">:</div>
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-m>34</div><div class="cd-label">Min</div></div>
      <div class="cd-colon">:</div>
      <div class="cd-unit"><div class="cd-num" data-ba-dgs-s>17</div><div class="cd-label">Sec</div></div>
    </div>
  </div>
</section>

/* ─── 10 Diagonal Slash Banner — bold geometric streetwear ─────── */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Rajdhani:wght@500;600;700&display=swap');

.ba-dgs {
  --ba-dgs-bg: #111;

  position: relative;
  width: 100%;
  min-height: 640px;
  background: var(--ba-dgs-bg);
  background-image: repeating-linear-gradient(-55deg, transparent 0px, transparent 18px, rgba(255,255,255,0.018) 18px, rgba(255,255,255,0.018) 19px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 48px 16px;
  font-family: 'Rajdhani', sans-serif;
  box-sizing: border-box;
}
.ba-dgs *, .ba-dgs *::before, .ba-dgs *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-dgs .section-mark { font-family: 'Rajdhani', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.12); align-self: flex-start; max-width: 700px; width: 100%; }

.ba-dgs .banner--promo { width: 100%; max-width: 700px; background: #f5f5f5; display: flex; align-items: stretch; overflow: hidden; height: 80px; position: relative; animation: ba-dgs-slideIn 0.45s ease 0.04s both; }
.ba-dgs .slash-badge { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; z-index: 1; padding: 0 40px 0 24px; }
.ba-dgs .slash-badge::before { content: ''; position: absolute; inset: 0; background: #e11d48; transform: skewX(-12deg) scaleX(1.05); transform-origin: right; z-index: -1; }
.ba-dgs .badge-text { font-family: 'Anton', sans-serif; font-size: 28px; color: white; letter-spacing: 0.04em; white-space: nowrap; line-height: 1; }
.ba-dgs .badge-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); display: block; margin-top: 2px; text-align: center; }
.ba-dgs .promo-content { flex: 1; display: flex; align-items: center; padding: 0 24px; gap: 24px; }
.ba-dgs .promo-title { font-family: 'Anton', sans-serif; font-size: 24px; color: #111; letter-spacing: 0.02em; line-height: 1; flex: 1; }
.ba-dgs .promo-title span { color: #e11d48; }
.ba-dgs .promo-cta { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 20px; background: #111; color: white; border: none; cursor: pointer; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background 0.2s; white-space: nowrap; }
.ba-dgs .promo-cta:hover { background: #e11d48; }

.ba-dgs .banner--new { width: 100%; max-width: 700px; background: #0d0d0d; position: relative; overflow: hidden; padding: 0; height: 90px; display: flex; align-items: stretch; animation: ba-dgs-slideIn 0.45s ease 0.12s both; }
.ba-dgs .new-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 48%; background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%); clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); z-index: 0; }
.ba-dgs .new-left { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 0 0 0 24px; width: 44%; }
.ba-dgs .new-label { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 0.22em; color: rgba(255,255,255,0.85); white-space: nowrap; }
.ba-dgs .new-divider { width: 2px; height: 40px; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.ba-dgs .new-headline { font-family: 'Anton', sans-serif; font-size: 22px; color: white; letter-spacing: 0.04em; line-height: 1; flex: 1; }
.ba-dgs .new-right { flex: 1; display: flex; align-items: center; padding: 0 24px; position: relative; z-index: 1; }
.ba-dgs .new-desc { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); line-height: 1.55; max-width: 280px; }
.ba-dgs .new-btn { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 18px; background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.25); cursor: pointer; transition: all 0.2s; white-space: nowrap; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.ba-dgs .new-btn:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }

.ba-dgs .banner--system { width: 100%; max-width: 700px; position: relative; overflow: hidden; background: #1a0a00; padding: 18px 24px; display: flex; align-items: center; gap: 20px; animation: ba-dgs-slideIn 0.45s ease 0.20s both; }
.ba-dgs .banner--system::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-52deg, rgba(234,88,12,0.12) 0px, rgba(234,88,12,0.12) 12px, transparent 12px, transparent 28px); pointer-events: none; }
.ba-dgs .system-icon { flex-shrink: 0; width: 44px; height: 44px; background: #ea580c; clip-path: polygon(50% 0%, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; position: relative; z-index: 1; }
.ba-dgs .system-icon svg { width: 16px; height: 16px; color: white; }
.ba-dgs .system-body { flex: 1; position: relative; z-index: 1; }
.ba-dgs .system-title { font-family: 'Anton', sans-serif; font-size: 18px; color: #fb923c; letter-spacing: 0.06em; line-height: 1; margin-bottom: 4px; }
.ba-dgs .system-desc { font-size: 13px; font-weight: 500; color: rgba(251,146,60,0.6); line-height: 1.5; }
.ba-dgs .system-timestamp { font-family: 'Courier New', monospace; font-size: 10px; color: rgba(234,88,12,0.5); letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; position: relative; z-index: 1; }

.ba-dgs .banner--countdown { width: 100%; max-width: 700px; background: linear-gradient(108deg, #0f172a 0%, #0f172a 52%, #facc15 52%, #fef08a 100%); height: 76px; display: flex; align-items: center; overflow: hidden; position: relative; animation: ba-dgs-slideIn 0.45s ease 0.28s both; }
.ba-dgs .countdown-left { flex: 1; padding: 0 0 0 28px; display: flex; align-items: center; gap: 14px; }
.ba-dgs .countdown-tag { font-family: 'Anton', sans-serif; font-size: 11px; letter-spacing: 0.25em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.ba-dgs .countdown-title { font-family: 'Anton', sans-serif; font-size: 22px; color: white; letter-spacing: 0.04em; line-height: 1; }
.ba-dgs .countdown-right { width: 48%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 28px; }
.ba-dgs .cd-unit { text-align: center; }
.ba-dgs .cd-num { font-family: 'Anton', sans-serif; font-size: 32px; color: #0f172a; line-height: 1; letter-spacing: -0.01em; }
.ba-dgs .cd-label { font-size: 8px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(15,23,42,0.5); margin-top: 1px; }
.ba-dgs .cd-colon { font-family: 'Anton', sans-serif; font-size: 28px; color: rgba(15,23,42,0.35); line-height: 1; margin-top: -6px; }

@keyframes ba-dgs-slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ba-dgs > div { animation: none; } }

(() => {
  const root = document.querySelector('.ba-dgs');
  if (!root) return;
  const h = root.querySelector('[data-ba-dgs-h]');
  const m = root.querySelector('[data-ba-dgs-m]');
  const s = root.querySelector('[data-ba-dgs-s]');
  if (!h || !m || !s) return;
  const end = Date.now() + 8 * 3600000 + 34 * 60000 + 17000;
  const pad = (n) => String(n).padStart(2, '0');
  function tick() {
    const diff = Math.max(0, end - Date.now());
    h.textContent = pad(Math.floor(diff / 3600000));
    m.textContent = pad(Math.floor((diff % 3600000) / 60000));
    s.textContent = pad(Math.floor((diff % 60000) / 1000));
  }
  tick();
  const id = setInterval(tick, 1000);
  root._baDgsTimer = id;
})();