.api-page {
            min-height: calc(100vh - 160px);
            background: linear-gradient(180deg, #f7faf9 0%, #eef4f8 100%);
            padding: 2rem 0 4rem;
        }

        .api-hero {
            background:
                radial-gradient(circle at top right, rgba(103,189,80,.25), transparent 34%),
                linear-gradient(135deg, #022166, #0a3b8f);
            border-radius: 32px;
            padding: 3rem;
            color: #fff;
            display: grid;
            grid-template-columns: 1fr 310px;
            gap: 2rem;
            align-items: center;
            box-shadow: 0 24px 55px rgba(2,33,102,.2);
        }

        .api-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .55rem .95rem;
            border-radius: 999px;
            background: rgba(255,255,255,.14);
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .api-badge.dark {
            background: rgba(2,33,102,.08);
            color: #022166;
        }

        .api-hero h1 {
            font-size: clamp(2.4rem, 5vw, 4.5rem);
            font-weight: 900;
            margin-bottom: 1rem;
        }

        .api-hero p {
            max-width: 820px;
            color: rgba(255,255,255,.82);
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .api-hero-card {
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 28px;
            padding: 2rem;
            backdrop-filter: blur(10px);
        }

        .api-hero-card i {
            font-size: 4rem;
            color: #67bd50;
            margin-bottom: 1rem;
            display: block;
        }

        .api-info-card,
        .endpoint-card,
        .integration-panel,
        .sample-request {
            background: #fff;
            border: 1px solid rgba(2,33,102,.08);
            border-radius: 24px;
            box-shadow: 0 14px 35px rgba(2,33,102,.07);
        }

        .api-info-card {
            padding: 1.5rem;
            height: 100%;
        }

        .api-info-card i {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            background: rgba(103,189,80,.12);
            color: #008751;
            display: grid;
            place-items: center;
            font-size: 1.6rem;
            margin-bottom: 1rem;
        }

        .api-info-card h5,
        .endpoint-content h5,
        .integration-step h5 {
            color: #022166;
            font-weight: 900;
        }

        .api-info-card p,
        .endpoint-content p,
        .integration-step p,
        .sample-request p {
            color: #6c757d;
            margin-bottom: 0;
        }

        .api-section {
            margin-top: 4rem;
        }

        .section-heading {
            margin-bottom: 1.5rem;
        }

        .section-heading span {
            color: #008751;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .section-heading h2 {
            color: #022166;
            font-weight: 900;
            margin-top: .35rem;
        }

        .section-heading p {
            color: #6c757d;
            max-width: 720px;
        }

        .endpoint-list {
            display: grid;
            gap: 1rem;
        }

        .endpoint-card {
            padding: 1.25rem;
            display: grid;
            grid-template-columns: 90px 1fr;
            gap: 1rem;
            align-items: start;
        }

        .endpoint-method {
            border-radius: 999px;
            padding: .45rem .75rem;
            font-weight: 900;
            text-align: center;
            font-size: .85rem;
        }

        .endpoint-method.get {
            background: rgba(0,135,81,.12);
            color: #008751;
        }

        .endpoint-method.post {
            background: rgba(2,33,102,.12);
            color: #022166;
        }

        .endpoint-content code {
            display: inline-block;
            background: #f3f6f9;
            color: #0a3b8f;
            padding: .45rem .65rem;
            border-radius: 10px;
            margin-bottom: .5rem;
            font-weight: 700;
        }

        .integration-panel {
            padding: 1.5rem;
            display: grid;
            gap: 1rem;
        }

        .integration-step {
            display: grid;
            grid-template-columns: 70px 1fr;
            gap: 1rem;
            align-items: start;
            padding: 1rem;
            border-radius: 18px;
            background: #f8fafc;
        }

        .integration-step strong {
            width: 54px;
            height: 54px;
            border-radius: 18px;
            background: #022166;
            color: #fff;
            display: grid;
            place-items: center;
            font-weight: 900;
        }

        .sample-request {
            padding: 2rem;
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 2rem;
            align-items: start;
        }

        .sample-request h3 {
            color: #022166;
            font-weight: 900;
            margin-top: 1rem;
        }

        .sample-request pre {
            margin: 0;
            background: #07152f;
            color: #dbeafe;
            padding: 1.5rem;
            border-radius: 20px;
            overflow: auto;
            font-size: .92rem;
        }

        @media (max-width: 991.98px) {
            .api-hero,
            .sample-request {
                grid-template-columns: 1fr;
            }

            .endpoint-card {
                grid-template-columns: 1fr;
            }
        }