.eapi-main { margin-top: 18px; padding: 0px 0 56px; color: #17324d; }
.eapi-section { margin-top: 48px; }

.eapi-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: stretch; }
.eapi-kicker { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(3, 121, 237, .1); color: #0379ed; font-weight: bold; font-size: 13px; }
.eapi-hero h1 { margin-top: 16px; font-size: 42px; line-height: 1.22; color: #0f2740; }
.eapi-hero p { margin-top: 18px; line-height: 1.8; color: #516377; max-width: 720px; }
.eapi-hero-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

.eapi-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 24px; border-radius: 8px; font-size: 15px; font-weight: bold; transition: .2s ease; }
.eapi-btn-primary { background: #0379ed; color: #fff; }
.eapi-btn-primary:hover { background: #0269ce; }
.eapi-btn-ghost { border: 1px solid #0379ed; color: #0379ed; background: #fff; }
.eapi-btn-ghost:hover { background: rgba(3, 121, 237, .06); }

.eapi-metrics { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.eapi-metrics dl { background: #fff; border: 1px solid #e7eef7; border-radius: 12px; padding: 14px 16px; }
.eapi-metrics dt { font-size: 28px; font-weight: bold; color: #0c2238; }
.eapi-metrics dd { margin-top: 6px; color: #617182; font-size: 13px; }

.eapi-hero-visual { padding: 22px; border-radius: 12px; overflow: hidden; }
.eapi-hero-visual h2 { position: relative; z-index: 2; font-size: 24px; color: #0f2d4f; }
.eapi-hero-visual ul { position: relative; z-index: 2; margin-top: 14px; display: grid; gap: 10px; }
.eapi-hero-visual li { display: flex; align-items: center; gap: 8px; color: #43607c; }
.eapi-hero-visual li i { color: #0379ed; }

.eapi-placeholder-img { position: relative; z-index: 2; margin-top: 18px; border: 1px dashed #acc7e8; background: #edf4fd; border-radius: 10px; overflow: hidden; }
.eapi-placeholder-img img { width: 100%; height: 115px; object-fit: cover; display: block; }

.eapi-title { text-align: center; }
.eapi-title h2 { font-size: 30px; color: #102942; }
.eapi-title p { margin-top: 10px; color: #647789; }
.eapi-title-left { text-align: left; }

.eapi-grid { margin-top: 20px; display: grid; gap: 16px; }
.eapi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eapi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.eapi-card { background: #fff; border: 1px solid #e6edf7; border-radius: 12px; padding: 18px; transition: .2s ease; }
.eapi-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(17, 38, 60, .08); }
.eapi-card h3 { font-size: 19px; color: #102a45; }
.eapi-card p { margin-top: 10px; color: #596f85; line-height: 1.8; }

.eapi-split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 20px; align-items: start; }
.eapi-endpoint-list { margin-top: 18px; display: grid; gap: 10px; }
.eapi-endpoint-item { border: 1px solid #e2ebf7; border-radius: 10px; padding: 14px 15px; background: #fff; transition: .2s ease; }
.eapi-endpoint-item b { display: block; color: #12314f; font-size: 16px; }
.eapi-endpoint-item span { display: block; margin-top: 6px; color: #607387; font-size: 13px; }
.eapi-endpoint-item.active,
.eapi-endpoint-item:hover { border-color: #8ebeed; background: #f3f9ff; }

.eapi-split-right { border-radius: 12px; padding: 20px; background: #fff; min-height: 280px; }
.eapi-endpoint-panel { display: none; }
.eapi-endpoint-panel.active { display: block; animation: eapiFade .22s ease; }
.eapi-endpoint-panel h3 { color: #113251; font-size: 22px; }
.eapi-endpoint-panel p { margin-top: 10px; line-height: 1.8; color: #55708a; }
.eapi-endpoint-panel ul { margin-top: 12px; display: grid; gap: 8px; }
.eapi-endpoint-panel li { color: #304e69; background: #f6fbff; border-radius: 8px; padding: 8px 10px; }

.eapi-scene { background: #fff; border: 1px solid #e5edf8; border-radius: 12px; overflow: hidden; }
.eapi-scene-img { border-bottom: 1px solid #e8eff8; background: #eef6ff; }
.eapi-scene-img img { width: 100%; height: 175px; object-fit: cover; display: block; }
.eapi-scene h3 { padding: 16px 16px 0; color: #113352; font-size: 20px; }
.eapi-scene p { padding: 10px 16px 18px; color: #5b7085; line-height: 1.8; }

.eapi-faq-wrap { background: #fff; border: 1px solid #e4ebf6; border-radius: 12px; padding: 30px; }
.eapi-faq-list { margin-top: 18px; display: grid; gap: 10px; }
.eapi-faq-item { border: 1px solid #e8eef8; border-radius: 10px; overflow: hidden; }
.eapi-faq-q { width: 100%; text-align: left; border: 0; cursor: pointer; background: #f8fbff; color: #163553; font-size: 16px; font-weight: bold; padding: 14px 16px; }
.eapi-faq-a { display: none; padding: 12px 16px 16px; color: #597186; line-height: 1.8; background: #fff; }
.eapi-faq-item.active .eapi-faq-a { display: block; }

.eapi-bottom-cta { margin-top: 42px; text-align: center; border-radius: 14px; background: linear-gradient(130deg, #0d4a88 0%, #0a78dd 58%, #34a0ff 100%); padding: 42px 18px; color: #fff; }
.eapi-bottom-cta h2 { font-size: 34px; }
.eapi-bottom-cta p { margin-top: 12px; color: rgba(255, 255, 255, .92); }
.eapi-bottom-cta div { margin-top: 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.eapi-bottom-cta .eapi-btn-primary { background: #fff; color: #0a5dad; }
.eapi-bottom-cta .eapi-btn-primary:hover { background: #f2f7ff; }
.eapi-bottom-cta .eapi-btn-ghost { border-color: rgba(255, 255, 255, .65); color: #fff; background: transparent; }
.eapi-bottom-cta .eapi-btn-ghost:hover { background: rgba(255, 255, 255, .13); }

@keyframes eapiFade {
    from { opacity: .15; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media only screen and (max-width: 1280px) {
    .eapi-main { padding: 20px 16px 46px; }
}

@media only screen and (max-width: 992px) {
    .eapi-hero,
    .eapi-split { grid-template-columns: 1fr; }

    .eapi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eapi-grid-3 { grid-template-columns: 1fr; }
    .eapi-hero h1 { font-size: 34px; }
    .eapi-bottom-cta h2 { font-size: 28px; }
}

@media only screen and (max-width: 768px) {
    .eapi-hero h1 { font-size: 28px; }
    .eapi-title h2 { font-size: 26px; }
    .eapi-grid-4,
    .eapi-metrics { grid-template-columns: 1fr; }
    .eapi-faq-wrap { padding: 20px 14px; }
    .eapi-bottom-cta h2 { font-size: 24px; }
}