/**
 * Podstrona „Dla agencji i software house'ów" (page-dla-agencji.php).
 * Komponenty wspólne (navbar, section, btn, api-mock, gwar, faq) siedzą
 * w main.css; tutaj tylko układ tej strony.
 */
.ag { overflow-x: clip; }
.ag code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86em; background: #eef1f6; border: 1px solid #dfe4ec; border-radius: 5px; padding: 1px 6px; color: #b91c1c; }

/* ── Hero ── */
.ag-hero {
    position: relative; overflow: hidden; color: #fff;
    padding: 150px 0 80px;
    background:
        radial-gradient(at 80% 10%, rgba(108, 99, 255, .24) 0%, transparent 52%),
        radial-gradient(at 10% 90%, rgba(0, 212, 170, .16) 0%, transparent 52%),
        #0a0e1a;
}
.ag-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%); }
.ag-hero .container { position: relative; z-index: 1; }
.ag-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ag-hero__grid > * { min-width: 0; }
.ag-crumbs { font-size: .82rem; color: #8892a8; margin-bottom: 18px; }
.ag-crumbs a { color: #aeb7c9; text-decoration: none; }
.ag-crumbs span { margin: 0 6px; }
.ag-tag { display: inline-flex; padding: 6px 14px; border-radius: 50px; background: rgba(108, 99, 255, .16); border: 1px solid rgba(108, 99, 255, .4); color: #b8b3ff; font-size: .76rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.ag-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; }
.ag-grad { background: linear-gradient(120deg, #33ffd2, #918aff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #00d4aa; }
.ag-hero__lead { color: #b4bdcf; font-size: 1.05rem; line-height: 1.75; max-width: 560px; margin: 0 0 26px; }
.ag-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ag-hero .btn-secondary { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.ag-hero .btn-secondary:hover { background: rgba(255,255,255,.12); }
.ag-hero__facts { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: repeat(4, auto); gap: 22px; justify-content: start; }
.ag-hero__facts li { font-size: .8rem; color: #8892a8; line-height: 1.4; }
.ag-hero__facts b { display: block; color: #00d4aa; font-family: 'Outfit', system-ui, sans-serif; font-size: 1.15rem; font-weight: 800; }
.ag-hero__visual .api-mock { transform: perspective(1400px) rotateY(-5deg); }
.ag-hero__visual:hover .api-mock { transform: perspective(1400px) rotateY(0); }

/* ── Kroki ── */
.ag-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ag-step { position: relative; background: #fff; border: 1px solid rgba(26, 31, 54, .08); border-radius: 20px; padding: 32px 28px 28px; transition: transform .3s, box-shadow .3s; }
.ag-step:hover { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(10, 14, 26, .1); }
.ag-step__num { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #00d4aa, #00a888); color: #0a0e1a; font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; margin-bottom: 18px; }
.ag-step h3 { font-size: 1.12rem; margin: 0 0 10px; color: #1a1f36; }
.ag-step p { margin: 0; color: #5a6178; line-height: 1.65; font-size: .95rem; }

/* ── Adresy API ── */
.ag-endpoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.ag-ep { background: #fff; border: 1px solid rgba(26, 31, 54, .08); border-radius: 16px; padding: 22px 22px 20px; border-top: 3px solid #00d4aa; }
.ag-ep code { display: inline-block; margin-bottom: 10px; font-size: .84rem; padding: 4px 9px; }
.ag-ep p { margin: 0; color: #5a6178; font-size: .92rem; line-height: 1.6; }
.ag-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 30px; }
.ag-rule { background: #0a0e1a; color: #b9c2d4; border-radius: 16px; padding: 20px 22px; font-size: .93rem; line-height: 1.6; border: 1px solid rgba(255,255,255,.06); }
.ag-rule b { color: #fff; display: block; margin-bottom: 4px; }
.ag-rule code { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #33ffd2; }
.ag-docs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ag-docs__note { color: #8892a8; font-size: .88rem; }

/* ── Współpraca ── */
.ag-wsp { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.ag-wsp .section-title { text-align: left; margin-bottom: 14px; }
.ag-wsp > div > p { color: #5a6178; line-height: 1.75; margin: 0 0 18px; }
.ag-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.ag-list li { position: relative; padding-left: 30px; color: #1a1f36; line-height: 1.6; font-size: .97rem; }
.ag-list li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 212, 170, .14); color: #00a888; font-size: .7rem; font-weight: 900; }
.ag-card { background: #0a0e1a; color: #cfd6e4; border-radius: 22px; padding: 30px 30px 26px; position: sticky; top: 100px; box-shadow: 0 30px 70px rgba(10, 14, 26, .25); }
.ag-card h3 { color: #fff; font-size: 1.1rem; margin: 0 0 14px; }
.ag-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.ag-card li { padding-left: 22px; position: relative; font-size: .92rem; line-height: 1.55; }
.ag-card li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #00d4aa; }
.ag-card__link { color: #33ffd2; font-weight: 700; text-decoration: none; }

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

@media (max-width: 1024px) {
    .ag-hero { padding: 120px 0 60px; }
    .ag-hero__grid { grid-template-columns: 1fr; }
    .ag-hero__visual .api-mock { transform: none; max-width: 600px; }
    .ag-steps, .ag-endpoints { grid-template-columns: repeat(2, 1fr); }
    .ag-wsp { grid-template-columns: 1fr; }
    .ag-card { position: static; }
}
@media (max-width: 768px) {
    .ag-hero { padding: 104px 0 48px; }
    .ag-hero__facts { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .ag-hero__actions .btn { width: 100%; text-align: center; }
    .ag-steps, .ag-endpoints, .ag-rules { grid-template-columns: 1fr; }
    .ag-hero__visual { display: none; }
    .ag-docs .btn { width: 100%; text-align: center; }
}