/*
Theme: ekupony
Template: page-wtyczka.php
Description: Style dla strony "Wtyczka" (/ekupony-wtyczka-do-kodow-rabatowych/)
*/

/* === PAGE-SPECIFIC OVERRIDES === */
body.page-id-74935 #secondary,
body.page-id-74935 .widget-area { display: none !important; }
body.page-id-74935 .entry-title { display: none !important; }
body.page-id-74935 .entry-footer { display: none !important; }
body.page-id-74935 .yoast-breadcrumbs { display: none !important; }
body.page-id-74935 #primary { max-width: 100% !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; }
body.page-id-74935 .entry-content { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.page-id-74935 article.page { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.page-id-74935 .site-main { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; }
body.page-id-74935 #page { overflow-x: hidden; }

/* === LANDING PAGE STYLES === */
.ek-wtyczka-wrap {
    --accent: #E84C2B;
    --accent-dark: #d4401f;
    --accent-light: #FFF3EF;
    --accent-mid: #FFD9C8;
    --dark: #1A1A2E;
    --text: #404040;
    --text-light: #6B6B6B;
    --muted: #999;
    --border: #EBEBEB;
    --bg: #FFFFFF;
    --bg-light: #F8F8F8;
    --green: #1A7A47;
    --green-bg: #EDFAF3;
    --r: 16px;
    --rs: 10px;
    font-family: 'Figtree', sans-serif;
    color: var(--text);
    line-height: 1.65;
    background: var(--bg);
}
.ek-wtyczka-wrap *,
.ek-wtyczka-wrap *::before,
.ek-wtyczka-wrap *::after { box-sizing: border-box; }

/* ── HERO ── */
.ek-wtyczka-wrap .hero-section {
    max-width: 1100px; margin: 0 auto; padding: 60px 2rem 40px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.ek-wtyczka-wrap .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--accent); font-size: .75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 1rem;
}
.ek-wtyczka-wrap .hero-eyebrow::before { content: '●'; font-size: .5rem; }
.ek-wtyczka-wrap h1.hero-title {
    font-family: 'Figtree', sans-serif;
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 700; line-height: 1.2;
    color: var(--dark); margin-bottom: 1.25rem;
}
.ek-wtyczka-wrap h1.hero-title span.accent { color: var(--accent); }
.ek-wtyczka-wrap .hero-desc { font-size: 1rem; color: var(--text-light); line-height: 1.8; margin-bottom: 2rem; }

.ek-wtyczka-wrap .hero-browsers { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.5rem; }
.ek-wtyczka-wrap .browser-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 50px;
    font-size: .875rem; font-weight: 600; text-decoration: none;
    transition: all .2s; cursor: pointer; border: none;
}
.ek-wtyczka-wrap .browser-btn.primary { background: var(--accent); color: #fff; }
.ek-wtyczka-wrap .browser-btn.primary:hover { background: var(--accent-dark); }
.ek-wtyczka-wrap .browser-btn.secondary { background: var(--bg-light); color: var(--dark); border: 1px solid var(--border); }
.ek-wtyczka-wrap .browser-btn.secondary:hover { border-color: var(--accent); color: var(--accent); }
.ek-wtyczka-wrap .browser-icon { width: 20px; height: 20px; flex-shrink: 0; }
.ek-wtyczka-wrap .hero-rating { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; }
.ek-wtyczka-wrap .stars { color: #F59E0B; letter-spacing: 2px; font-size: .9rem; }

/* Extension mockup */
.ek-wtyczka-wrap .ext-mockup-wrap { display: flex; justify-content: center; align-items: center; }
.ek-wtyczka-wrap .ext-mockup {
    width: 340px; background: #fff; border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 4px 40px rgba(0,0,0,.08), 0 0 0 1px var(--border);
}
.ek-wtyczka-wrap .ext-header { background: var(--accent); padding: 14px 16px 12px; display: flex; align-items: center; justify-content: space-between; }
.ek-wtyczka-wrap .ext-header-left { display: flex; align-items: center; gap: 10px; }
.ek-wtyczka-wrap .ext-logo-box { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ek-wtyczka-wrap .ext-logo-box svg { width: 20px; height: 20px; }
.ek-wtyczka-wrap .ext-header-title { font-weight: 800; font-size: .95rem; color: #fff; line-height: 1; }
.ek-wtyczka-wrap .ext-header-sub { font-size: .72rem; color: rgba(255,255,255,.75); margin-top: 2px; }
.ek-wtyczka-wrap .ext-close { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: .8rem; }
.ek-wtyczka-wrap .ext-search { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ek-wtyczka-wrap .ext-search input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: .82rem; color: var(--text-light); font-family: 'Figtree', sans-serif; outline: none; background: var(--bg-light); }
.ek-wtyczka-wrap .ext-store-row { padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.ek-wtyczka-wrap .ext-store-logo { width: 40px; height: 40px; border-radius: 8px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.ek-wtyczka-wrap .ext-store-name { font-weight: 700; font-size: .92rem; color: var(--dark); }
.ek-wtyczka-wrap .ext-store-count { font-size: .78rem; color: var(--accent); font-weight: 600; margin-top: 2px; }
.ek-wtyczka-wrap .ext-tabs { display: flex; border-bottom: 1px solid var(--border); }
.ek-wtyczka-wrap .ext-tab { flex: 1; padding: 10px; text-align: center; font-size: .8rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.ek-wtyczka-wrap .ext-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ek-wtyczka-wrap .ext-badge-tab { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; margin-left: 4px; }
.ek-wtyczka-wrap .ext-coupons { padding: 8px 0; max-height: 260px; overflow: hidden; }
.ek-wtyczka-wrap .ext-coupon { border-left: 3px solid var(--accent); margin: 6px 12px; padding: 10px 12px; background: var(--bg-light); border-radius: 0 var(--rs) var(--rs) 0; position: relative; }
.ek-wtyczka-wrap .ext-coupon.copied { border-left-color: var(--green); background: var(--green-bg); }
.ek-wtyczka-wrap .ext-discount { position: absolute; left: -3px; top: 10px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 0 4px 4px 0; }
.ek-wtyczka-wrap .ext-coupon.copied .ext-discount { background: var(--green); }
.ek-wtyczka-wrap .ext-coupon-title { font-size: .82rem; font-weight: 600; margin-bottom: 4px; padding-left: 30px; line-height: 1.3; color: var(--dark); }
.ek-wtyczka-wrap .ext-coupon-meta { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--muted); padding-left: 30px; margin-bottom: 8px; }
.ek-wtyczka-wrap .ext-coupon-meta .ok { color: var(--green); }
.ek-wtyczka-wrap .ext-coupon-actions { display: flex; gap: 8px; }
.ek-wtyczka-wrap .ext-btn { flex: 1; padding: 7px 10px; border-radius: 6px; font-size: .78rem; font-weight: 700; border: none; cursor: pointer; font-family: 'Figtree', sans-serif; }
.ek-wtyczka-wrap .ext-btn-copy { background: var(--accent); color: #fff; }
.ek-wtyczka-wrap .ext-btn-go { background: transparent; border: 1px solid var(--border); color: var(--text-light); }
.ek-wtyczka-wrap .ext-copied-box { background: var(--green-bg); border: 1px dashed var(--green); border-radius: 6px; padding: 7px 10px; font-size: .8rem; font-weight: 700; color: var(--green); margin-bottom: 6px; }
.ek-wtyczka-wrap .ext-footer-strip { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .72rem; color: var(--muted); }
.ek-wtyczka-wrap .ext-footer-strip a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* ── STATS STRIP ── */
.ek-wtyczka-wrap .stats-strip { background: var(--accent); padding: 28px 2rem; }
.ek-wtyczka-wrap .stats-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.ek-wtyczka-wrap .stat-item { text-align: center; border-right: 1px solid rgba(255,255,255,.2); padding: 0 1rem; }
.ek-wtyczka-wrap .stat-item:last-child { border-right: none; }
.ek-wtyczka-wrap .stat-num { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }
.ek-wtyczka-wrap .stat-label { font-size: .82rem; color: rgba(255,255,255,.75); margin-top: 6px; }

/* ── SECTIONS ── */
.ek-wtyczka-wrap .ek-section { max-width: 1100px; margin: 0 auto; padding: 60px 2rem; }
.ek-wtyczka-wrap .section-header { margin-bottom: 2.5rem; }
.ek-wtyczka-wrap .section-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.ek-wtyczka-wrap h2.section-title { font-family: 'Figtree', sans-serif; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 700; line-height: 1.25; color: var(--dark); }
.ek-wtyczka-wrap h2.section-title span.accent { color: var(--accent); }
.ek-wtyczka-wrap .section-desc { font-size: .95rem; color: var(--text-light); margin-top: .75rem; max-width: 560px; line-height: 1.8; }

/* ── HOW IT WORKS ── */
.ek-wtyczka-wrap .how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ek-wtyczka-wrap .how-steps { display: flex; flex-direction: column; }
.ek-wtyczka-wrap .how-step { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.ek-wtyczka-wrap .how-step:last-child { border-bottom: none; }
.ek-wtyczka-wrap .how-step:hover .how-step-num { background: var(--accent); color: #fff; border-color: var(--accent); }
.ek-wtyczka-wrap .how-step-num { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; color: var(--dark); flex-shrink: 0; transition: all .2s; }
.ek-wtyczka-wrap .how-step-title { font-weight: 700; font-size: .95rem; margin-bottom: 4px; color: var(--dark); }
.ek-wtyczka-wrap .how-step-desc { font-size: .875rem; color: var(--text-light); line-height: 1.7; }
.ek-wtyczka-wrap .how-visual { display: flex; justify-content: center; }

/* Mini mockup */
.ek-wtyczka-wrap .mini-mockup { width: 300px; background: #fff; border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.06); }
.ek-wtyczka-wrap .mini-header { background: var(--accent); padding: 12px 14px; display: flex; align-items: center; gap: 8px; }
.ek-wtyczka-wrap .mini-logo { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.ek-wtyczka-wrap .mini-logo svg { width: 16px; height: 16px; }
.ek-wtyczka-wrap .mini-title { font-weight: 800; font-size: .85rem; color: #fff; }
.ek-wtyczka-wrap .mini-sub { font-size: .68rem; color: rgba(255,255,255,.7); margin-top: 1px; }
.ek-wtyczka-wrap .mini-body { padding: 12px; }
.ek-wtyczka-wrap .mini-store { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.ek-wtyczka-wrap .mini-store-logo { width: 36px; height: 36px; border-radius: 8px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; color: var(--muted); }
.ek-wtyczka-wrap .mini-store-name { font-weight: 700; font-size: .85rem; color: var(--dark); }
.ek-wtyczka-wrap .mini-store-count { font-size: .72rem; color: var(--accent); font-weight: 600; }
.ek-wtyczka-wrap .mini-coupon { background: var(--accent-light); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; border-left: 3px solid var(--accent); }
.ek-wtyczka-wrap .mini-pct { display: inline-block; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 4px; margin-bottom: 4px; }
.ek-wtyczka-wrap .mini-c-title { font-size: .78rem; font-weight: 600; margin-bottom: 6px; color: var(--dark); }
.ek-wtyczka-wrap .mini-c-copied { background: var(--green-bg); border: 1px dashed var(--green); border-radius: 6px; padding: 6px 10px; font-size: .75rem; font-weight: 700; color: var(--green); margin-bottom: 6px; }
.ek-wtyczka-wrap .mini-c-btn { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 8px; font-size: .78rem; font-weight: 700; font-family: 'Figtree', sans-serif; cursor: pointer; }
.ek-wtyczka-wrap .mini-c-btn.copied-btn { background: var(--green); }

/* ── FEATURES ── */
.ek-wtyczka-wrap .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ek-wtyczka-wrap .feature-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 1.75rem 1.5rem; transition: border-color .2s, box-shadow .2s; }
.ek-wtyczka-wrap .feature-card:hover { border-color: var(--accent-mid); box-shadow: 0 8px 24px rgba(232,76,43,.06); }
.ek-wtyczka-wrap .feature-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.3rem; }
.ek-wtyczka-wrap .feature-title { font-weight: 700; font-size: .95rem; margin-bottom: .4rem; color: var(--dark); }
.ek-wtyczka-wrap .feature-desc { font-size: .875rem; color: var(--text-light); line-height: 1.7; }

/* ── BROWSERS ── */
.ek-wtyczka-wrap .browsers-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.ek-wtyczka-wrap .browser-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 1.75rem 1rem; text-align: center; transition: all .2s; text-decoration: none; display: block; color: var(--dark); }
.ek-wtyczka-wrap .browser-card:hover { border-color: var(--accent-mid); box-shadow: 0 8px 24px rgba(232,76,43,.06); transform: translateY(-2px); }
.ek-wtyczka-wrap .browser-logo-wrap { width: 56px; height: 56px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.ek-wtyczka-wrap .browser-logo-wrap svg { width: 48px; height: 48px; }
.ek-wtyczka-wrap .browser-name { font-weight: 700; font-size: .88rem; margin-bottom: 4px; color: var(--dark); }
.ek-wtyczka-wrap .browser-store { font-size: .72rem; color: var(--muted); margin-bottom: 1rem; }
.ek-wtyczka-wrap .browser-install-btn { display: block; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 50px; font-size: .78rem; font-weight: 700; text-decoration: none; transition: background .2s; }
.ek-wtyczka-wrap .browser-install-btn:hover { background: var(--accent-dark); }
.ek-wtyczka-wrap .browser-card.wip .browser-install-btn { background: var(--bg-light); color: var(--muted); }
.ek-wtyczka-wrap .browser-soon { font-size: .7rem; color: var(--muted); margin-top: 6px; }

/* ── CTA DARK ── */
.ek-wtyczka-wrap .cta-dark { background: var(--dark); border-radius: 20px; padding: 4rem 3rem; text-align: center; max-width: 1100px; margin: 0 auto; position: relative; overflow: hidden; }
.ek-wtyczka-wrap .cta-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(232,76,43,.15) 0%, transparent 70%); pointer-events: none; }
.ek-wtyczka-wrap .cta-dark-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.ek-wtyczka-wrap .cta-dark-title { font-family: 'Figtree', sans-serif; font-weight: 700; font-size: clamp(1.6rem,3.5vw,2.4rem); color: #fff; line-height: 1.2; margin-bottom: .75rem; }
.ek-wtyczka-wrap .cta-dark-title span.accent { color: var(--accent); }
.ek-wtyczka-wrap .cta-dark-desc { color: rgba(255,255,255,.5); font-size: .95rem; max-width: 500px; margin: 0 auto 2rem; line-height: 1.8; }
.ek-wtyczka-wrap .cta-dark-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ek-wtyczka-wrap .cta-dark-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 50px; font-weight: 700; font-size: .9rem; text-decoration: none; transition: all .2s; }
.ek-wtyczka-wrap .cta-dark-btn.main { background: var(--accent); color: #fff; }
.ek-wtyczka-wrap .cta-dark-btn.main:hover { background: var(--accent-dark); }
.ek-wtyczka-wrap .cta-dark-btn.ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.ek-wtyczka-wrap .cta-dark-btn.ghost:hover { background: rgba(255,255,255,.14); }
.ek-wtyczka-wrap .cta-dark-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── SEPARATOR ── */
.ek-wtyczka-wrap .ek-separator { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.ek-wtyczka-wrap .ek-separator hr { border: none; border-top: 1px solid var(--border); }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .ek-wtyczka-wrap .hero-section { grid-template-columns: 1fr; gap: 2rem; }
    .ek-wtyczka-wrap .ext-mockup-wrap { display: none; }
    .ek-wtyczka-wrap .stats-inner { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
    .ek-wtyczka-wrap .stat-item { border-right: none; }
    .ek-wtyczka-wrap .how-grid { grid-template-columns: 1fr; }
    .ek-wtyczka-wrap .how-visual { display: none; }
    .ek-wtyczka-wrap .features-grid { grid-template-columns: 1fr 1fr; }
    .ek-wtyczka-wrap .browsers-grid { grid-template-columns: repeat(3,1fr); }
    .ek-wtyczka-wrap .cta-dark { padding: 3rem 2rem; }
}
@media (max-width: 600px) {
    .ek-wtyczka-wrap .features-grid { grid-template-columns: 1fr; }
    .ek-wtyczka-wrap .browsers-grid { grid-template-columns: 1fr 1fr; }
    .ek-wtyczka-wrap .hero-section { padding: 40px 1rem 20px; }
    .ek-wtyczka-wrap .ek-section { padding: 40px 1rem; }
    .ek-wtyczka-wrap .cta-dark { border-radius: 16px; margin: 0 1rem; }
}


/* ──────────────────────────────────────────────
   NOTIFICATIONS & SETTINGS
   ────────────────────────────────────────────── */
.notif-settings-row { margin-bottom: 2rem; }
@media (max-width: 768px) {
    .notif-settings-row { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .notif-settings-row > div[style*="order:-1"] { order: 0 !important; }
}

/* ──────────────────────────────────────────────
   INTERACTIVE DEMO
   ────────────────────────────────────────────── */
.demo-steps-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.demo-step-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--border);
    border-radius: 50px;
    background: #fff;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);
    transition: all .3s;
    font-family: inherit;
}
.demo-step-btn:hover { border-color: var(--accent); color: var(--accent); }
.demo-step-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.demo-step-btn.active .demo-step-num { background: rgba(255,255,255,.25); color: #fff; }
.demo-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 700;
    font-size: .75rem;
}
.demo-step-arrow { color: var(--muted); font-size: .85rem; }

.demo-browser {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    max-width: 800px;
    margin: 0 auto;
}
.demo-browser-chrome {
    background: #f5f5f7;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}
.demo-browser-dots { display: flex; gap: 5px; }
.demo-browser-dots span { width: 10px; height: 10px; border-radius: 50%; }
.demo-browser-dots span:nth-child(1) { background: #ff5f57; }
.demo-browser-dots span:nth-child(2) { background: #ffbd2e; }
.demo-browser-dots span:nth-child(3) { background: #28c840; }
.demo-browser-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 5px 14px;
    border-radius: 8px 8px 0 0;
    font-size: .75rem;
    color: #555;
    border: 1px solid #e0e0e0;
    border-bottom: none;
}
.demo-browser-url {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    margin: 6px 12px 8px;
    font-size: .8rem;
    color: #666;
}
.demo-browser-url span { flex: 1; }
.demo-extension-icon { position: relative; cursor: pointer; margin-left: auto; }
.demo-ext-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    opacity: 0;
    transition: opacity .5s;
}
.demo-ext-badge.visible { opacity: 1; }

.demo-browser-content {
    background: #fff;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}
.demo-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
    display: flex;
    flex-direction: column;
}
.demo-scene.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

.demo-ali-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}
.demo-ali-search {
    flex: 1;
    display: flex;
    align-items: center;
    border: 2px solid #FF6A00;
    border-radius: 6px;
    padding: 4px 4px 4px 10px;
    gap: 6px;
}
.demo-ali-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    flex: 1;
}
.demo-ali-product {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
}
.demo-ali-product-img {
    height: 80px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.demo-ali-product-title {
    font-size: .72rem;
    color: #333;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.demo-ali-product-price { font-size: .8rem; }

.demo-notif-bar {
    background: linear-gradient(135deg, #fff8f6, #fff);
    border-bottom: 2px solid var(--accent);
    padding: 8px 16px;
    animation: slideDown .5s ease;
}
.demo-notif-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.demo-popup {
    width: 320px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    overflow: hidden;
    animation: popupIn .4s ease;
}
.demo-popup-header {
    background: var(--accent);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.demo-popup-store {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}
.demo-popup-tabs {
    display: flex;
    padding: 0 14px;
    border-bottom: 1px solid #eee;
}
.demo-tab {
    padding: 8px 12px;
    font-size: .78rem;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 4px;
}
.demo-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.demo-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: 0 4px;
}
@keyframes popupIn {
    from { transform: scale(.9) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.demo-popup-coupons {
    padding: 8px 14px;
    max-height: 200px;
    overflow: hidden;
}
.demo-coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all .3s;
}
.demo-coupon.copied {
    border-color: #16a34a;
    background: #f0fdf4;
}
.demo-coupon-badge {
    min-width: 40px;
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
    color: var(--accent);
    padding: 4px 6px;
    background: var(--accent-light);
    border-radius: 6px;
}
.demo-coupon-info {
    flex: 1;
    min-width: 0;
}
.demo-coupon-title {
    font-size: .78rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.demo-coupon-meta {
    font-size: .65rem;
    color: #999;
    margin-top: 2px;
}
.demo-coupon-code {
    margin-top: 4px;
    padding: 4px 8px;
    border: 2px dashed #16a34a;
    border-radius: 6px;
    font-size: .75rem;
    color: #16a34a;
    background: #fff;
}
.demo-coupon-btn {
    padding: 5px 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.demo-coupon-btn.promo { background: #FF6A00; }
.demo-coupon-btn.copied-btn { background: #16a34a; }

.demo-hint {
    margin-top: auto;
    padding: 10px 16px;
    background: #fffbeb;
    border-radius: 8px;
    font-size: .82rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #fde68a;
}
.demo-hint-icon { font-size: 1.1rem; }

.demo-auto-btn {
    padding: 10px 24px;
    background: #fff;
    border: 2px solid var(--accent);
    color: var(--accent);
    border-radius: 50px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s;
    font-family: inherit;
}
.demo-auto-btn:hover {
    background: var(--accent);
    color: #fff;
}
.demo-auto-btn.playing {
    background: var(--accent);
    color: #fff;
}

@media (max-width: 768px) {
    .demo-steps-nav { gap: 4px; }
    .demo-step-btn { padding: 6px 10px; font-size: .75rem; }
    .demo-step-arrow { display: none; }
    .demo-ali-products { grid-template-columns: repeat(2, 1fr); }
    .demo-popup { width: 280px; }
    .demo-browser-content { min-height: 350px; }
}


/* ==========================================================
   HERO — dodatkowe elementy (rating + bullets)
   ========================================================== */
.hero-rating-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 1.25rem;
}
.hero-rating-top .stars {
    color: #F59E0B;
    letter-spacing: 2px;
    font-size: 0.82rem;
}
.hero-rating-top span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

.hero-bullets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1.25rem 0 1.75rem;
}
.hero-bullet {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.93rem;
}
.hero-bullet-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(232, 76, 43, 0.22);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-bullet-icon svg {
    width: 12px;
    height: 12px;
}

/* ==========================================================
   BEFORE / AFTER — porównanie cen (AliExpress)
   ========================================================== */
.ek-ba-section {
    padding: 72px 0 80px;
    background: var(--bg-light);
    border-radius: 24px;
    margin: 0 0 40px;
}
.ek-ba-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 32px;
}
.ek-ba-header {
    text-align: center;
    margin-bottom: 3rem;
}
.ek-ba-cards {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}
.ba-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 2rem;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ba-card.before {
    border-color: #F5B8AE;
}
.ba-card.after {
    border-color: var(--green);
    background: var(--green-bg);
    box-shadow: 0 8px 32px rgba(26, 122, 71, 0.08);
}
.ba-label {
    position: absolute;
    top: -12px;
    left: 20px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 50px;
}
.ba-card.before .ba-label {
    background: #FEE2E2;
    color: #B91C1C;
}
.ba-card.after .ba-label {
    background: var(--green);
    color: #fff;
}
.ba-store {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.25rem;
}
.ba-store-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #FF4747;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
}
.ba-store-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--dark);
}
.ba-store-product {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 2px;
}
.ba-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.ba-price-row:last-child {
    border-bottom: none;
    padding-top: 14px;
}
.ba-price-label {
    font-size: 0.84rem;
    color: var(--text-light);
}
.ba-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
}
.ba-card.before .ba-price-final {
    color: #B91C1C;
    font-size: 1.8rem;
    font-weight: 800;
}
.ba-card.after .ba-price-final {
    color: var(--green);
    font-size: 1.9rem;
    font-weight: 800;
}
.ba-price-strike {
    color: var(--muted);
    text-decoration: line-through;
    font-size: 0.95rem;
    font-weight: 500;
}
.ba-arrow {
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ba-arrow svg {
    width: 36px;
    height: 36px;
}
.ba-savings {
    text-align: center;
    margin-top: 2rem;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-light);
    font-style: italic;
}
.ba-savings strong {
    color: var(--green);
    font-weight: 800;
    font-style: normal;
    font-size: 1.25rem;
}

/* ==========================================================
   NOTIFICATIONS & SETTINGS — mini-boxy (kompakt)
   ========================================================== */
.ek-mini-extras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 3rem;
}
.ek-mini-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 28px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ek-mini-box:hover {
    border-color: var(--accent-mid);
    box-shadow: 0 8px 28px rgba(232, 76, 43, 0.08);
    transform: translateY(-3px);
}
.ek-mini-box-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.ek-mini-box-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ek-mini-box-icon svg {
    width: 20px;
    height: 20px;
}
.ek-mini-box-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.3;
}
.ek-mini-box-desc {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: 16px;
}
.ek-mini-preview {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    font-size: 0.82rem;
}
.ek-mini-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.ek-mini-preview-item + .ek-mini-preview-item {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
}
.ek-mini-preview-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}
.ek-mini-preview-text {
    color: var(--text);
    line-height: 1.4;
}
.ek-mini-preview-text small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    margin-top: 1px;
}
.ek-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}
.ek-toggle-row + .ek-toggle-row {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 12px;
}
.ek-toggle-label {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
}
.ek-toggle {
    width: 34px;
    height: 20px;
    background: var(--accent);
    border-radius: 50px;
    position: relative;
    flex-shrink: 0;
}
.ek-toggle.off {
    background: var(--border);
}
.ek-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s;
}
.ek-toggle.off::after {
    right: auto;
    left: 2px;
}

/* ==========================================================
   FAQ
   ========================================================== */
.ek-faq-section {
    padding: 72px 0 80px;
}
.ek-faq-list {
    max-width: 800px;
    margin: 3rem auto 0;
}
.ek-faq-item {
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 0;
}
.ek-faq-item:last-child {
    border-bottom: none;
}
.ek-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark);
    padding-right: 1rem;
    list-style: none;
    line-height: 1.4;
}
.ek-faq-question::-webkit-details-marker {
    display: none;
}
.ek-faq-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    margin-left: 1rem;
}
details[open] > .ek-faq-question .ek-faq-toggle {
    transform: rotate(45deg);
    background: var(--accent);
    color: #fff;
}
.ek-faq-answer {
    color: var(--text-light);
    line-height: 1.75;
    font-size: 0.93rem;
    padding-top: 0.9rem;
}

/* ==========================================================
   RESPONSIVE — nowe widgety
   ========================================================== */
@media (max-width: 960px) {
    .ek-ba-cards {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .ba-arrow {
        transform: rotate(90deg);
    }
    .ek-mini-extras {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ek-ba-section {
        padding: 56px 0 64px;
    }
    .ek-ba-inner {
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .ek-ba-section {
        margin-left: -10px;
        margin-right: -10px;
        border-radius: 18px;
    }
    .ba-card {
        padding: 1.5rem;
    }
}

/* ============================================================
   PHASE 4: NOWE SEKCJE — Features, Extras, FAQ, Browsers, CTA
   ============================================================ */

/* --- FEATURES GRID --- */
.ek-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}
.ek-feature-card {
    background: #fff;
    border: 1px solid var(--border, #EBEBEB);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ek-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(232, 76, 43, 0.08);
    border-color: rgba(232, 76, 43, 0.25);
}
.ek-feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: linear-gradient(135deg, rgba(232,76,43,0.1), rgba(232,76,43,0.05));
    border-radius: 14px;
    margin-bottom: 1rem;
}
.ek-feature-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark, #1A1A2E);
    margin: 0 0 .5rem 0;
}
.ek-feature-card p {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--muted, #666);
    margin: 0;
}
@media (max-width: 900px) {
    .ek-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ek-features-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* --- EXTRAS (Dodatkowe funkcje mini-boxy) --- */
.ek-extras-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    margin-top: 2rem;
}
.ek-extra-card {
    background: #fff;
    border: 1px solid var(--border, #EBEBEB);
    border-radius: 18px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ek-extra-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.06);
}
.ek-extra-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.ek-extra-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--accent, #E84C2B), #ff7a5c);
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 6px 16px rgba(232,76,43,0.25);
}
.ek-extra-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark, #1A1A2E);
    margin: 0 0 .25rem 0;
}
.ek-extra-header p {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--muted, #666);
    margin: 0;
}
.ek-extra-mock {
    background: linear-gradient(135deg, #F8F8F8, #FDFDFD);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Mini notyfikacje */
.ek-mini-notif {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: #fff;
    border: 1px solid #EEE;
    border-left: 3px solid var(--accent, #E84C2B);
    border-radius: 10px;
    padding: .6rem .75rem;
    font-size: .85rem;
}
.ek-mini-notif-alt {
    border-left-color: #4CAF50;
}
.ek-mini-notif-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: linear-gradient(135deg, var(--accent, #E84C2B), #ff7a5c);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .7rem;
}
.ek-mini-notif-alt .ek-mini-notif-icon {
    background: linear-gradient(135deg, #4CAF50, #6ecf70);
}
.ek-mini-notif-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.ek-mini-notif-body strong {
    color: var(--dark, #1A1A2E);
    font-size: .85rem;
}
.ek-mini-notif-body span {
    color: var(--muted, #888);
    font-size: .75rem;
}
.ek-mini-notif-btn {
    background: var(--accent, #E84C2B);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .3rem .6rem;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
}

/* Mini ustawienia */
.ek-mini-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #EEE;
    border-radius: 10px;
    padding: .6rem .85rem;
    font-size: .85rem;
    color: var(--dark, #1A1A2E);
}
.ek-toggle {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #ccc;
    position: relative;
    flex-shrink: 0;
    transition: background .2s;
}
.ek-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ek-toggle-on {
    background: var(--accent, #E84C2B);
}
.ek-toggle-on::after {
    transform: translateX(16px);
}

/* Lista punktów pod mockiem */
.ek-extra-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.ek-extra-points li {
    padding-left: 1.5rem;
    position: relative;
    font-size: .9rem;
    color: var(--muted, #666);
    line-height: 1.4;
}
.ek-extra-points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #4CAF50;
    font-weight: 700;
}
@media (max-width: 800px) {
    .ek-extras-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --- FAQ --- */
.ek-faq-list {
    max-width: 760px;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.ek-faq-item {
    background: #fff;
    border: 1px solid var(--border, #EBEBEB);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.ek-faq-item[open] {
    border-color: rgba(232,76,43,0.3);
    box-shadow: 0 8px 24px rgba(232,76,43,0.06);
}
.ek-faq-item summary {
    padding: 1.15rem 1.5rem;
    font-weight: 600;
    color: var(--dark, #1A1A2E);
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.ek-faq-item summary::-webkit-details-marker { display: none; }
.ek-faq-item summary::after {
    content: '+';
    color: var(--accent, #E84C2B);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    transition: transform .2s;
    flex-shrink: 0;
}
.ek-faq-item[open] summary::after {
    content: '−';
}
.ek-faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--muted, #555);
    line-height: 1.6;
    font-size: .95rem;
}
.ek-faq-answer p { margin: 0; }

/* --- BROWSERS GRID --- */
.ek-browsers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}
.ek-browser-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1rem;
    background: #fff;
    border: 1px solid var(--border, #EBEBEB);
    border-radius: 16px;
    text-decoration: none;
    color: var(--dark, #1A1A2E);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ek-browser-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent, #E84C2B);
    box-shadow: 0 14px 32px rgba(232,76,43,0.1);
}
.ek-browser-logo {
    font-size: 2.5rem;
    margin-bottom: .75rem;
}
.ek-browser-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
}
.ek-browser-card p {
    font-size: .8rem;
    color: var(--muted, #888);
    margin: 0 0 1rem 0;
}
.ek-browser-cta {
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent, #E84C2B);
    margin-top: auto;
}
@media (max-width: 800px) {
    .ek-browsers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ek-browsers-grid { grid-template-columns: 1fr; }
}

/* --- CTA BOX --- */
.ek-cta-box {
    background: linear-gradient(135deg, var(--dark, #1A1A2E) 0%, #2a2a45 100%);
    color: #fff;
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ek-cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(232,76,43,0.25) 0%, transparent 70%);
    pointer-events: none;
}
.ek-cta-box > * { position: relative; z-index: 1; }
.ek-cta-box h2 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 .75rem 0;
    color: #fff;
}
.ek-cta-box p {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.55;
}
.ek-cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.ek-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
    border: none;
}
.ek-btn-primary {
    background: var(--accent, #E84C2B);
    color: #fff;
    box-shadow: 0 8px 20px rgba(232,76,43,0.35);
}
.ek-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(232,76,43,0.5);
    color: #fff;
}
.ek-btn-ghost {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}
.ek-btn-ghost:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* ============================================================
   DEMO: podświetlenie aktywnego kroku — JS dodaje .active
   ============================================================ */
.demo-step-btn.active {
    background: var(--accent, #E84C2B);
    color: #fff;
    border-color: var(--accent, #E84C2B);
}
.demo-step-btn.active .demo-step-num {
    background: #fff;
    color: var(--accent, #E84C2B);
}

/* ============================================================
   Mobile tweaks dla CTA
   ============================================================ */
@media (max-width: 600px) {
    .ek-cta-box { padding: 2rem 1.25rem; }
    .ek-cta-box h2 { font-size: 1.5rem; }
    .ek-cta-box p { font-size: .95rem; }
    .ek-btn { width: 100%; }
}


/* ============================================================
   PHASE 4.2: REALNE MOCKUPY + BROWSER DETECTOR
   ============================================================ */

/* --- Realny pomarańczowy badge (jak w prawdziwej wtyczce) --- */
.ek-real-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #E84C2B, #d8391a);
    color: #fff;
    padding: 8px 10px 8px 8px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(232,76,43,.3);
    width: fit-content;
    max-width: 100%;
}
.ek-real-badge-alt {
    background: linear-gradient(135deg, #2D8F2D, #1f6b1f);
    box-shadow: 0 6px 18px rgba(45,143,45,.25);
}
.ek-real-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #fff;
    color: #E84C2B;
    border-radius: 50%;
    font-size: .9rem;
    flex-shrink: 0;
}
.ek-real-badge-alt .ek-real-badge-icon { color: #2D8F2D; }
.ek-real-badge-cta {
    background: rgba(255,255,255,0.22);
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .72rem;
    white-space: nowrap;
}
.ek-real-badge-close {
    margin-left: 4px;
    opacity: .7;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

/* --- Settings mockup (realny panel) --- */
.ek-settings-mock {
    padding: .9rem;
    gap: .55rem;
}
.ek-mini-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #EEE;
    border-radius: 10px;
    padding: .65rem .85rem;
    font-size: .85rem;
    color: var(--dark, #1A1A2E);
    gap: .75rem;
}
.ek-mini-setting span { flex: 1; }

/* Toggle przycisk (interaktywny) */
.ek-toggle-btn {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #ccc;
    position: relative;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: background .2s;
    padding: 0;
}
.ek-toggle-btn::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ek-toggle-btn.ek-toggle-on {
    background: var(--accent, #E84C2B);
}
.ek-toggle-btn.ek-toggle-on::after {
    transform: translateX(16px);
}

/* Statystyki - 3 kafelki */
.ek-settings-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: .3rem;
}
.ek-stat-tile {
    background: #fff;
    border: 1px solid #EEE;
    border-radius: 10px;
    padding: .7rem .5rem;
    text-align: center;
}
.ek-stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent, #E84C2B);
    line-height: 1;
    margin-bottom: .3rem;
}
.ek-stat-lbl {
    font-size: .65rem;
    color: var(--muted, #888);
    line-height: 1.2;
}

/* Przycisk Zapisz ustawienia */
.ek-save-btn {
    width: 100%;
    background: var(--accent, #E84C2B);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: .75rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: .3rem;
    transition: all .2s ease;
}
.ek-save-btn:hover { background: #d8391a; transform: translateY(-1px); }
.ek-save-btn-saved {
    background: #2D8F2D !important;
    animation: ekSavedPulse .4s ease;
}
@keyframes ekSavedPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Affiliate note */
.ek-affiliate-note {
    text-align: center;
    font-size: .85rem;
    color: var(--muted, #888);
    margin-top: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Browser detector - wyróżniona karta --- */
.ek-detected-browser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: linear-gradient(135deg, var(--accent, #E84C2B), #d8391a);
    color: #fff;
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    margin: 0 auto 2rem;
    max-width: 760px;
    box-shadow: 0 14px 38px rgba(232,76,43,.25);
    flex-wrap: wrap;
}
.ek-detected-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    min-width: 240px;
}
.ek-detected-logo {
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 14px;
    padding: 8px;
    object-fit: contain;
    flex-shrink: 0;
}
.ek-detected-label {
    font-size: .8rem;
    opacity: .85;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .15rem;
}
.ek-detected-name {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
}
.ek-detected-note {
    font-size: .85rem;
    opacity: .9;
    margin-top: .25rem;
}
.ek-detected-browser .ek-btn-primary {
    background: #fff;
    color: var(--accent, #E84C2B);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.ek-detected-browser .ek-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.2);
    color: var(--accent, #E84C2B);
}
.ek-soon-label {
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: .75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.3);
}

/* --- Browser card: logo PNG zamiast emoji --- */
.ek-browser-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin-bottom: .75rem;
}
.ek-browser-note {
    font-size: .7rem;
    color: var(--muted, #999);
    display: block;
    margin: -.5rem 0 .75rem;
    line-height: 1.3;
}
.ek-browser-card.is-current {
    border-color: var(--accent, #E84C2B);
    box-shadow: 0 8px 24px rgba(232,76,43,0.15);
    position: relative;
}
.ek-browser-card.is-current::before {
    content: '✓ Twoja przeglądarka';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent, #E84C2B);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Karta Safari - disabled */
.ek-browser-card-disabled {
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1rem;
    background: #fafafa;
    border: 1px dashed var(--border, #DDD);
    border-radius: 16px;
    color: var(--dark, #1A1A2E);
}
.ek-browser-card-disabled h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
}
.ek-browser-card-disabled p {
    font-size: .8rem;
    color: var(--muted, #888);
    margin: 0 0 1rem 0;
}
.ek-browser-badge-soon {
    background: #ffeadf;
    color: var(--accent, #E84C2B);
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    margin-top: auto;
}

@media (max-width: 600px) {
    .ek-detected-browser { flex-direction: column; text-align: center; padding: 1.5rem 1rem; }
    .ek-detected-left { flex-direction: column; text-align: center; }
    .ek-detected-browser .ek-btn { width: 100%; }
    .ek-settings-stats { grid-template-columns: repeat(3, 1fr); }
    .ek-stat-num { font-size: 1.15rem; }
}