:root {
    --home-bg: #000000;
    --home-surface: #101012;
    --home-surface-hi: #141416;
    --home-border: rgba(255, 255, 255, 0.12);
    --home-border-hi: rgba(255, 255, 255, 0.24);
    --home-text: #ffffff;
    --home-muted: #a1a1aa;
    --home-faint: #6b6b72;
    --home-accent: #e7a73e;
    --home-accent-soft: rgba(231, 167, 62, 0.14);
    --home-teal: #4fd3b8;
    --home-teal-soft: rgba(79, 211, 184, 0.14);
    --home-pink: #f0a8c9;
    --home-pink-soft: rgba(240, 168, 201, 0.14);
    --home-radius: 20px;
    --home-header-height: 69px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    width: 100%;
    max-width: 100%;
    margin: 0;
    scroll-behavior: smooth;
}

.api-home-body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    color: var(--home-text);
    background: var(--home-bg);
    font-family: 'Estedad', Tahoma, Arial, sans-serif;
    line-height: 1.6;
}

.api-home-body.api-home-menu-open { overflow: hidden; }

.api-home-body img,
.api-home-body video,
.api-home-body canvas { display: block; max-width: 100%; height: auto; }
.api-home-body svg { display: block; max-width: 100%; }

.api-home-body a { color: inherit; text-decoration: none; }
.api-home-body button { font: inherit; }

.api-home-wrap {
    width: min(calc(100% - 12vw), 1180px);
    margin-inline: auto;
}

.api-home-body :focus-visible {
    outline: 2.5px solid var(--home-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.api-home-skip-link {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 100;
    padding: 10px 16px;
    color: #000;
    background: #fff;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform 0.18s ease;
}

.api-home-skip-link:focus { transform: translateY(0); }

/* Header: mirrors /info's sticky black navigation. */
.api-home-navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: var(--home-header-height);
    background: rgba(0, 0, 0, 0.72);
    border-bottom: 1px solid var(--home-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.api-home-navbar-inner {
    min-height: var(--home-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 10px;
}

.api-home-navbar-inner > * { min-width: 0; }

.api-home-brand {
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--home-text);
}

.api-home-brand img {
    width: 112px;
    height: 32px;
    flex: 0 0 auto;
    object-fit: contain;
}

.api-home-brand span { min-width: 0; max-width: 100%; }

.api-home-brand strong,
.api-home-brand small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-home-brand strong { font-size: 0.88rem; font-weight: 700; line-height: 1.45; }
.api-home-brand small { color: var(--home-muted); font: 0.68rem Tahoma, Arial, sans-serif; direction: ltr; text-align: right; }

.api-home-nav-actions { min-width: 0; display: flex; align-items: center; gap: 10px; }

.api-home-link-btn,
.api-home-solid-btn,
.api-home-cta {
    min-height: 44px;
    padding: 10px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.api-home-nav-actions .api-home-link-btn,
.api-home-nav-actions .api-home-solid-btn {
    font-weight: 500;
}

.api-home-link-btn,
.api-home-cta.is-secondary {
    color: var(--home-text);
    background: transparent;
    border-color: var(--home-border-hi);
}

.api-home-link-btn:hover,
.api-home-cta.is-secondary:hover { background: rgba(255, 255, 255, 0.06); }

.api-home-solid-btn,
.api-home-cta.is-primary {
    color: #000;
    background: #fff;
}

.api-home-solid-btn:hover,
.api-home-cta.is-primary:hover { background: #e8e8e8; }

.api-home-nav-actions .api-home-solid-btn,
.api-home-nav-actions .api-home-solid-btn:visited,
.api-home-nav-actions .api-home-solid-btn:hover,
.api-home-nav-actions .api-home-solid-btn:focus,
.api-home-nav-actions .api-home-solid-btn:focus-visible,
.api-home-nav-actions .api-home-solid-btn:active {
    color: #000;
}

.api-home-menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: var(--home-text);
    background: transparent;
    border: 1px solid var(--home-border-hi);
    border-radius: 10px;
    cursor: pointer;
}

.api-home-menu-toggle span {
    width: 19px;
    height: 1.5px;
    background: currentColor;
    border-radius: 999px;
    transform-origin: center;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.api-home-navbar.is-open .api-home-menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.api-home-navbar.is-open .api-home-menu-toggle span:nth-child(2) { opacity: 0; }
.api-home-navbar.is-open .api-home-menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.api-home-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(0, 0, 0, 0.64);
    border: 0;
    cursor: default;
}

/* Hero: /info typography with the existing API code presentation. */
.api-home-main { min-width: 0; }

.api-home-hero {
    padding-block: 88px 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    text-align: center;
}

.api-home-hero-copy { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; overflow-wrap: anywhere; }

.api-home-kicker,
.api-home-section-head > span {
    display: inline-flex;
    color: var(--home-accent);
    font: 0.76rem Tahoma, Arial, sans-serif;
    direction: ltr;
    letter-spacing: 0.04em;
}

.api-home-hero h1 {
    margin: 18px 0 0;
    max-width: 22ch;
    color: var(--home-text);
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.api-home-hero-copy > p {
    max-width: 54ch;
    margin: 20px auto 0;
    color: var(--home-muted);
    font-size: 1.02rem;
    line-height: 1.95;
}

.api-home-hero-actions { margin-top: 28px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }

.api-home-hero-panel { position: relative; width: min(760px, 100%); max-width: 100%; min-width: 0; padding-bottom: 34px; text-align: right; }

.api-home-terminal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--home-surface-hi);
    border: 1px solid rgba(231, 167, 62, 0.45);
    border-radius: var(--home-radius);
    box-shadow: 0 0 0 1px rgba(231, 167, 62, 0.12), 0 24px 48px -24px rgba(231, 167, 62, 0.3);
}

.api-home-terminal-bar {
    min-height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
    border-bottom: 1px solid var(--home-border);
}

.api-home-terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--home-faint); }
.api-home-terminal-bar span:nth-child(2) { background: var(--home-accent); }

.api-home-terminal pre {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 28px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    direction: ltr;
    color: #e4e4e7;
    background: transparent;
    text-align: left;
    white-space: pre;
}

.api-home-terminal code {
    display: block;
    width: max-content;
    min-width: 100%;
    font: 0.82rem/2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    unicode-bidi: isolate;
}

.api-home-floating-card {
    position: absolute;
    left: -18px;
    bottom: 0;
    width: min(250px, 78%);
    max-width: 100%;
    padding: 18px 20px;
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-radius: 14px;
}

.api-home-floating-card small { display: block; margin-bottom: 5px; color: var(--home-teal); font: 0.7rem Tahoma, Arial, sans-serif; }
.api-home-floating-card strong { display: block; margin-bottom: 4px; color: var(--home-text); font: 1rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; }
.api-home-floating-card p { margin: 0; color: var(--home-muted); font-size: 0.78rem; line-height: 1.75; }

/* Sections and cards mirror /info's spacing, radii and surfaces. */
.api-home-section { padding-bottom: 88px; }
.api-home-section-head { min-width: 0; margin-bottom: 26px; overflow-wrap: anywhere; }
.api-home-section-head h2 { margin: 10px 0 0; color: var(--home-text); font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.55; }

.api-home-feature-grid,
.api-home-steps-grid,
.api-home-reference-grid { width: 100%; min-width: 0; display: grid; gap: 22px; align-items: stretch; }
.api-home-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.api-home-steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.api-home-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.api-home-feature-card,
.api-home-step-card,
.api-home-reference-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius);
    transition: border-color 0.2s ease, transform 0.2s ease;
    overflow-wrap: anywhere;
}

.api-home-feature-card:hover,
.api-home-step-card:hover,
.api-home-reference-card:hover { border-color: var(--home-border-hi); transform: translateY(-3px); }

.api-home-feature-card:first-child {
    background: var(--home-surface-hi);
    border-color: rgba(231, 167, 62, 0.45);
    box-shadow: 0 0 0 1px rgba(231, 167, 62, 0.12), 0 24px 48px -24px rgba(231, 167, 62, 0.3);
}

.api-home-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--home-accent);
    background: var(--home-accent-soft);
    border-radius: 10px;
}

.api-home-feature-card:nth-child(even) .api-home-card-icon { color: var(--home-teal); background: var(--home-teal-soft); }
.api-home-card-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.api-home-feature-card small { color: var(--home-accent); font: 0.72rem Tahoma, Arial, sans-serif; direction: ltr; }
.api-home-feature-card:nth-child(even) small { color: var(--home-teal); }

.api-home-feature-card h3,
.api-home-step-card h3,
.api-home-reference-card h3 { margin: 10px 0 8px; color: var(--home-text); font-size: 1.15rem; font-weight: 800; line-height: 1.6; }

.api-home-feature-card p,
.api-home-step-card p,
.api-home-reference-card p { margin: 0 0 20px; color: var(--home-muted); font-size: 0.9rem; line-height: 1.9; }

.api-home-feature-card > a,
.api-home-step-card > a {
    width: fit-content;
    min-height: 44px;
    margin-top: auto;
    padding: 9px 0;
    display: inline-flex;
    align-items: center;
    color: var(--home-text);
    font-size: 0.86rem;
    font-weight: 700;
    transition: color 0.2s ease;
}

.api-home-feature-card > a::after,
.api-home-step-card > a::after { content: "←"; margin-right: 8px; color: var(--home-accent); }
.api-home-feature-card > a:hover,
.api-home-step-card > a:hover { color: var(--home-accent); }

.api-home-quick-start { padding-top: 8px; }

.api-home-stepper {
    position: relative;
    max-width: 620px;
    margin: 0 auto 42px;
    display: flex;
    justify-content: space-between;
}

.api-home-stepper::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 0;
    left: 0;
    z-index: 0;
    height: 1px;
    background: var(--home-border);
}

.api-home-stepper-item {
    position: relative;
    z-index: 1;
    padding-inline: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--home-bg);
}

.api-home-stepper-item b,
.api-home-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font: 700 0.72rem Tahoma, Arial, sans-serif;
    direction: ltr;
}

.api-home-stepper-item b { width: 27px; height: 27px; color: var(--home-accent); background: var(--home-bg); }
.api-home-stepper-item:first-child b { color: var(--home-teal); }
.api-home-stepper-item:last-child b { color: var(--home-pink); }
.api-home-stepper-item > span { color: var(--home-faint); font-size: 0.75rem; white-space: nowrap; }

.api-home-step-index { width: 38px; height: 38px; margin-bottom: 8px; color: var(--home-accent); background: var(--home-accent-soft); }
.api-home-step-card:first-child .api-home-step-index { color: var(--home-teal); background: var(--home-teal-soft); }
.api-home-step-card:last-child .api-home-step-index { color: var(--home-pink); background: var(--home-pink-soft); }

.api-home-method { display: inline-flex; width: fit-content; padding: 5px 9px; color: var(--home-accent); background: var(--home-accent-soft); border-radius: 999px; font: 0.72rem Tahoma, Arial, sans-serif; direction: ltr; }
.api-home-reference-card code { display: block; max-width: 100%; margin-top: 14px; overflow-wrap: anywhere; color: var(--home-teal); font: 0.78rem/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; text-align: left; unicode-bidi: isolate; }

/* Footer: same hierarchy as /info while retaining API-specific content. */
.api-home-footer {
    position: relative;
    padding-block: 48px 24px;
    color: var(--home-muted);
    border-top: 1px solid var(--home-border);
}

.api-home-footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.7fr) repeat(3, minmax(130px, 1fr));
    gap: clamp(30px, 5vw, 64px);
    align-items: start;
}

.api-home-footer-brand { min-width: 0; max-width: 340px; }
.api-home-footer-brand > strong { display: block; margin-bottom: 8px; color: var(--home-text); font-size: 0.92rem; font-weight: 800; }
.api-home-footer-brand > p { margin: 0; color: var(--home-muted); font-size: 0.84rem; line-height: 1.9; }

.api-home-footer-column { min-width: 0; overflow-wrap: anywhere; }
.api-home-footer-column summary { list-style: none; cursor: default; }
.api-home-footer-column summary::-webkit-details-marker { display: none; }
.api-home-footer-column h3 { margin: 0 0 14px; color: var(--home-text); font-size: 0.92rem; font-weight: 800; }
.api-home-footer-column nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.api-home-footer-column a { color: var(--home-muted); font-size: 0.84rem; transition: color 0.2s ease; }
.api-home-footer-column a:hover { color: var(--home-text); }

.api-home-footer-socials { margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.api-home-social-link {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--home-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--home-border);
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.api-home-social-link:hover { color: var(--home-text); background: rgba(255, 255, 255, 0.1); border-color: var(--home-border-hi); }
.api-home-social-link svg { width: 17px; height: 17px; fill: currentColor; }

.api-home-footer-bottom {
    margin-top: 32px;
    padding-top: 18px;
    color: var(--home-faint);
    border-top: 1px solid var(--home-border);
    font-size: 0.78rem;
    text-align: center;
}

/* Reuse /info's restrained reveal behavior. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
    .api-home-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .api-home-footer-brand { grid-column: 1 / -1; max-width: 520px; }
}

@media (max-width: 860px) {
    .api-home-hero { padding-block: 64px; }
    .api-home-hero h1 { max-width: 20ch; }
    .api-home-feature-grid,
    .api-home-steps-grid,
    .api-home-reference-grid { grid-template-columns: minmax(0, 1fr); }
    .api-home-floating-card { left: 0; }
}

@media (max-width: 760px) {
    .api-home-navbar-inner { gap: 12px; }
    .api-home-brand { flex: 1 1 auto; max-width: calc(100% - 56px); }
    .api-home-brand img { width: 92px; height: 28px; }
    .api-home-brand strong { font-size: 0.78rem; }
    .api-home-menu-toggle { display: inline-flex; margin-right: auto; }

    .api-home-nav-actions {
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        z-index: 45;
        width: min(88vw, 360px);
        max-width: 100%;
        height: 100dvh;
        padding: 98px 24px 24px;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        background: var(--home-surface);
        border-inline-start: 1px solid var(--home-border);
        box-shadow: 18px 0 48px rgba(0, 0, 0, 0.4);
        opacity: 0;
        transform: translateX(16px);
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.16s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    .api-home-navbar.is-open .api-home-nav-actions { opacity: 1; transform: translateX(0); visibility: visible; pointer-events: auto; }
    .api-home-navbar.is-open .api-home-menu-toggle { position: fixed; top: max(14px, env(safe-area-inset-top)); inset-inline-end: max(18px, env(safe-area-inset-left)); z-index: 50; background: var(--home-surface-hi); }
    .api-home-navbar.is-open + .api-home-menu-overlay { display: block; }
    .api-home-nav-actions a { width: 100%; min-height: 48px; }
}

@media (max-width: 560px) {
    .api-home-wrap { width: min(calc(100% - 32px), 1180px); }
    .api-home-navbar-inner { min-height: 64px; padding-block: 8px; }
    .api-home-brand { gap: 7px; }
    .api-home-brand img { width: 78px; height: 26px; }
    .api-home-brand strong { font-size: 0.7rem; }
    .api-home-brand small { font-size: 0.6rem; }
    .api-home-menu-toggle { width: 44px; height: 44px; flex-basis: 44px; }

    .api-home-hero { padding-block: 56px; gap: 38px; }
    .api-home-hero h1 { margin-top: 14px; font-size: clamp(1.8rem, 9vw, 2.25rem); line-height: 1.5; }
    .api-home-hero-copy > p { font-size: 0.95rem; line-height: 1.9; }
    .api-home-hero-actions { align-items: stretch; flex-direction: column; }
    .api-home-cta { width: 100%; }
    .api-home-hero-panel { padding-bottom: 0; }
    .api-home-terminal pre { padding: 22px 18px; }
    .api-home-terminal code { font-size: 0.75rem; }
    .api-home-floating-card { position: static; width: 100%; margin-top: 12px; }

    .api-home-section { padding-bottom: 72px; }
    .api-home-section-head { margin-bottom: 22px; }
    .api-home-feature-card,
    .api-home-step-card,
    .api-home-reference-card { padding: 26px 22px; }

    .api-home-stepper { width: 100%; max-width: 100%; margin-bottom: 30px; }
    .api-home-stepper-item > span { display: none; }

    .api-home-footer { padding-block: 32px 18px; }
    .api-home-footer-grid { grid-template-columns: 1fr; gap: 0; }
    .api-home-footer-brand { margin-bottom: 26px; }
    .api-home-footer-column { padding-block: 16px; border-top: 1px solid var(--home-border); }
    .api-home-footer-column summary { position: relative; padding-left: 28px; display: flex; width: 100%; cursor: pointer; user-select: none; }
    .api-home-footer-column summary::after { content: "⌄"; position: absolute; top: 50%; left: 4px; color: var(--home-muted); font-size: 18px; transform: translateY(-58%); transition: transform 0.2s ease; }
    .api-home-footer-column[open] summary::after { transform: translateY(-58%) rotate(180deg); }
    .api-home-footer-column h3 { margin: 0; }
    .api-home-footer-column nav { padding: 14px 10px 0 0; }
    .api-home-footer-bottom { margin-top: 22px; padding-top: 14px; font-size: 0.72rem; }
}

@media (max-width: 390px) {
    .api-home-wrap { width: min(calc(100% - 24px), 1180px); }
    .api-home-brand img { width: 72px; }
    .api-home-brand strong { max-width: 112px; }
    .api-home-hero h1 { font-size: 1.75rem; }
    .api-home-feature-card,
    .api-home-step-card { padding: 24px 20px; }
}

@media (max-width: 340px) {
    .api-home-brand img { width: 66px; }
    .api-home-brand strong { max-width: 90px; font-size: 0.66rem; }
    .api-home-brand small { max-width: 90px; }
    .api-home-hero h1 { font-size: 1.62rem; }
    .api-home-terminal pre { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .api-home-menu-toggle span,
    .api-home-nav-actions,
    .api-home-skip-link,
    .api-home-feature-card,
    .api-home-step-card,
    .api-home-reference-card { transition: none; }
}