/**
 * Strona /demo/ (page-demo.php). Komponenty wspólne (navbar, section, btn,
 * gwar) siedzą w main.css; przełącznik i plac zabaw API stylizuje
 * demo.css wtyczki. Tutaj tylko układ tej strony.
 */
.dmo { overflow-x: clip; }

/* ── Hero ── */
.dmo-hero {
    position: relative; overflow: hidden; color: #fff;
    padding: 150px 0 72px;
    background:
        radial-gradient(at 85% 15%, rgba(0, 212, 170, .22) 0%, transparent 50%),
        radial-gradient(at 10% 90%, rgba(108, 99, 255, .18) 0%, transparent 52%),
        #0a0e1a;
}
.dmo-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 100%); }
.dmo-hero .container { position: relative; z-index: 1; }
.dmo-hero--short { padding: 130px 0 56px; }
.dmo-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: end; }
.dmo-hero__grid > * { min-width: 0; }
.dmo-crumbs { font-size: .82rem; color: #8892a8; margin-bottom: 18px; }
.dmo-crumbs a { color: #aeb7c9; text-decoration: none; }
.dmo-crumbs span { margin: 0 6px; }
.dmo-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 50px; background: rgba(0, 212, 170, .12); border: 1px solid rgba(0, 212, 170, .38); color: #33ffd2; font-size: .76rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.dmo-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #00d4aa; box-shadow: 0 0 0 4px rgba(0, 212, 170, .2); animation: dmo-pulse 2s infinite; }
@keyframes dmo-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(0, 212, 170, .2); } 50% { box-shadow: 0 0 0 7px rgba(0, 212, 170, .05); } }
.dmo-hero__title { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.8px; margin: 18px 0 16px; }
.dmo-grad { background: linear-gradient(120deg, #33ffd2, #918aff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #00d4aa; }
.dmo-hero__lead { color: #b4bdcf; font-size: 1.05rem; line-height: 1.75; max-width: 600px; margin: 0 0 26px; }
.dmo-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dmo-hero .btn-secondary { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.dmo-hero .btn-secondary:hover { background: rgba(255,255,255,.12); }
.dmo-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dmo-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px 20px; }
.dmo-stat b { display: block; font-family: 'Outfit', system-ui, sans-serif; font-size: 1.7rem; font-weight: 800; color: #00d4aa; line-height: 1.1; margin-bottom: 4px; }
.dmo-stat span { font-size: .82rem; color: #8892a8; }
.dmo-stat--note b { color: #918aff; }

/* ── Nagłówki sekcji ── */
.dmo-head { margin-bottom: 26px; }
.dmo-head .section-title { text-align: left; margin-bottom: 8px; }
.dmo-head .section-subtitle { text-align: left; margin: 0; max-width: 720px; }
.dmo-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dmo-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dmo-head__actions .btn-secondary { background: #fff; color: #1a1f36; border: 1px solid rgba(26, 31, 54, .18); }
.dmo-head__actions .btn-secondary:hover { border-color: #00a888; color: #00a888; }

/* Treść z wtyczki – neutralizujemy typografię strony tekstowej motywu */
.dmo-plugin { min-width: 0; }
.dmo-plugin table { font-size: .95rem; }

/* ── CTA ── */
.dmo-cta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; background: #0a0e1a; color: #cfd6e4; border-radius: 24px; padding: 44px 48px; box-shadow: 0 30px 70px rgba(10, 14, 26, .22); }
.dmo-cta__title { color: #fff; font-family: 'Outfit', system-ui, sans-serif; font-size: 1.7rem; margin: 0 0 10px; letter-spacing: -.4px; }
.dmo-cta p { margin: 0; line-height: 1.7; }
.dmo-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.dmo-cta .btn-secondary { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }

/* ── Stopka skrócona ── */
.dmo-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 1024px) {
    .dmo-hero { padding: 120px 0 56px; }
    .dmo-hero__grid { grid-template-columns: 1fr; }
    .dmo-stats { grid-template-columns: repeat(4, 1fr); }
    .dmo-cta { grid-template-columns: 1fr; }
    .dmo-cta__actions { justify-content: flex-start; }
}
@media (max-width: 768px) {
    .dmo-hero { padding: 104px 0 44px; }
    .dmo-hero--short { padding: 100px 0 40px; }
    .dmo-stats { grid-template-columns: repeat(2, 1fr); }
    .dmo-hero__actions .btn, .dmo-cta__actions .btn, .dmo-head__actions .btn { width: 100%; text-align: center; }
    .dmo-cta { padding: 30px 24px; }
}