/* MarketConnect Platform Overview — self-contained, collision-free (.po-* only).
   Brand green from the DB-driven --web-primary; deep greens are fixed. */
.po {
    --po-green: var(--web-primary, #1a7a43);
    --po-green-rgb: var(--web-primary-rgb, 26, 122, 67);
    --po-deep: #0e3f24;
    --po-deep-2: #12592f;
    --po-ink: #16261c;
    --po-muted: #5b6b62;
    --po-line: rgba(var(--po-green-rgb), .16);
    --po-tint: rgba(var(--po-green-rgb), .06);
    --po-tint-2: rgba(var(--po-green-rgb), .12);
    color: var(--po-ink);
    font-family: inherit;
}
.po *, .po *::before, .po *::after { box-sizing: border-box; }
.po-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---------- Hero ---------- */
.po-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 500px at 15% -10%, rgba(255,255,255,.10), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(var(--po-green-rgb), .55), transparent 55%),
        linear-gradient(160deg, var(--po-deep) 0%, var(--po-deep-2) 55%, var(--po-green) 130%);
    color: #fff;
    padding: 96px 20px 150px;
    text-align: center;
}
.po-hero::before, .po-hero::after {
    content: ""; position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.06); pointer-events: none;
}
.po-hero::before { width: 320px; height: 320px; top: -90px; left: -80px; }
.po-hero::after { width: 240px; height: 240px; bottom: -60px; right: -40px; background: rgba(255,255,255,.05); }
.po-hero__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.po-crumb { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 22px; }
.po-crumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.po-crumb a:hover { color: #fff; }
.po-eyebrow {
    display: inline-block; letter-spacing: .14em; text-transform: uppercase;
    font-size: .78rem; font-weight: 700; color: #bff0d0; margin-bottom: 16px;
}
.po-hero__title {
    font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.05; font-weight: 800;
    letter-spacing: -.02em; margin: 0 auto 20px; color: #fff; max-width: 20ch;
}
.po-hero__lede {
    font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.55;
    color: rgba(255,255,255,.85); max-width: 62ch; margin: 0 auto 28px;
}
.po-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.po-pill {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
    color: #fff; font-weight: 600; font-size: .9rem; padding: 7px 15px; border-radius: 999px;
    backdrop-filter: blur(2px);
}
.po-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Buttons ---------- */
.po-btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: 12px;
    border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.po-btn:hover { transform: translateY(-2px); text-decoration: none; }
.po-btn--light { background: #fff; color: var(--po-deep); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.po-btn--light:hover { color: var(--po-deep); }
.po-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.po-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.po-btn--primary { background: var(--po-green); color: #fff; box-shadow: 0 8px 20px rgba(var(--po-green-rgb), .3); }
.po-btn--primary:hover { color: #fff; }

/* ---------- Stat cards (overlap hero) ---------- */
.po-stats {
    position: relative; z-index: 3; max-width: 1000px; margin: -96px auto 0; padding: 0 20px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.po-stat {
    background: #fff; border: 1px solid var(--po-line); border-radius: 18px;
    padding: 26px 22px; text-align: center;
    box-shadow: 0 20px 45px rgba(15, 40, 25, .12);
}
.po-stat__num { font-size: 2.6rem; font-weight: 800; color: var(--po-green); line-height: 1; }
.po-stat__label { color: var(--po-muted); font-size: .95rem; margin-top: 8px; }

/* ---------- Sections ---------- */
.po-section { padding: 66px 20px; }
.po-section--tint { background: var(--po-tint); }
.po-section__eyebrow { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--po-green); margin-bottom: 10px; }
.po-h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.01em; color: var(--po-ink); margin: 0 0 14px; }
.po-sub { color: var(--po-muted); font-size: 1.08rem; line-height: 1.6; max-width: 64ch; margin: 0 0 8px; }

/* ---------- Steps ---------- */
.po-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.po-step {
    background: #fff; border: 1px solid var(--po-line); border-radius: 18px; padding: 26px 22px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.po-step:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,40,25,.10); border-color: var(--po-green); }
.po-step__n {
    width: 46px; height: 46px; border-radius: 12px; background: var(--po-tint-2); color: var(--po-green);
    font-weight: 800; display: grid; place-items: center; margin-bottom: 16px; font-size: 1.05rem;
}
.po-step h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 8px; color: var(--po-ink); }
.po-step p { color: var(--po-muted); font-size: .96rem; line-height: 1.55; margin: 0; }

/* ---------- Split (text + card) ---------- */
.po-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.po-split--rev .po-split__media { order: -1; }
.po-note {
    display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 22px;
    background: var(--po-tint-2); color: #1f6b3e; font-weight: 600; font-size: .9rem;
    padding: 8px 15px; border-radius: 999px;
}
.po-note .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--po-green); display: inline-block; }

.po-usecols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.po-uc h4 { font-size: 1rem; font-weight: 700; color: var(--po-ink); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-uc .po-tag { background: var(--po-tint-2); color: #1f6b3e; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.po-uc ol { margin: 0; padding: 0; list-style: none; counter-reset: uc; }
.po-uc li { position: relative; padding: 0 0 12px 34px; color: var(--po-muted); font-size: .95rem; line-height: 1.5; counter-increment: uc; }
.po-uc li::before {
    content: counter(uc); position: absolute; left: 0; top: -1px;
    width: 22px; height: 22px; border-radius: 50%; background: var(--po-green); color: #fff;
    font-size: .74rem; font-weight: 700; display: grid; place-items: center;
}
.po-uc--full { grid-column: 1 / -1; }

/* ---------- Feature card ---------- */
.po-card { background: #fff; border: 1px solid var(--po-line); border-radius: 20px; padding: 26px; box-shadow: 0 14px 34px rgba(15,40,25,.07); }
.po-featlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.po-featlist li { display: flex; gap: 14px; align-items: flex-start; }
.po-featlist .ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--po-tint-2); display: grid; place-items: center; }
.po-featlist .ic svg { width: 16px; height: 16px; color: var(--po-green); }
.po-featlist b { display: block; color: var(--po-ink); font-size: 1rem; margin-bottom: 2px; }
.po-featlist span { color: var(--po-muted); font-size: .92rem; line-height: 1.45; }

/* ---------- Revenue + values ---------- */
.po-revenue { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.po-rev { background: #fff; border: 1px solid var(--po-line); border-radius: 18px; padding: 26px; }
.po-rev .num { width: 48px; height: 48px; border-radius: 12px; background: var(--po-green); color: #fff; font-weight: 800; font-size: 1.4rem; display: grid; place-items: center; margin-bottom: 14px; }
.po-rev b { display: block; font-size: 1.15rem; color: var(--po-ink); margin-bottom: 6px; }
.po-rev span { color: var(--po-muted); font-size: .96rem; line-height: 1.55; }
.po-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.po-values .po-card h3 { margin: 0 0 8px; font-size: 1.12rem; color: var(--po-ink); }
.po-values .po-card p { margin: 0; color: var(--po-muted); font-size: .95rem; line-height: 1.55; }

/* ---------- App download cards ---------- */
.po-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.po-app {
    background: #fff; border: 1px solid var(--po-line); border-radius: 20px;
    padding: 30px 24px; text-align: center; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 14px 34px rgba(15,40,25,.07);
    transition: transform .16s ease, box-shadow .16s ease;
}
.po-app:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(15,40,25,.13); }
.po-app__icon { width: 88px; height: 88px; border-radius: 22px; object-fit: cover; box-shadow: 0 10px 24px rgba(15,40,25,.18); margin-bottom: 16px; }
.po-app h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; color: var(--po-ink); }
.po-app p { margin: 0 0 18px; color: var(--po-muted); font-size: .95rem; line-height: 1.5; flex: 1; }
.po-play {
    display: inline-flex; align-items: center; gap: 11px; background: #111; color: #fff;
    border-radius: 12px; padding: 11px 20px; text-decoration: none;
    transition: transform .12s ease, background .12s ease;
}
.po-play:hover { transform: translateY(-2px); color: #fff; background: #000; }
.po-play svg { width: 24px; height: 24px; flex-shrink: 0; }
.po-play .t { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.po-play .t small { font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; opacity: .82; }
.po-play .t b { font-size: 1.02rem; font-weight: 600; }
.po-play--sm { padding: 9px 16px; }
.po-play--sm svg { width: 20px; height: 20px; }

/* inline app chip inside persona sections */
.po-getapp { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.po-getapp__icon { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; box-shadow: 0 8px 18px rgba(15,40,25,.16); }

/* ---------- CTA band ---------- */
.po-cta {
    position: relative; overflow: hidden; border-radius: 26px; text-align: center; color: #fff;
    padding: 60px 24px;
    background:
        radial-gradient(700px 300px at 100% 0%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(150deg, var(--po-deep) 0%, var(--po-green) 130%);
}
.po-cta h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; margin: 0 0 12px; }
.po-cta p { color: rgba(255,255,255,.86); max-width: 60ch; margin: 0 auto 26px; font-size: 1.05rem; }
.po-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Reveal animation ---------- */
.po-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.po-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .po-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .po-steps { grid-template-columns: repeat(2, 1fr); }
    .po-split { grid-template-columns: 1fr; gap: 30px; }
    .po-split--rev .po-split__media { order: 0; }
    .po-values { grid-template-columns: 1fr; }
    .po-apps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .po-hero { padding: 66px 18px 130px; }
    .po-stats { grid-template-columns: 1fr; margin-top: -84px; }
    .po-revenue { grid-template-columns: 1fr; }
    .po-usecols { grid-template-columns: 1fr; }
    .po-section { padding: 48px 18px; }
}
@media (max-width: 480px) {
    .po-steps { grid-template-columns: 1fr; }
}