.api-hero{position:relative;overflow:hidden;margin:0 auto 28px;max-width:1840px;padding:54px 48px;border:1px solid rgba(49,221,211,.34);border-radius:28px;background:radial-gradient(circle at 82% 15%,rgba(57,216,199,.16),transparent 31%),linear-gradient(135deg,rgba(12,46,57,.96),rgba(5,19,31,.98));box-shadow:0 26px 80px rgba(0,0,0,.32)}
.api-hero:after{content:"API";position:absolute;right:34px;bottom:-58px;color:rgba(103,236,229,.045);font-size:230px;font-weight:900;letter-spacing:-20px;pointer-events:none}
.api-eyebrow,.api-code-label{color:#42ddd4;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.api-hero h1{margin:12px 0 10px;font-size:clamp(46px,7vw,92px);line-height:.95;letter-spacing:-.055em}.api-hero h1 span{color:#42ddd4}
.api-hero p{max-width:780px;margin:0;color:#a9bdc9;font-size:18px;line-height:1.55}
.api-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:28px}.api-legend small{margin-right:12px;color:#829aa9}
.api-kind{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:1px solid;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.api-kind.collected{border-color:#45dcd3;color:#66f1e8;background:rgba(35,190,180,.11)}.api-kind.calculated{border-color:#a98aff;color:#c6b3ff;background:rgba(137,97,255,.12)}.api-kind.mixed{border-color:#ffc75c;color:#ffd987;background:rgba(255,187,62,.11)}
.api-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1840px;margin:0 auto}
.api-card{display:flex;flex-direction:column;min-width:0;padding:25px;border:1px solid rgba(48,210,201,.26);border-radius:24px;background:linear-gradient(155deg,rgba(13,43,53,.96),rgba(6,20,32,.98));box-shadow:0 18px 44px rgba(0,0,0,.28);transition:transform .2s ease,border-color .2s ease}
.api-card:hover{transform:translateY(-3px);border-color:rgba(70,235,224,.58)}.api-card-top{display:flex;justify-content:space-between;align-items:center}.api-number{color:#5ce8df;font-size:26px;font-weight:900;letter-spacing:-.04em}
.api-card h2{margin:20px 0 8px;color:#edf8fb;font-size:25px;letter-spacing:-.03em}.api-card>p{min-height:50px;margin:0 0 19px;color:#9cb1bd;line-height:1.5}
.api-endpoint{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:13px 15px;border:1px solid rgba(64,210,202,.25);border-radius:13px;background:rgba(2,14,24,.62);overflow:auto}.api-endpoint span{color:#50eadf;font-size:11px;font-weight:900}.api-endpoint code{color:#dcedf1;white-space:nowrap}
.api-code-label{margin:2px 0 8px;font-size:9px}.api-card pre{max-width:100%;margin:0 0 16px;padding:15px;overflow:auto;border:1px solid rgba(124,153,181,.15);border-radius:13px;background:#06101b;color:#bfe5e5;font-size:12px;line-height:1.5}
.api-card details{margin-top:auto}.api-card summary{cursor:pointer;margin-bottom:13px;color:#b9ccd4;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.api-live-link{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:14px 16px;border:1px solid #37d6cc;border-radius:13px;background:linear-gradient(90deg,rgba(24,178,169,.18),rgba(55,214,204,.05));color:#67eee5;font-size:12px;font-weight:900;letter-spacing:.12em}.api-live-link:hover{background:rgba(42,208,198,.2);opacity:1}
@media(max-width:1180px){.api-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.api-hero{padding:38px 24px}.api-grid{grid-template-columns:1fr}.api-card>p{min-height:0}}