.api-page { background: #fff; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px; color: var(--muted); font-size: .82rem; font-weight: 700; }.back-link svg { width: 17px; }
.api-hero { min-height: 750px; padding: calc(var(--header-height) + 68px) 0 92px; overflow: hidden; background: radial-gradient(circle at 86% 19%, rgba(53,152,187,.14), transparent 29%), linear-gradient(180deg, #f7fcfe 0%, #fff 100%); }
.api-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(45px, 6vw, 90px); }
.api-hero h1 { max-width: 690px; margin-bottom: 14px; font-size: clamp(3.3rem, 6vw, 5.8rem); line-height: 1.02; }
.api-hero h2 { max-width: 650px; margin-bottom: 24px; color: var(--blue-700); font-family: "Inter", sans-serif; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.3; letter-spacing: -.03em; }
.api-hero-copy > p { max-width: 650px; font-size: 1.05rem; }
.api-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.api-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: var(--muted); font-size: .77rem; font-weight: 700; }.api-trust span { display: inline-flex; align-items: center; gap: 7px; }.api-trust svg { width: 17px; color: var(--blue-500); }

.api-console { position: relative; max-width: 660px; padding: 22px; color: #d2e4ee; background: linear-gradient(145deg, #061a2f, #0a2a49); border: 1px solid rgba(80,210,238,.2); border-radius: 26px; box-shadow: 0 35px 80px rgba(7,36,64,.22); }
.api-console::before { content: ""; position: absolute; inset: -18px; z-index: -1; border: 1px solid rgba(53,152,187,.12); border-radius: 38px; }
.api-console-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 2px 2px 20px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .76rem; }.api-console-head > strong { color: #fff; text-align: center; }.window-dots { display: flex; gap: 6px; }.window-dots span { width: 8px; height: 8px; background: #5f7890; border-radius: 50%; }.window-dots span:first-child { background: #e66b61; }.window-dots span:nth-child(2) { background: #e7c84a; }.window-dots span:nth-child(3) { background: #40b979; }
.api-online { justify-self: end; display: inline-flex; align-items: center; gap: 6px; color: #8ad9ad; }.api-online i { width: 6px; height: 6px; background: #39c978; border-radius: 50%; box-shadow: 0 0 0 5px rgba(57,201,120,.1); }
.api-request-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 19px 0; padding: 13px 15px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; }.method { padding: 5px 8px; color: #05243c; background: var(--cyan-400); border-radius: 6px; font-size: .65rem; font-weight: 900; }.api-request-line code { color: #fff; font-size: .82rem; }.request-status { color: #68d79b; font-size: .72rem; font-weight: 800; }
.api-console pre { min-height: 230px; margin: 0; padding: 22px; overflow: hidden; background: rgba(2,15,29,.7); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; font-size: .88rem; line-height: 1.85; }.code-muted { color: #7691a5; }.code-key { color: #72d9eb; }.code-value { color: #f2d873; }
.api-console-result { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; margin-top: 17px; padding: 14px; background: rgba(52,190,113,.08); border: 1px solid rgba(73,208,132,.18); border-radius: 12px; }.api-console-result > svg { width: 31px; color: #4cd189; }.api-console-result strong, .api-console-result span { display: block; }.api-console-result strong { color: #fff; font-size: .78rem; }.api-console-result span { color: #89a7ba; font-size: .67rem; }.api-console-result small { color: #6ecb96; font-weight: 700; }
.api-pulse { position: absolute; display: grid; width: 48px; height: 48px; place-items: center; color: var(--blue-700); background: #fff; border: 1px solid #cae7ef; border-radius: 50%; box-shadow: 0 12px 26px rgba(7,36,64,.13), 0 0 0 8px rgba(255,255,255,.7); }.api-pulse svg { width: 21px; }.pulse-one { top: 25%; right: -29px; }.pulse-two { bottom: 22%; left: -27px; }.pulse-three { right: 10%; bottom: -25px; }

.api-access { background: #fff; }.api-access-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.api-access-card { position: relative; min-height: 300px; padding: 30px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-md); }.api-access-card > span { position: absolute; top: 25px; right: 26px; color: #9bafbb; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }.api-access-card > svg { width: 52px; height: 52px; margin-bottom: 37px; padding: 12px; color: var(--blue-700); background: #e1f3f7; border-radius: 15px; }.api-access-card h3 { font-size: 1.2rem; }.api-access-card p { margin-bottom: 22px; font-size: .88rem; }.api-access-card small { color: var(--blue-700); font-weight: 800; }.api-access-card.featured { color: #c7d9e6; background: var(--navy-900); border-color: var(--navy-900); }.api-access-card.featured h3 { color: #fff; }.api-access-card.featured p { color: #a9bfd0; }.api-access-card.featured > svg { color: var(--cyan-400); background: rgba(80,210,238,.09); }.api-access-card.featured small { color: var(--cyan-400); }

.api-flow-section { color: #c7d8e7; background: radial-gradient(circle at 12% 16%, rgba(53,152,187,.16), transparent 28%), var(--navy-950); }.api-flow-section h2 { color: #fff; }.api-flow-section .section-heading { margin-bottom: 65px; }
.api-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }.api-flow::before { content: ""; position: absolute; z-index: 0; top: 41px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, rgba(80,210,238,.2), var(--cyan-400), rgba(80,210,238,.2)); }.api-flow li { position: relative; z-index: 1; text-align: center; }.api-flow-icon { display: grid; width: 82px; height: 82px; margin: 0 auto 20px; place-items: center; color: var(--cyan-400); background: #0c2846; border: 1px solid rgba(80,210,238,.25); border-radius: 50%; box-shadow: 0 0 0 8px var(--navy-950); }.api-flow-icon svg { width: 31px; height: 31px; stroke-width: 1.7; }.api-flow-icon.success { color: #fff; background: #209f55; border-color: #53c77b; }.api-flow li > span { color: var(--cyan-400); font-size: .72rem; font-weight: 800; letter-spacing: .13em; }.api-flow h3 { min-height: 48px; margin: 8px 0 10px; color: #fff; font-size: .94rem; }.api-flow p { max-width: 185px; margin: 0 auto; color: #aabfd1; font-size: .78rem; line-height: 1.5; }

.api-integrators { padding: 115px 0; background: #fff; }.api-integrators-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }.api-integrators-copy > p { font-size: 1.03rem; }.api-integrators-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 30px 0 0; padding: 0; list-style: none; }.api-integrators-copy li { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: .85rem; font-weight: 650; }.api-integrators-copy li svg { width: 19px; color: var(--blue-500); }
.integration-hub { position: relative; min-height: 500px; overflow: hidden; background: radial-gradient(circle at center, rgba(53,152,187,.14), transparent 48%), var(--soft); border: 1px solid var(--line); border-radius: 28px; }.integration-hub::before, .integration-hub::after { content: ""; position: absolute; inset: 50%; width: 330px; height: 330px; border: 1px dashed rgba(53,152,187,.24); border-radius: 50%; transform: translate(-50%,-50%); }.integration-hub::after { width: 220px; height: 220px; border-style: solid; opacity: .5; }.hub-center { position: absolute; z-index: 3; inset: 50% auto auto 50%; display: grid; width: 145px; height: 145px; place-items: center; align-content: center; color: #fff; background: var(--navy-900); border: 7px solid #e4f4f8; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 18px 40px rgba(7,36,64,.22); }.hub-center svg { width: 38px; color: var(--cyan-400); }.hub-center strong, .hub-center span { display: block; }.hub-center strong { margin-top: 5px; }.hub-center span { color: #9fb8c8; font-size: .63rem; }
.hub-node { position: absolute; z-index: 2; display: flex; min-width: 135px; align-items: center; gap: 8px; padding: 11px 13px; color: var(--ink); background: #fff; border: 1px solid #cfe3eb; border-radius: 12px; box-shadow: 0 10px 26px rgba(7,36,64,.09); font-size: .7rem; font-weight: 750; }.hub-node svg { width: 21px; color: var(--blue-700); }.node-system { top: 55px; left: 50%; transform: translateX(-50%); }.node-integrator { left: 35px; top: 50%; transform: translateY(-50%); }.node-sm { right: 35px; top: 50%; transform: translateY(-50%); }.node-data { left: 50%; bottom: 55px; transform: translateX(-50%); }

.api-benefits { background: var(--soft); }.api-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }.api-benefit-card { min-height: 245px; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); }.api-benefit-card > svg { width: 47px; height: 47px; margin-bottom: 34px; padding: 11px; color: var(--blue-700); background: #e3f4f8; border-radius: 14px; }.api-benefit-card h3 { font-size: 1.08rem; }.api-benefit-card p { margin: 0; font-size: .86rem; }

.api-security { padding: 115px 0; background: #fff; }.api-security-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px; }.api-security-panel { position: relative; display: grid; min-height: 440px; place-items: center; overflow: hidden; background: linear-gradient(145deg, #071c34, #0c365b); border-radius: 28px; box-shadow: 0 30px 70px rgba(7,36,64,.2); }.security-ring { display: grid; width: 150px; height: 150px; place-items: center; color: var(--cyan-400); background: rgba(80,210,238,.09); border: 1px solid rgba(80,210,238,.34); border-radius: 50%; box-shadow: 0 0 0 38px rgba(80,210,238,.04), 0 0 0 78px rgba(80,210,238,.022); }.security-ring svg { width: 62px; height: 62px; stroke-width: 1.45; }.security-lines { position: absolute; inset: 0; }.security-lines span { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(80,210,238,.35), transparent); }.security-lines span:first-child { width: 60%; top: 27%; left: -4%; transform: rotate(18deg); }.security-lines span:nth-child(2) { width: 58%; right: -3%; top: 65%; transform: rotate(-22deg); }.security-lines span:nth-child(3) { width: 72%; bottom: 12%; left: 14%; transform: rotate(8deg); }.security-badges { position: absolute; inset: auto 22px 22px; display: flex; justify-content: center; gap: 8px; }.security-badges span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: #cbe2ed; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: .68rem; }.security-badges svg { width: 14px; color: var(--cyan-400); }
.api-security-copy > p { font-size: 1.03rem; }.security-list { display: grid; gap: 13px; margin-top: 28px; }.security-list > div { display: flex; align-items: flex-start; gap: 13px; padding: 15px; background: var(--soft); border: 1px solid var(--line); border-radius: 13px; }.security-list > div > svg { width: 23px; flex: 0 0 23px; color: var(--blue-700); }.security-list strong, .security-list span { display: block; }.security-list span { color: var(--muted); font-size: .8rem; }.security-list strong { margin-bottom: 2px; color: var(--ink); font-size: .85rem; }

.api-cta { padding: 78px 0; color: #c7d8e7; background: var(--navy-900); }.api-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }.api-cta h2 { max-width: 820px; margin-bottom: 14px; color: #fff; font-size: clamp(2.2rem, 3.8vw, 3.8rem); }.api-cta p { margin: 0; }.api-cta-button { color: var(--navy-950); background: var(--gold-500); border-color: var(--gold-500); white-space: nowrap; }.api-cta-button:hover { color: #fff; }

@media (max-width: 1050px) { .api-hero-grid { grid-template-columns: 1fr; }.api-console { max-width: 850px; }.api-benefit-grid { grid-template-columns: 1fr 1fr; }.api-flow { grid-template-columns: repeat(3, 1fr); gap: 45px 20px; }.api-flow::before { display: none; } }
@media (max-width: 820px) { .api-access-grid, .api-integrators-grid, .api-security-grid, .api-cta-inner { grid-template-columns: 1fr; gap: 48px; }.api-integrators-copy ul { grid-template-columns: 1fr; }.api-cta-button { justify-self: start; } }
@media (max-width: 580px) { .api-hero { padding-top: calc(var(--header-height) + 45px); padding-bottom: 65px; }.api-hero h1 { font-size: 3.25rem; }.api-hero-actions { display: grid; }.api-hero-actions .button { width: 100%; }.api-trust, .api-benefit-grid, .api-flow { display: grid; grid-template-columns: 1fr; }.api-console { margin: 0 5px; padding: 13px; border-radius: 18px; }.api-console-head { grid-template-columns: 1fr auto; }.api-console-head > strong { display: none; }.api-console pre { min-height: 215px; padding: 16px 13px; font-size: .7rem; }.api-pulse { display: none; }.api-access-card, .api-benefit-card { min-height: 0; }.api-flow { gap: 34px; }.api-flow h3 { min-height: 0; }.api-integrators, .api-security { padding: 75px 0; }.integration-hub { min-height: 430px; }.integration-hub::before { width: 275px; height: 275px; }.integration-hub::after { width: 175px; height: 175px; }.hub-center { width: 120px; height: 120px; }.hub-node { min-width: 0; padding: 9px; }.hub-node span { display: none; }.node-integrator { left: 22px; }.node-sm { right: 22px; }.security-badges { flex-wrap: wrap; }.api-cta { padding: 65px 0; } }