:root {
            --api-green:   #09cd91;
            --api-green-d: #07b07c;
            --api-blue:    #4fc3f7;
            --api-purple:  #7c6dfa;
            --api-amber:   #ffb74d;
            --card-bg:    rgba(255,255,255,0.035);
            --card-border:rgba(255,255,255,0.07);
            --muted:      rgba(200,208,220,0.65);
            --rx:         20px;
            --tr:         0.25s ease;
            --code-bg:    #0d1117;
        }
        .api-grad {
            background: linear-gradient(135deg, var(--api-green) 0%, var(--api-blue) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .api-divider { border: none; border-top: 1px solid rgba(255,255,255,.06); margin: 0; }
        .api-label {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 11.5px; font-weight: 700; color: var(--api-green);
            letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px;
        }
        .api-section-title {
            font-size: clamp(1.75rem,3.5vw,2.6rem); font-weight: 800;
            color: #f0f4f8; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 16px;
        }
        .api-section-sub {
            font-size: .98rem; color: var(--muted); line-height: 1.75; max-width: 580px; margin: 0 auto;
        }
        .api-section     { padding: 96px 20px; }
        .api-section-alt { padding: 96px 20px; background: rgba(255,255,255,.018); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }

        /* Buttons */
        .api-btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            background: linear-gradient(135deg, var(--api-green) 0%, var(--api-green-d) 100%);
            color: #050e1c; font-weight: 700; font-size: .9rem; padding: 13px 30px;
            border-radius: 10px; text-decoration: none; transition: opacity var(--tr), transform var(--tr); letter-spacing: .02em;
        }
        .api-btn-primary:hover { opacity:.88; transform:translateY(-2px); color:#050e1c; text-decoration:none; }
        .api-btn-secondary {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
            color: #d8e0ec; font-weight: 600; font-size: .9rem; padding: 13px 28px;
            border-radius: 10px; text-decoration: none; transition: background var(--tr), border-color var(--tr), transform var(--tr);
        }
        .api-btn-secondary:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); transform:translateY(-2px); color:#f0f4f8; text-decoration:none; }

        /* Hero */
        .api-hero { min-height:100vh; display:flex; align-items:center; padding:130px 20px 90px; position:relative; overflow:hidden; }
        .api-hero-orb { position:absolute; border-radius:50%; pointer-events:none; }
        .api-orb-1 { top:-8%; right:-6%; width:640px; height:640px; background:radial-gradient(circle, rgba(79,195,247,.1) 0%, transparent 68%); }
        .api-orb-2 { bottom:5%; left:-10%; width:520px; height:520px; background:radial-gradient(circle, rgba(9,205,145,.09) 0%, transparent 68%); }
        .api-orb-3 { top:35%; left:42%; width:340px; height:340px; background:radial-gradient(circle, rgba(124,109,250,.07) 0%, transparent 68%); }
        .api-hero-inner { position:relative; z-index:1; }
        .api-hero-badge {
            display:inline-flex; align-items:center; gap:7px;
            background:rgba(9,205,145,.08); border:1px solid rgba(9,205,145,.22);
            border-radius:50px; padding:5px 16px; font-size:11.5px;
            font-weight:600; color:var(--api-green); letter-spacing:.06em;
            text-transform:uppercase; margin-bottom:28px;
        }
        .api-badge-dot {
            width:6px; height:6px; border-radius:50%;
            background:var(--api-green); animation:api-pulse 1.8s ease-in-out infinite;
        }
        @keyframes api-pulse {
            0%,100%{ opacity:1; transform:scale(1); }
            50%    { opacity:.4; transform:scale(.7); }
        }
        .api-hero-title {
            font-size: clamp(2.4rem,5.5vw,3.8rem); font-weight:800;
            color:#f0f4f8; line-height:1.12; letter-spacing:-.02em; margin-bottom:22px;
        }
        .api-hero-sub {
            font-size:1.1rem; color:var(--muted); line-height:1.75; max-width:520px; margin-bottom:40px;
        }
        .api-hero-stats {
            display:flex; flex-wrap:wrap; gap:32px; margin-top:52px;
        }
        .api-stat-val { font-size:1.8rem; font-weight:800; color:var(--api-green); line-height:1; }
        .api-stat-lbl { font-size:.78rem; color:var(--muted); margin-top:4px; }

        /* Code block */
        .api-code-block {
            background: var(--code-bg); border: 1px solid rgba(255,255,255,.08);
            border-radius: 12px; overflow: hidden; font-family: 'Courier New', monospace;
        }
        .api-code-header {
            display:flex; align-items:center; justify-content:space-between;
            padding:10px 16px; background:rgba(255,255,255,.04);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .api-code-dots { display:flex; gap:6px; }
        .api-code-dot { width:10px; height:10px; border-radius:50%; }
        .api-code-lang { font-size:.72rem; color:var(--muted); letter-spacing:.06em; }
        .api-code-body { padding:20px; overflow-x:auto; }
        .api-code-body pre { margin:0; font-size:.8rem; line-height:1.7; color:#e6edf3; }
        .c-key { color:#7c6dfa; }
        .c-str { color:#a5d6ff; }
        .c-val { color:#09cd91; }
        .c-met { color:#ffb74d; }
        .c-cmt { color:rgba(255,255,255,.35); font-style:italic; }
        .c-url { color:#4fc3f7; }

        /* Endpoint cards */
        .api-endpoint-card {
            background: var(--card-bg); border: 1px solid var(--card-border);
            border-radius: var(--rx); padding: 24px;
            transition: border-color var(--tr), transform var(--tr);
        }
        .api-endpoint-card:hover { border-color:rgba(9,205,145,.2); transform:translateY(-2px); }
        .api-method {
            display:inline-block; font-size:.72rem; font-weight:800; padding:3px 9px;
            border-radius:5px; letter-spacing:.06em; text-transform:uppercase; margin-right:10px; flex-shrink:0;
        }
        .api-method-get { background:rgba(9,205,145,.12); color:var(--api-green); }
        .api-method-post { background:rgba(79,195,247,.12); color:var(--api-blue); }
        .api-method-put { background:rgba(255,183,77,.12); color:var(--api-amber); }
        .api-method-del { background:rgba(240,98,146,.12); color:#f06292; }
        .api-endpoint-path { font-size:.82rem; font-weight:700; color:#f0f4f8; font-family:'Courier New',monospace; }
        .api-endpoint-desc { font-size:.83rem; color:var(--muted); margin-top:8px; line-height:1.6; }

        /* Feature cards */
        .api-feature-card {
            background: var(--card-bg); border: 1px solid var(--card-border);
            border-radius: var(--rx); padding: 28px;
            transition: border-color var(--tr), transform var(--tr);
        }
        .api-feature-card:hover { border-color:rgba(9,205,145,.2); transform:translateY(-3px); }
        .api-icon-wrap {
            width:48px; height:48px; border-radius:12px;
            background:rgba(9,205,145,.1); border:1px solid rgba(9,205,145,.2);
            display:flex; align-items:center; justify-content:center; margin-bottom:16px;
        }

        /* Webhook events */
        .api-webhook-row {
            display:flex; align-items:flex-start; gap:16px; padding:16px 0;
            border-bottom:1px solid rgba(255,255,255,.05);
        }
        .api-webhook-row:last-child { border-bottom:none; }
        .api-event-name {
            font-size:.82rem; font-weight:700; color:#f0f4f8;
            font-family:'Courier New',monospace; min-width:220px; flex-shrink:0;
        }
        .api-event-desc { font-size:.84rem; color:var(--muted); line-height:1.6; }

        /* CTA */
        .api-cta-section {
            background: linear-gradient(135deg, rgba(9,205,145,.08) 0%, rgba(79,195,247,.05) 100%);
            border-top: 1px solid rgba(9,205,145,.15); padding: 96px 20px;
        }
        /* Hero Graphic */
        .api-glass-card {
            background: rgba(255,255,255,.042);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: var(--rx);
            padding: 22px 24px;
            backdrop-filter: blur(12px);
        }
        .api-graphic-title {
            font-size: .75rem; color: var(--muted);
            text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
        }
        .api-graphic-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05);
        }
        .api-graphic-row:last-child { border-bottom: none; }
        .api-graphic-label {
            font-size: .82rem; color: rgba(200,208,220,.8);
            display: flex; align-items: center; gap: 8px;
        }
        .api-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .api-ep-status { font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
        .api-s-green  { background: rgba(9,205,145,.12);   color: var(--api-green);  }
        .api-s-blue   { background: rgba(79,195,247,.12);  color: var(--api-blue);   }
        .api-s-purple { background: rgba(124,109,250,.12); color: var(--api-purple); }
        .api-s-amber  { background: rgba(255,183,77,.12);  color: var(--api-amber);  }
        .api-float-badge {
            z-index: 2; position: absolute; display: inline-flex; align-items: center; gap: 6px;
            background: rgba(9,205,145,.1); border: 1px solid rgba(9,205,145,.25);
            border-radius: 8px; padding: 7px 12px; font-size: .75rem; font-weight: 600;
            color: var(--api-green); white-space: nowrap; backdrop-filter: blur(8px);
            animation: api-float 3s ease-in-out infinite;
        }
        .api-float-badge-b {
            background: rgba(79,195,247,.1); border-color: rgba(79,195,247,.25); color: var(--api-blue);
            animation-delay: 1.5s;
        }
        @keyframes api-float {
            0%,100%{ transform: translateY(0); }
            50%    { transform: translateY(-7px); }
        }

        .fade-up { opacity:0; transform:translateY(28px); transition:opacity .6s ease,transform .6s ease; }
        .fade-up.visible { opacity:1; transform:none; }

        @media(max-width:767px){
            .api-hero { padding:120px 20px 70px; }
            .api-hero-stats { gap:24px; }
            .api-event-name { min-width:160px; font-size:.75rem; }
        }
        .apid-faq-accordion .accordion-item{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.07);border-radius:12px !important;margin-bottom:10px;overflow:hidden;}
        .apid-faq-accordion .accordion-button{background:transparent;color:#ecf0f8;font-weight:600;font-size:.93rem;padding:18px 22px;box-shadow:none;}
        .apid-faq-accordion .accordion-button:not(.collapsed){background:rgba(9,205,145,.06);color:#ecf0f8;box-shadow:none;}
        .apid-faq-accordion .accordion-button::after{filter:invert(1) sepia(1) saturate(3) hue-rotate(90deg);}
        .apid-faq-accordion .accordion-button:focus{box-shadow:0 0 0 3px rgba(9,205,145,.25);}
        .apid-faq-accordion .accordion-body{background:transparent;color:rgba(200,208,220,.75);font-size:.875rem;line-height:1.75;padding:4px 22px 20px;}