:root {
    --ape-navy: #071526;
    --ape-navy-soft: #10243b;
    --ape-ink: #142033;
    --ape-muted: #65738a;
    --ape-line: #dce4ee;
    --ape-surface: #ffffff;
    --ape-bg: #f3f6fa;
    --ape-accent: #ef3340;
    --ape-accent-dark: #c91f2c;
    --ape-cyan: #18a7c8;
    --ape-success: #159a63;
    --ape-warning: #d58a08;
    --ape-radius: 18px;
    --ape-shadow: 0 18px 55px rgba(7, 21, 38, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ape-ink); background: var(--ape-bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.ape-header { position: sticky; top: 0; z-index: 20; min-height: 76px; padding: 12px clamp(20px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #fff; background: rgba(7, 21, 38, .96); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(16px); }
.ape-brand { display: inline-flex; align-items: center; gap: 12px; }
.ape-brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-weight: 900; letter-spacing: -.05em; background: linear-gradient(135deg, var(--ape-accent), #ff7b58); box-shadow: 0 10px 28px rgba(239,51,64,.3); }
.ape-brand strong, .ape-brand small { display: block; }
.ape-brand strong { font-size: 18px; letter-spacing: -.02em; }
.ape-brand small { color: #9eb0c5; font-size: 11px; margin-top: 2px; }
.ape-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 700; }
.ape-nav > a:not(.ape-button) { color: #cbd6e4; }
.ape-nav > a:hover { color: #fff; }
.ape-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--ape-accent), var(--ape-accent-dark)); font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px rgba(239,51,64,.22); }
.ape-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.ape-button-small { min-height: 40px; padding: 0 16px; border-radius: 10px; }
.ape-button-compact { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
.ape-button-secondary { color: var(--ape-ink); background: #fff; border: 1px solid var(--ape-line); box-shadow: none; }
.ape-button-danger { background: #981b28; }
.ape-hero { position: relative; overflow: hidden; min-height: 610px; padding: 96px clamp(20px, 7vw, 110px); color: #fff; background: radial-gradient(circle at 80% 25%, rgba(24,167,200,.25), transparent 28%), linear-gradient(115deg, #071526 0%, #0d2036 55%, #142f49 100%); }
.ape-hero::after { content: ""; position: absolute; width: 680px; height: 680px; right: -160px; bottom: -330px; border-radius: 50%; border: 95px solid rgba(255,255,255,.035); }
.ape-eyebrow { margin: 0 0 15px; color: var(--ape-accent); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.ape-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); align-items: center; gap: 70px; max-width: 1320px; margin: auto; }
.ape-hero h1 { max-width: 780px; margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.055em; }
.ape-hero-copy > p:not(.ape-eyebrow) { max-width: 680px; color: #b9c8d8; font-size: 19px; line-height: 1.7; }
.ape-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ape-hero .ape-button-secondary { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.ape-engine-card { position: relative; padding: 28px; border-radius: 26px; background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 90px rgba(0,0,0,.25); backdrop-filter: blur(18px); }
.ape-engine-card::before { content: ""; position: absolute; width: 12px; height: 12px; top: 23px; right: 24px; border-radius: 50%; background: #2ee394; box-shadow: 0 0 0 7px rgba(46,227,148,.12); }
.ape-engine-card h2 { margin: 0 0 22px; font-size: 21px; }
.ape-flow { display: grid; gap: 10px; }
.ape-flow-item { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(3,13,24,.42); }
.ape-flow-item b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: var(--ape-accent); }
.ape-flow-item span, .ape-flow-item small { display: block; }
.ape-flow-item small { margin-top: 3px; color: #93a7bc; }
.ape-section { max-width: 1320px; margin: auto; padding: 82px clamp(20px, 4vw, 52px); }
.ape-section-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.ape-section h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; }
.ape-section-head p { max-width: 560px; margin: 0; color: var(--ape-muted); line-height: 1.7; }
.ape-feature-grid, .ape-plan-grid, .ape-stat-grid { display: grid; gap: 18px; }
.ape-feature-grid { grid-template-columns: repeat(4, 1fr); }
.ape-feature, .ape-card, .ape-plan { background: var(--ape-surface); border: 1px solid var(--ape-line); border-radius: var(--ape-radius); box-shadow: 0 8px 28px rgba(7,21,38,.05); }
.ape-feature { padding: 26px; }
.ape-feature-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px; border-radius: 13px; color: var(--ape-accent); background: #fff0f1; font-size: 20px; font-weight: 900; }
.ape-feature h3 { margin: 0 0 8px; }
.ape-feature p { margin: 0; color: var(--ape-muted); line-height: 1.6; }
.ape-plan-grid { grid-template-columns: repeat(3, 1fr); }
.ape-plan { position: relative; padding: 30px; }
.ape-plan-featured { color: #fff; background: var(--ape-navy); border-color: var(--ape-navy); transform: translateY(-8px); box-shadow: var(--ape-shadow); }
.ape-plan-tag { display: inline-block; padding: 6px 10px; border-radius: 999px; color: var(--ape-accent); background: #fff0f1; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.ape-plan h3 { margin: 18px 0 6px; font-size: 25px; }
.ape-price { margin: 18px 0; font-size: 38px; font-weight: 900; letter-spacing: -.04em; }
.ape-price small { color: var(--ape-muted); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.ape-plan-featured .ape-price small, .ape-plan-featured p { color: #a9b9ca; }
.ape-plan ul { min-height: 128px; padding: 0; margin: 22px 0; list-style: none; }
.ape-plan li { margin: 11px 0; }
.ape-plan li::before { content: "✓"; margin-right: 9px; color: var(--ape-success); font-weight: 900; }
.ape-plan-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ape-plan-choice { position: relative; display: block; cursor: pointer; }
.ape-plan-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ape-plan-choice-body { display: flex; min-height: 100%; flex-direction: column; gap: 9px; padding: 20px; border: 2px solid var(--ape-line); border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ape-plan-choice:hover .ape-plan-choice-body { transform: translateY(-2px); border-color: #aab9c9; }
.ape-plan-choice > input:checked + .ape-plan-choice-body { border-color: var(--ape-accent); box-shadow: 0 0 0 4px rgba(239,51,64,.10); }
.ape-plan-choice > input:focus-visible + .ape-plan-choice-body { outline: 3px solid rgba(24,167,200,.35); outline-offset: 2px; }
.ape-plan-choice-body > strong { font-size: 20px; line-height: 1.15; }
.ape-plan-type { display: inline-flex; align-self: flex-start; padding: 5px 8px; border-radius: 999px; color: #075c71; background: #e8f8fc; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.ape-plan-choice-price { color: var(--ape-accent); font-size: 19px; font-weight: 900; }
.ape-plan-description, .ape-plan-choice-body small { color: var(--ape-muted); font-size: 13px; line-height: 1.5; }
.ape-plan-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.ape-plan-facts b { padding: 6px 9px; border-radius: 8px; color: #324258; background: #edf3f8; font-size: 11px; }
.ape-plan-includes { display: grid; gap: 6px; font-size: 13px; line-height: 1.4; }
.ape-plan-includes span { display: block; }
.ape-request-plan { margin: 18px 0; padding: 20px; border: 1px solid #b9dce5; border-radius: 15px; background: #f7fcfd; }
.ape-request-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ape-request-plan-head h3 { margin: 10px 0 5px; font-size: 24px; }
.ape-request-plan-head p { margin: 0 0 14px; color: var(--ape-muted); }
.ape-request-price { white-space: nowrap; color: var(--ape-cyan); font-size: 22px; }
.ape-request-plan .ape-plan-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.ape-plan-ai-note { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid #d7e8ed; color: var(--ape-muted); font-size: 12px; }
.ape-client-note { margin: 0 0 18px; padding: 16px; border-left: 4px solid var(--ape-warning); border-radius: 8px; background: #fff9e9; }
.ape-client-note p { margin: 6px 0 0; }
.ape-legacy-warning { display: grid; gap: 5px; margin: 14px 0; padding: 14px 16px; border: 1px solid #f0cf7a; border-radius: 11px; color: #714d00; background: #fff8df; }
.ape-legacy-warning span { font-size: 13px; line-height: 1.5; }
.ape-connector-credentials { display: grid; gap: 22px; }
.ape-connector-credentials > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; align-items: start; }
.ape-step-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--ape-accent); font-weight: 900; }
.ape-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.ape-copy-row input { min-width: 0; font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; }
.ape-copy-button { min-width: 105px; }
.ape-security-details summary { cursor: pointer; font-size: 17px; font-weight: 800; }
.ape-security-content { padding-top: 16px; }
.ape-shell { max-width: 1280px; min-height: calc(100vh - 160px); margin: auto; padding: 46px 24px 80px; }
.ape-page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.ape-page-head h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; }
.ape-page-head p { margin: 7px 0 0; color: var(--ape-muted); }
.ape-card { padding: 26px; }
.ape-card h2, .ape-card h3 { margin-top: 0; }
.ape-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ape-grid-main { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 20px; }
.ape-stat-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }
.ape-stat { padding: 22px; }
.ape-stat span, .ape-stat strong { display: block; }
.ape-stat span { color: var(--ape-muted); font-size: 13px; }
.ape-stat strong { margin-top: 7px; font-size: 29px; letter-spacing: -.04em; }
.ape-form { display: grid; gap: 17px; }
.ape-field { display: grid; gap: 7px; }
.ape-field label { font-size: 13px; font-weight: 800; }
.ape-field input, .ape-field select, .ape-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #cfd9e5; border-radius: 11px; color: var(--ape-ink); background: #fff; outline: none; }
.ape-field textarea { min-height: 105px; resize: vertical; }
.ape-field input:focus, .ape-field select:focus, .ape-field textarea:focus { border-color: var(--ape-cyan); box-shadow: 0 0 0 4px rgba(24,167,200,.12); }
.ape-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ape-auth-shell { display: grid; place-items: center; min-height: calc(100vh - 150px); padding: 44px 20px; background: radial-gradient(circle at 15% 10%, rgba(24,167,200,.12), transparent 25%); }
.ape-auth-card { width: min(100%, 540px); padding: 36px; background: #fff; border: 1px solid var(--ape-line); border-radius: 24px; box-shadow: var(--ape-shadow); }
.ape-auth-card h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: -.04em; }
.ape-auth-card > p { margin: 0 0 28px; color: var(--ape-muted); }
.ape-auth-meta { margin-top: 20px; color: var(--ape-muted); text-align: center; }
.ape-auth-meta a { color: var(--ape-accent); font-weight: 800; }
.ape-error-list { margin: 0 0 20px; padding: 14px 18px 14px 36px; border-radius: 12px; color: #8b1f2a; background: #fff0f1; }
.ape-flash { max-width: 1280px; margin: 16px auto 0; padding: 14px 18px; border-radius: 12px; font-weight: 700; }
.ape-flash-success { color: #08633e; background: #e6f8ef; }
.ape-flash-error { color: #8b1f2a; background: #fff0f1; }
.ape-flash-info { color: #075c71; background: #e8f8fc; }
.ape-status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.ape-status-active, .ape-status-approved { color: #08764b; background: #e5f8ef; }
.ape-status-pending { color: #986000; background: #fff4d9; }
.ape-status-rejected, .ape-status-revoked, .ape-status-blocked { color: #9a2430; background: #ffe9eb; }
.ape-status-inactive, .ape-status-suspended, .ape-status-cancelled { color: #536173; background: #edf1f5; }
.ape-table-wrap { overflow-x: auto; }
.ape-table { width: 100%; border-collapse: collapse; }
.ape-table th, .ape-table td { padding: 14px 12px; border-bottom: 1px solid var(--ape-line); text-align: left; vertical-align: top; }
.ape-table th { color: var(--ape-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ape-table td { font-size: 14px; }
.ape-code { display: block; overflow-wrap: anywhere; padding: 13px; border-radius: 10px; color: #dbe8f5; background: #081725; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ape-secret { padding: 18px; border: 1px solid #7fd6ab; border-radius: 14px; background: #ecfbf4; }
.ape-secret strong { display: block; margin-bottom: 8px; color: #08764b; }
.ape-muted { color: var(--ape-muted); }
.ape-empty { padding: 30px; color: var(--ape-muted); text-align: center; border: 1px dashed #c7d3df; border-radius: 14px; }
.ape-inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.ape-top-gap { margin-top: 20px; }
.ape-key-list { display: grid; gap: 10px; margin-top: 18px; }
.ape-key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--ape-line); border-radius: 12px; }
.ape-key-row strong, .ape-key-row small { display: block; }
.ape-key-row small { margin-top: 4px; color: var(--ape-muted); }
.ape-danger-zone { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 20px; border-color: #efb7bd; }
.ape-danger-zone h2 { color: #8b1f2a; }
.ape-danger-zone p { max-width: 700px; margin-bottom: 0; color: var(--ape-muted); }
.ape-danger-zone .ape-field { min-width: min(360px, 100%); }
.ape-admin-body { --ape-accent: #18a7c8; --ape-accent-dark: #087c98; }
.ape-footer { display: flex; justify-content: space-between; gap: 30px; padding: 30px clamp(20px, 5vw, 76px); color: #aab9c9; background: var(--ape-navy); }
.ape-footer strong, .ape-footer span { display: block; }
.ape-footer strong { color: #fff; }
.ape-footer span { margin-top: 5px; font-size: 12px; }
.ape-footer > div:last-child { display: flex; gap: 20px; align-items: center; }
@media (max-width: 980px) {
    .ape-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .ape-plan-grid, .ape-hero-grid, .ape-grid-main, .ape-plan-choice-grid { grid-template-columns: 1fr; }
    .ape-engine-card { max-width: 650px; }
    .ape-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .ape-nav > a:not(.ape-button):not(:last-child) { display: none; }
}
@media (max-width: 640px) {
    .ape-header { padding: 10px 16px; }
    .ape-brand small { display: none; }
    .ape-brand-mark { width: 42px; height: 42px; }
    .ape-nav { gap: 9px; }
    .ape-hero { min-height: auto; padding: 66px 20px; }
    .ape-feature-grid, .ape-plan-grid, .ape-grid-2, .ape-form-row, .ape-stat-grid { grid-template-columns: 1fr; }
    .ape-section-head, .ape-page-head, .ape-footer, .ape-danger-zone { align-items: flex-start; flex-direction: column; }
    .ape-auth-card { padding: 26px 20px; }
    .ape-request-plan-head { flex-direction: column; gap: 10px; }
    .ape-request-plan .ape-plan-includes { grid-template-columns: 1fr; }
}