/* service_api_integration.html — extracted internal + inline styles */

.ap-page { --ap: #0891b2; --ap-2: #7c3aed; --ap-rgb: 8, 145, 178; }

.ap-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; border-radius: 2rem;
    background: rgba(var(--ap-rgb), .10); color: var(--ap); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ap-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ap); box-shadow: 0 0 0 4px rgba(var(--ap-rgb), .16); }

.ap-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.ap-trust .t { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #45526b; font-size: .95rem; }
.ap-trust .t i { color: var(--ap); font-size: 1.15rem; }

/* ---- hub-and-spoke diagram (hero) ---- */
.ap-hub { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / .9; }
.ap-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ap-hub__lines line { stroke: rgba(var(--ap-rgb), .4); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; }
.ap-node { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 1px solid #eceef3;
    border-radius: .7rem; padding: .5rem .7rem; font-size: .76rem; font-weight: 700; color: #3f4a5c;
    box-shadow: 0 .6rem 1.4rem rgba(30, 34, 40, .1); white-space: nowrap; z-index: 2; display: flex; align-items: center; gap: .35rem; }
.ap-node.center { top: 50%; left: 50%; width: 96px; height: 96px; border-radius: 50%; padding: 0;
    background: linear-gradient(135deg, var(--ap), var(--ap-2)); color: #fff; font-size: 1.15rem; font-weight: 800;
    justify-content: center; box-shadow: 0 1.2rem 2.4rem rgba(var(--ap-rgb), .38); z-index: 3; }

.ap-badge { position: absolute; border-radius: .8rem; padding: .6rem .9rem; background: rgba(255,255,255,.62);
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,.6); box-shadow: 0 1rem 2.2rem rgba(30,34,40,.16); z-index: 4;
    display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .84rem; }
.ap-badge i { font-size: 1.15rem; color: var(--ap); }
.ap-badge small { display: block; font-weight: 500; color: #8a94a6; font-size: .7rem; }

/* ---- connectors marquee ---- */
.ap-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ap-marquee__track { display: flex; gap: .8rem; width: max-content; animation: ap-scroll 38s linear infinite; }
.ap-marquee:hover .ap-marquee__track { animation-play-state: paused; }
.ap-chip-lg { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 2rem;
    background: #fff; border: 1px solid #e7ebf2; font-weight: 700; font-size: .9rem; color: #45526b; white-space: nowrap; }
@keyframes ap-scroll { to { transform: translateX(-50%); } }

/* ---- integration cards ---- */
.ap-int { height: 100%; background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem; padding: 1.5rem 1.4rem;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .3s; }
.ap-int:hover { transform: translateY(-7px); box-shadow: 0 1.4rem 3rem rgba(30,34,40,.12); border-color: rgba(var(--ap-rgb),.4); }
.ap-int__ic { width: 54px; height: 54px; border-radius: .9rem; background: rgba(var(--ap-rgb), .09);
    display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.ap-int h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .4rem; }
.ap-int p { font-size: .88rem; color: #5c6a82; margin-bottom: .9rem; }
.ap-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ap-chips span { font-size: .7rem; font-weight: 600; color: var(--ap); background: rgba(var(--ap-rgb), .09);
    padding: .22rem .6rem; border-radius: 2rem; }

/* ---- sync explainer ---- */
.ap-sync { background: #fff; border: 1px solid #eef1f6; border-radius: 1.3rem; box-shadow: 0 1.4rem 3rem rgba(30,34,40,.08); overflow: hidden; }
.ap-sync__top { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.4rem;
    background: linear-gradient(100deg, rgba(var(--ap-rgb),.08), rgba(124,58,237,.08)); }
.ap-sync__node { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-weight: 700; font-size: .85rem; color: #2a3242; }
.ap-sync__node .b { width: 46px; height: 46px; border-radius: .8rem; background: #fff; border: 1px solid #e8ebf1;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.ap-sync__arrows { color: var(--ap); font-size: 1.5rem; }
.ap-sync__status { display: flex; align-items: center; gap: .4rem; justify-content: center; padding: .6rem;
    font-size: .78rem; font-weight: 700; color: #16a34a; border-bottom: 1px solid #f0f2f6; }
.ap-sync__status .pulse { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.ap-sync__log { padding: 1rem 1.3rem; }
.ap-sync__log li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; font-size: .86rem; color: #3f4a5c; border-bottom: 1px dashed #eef1f6; list-style: none; }
.ap-sync__log li:last-child { border-bottom: 0; }
.ap-sync__log .ok { color: #16a34a; font-weight: 800; }
.ap-sync__log .tag { margin-left: auto; font-size: .68rem; color: #8a94a6; }

/* ---- why-us checklist panel ---- */
.ap-why { background: #fff; border: 1px solid #eef1f6; border-radius: 1.3rem; padding: 2rem; }
.ap-why__item { display: flex; gap: .8rem; padding: .7rem 0; }
.ap-why__item .ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: .6rem; background: rgba(var(--ap-rgb), .1);
    color: var(--ap); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.ap-why__item h4 { font-size: 1rem; font-weight: 700; margin-bottom: .15rem; }
.ap-why__item p { font-size: .85rem; color: #5c6a82; margin: 0; }

.ap-proof { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.ap-proof .n { font-size: 2.6rem; font-weight: 800; line-height: 1; background: linear-gradient(120deg, var(--ap), var(--ap-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ap-proof span { font-size: .85rem; color: #8a94a6; }

/* ---- testimonials avatar-left ---- */
.ap-quote { height: 100%; background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem; padding: 1.5rem;
    display: flex; gap: 1rem; transition: transform .35s ease, box-shadow .35s ease; }
.ap-quote:hover { transform: translateY(-5px); box-shadow: 0 1.2rem 2.6rem rgba(30,34,40,.1); }
.ap-quote .av { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ap), var(--ap-2)); }
.ap-quote .stars { color: #fab758; letter-spacing: 1px; font-size: .82rem; }
.ap-quote p { font-size: .92rem; color: #3f4a5c; line-height: 1.6; margin: .35rem 0 .7rem; }
.ap-quote h5 { font-size: .95rem; margin: 0; } .ap-quote .loc { font-size: .8rem; color: #8a94a6; }

/* ---- Q&A cards FAQ ---- */
.ap-qa { height: 100%; background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem; padding: 1.5rem 1.4rem; }
.ap-qa h4 { font-size: 1.02rem; font-weight: 700; margin-bottom: .5rem; display: flex; gap: .5rem; }
.ap-qa h4 .q { color: var(--ap); font-weight: 800; }
.ap-qa p { font-size: .89rem; color: #5c6a82; margin: 0; }

@media (prefers-reduced-motion: reduce) { .ap-marquee__track { animation: none; } }
@media (prefers-reduced-motion: no-preference) {
    .reveal-up { animation: reveal-up .6s cubic-bezier(.22,.61,.36,1) both; }
    .reveal-up:nth-child(3n+2) { animation-delay: .08s; } .reveal-up:nth-child(3n+3) { animation-delay: .16s; }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---- extracted inline styles ---- */
.gen-1 { top:9%;left:50%; }
.gen-2 { top:29%;left:89%; }
.gen-3 { top:71%;left:89%; }
.gen-4 { top:91%;left:50%; }
.gen-5 { top:71%;left:11%; }
.gen-6 { top:29%;left:11%; }
.gen-7 { top: -0.5rem; right: -0.5rem; }
.gen-8 { bottom: -0.5rem; left: -0.5rem; }
.gen-9 { height: 130px; }