/* ============================================================
   DANUM HERO SYSTEM v3 — 8 Unique Animated Layouts
   File: assets/css/hero-v3.css
   ============================================================ */

/* ── Reset & Base ── */
.dh3-hero *, .dh3-hero *::before, .dh3-hero *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}
.dh3-hero {
    font-family: 'Sora', sans-serif;
    position: relative; overflow: hidden;
    width: 100%;
}

/* ── Shared: Badge ── */
.dh3-badge {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 100px; padding: 5px 14px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 14px;
}
.dh3-badge-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    animation: dh3pulse 2s infinite;
}
@keyframes dh3pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── Shared: Title ── */
.dh3-h1 {
    font-weight: 800; line-height: 1.1;
    letter-spacing: -.025em; margin: 0 0 10px;
}
.dh3-h1 em { font-style: normal; }
.dh3-desc { line-height: 1.75; margin-bottom: 18px; }

/* ── Shared: Buttons ── */
.dh3-btns {
    display: flex; gap: 10px; flex-wrap: wrap;
    align-items: center; margin-bottom: 24px;
}
.dh3-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--dh3-gold, #cdec6a); color: #0a0a0a;
    padding: 11px 22px; border-radius: 10px;
    font-weight: 800; font-size: .88rem;
    text-decoration: none; border: none; cursor: pointer;
    font-family: 'Sora', sans-serif; transition: all .2s;
}
.dh3-btn-primary:hover { opacity: .88; transform: translateY(-2px); }
.dh3-btn-primary svg { width: 14px; height: 14px; flex-shrink: 0; }

.dh3-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; color: rgba(255,255,255,.65);
    border: 1.5px solid rgba(255,255,255,.22);
    padding: 11px 18px; border-radius: 10px;
    font-weight: 600; font-size: .88rem;
    text-decoration: none; cursor: pointer;
    font-family: 'Sora', sans-serif; transition: all .2s;
}
.dh3-btn-ghost:hover { border-color: rgba(255,255,255,.5); color: #fff; }

.dh3-btn-ghost-light {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; color: var(--dh3-green, #003830);
    border: 1.5px solid var(--dh3-green, #003830);
    padding: 11px 18px; border-radius: 10px;
    font-weight: 600; font-size: .88rem;
    text-decoration: none; cursor: pointer;
    font-family: 'Sora', sans-serif; transition: all .2s;
}
.dh3-btn-ghost-light:hover {
    background: var(--dh3-green, #003830); color: #fff;
}

/* ── Shared: Stats ── */
.dh3-stats { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.dh3-stat strong {
    display: block; font-size: 1.65rem; font-weight: 800;
    line-height: 1; margin-bottom: 3px;
}
.dh3-stat span {
    font-size: .63rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
}
.dh3-sep {
    width: 1px; height: 34px; flex-shrink: 0; align-self: center;
}

/* ── Shared: Left text column ── */
.dh3-txt {
    padding: 72px 40px 72px 0;
    display: flex; flex-direction: column;
    justify-content: center;
    position: relative; z-index: 2;
    width: 52%;
}
/* ── Shared: Right art column ── */
.dh3-art {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 48%; overflow: hidden;
}

/* ══════════════════════════════════════════════
   LAYOUT 1 — ORBITAL RINGS
   Dark bg, concentric animated rings
══════════════════════════════════════════════ */
.dh3-l1 {
    background: var(--dh3-bg1, #07110d);
    min-height: 90vh; display: flex; align-items: center;
}
.dh3-l1 .dh3-txt {
    color: #fff;
}
.dh3-l1 .dh3-badge {
    background: rgba(205,236,106,.1); color: var(--dh3-gold, #cdec6a);
    border: 1px solid rgba(205,236,106,.2);
}
.dh3-l1 .dh3-h1 { color: #fff; }
.dh3-l1 .dh3-h1 em { color: var(--dh3-gold, #cdec6a); }
.dh3-l1 .dh3-desc { color: rgba(255,255,255,.45); font-size: .95rem; }
.dh3-l1 .dh3-stat strong { color: var(--dh3-gold, #cdec6a); }
.dh3-l1 .dh3-stat span { color: rgba(255,255,255,.3); }
.dh3-l1 .dh3-sep { background: rgba(255,255,255,.1); }
/* Dot grid bg */
.dh3-l1-dotgrid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 30px 30px;
}
/* Ring art */
.dh3-l1 .dh3-art {
    display: flex; align-items: center; justify-content: center;
}
.dh3-ring-wrap {
    position: relative; width: 380px; height: 380px;
}
.dh3-ring {
    position: absolute; border-radius: 50%; border-style: solid;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.dh3-ring-1 { width: 360px; height: 360px; border: 1px solid rgba(23,104,84,.18); }
.dh3-ring-2 { width: 280px; height: 280px; border: 1px solid rgba(23,104,84,.28); }
.dh3-ring-3 { width: 200px; height: 200px; border: 1.5px solid rgba(23,104,84,.42); }
.dh3-ring-4 { width: 120px; height: 120px; border: 2px solid rgba(23,104,84,.62); }
.dh3-ring-5 {
    width: 60px; height: 60px;
    background: rgba(23,104,84,.7); border: none;
}
.dh3-ring-core {
    position: absolute; width: 24px; height: 24px; border-radius: 50%;
    background: var(--dh3-gold, #cdec6a);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
/* Orbiting dots */
.dh3-orbit {
    position: absolute; border-radius: 50%; border: 1px solid transparent;
    top: 50%; left: 50%;
}
.dh3-orbit-dot {
    position: absolute; border-radius: 50%;
    top: -5px; left: 50%; margin-left: -5px;
}
@keyframes dh3spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* ══════════════════════════════════════════════
   LAYOUT 2 — MORPHING BLOBS
   White bg, organic animated blobs right
══════════════════════════════════════════════ */
.dh3-l2 {
    background: #fff; min-height: 90vh;
    display: flex; align-items: stretch;
}
.dh3-l2 .dh3-txt { color: #0a0a0a; }
.dh3-l2 .dh3-badge {
    background: rgba(23,104,84,.07); color: var(--dh3-green, #003830);
    border: 1px solid rgba(23,104,84,.15);
}
.dh3-l2 .dh3-h1 { color: #0a0a0a; }
.dh3-l2 .dh3-h1 em { color: var(--dh3-green, #003830); }
.dh3-l2 .dh3-desc { color: #555; }
.dh3-l2 .dh3-stat strong { color: #0a0a0a; }
.dh3-l2 .dh3-stat span { color: #bbb; }
.dh3-l2 .dh3-sep { background: #ddd; }
.dh3-l2 .dh3-art {
    background: #f0f9f5;
    display: flex; align-items: center; justify-content: center;
}
.dh3-blob-wrap {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.dh3-blob {
    position: absolute; border-radius: 50%;
}
.dh3-blob-1 {
    width: 280px; height: 320px;
    background: var(--dh3-green, #003830);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    animation: dh3morph1 8s ease-in-out infinite;
}
.dh3-blob-2 {
    width: 200px; height: 240px;
    background: var(--dh3-gold, #cdec6a); opacity: .75;
    border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;
    animation: dh3morph2 6s ease-in-out infinite;
    right: 20px; bottom: 30px;
}
.dh3-blob-3 {
    width: 130px; height: 150px;
    background: rgba(23,104,84,.22);
    border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
    animation: dh3morph1 10s ease-in-out infinite reverse;
    top: 20px; right: 10px;
}
@keyframes dh3morph1 {
    0%,100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
    33%      { border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%; }
    66%      { border-radius: 70% 30% 50% 50% / 30% 70% 50% 60%; }
}
@keyframes dh3morph2 {
    0%,100% { border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%; }
    50%      { border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%; }
}
.dh3-blob-label {
    position: relative; z-index: 3; text-align: center; color: #fff;
    pointer-events: none;
}
.dh3-blob-label strong {
    display: block; font-size: 1.8rem; font-weight: 800; font-family: 'Sora',sans-serif;
}
.dh3-blob-label span {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; opacity: .7; font-family: 'Sora',sans-serif;
}

/* ══════════════════════════════════════════════
   LAYOUT 3 — NEON CIRCUIT BOARD
   Very dark, animated circuit lines + packets
══════════════════════════════════════════════ */
.dh3-l3 {
    background: #050d09; min-height: 90vh; display: flex; align-items: center;
}
.dh3-l3 .dh3-txt { color: #fff; }
.dh3-l3 .dh3-badge {
    background: rgba(205,236,106,.08); color: var(--dh3-gold, #cdec6a);
    border: 1px solid rgba(205,236,106,.2);
}
.dh3-l3 .dh3-h1 { color: #fff; }
.dh3-l3 .dh3-h1 em {
    font-style: normal; display: block;
    background: linear-gradient(90deg, var(--dh3-green,#003830), var(--dh3-gold,#cdec6a));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.dh3-l3 .dh3-desc { color: rgba(255,255,255,.38); font-size: .93rem; }
.dh3-l3 .dh3-stat strong { color: var(--dh3-gold, #cdec6a); }
.dh3-l3 .dh3-stat span { color: rgba(255,255,255,.28); }
.dh3-l3 .dh3-sep { background: rgba(255,255,255,.08); }
/* Circuit art */
.dh3-circuit-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(23,104,84,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,104,84,.06) 1px, transparent 1px);
    background-size: 40px 40px;
}
.dh3-circuit-glow {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.dh3-circuit-glow-1 {
    width: 200px; height: 200px; top: -60px; right: -40px;
    background: rgba(23,104,84,.15);
}
.dh3-circuit-glow-2 {
    width: 140px; height: 140px; bottom: -30px; left: -20px;
    background: rgba(205,236,106,.05);
}
/* Wires */
.dh3-wire-h {
    position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(23,104,84,.6), rgba(205,236,106,.8), rgba(23,104,84,.4), transparent);
    animation: dh3flow 3s linear infinite;
}
.dh3-wire-v {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(23,104,84,.5), rgba(205,236,106,.6), transparent);
    animation: dh3flowv 4s ease-in-out infinite;
}
@keyframes dh3flow { 0%{opacity:.4} 50%{opacity:1} 100%{opacity:.4} }
@keyframes dh3flowv { 0%{opacity:.3} 50%{opacity:1} 100%{opacity:.3} }
/* Nodes */
.dh3-node {
    position: absolute; border-radius: 50%;
    background: var(--dh3-gold, #cdec6a);
    box-shadow: 0 0 8px rgba(205,236,106,.6);
    animation: dh3nodepulse 2s ease-in-out infinite;
}
.dh3-node-sm {
    background: rgba(23,104,84,.9);
    box-shadow: 0 0 5px rgba(23,104,84,.7);
    animation: dh3nodepulse 3s ease-in-out infinite;
}
@keyframes dh3nodepulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.7);opacity:.4} }
/* Data packets */
.dh3-packet {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: var(--dh3-gold, #cdec6a);
    animation: dh3packet 2.5s linear infinite;
}
@keyframes dh3packet {
    0%  { opacity:0; transform:translateX(0); }
    8%  { opacity:1; }
    92% { opacity:1; }
    100%{ opacity:0; transform:translateX(180px); }
}
/* Chips */
.dh3-chip {
    position: absolute;
    background: rgba(23,104,84,.15); border: 1px solid rgba(23,104,84,.3);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.dh3-chip-lbl {
    font-size: .62rem; font-weight: 700; color: rgba(23,104,84,.8);
    letter-spacing: .06em; font-family: monospace;
}
/* Code tags */
.dh3-code-tag {
    position: absolute;
    background: rgba(23,104,84,.15); border: 1px solid rgba(23,104,84,.3);
    border-radius: 6px; padding: 4px 10px;
    font-size: .6rem; font-weight: 700; color: rgba(205,236,106,.8);
    font-family: monospace; animation: dh3tagfloat 4s ease-in-out infinite;
}
@keyframes dh3tagfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ══════════════════════════════════════════════
   LAYOUT 4 — CONSTELLATION
   Very dark, JS-generated stars + connections
══════════════════════════════════════════════ */
.dh3-l4 {
    background: #060d0a; min-height: 90vh;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.dh3-l4 .dh3-txt {
    width: 50%; padding-bottom: 40px;
}
.dh3-l4 .dh3-badge {
    background: rgba(205,236,106,.1); color: var(--dh3-gold, #cdec6a);
    border: 1px solid rgba(205,236,106,.18);
}
.dh3-l4 .dh3-h1 { color: #fff; }
.dh3-l4 .dh3-h1 em { color: var(--dh3-gold, #cdec6a); }
.dh3-l4 .dh3-desc { color: rgba(255,255,255,.4); font-size: .92rem; }
.dh3-l4 .dh3-stat strong { color: var(--dh3-gold, #cdec6a); font-size: 1.4rem; }
.dh3-l4 .dh3-stat span { color: rgba(255,255,255,.28); }
.dh3-l4 .dh3-sep { background: rgba(255,255,255,.1); }
.dh3-l4-content {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 32px; align-items: end;
    padding: 32px 40px 48px;
}
.dh3-l4-sky { position: absolute; inset: 0; overflow: hidden; }
.dh3-star {
    position: absolute; border-radius: 50%;
    background: var(--dh3-gold, #cdec6a);
    animation: dh3twinkle 3s ease-in-out infinite;
}
@keyframes dh3twinkle { 0%,100%{opacity:.8;transform:scale(1)} 50%{opacity:.2;transform:scale(.5)} }
.dh3-conn {
    position: absolute; height: 1px;
    background: rgba(23,104,84,.3);
    transform-origin: left center;
}
/* Service metric cards */
.dh3-metric {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
}
.dh3-metric:last-child { margin-bottom: 0; }
.dh3-metric strong { display: block; font-size: .88rem; font-weight: 700; color: #fff; font-family:'Sora',sans-serif; }
.dh3-metric span { font-size: .72rem; color: rgba(255,255,255,.35); font-family:'Sora',sans-serif; }

/* ══════════════════════════════════════════════
   LAYOUT 5 — CARD MOSAIC
   White bg, right side service cards grid
══════════════════════════════════════════════ */
.dh3-l5 {
    background: #fafaf8; min-height: 90vh;
    display: flex; align-items: stretch;
}
.dh3-l5 .dh3-txt { color: #0a0a0a; }
.dh3-l5 .dh3-l5-accent {
    position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--dh3-green,#003830), var(--dh3-gold,#cdec6a), var(--dh3-green,#003830));
}
.dh3-l5 .dh3-badge {
    background: rgba(23,104,84,.07); color: var(--dh3-green, #003830);
    border: 1px solid rgba(23,104,84,.15);
}
.dh3-l5 .dh3-h1 { color: #0a0a0a; }
.dh3-l5 .dh3-h1 em { color: var(--dh3-green, #003830); }
.dh3-l5 .dh3-desc { color: #555; }
.dh3-l5 .dh3-stat strong { color: #0a0a0a; }
.dh3-l5 .dh3-stat span { color: #bbb; }
.dh3-l5 .dh3-sep { background: #ddd; }
.dh3-l5 .dh3-art {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr); gap: 3px; overflow: hidden;
}
.dh3-mosaic-card {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px; position: relative; overflow: hidden;
    cursor: pointer; transition: filter .25s;
}
.dh3-mosaic-card:hover { filter: brightness(1.1); }
.dh3-mosaic-card.tall { grid-row: span 2; }
.dh3-mosaic-shape {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.dh3-card-ico { font-size: 28px; display: block; line-height: 1; margin-bottom: 6px; }
.dh3-card-name { font-size: .78rem; font-weight: 700; display: block; line-height: 1.2; font-family:'Sora',sans-serif; }
.dh3-card-sub  { font-size: .65rem; opacity: .58; margin-top: 2px; display: block; font-family:'Sora',sans-serif; }
.dh3-card-tag {
    position: absolute; top: 10px; right: 10px;
    background: rgba(205,236,106,.2); border: 1px solid rgba(205,236,106,.3);
    border-radius: 20px; padding: 2px 8px;
    font-size: .6rem; font-weight: 700; color: var(--dh3-gold,#cdec6a);
    letter-spacing: .06em; font-family:'Sora',sans-serif;
}
.dh3-c-green { background: var(--dh3-green,#003830); color: #fff; }
.dh3-c-gold  { background: var(--dh3-gold,#cdec6a); color: #0a0a0a; }
.dh3-c-gold .dh3-card-tag { background:rgba(0,0,0,.1); border-color:rgba(0,0,0,.15); color:rgba(0,0,0,.5); }
.dh3-c-dark  { background: #0a0a0a; color: #fff; }
.dh3-c-olive { background: #1a4030; color: var(--dh3-gold,#cdec6a); }
.dh3-c-light { background: #e8f5ef; color: #0a0a0a; }
.dh3-c-light .dh3-card-tag { background:rgba(23,104,84,.12); border-color:rgba(23,104,84,.2); color:#003830; }

/* ══════════════════════════════════════════════
   LAYOUT 6 — DNA HELIX
   Dark bg, JS-generated double helix
══════════════════════════════════════════════ */
.dh3-l6 {
    background: #060b09; min-height: 90vh; display: flex; align-items: center;
}
.dh3-l6 .dh3-txt { color: #fff; }
.dh3-l6 .dh3-badge {
    background: rgba(205,236,106,.08); color: var(--dh3-gold,#cdec6a);
    border: 1px solid rgba(205,236,106,.18);
}
.dh3-l6 .dh3-h1 { color: #fff; }
.dh3-l6 .dh3-h1 em { color: var(--dh3-gold,#cdec6a); display: block; }
.dh3-l6 .dh3-desc { color: rgba(255,255,255,.38); font-size: .93rem; }
.dh3-l6 .dh3-stat strong { color: var(--dh3-gold,#cdec6a); }
.dh3-l6 .dh3-stat span { color: rgba(255,255,255,.25); }
.dh3-l6 .dh3-sep { background: rgba(255,255,255,.08); }
.dh3-l6 .dh3-art {
    display: flex; align-items: center; justify-content: center;
}
.dh3-dna-canvas { position: relative; width: 300px; height: 440px; }
.dh3-dna-dot {
    position: absolute; border-radius: 50%;
}
.dh3-dna-rung {
    position: absolute; border-radius: 1px;
    animation: dh3rungfade 2.5s ease-in-out infinite;
}
@keyframes dh3rungfade { 0%,100%{opacity:.5} 50%{opacity:1} }
.dh3-dna-glow {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.dh3-dna-tag {
    position: absolute;
    background: rgba(23,104,84,.15); border: 1px solid rgba(23,104,84,.3);
    border-radius: 6px; padding: 4px 10px;
    font-size: .6rem; font-weight: 700; color: rgba(205,236,106,.8);
    font-family: monospace; white-space: nowrap;
    animation: dh3tagfloat 4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════
   LAYOUT 7 — GLASS PANELS
   Dark bg, 3D tilted analytics cards
══════════════════════════════════════════════ */
.dh3-l7 {
    background: #080c0a; min-height: 90vh; display: flex; align-items: center;
}
.dh3-l7 .dh3-txt { color: #fff; }
.dh3-l7 .dh3-badge {
    background: rgba(205,236,106,.08); color: var(--dh3-gold,#cdec6a);
    border: 1px solid rgba(205,236,106,.18);
}
.dh3-l7 .dh3-h1 { color: #fff; }
.dh3-l7 .dh3-h1 em { color: var(--dh3-gold,#cdec6a); }
.dh3-l7 .dh3-desc { color: rgba(255,255,255,.38); font-size: .93rem; }
.dh3-l7 .dh3-stat strong { color: var(--dh3-gold,#cdec6a); }
.dh3-l7 .dh3-stat span { color: rgba(255,255,255,.25); }
.dh3-l7 .dh3-sep { background: rgba(255,255,255,.08); }
.dh3-l7 .dh3-art {
    display: flex; align-items: center; justify-content: center;
    perspective: 900px;
}
.dh3-panels-wrap {
    position: relative; width: 260px; height: 420px;
}
.dh3-glass-panel {
    position: absolute; border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    padding: 18px; overflow: hidden;
    cursor: pointer; transition: border-color .25s, background .25s;
}
.dh3-glass-panel:hover {
    border-color: rgba(205,236,106,.3); background: rgba(23,104,84,.1);
}
.dh3-shimmer {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
    animation: dh3shimmer 3s ease-in-out infinite;
    border-radius: inherit; pointer-events: none;
}
@keyframes dh3shimmer { 0%{left:-50%} 100%{left:150%} }
.dh3-panel-ico { font-size: 22px; display: block; margin-bottom: 8px; }
.dh3-panel-title {
    font-size: .82rem; font-weight: 700; color: #fff; display: block;
    margin-bottom: 3px; font-family:'Sora',sans-serif;
}
.dh3-panel-sub {
    font-size: .7rem; color: rgba(255,255,255,.35); display: block;
    font-family:'Sora',sans-serif;
}
.dh3-panel-val {
    font-size: 1.5rem; font-weight: 800; color: var(--dh3-gold,#cdec6a);
    display: block; margin-top: 8px; font-family:'Sora',sans-serif;
}
.dh3-pbar-wrap { margin-top: 8px; }
.dh3-pbar-lbl {
    display: flex; justify-content: space-between; margin-bottom: 3px;
}
.dh3-pbar-lbl span { font-size: .65rem; color: rgba(255,255,255,.35); font-family:'Sora',sans-serif; }
.dh3-pbar-lbl strong { font-size: .65rem; color: var(--dh3-gold,#cdec6a); font-weight: 700; font-family:'Sora',sans-serif; }
.dh3-pbar {
    height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden;
    margin-bottom: 6px;
}
.dh3-pbar-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--dh3-green,#003830), var(--dh3-gold,#cdec6a));
    transition: width 1.5s ease;
}
.dh3-stars { color: var(--dh3-gold,#cdec6a); font-size: .88rem; letter-spacing: 1px; }
.dh3-bg-glow {
    position: absolute; border-radius: 50%;
    background: rgba(23,104,84,.12); pointer-events: none;
}

/* ══════════════════════════════════════════════
   LAYOUT 8 — WAVEFORM EQ
   Dark bg, animated audio bars + EQ meters
══════════════════════════════════════════════ */
.dh3-l8 {
    background: #003830; min-height: 90vh; display: flex; align-items: center;
}
.dh3-l8 .dh3-txt { color: #fff; }
.dh3-l8 .dh3-badge {
    background: rgba(205,236,106,.08); color: var(--dh3-gold,#cdec6a);
    border: 1px solid rgba(205,236,106,.18);
}
.dh3-l8 .dh3-h1 { color: #fff; }
.dh3-l8 .dh3-h1 em { color: var(--dh3-gold,#cdec6a); display: block; }
.dh3-l8 .dh3-desc { color: rgba(255,255,255,.38); font-size: .93rem; }
.dh3-l8 .dh3-stat strong { color: var(--dh3-gold,#cdec6a); }
.dh3-l8 .dh3-stat span { color: rgba(255,255,255,.25); }
.dh3-l8 .dh3-sep { background: rgba(255,255,255,.08); }
.dh3-l8 .dh3-art {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
}
/* Scan line */
.dh3-scanline {
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: rgba(205,236,106,.15);
    animation: dh3scan 4s linear infinite; pointer-events: none;
}
@keyframes dh3scan { 0%{top:0} 100%{top:100%} }
/* Freq rings */
.dh3-freq-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(23,104,84,.22);
    animation: dh3ringpulse 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes dh3ringpulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.07);opacity:1} }
/* Wave display */
.dh3-wave-box {
    background: rgba(23,104,84,.08); border: 1px solid rgba(23,104,84,.22);
    border-radius: 12px; padding: 12px 16px; width: 88%;
    position: relative; overflow: hidden;
}
.dh3-wave-lbl {
    display: flex; justify-content: space-between; margin-bottom: 8px;
    font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(23,104,84,.7); font-family: monospace;
}
.dh3-wave-lbl span { color: rgba(205,236,106,.6); }
.dh3-bars-row {
    display: flex; align-items: flex-end; gap: 2px; height: 60px;
}
.dh3-bar {
    flex: 1; border-radius: 2px;
    background: linear-gradient(180deg, var(--dh3-gold,#cdec6a), var(--dh3-green,#003830));
    transform-origin: bottom;
    animation: dh3bar 1s ease-in-out infinite alternate;
}
@keyframes dh3bar { 0%{transform:scaleY(var(--lo,0.2))} 100%{transform:scaleY(var(--hi,0.9))} }
/* EQ panel */
.dh3-eq-panel {
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
    border-radius: 10px; padding: 10px 14px; width: 88%;
}
.dh3-eq-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.dh3-eq-row:last-child { margin-bottom: 0; }
.dh3-eq-lbl {
    font-size: .6rem; color: rgba(255,255,255,.3);
    width: 30px; text-align: right; font-family: monospace;
}
.dh3-eq-track {
    flex: 1; height: 4px; background: rgba(255,255,255,.04);
    border-radius: 2px; overflow: hidden;
}
.dh3-eq-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--dh3-green,#003830), var(--dh3-gold,#cdec6a));
    animation: dh3eq 2s ease-in-out infinite alternate;
}
@keyframes dh3eq { 0%{width:var(--lo,40%)} 100%{width:var(--hi,85%)} }
.dh3-eq-val {
    font-size: .6rem; color: rgba(205,236,106,.6);
    width: 26px; font-family: monospace; font-weight: 700;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .dh3-txt { width: 100% !important; padding: 60px 32px !important; }
    .dh3-art { display: none !important; }
    .dh3-l4-content { grid-template-columns: 1fr !important; }
    .dh3-l4-content .dh3-right-panel { display: none; }
    .dh3-l5 .dh3-art { display: none !important; }
    .dh3-l5 { min-height: auto; }
}
@media (max-width: 640px) {
    .dh3-h1 { font-size: clamp(1.8rem, 6vw, 2.8rem) !important; }
    .dh3-stats { gap: 14px; }
    .dh3-btns { flex-wrap: wrap; }
}