/*
=======================================================================
 ASCARS - AUTOMOTIVE DATA API
 Page-specific presentation only.
 Core ASCARS header / footer / typography remain untouched.
=======================================================================
*/


.ada-page {
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(3, 9, 16, .72),
            rgba(3, 9, 16, .94)
        ),
        url("/assets/img/home-bg.png")
        center top / cover fixed;
}


.ada-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


.ada-eyebrow {
    margin-bottom: 16px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .18em;
    text-transform: uppercase;

    opacity: .55;
}


/*
=======================================================================
 HERO
=======================================================================
*/

.ada-hero {
    min-height: 690px;

    display: flex;
    align-items: center;

    padding: 80px 0 75px;
}


.ada-hero-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(400px, .92fr);

    gap: 80px;

    align-items: center;
}


.ada-hero-copy {
    max-width: 680px;
}


.ada-hero h1 {
    margin: 0;

    font-size: clamp(54px, 6.2vw, 86px);
    line-height: .93;

    letter-spacing: -.055em;
}


.ada-hero-lead {
    margin: 30px 0 0;

    max-width: 650px;

    font-size: clamp(21px, 2.2vw, 29px);
    line-height: 1.35;
}


.ada-hero-description {
    margin: 18px 0 0;

    max-width: 650px;

    font-size: 16px;
    line-height: 1.75;

    opacity: .72;
}


.ada-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;
}


.ada-button {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 21px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.ada-button:hover {
    transform: translateY(-1px);
}


.ada-button-primary {
    background: #fff;
    color: #111820;
}


.ada-button-secondary {
    border: 1px solid rgba(255,255,255,.24);

    background: rgba(255,255,255,.045);

    color: inherit;
}


.ada-hero-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;
}


.ada-hero-meta span {
    padding: 6px 10px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;

    background: rgba(255,255,255,.035);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .08em;

    opacity: .62;
}


/*
=======================================================================
 TERMINAL
=======================================================================
*/

.ada-terminal {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;

    background: rgba(4, 10, 17, .88);

    box-shadow:
        0 32px 80px rgba(0,0,0,.40);

    backdrop-filter: blur(13px);
}


.ada-terminal-top {
    min-height: 50px;

    display: grid;

    grid-template-columns: 100px 1fr 100px;

    align-items: center;

    padding: 0 18px;

    border-bottom: 1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.025);
}


.ada-terminal-dots {
    display: flex;
    gap: 6px;
}


.ada-terminal-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(255,255,255,.24);
}


.ada-terminal-title {
    text-align: center;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 11px;

    opacity: .45;
}


.ada-terminal-status {
    justify-self: end;

    padding: 4px 7px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;
}


.ada-terminal-body {
    padding: 24px;
}


.ada-request-label {
    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .15em;

    opacity: .38;
}


.ada-request-line {
    display: flex;
    gap: 12px;

    align-items: center;

    padding: 12px 14px;

    border-radius: 7px;

    background: rgba(255,255,255,.05);
}


.ada-method {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: .05em;

    opacity: .74;
}


.ada-request-line code,
.ada-header-line code {
    font-size: 12px;
}


.ada-header-line {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    margin: 10px 0 26px;

    padding: 0 4px;

    font-size: 11px;

    opacity: .45;
}


.ada-response-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;

    opacity: .55;
}


.ada-json {
    overflow: auto;

    margin: 0;

    padding: 18px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;

    background: rgba(0,0,0,.27);

    font-size: 12px;
    line-height: 1.72;
}


/*
=======================================================================
 SECTIONS
=======================================================================
*/

.ada-section {
    padding: 105px 0;
}


.ada-heading {
    max-width: 790px;

    margin-bottom: 52px;
}


.ada-heading h2,
.ada-control-copy h2,
.ada-final h2 {
    margin: 0;

    font-size: clamp(34px, 4vw, 53px);
    line-height: 1.08;

    letter-spacing: -.035em;
}


.ada-heading p,
.ada-control-copy > p {
    margin: 19px 0 0;

    max-width: 680px;

    font-size: 16px;
    line-height: 1.75;

    opacity: .68;
}


.ada-heading-row {
    max-width: none;

    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 40px;
}


.ada-heading-row > div {
    max-width: 720px;
}


.ada-text-link {
    padding-bottom: 4px;

    color: inherit;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    opacity: .66;
}


/*
=======================================================================
 ARCHITECTURE
=======================================================================
*/

.ada-platform-section {
    border-top: 1px solid rgba(255,255,255,.06);

    background: rgba(0,0,0,.16);
}


.ada-architecture {
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


.ada-architecture-source,
.ada-api-core {
    max-width: 570px;

    margin: 0 auto;

    padding: 22px 30px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 11px;

    background: rgba(255,255,255,.04);
}


.ada-architecture-source strong,
.ada-api-core strong {
    display: block;

    margin: 6px 0;

    font-size: 21px;
}


.ada-architecture-source > span:last-child,
.ada-api-core > span:last-child {
    font-size: 12px;

    opacity: .52;
}


.ada-small-label {
    font-size: 9px;
    font-weight: 800;

    letter-spacing: .13em;

    opacity: .38;
}


.ada-api-core {
    padding: 29px;

    border-color: rgba(255,255,255,.20);

    background: rgba(255,255,255,.075);

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);
}


.ada-api-core-label {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: .17em;

    opacity: .48;
}


.ada-connector {
    position: relative;

    width: 1px;
    height: 47px;

    margin: 0 auto;

    background: rgba(255,255,255,.19);
}


.ada-connector::after {
    content: "";

    position: absolute;

    bottom: -1px;
    left: -3px;

    width: 7px;
    height: 7px;

    border-right: 1px solid rgba(255,255,255,.38);
    border-bottom: 1px solid rgba(255,255,255,.38);

    transform: rotate(45deg);
}


.ada-data-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 11px;
}


.ada-data-grid a {
    min-height: 125px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 17px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;

    background: rgba(255,255,255,.035);

    color: inherit;

    text-align: left;
    text-decoration: none;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.ada-data-grid a:hover {
    transform: translateY(-2px);

    border-color: rgba(255,255,255,.18);

    background: rgba(255,255,255,.065);
}


.ada-data-grid a > span {
    margin-bottom: auto;

    font-size: 9px;
    font-weight: 800;

    opacity: .30;
}


.ada-data-grid strong {
    font-size: 16px;
}


.ada-data-grid small {
    margin-top: 3px;

    font-size: 11px;

    opacity: .48;
}


/*
=======================================================================
 ENDPOINT EXPLORER
=======================================================================
*/

.ada-explorer-section {
    background: rgba(2,7,13,.34);
}


.ada-explorer {
    overflow: hidden;

    display: grid;

    grid-template-columns: 190px 1fr;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;

    background: rgba(4,10,17,.72);
}


.ada-explorer-sidebar {
    padding: 15px;

    border-right: 1px solid rgba(255,255,255,.07);

    background: rgba(255,255,255,.018);
}


.ada-explorer-sidebar button {
    width: 100%;

    display: block;

    margin: 0 0 4px;

    padding: 11px 12px;

    border: 0;
    border-radius: 6px;

    background: transparent;

    color: inherit;

    text-align: left;

    font: inherit;
    font-size: 12px;

    opacity: .54;
}


.ada-explorer-sidebar button.active {
    background: rgba(255,255,255,.07);

    font-weight: 700;

    opacity: 1;
}


.ada-endpoint-list {
    padding: 9px 17px;
}


.ada-endpoint-row {
    min-height: 61px;

    display: grid;

    grid-template-columns: 55px minmax(250px, 1.5fr) 1fr 45px;

    gap: 14px;

    align-items: center;

    border-bottom: 1px solid rgba(255,255,255,.055);
}


.ada-endpoint-row:last-child {
    border-bottom: 0;
}


.ada-endpoint-method {
    font-size: 10px;
    font-weight: 800;

    opacity: .62;
}


.ada-endpoint-row code {
    font-size: 12px;
}


.ada-endpoint-description {
    font-size: 12px;

    opacity: .46;
}


.ada-endpoint-ok {
    justify-self: end;

    font-size: 10px;
    font-weight: 800;

    opacity: .54;
}


/*
=======================================================================
 ACCESS CONTROL
=======================================================================
*/

.ada-control-section {
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);

    background: rgba(0,0,0,.20);
}


.ada-control-layout {
    display: grid;

    grid-template-columns: 1fr 470px;

    gap: 85px;

    align-items: center;
}


.ada-feature-list {
    margin-top: 38px;
}


.ada-feature-list > div {
    min-height: 49px;

    display: flex;
    align-items: center;

    gap: 17px;

    border-bottom: 1px solid rgba(255,255,255,.065);
}


.ada-feature-list span {
    width: 26px;

    font-size: 9px;
    font-weight: 800;

    opacity: .28;
}


.ada-feature-list strong {
    font-size: 14px;
}


.ada-policy-panel {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;

    background: rgba(4,10,17,.74);
}


.ada-policy-panel-top {
    min-height: 49px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 18px;

    border-bottom: 1px solid rgba(255,255,255,.07);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;

    opacity: .63;
}


.ada-policy-panel-top span {
    padding: 4px 7px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 4px;
}


.ada-policy-client {
    padding: 22px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}


.ada-policy-client small {
    display: block;

    margin-bottom: 5px;

    font-size: 9px;

    opacity: .36;
}


.ada-policy-client strong {
    display: block;

    margin-bottom: 8px;
}


.ada-policy-client code {
    font-size: 11px;

    opacity: .44;
}


.ada-policy-list {
    padding: 7px 22px 12px;
}


.ada-policy-list > div {
    min-height: 45px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid rgba(255,255,255,.05);

    font-size: 12px;
}


.ada-policy-list > div:last-child {
    border-bottom: 0;
}


.ada-policy-list span {
    opacity: .52;
}


.ada-policy-list strong {
    font-size: 11px;
}


/*
=======================================================================
 PRODUCT AREAS
=======================================================================
*/

.ada-product-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}


.ada-product-card {
    min-height: 245px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;

    background: rgba(255,255,255,.035);

    color: inherit;

    text-decoration: none;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}


.ada-product-card:hover {
    transform: translateY(-3px);

    border-color: rgba(255,255,255,.20);

    background: rgba(255,255,255,.062);
}


.ada-product-card > span {
    margin-bottom: auto;

    font-size: 10px;
    font-weight: 800;

    opacity: .30;
}


.ada-product-card h3 {
    margin: 35px 0 10px;

    font-size: 20px;
}


.ada-product-card p {
    margin: 0 0 20px;

    font-size: 13px;
    line-height: 1.65;

    opacity: .58;
}


.ada-product-card strong {
    margin-top: auto;

    font-size: 12px;
}


/*
=======================================================================
 FINAL
=======================================================================
*/

.ada-final {
    padding: 20px 0 110px;
}


.ada-final-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 50px;

    padding: 47px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;

    background: rgba(255,255,255,.055);

    backdrop-filter: blur(7px);
}


.ada-final-panel .ada-actions {
    flex-shrink: 0;

    margin-top: 0;
}


/*
=======================================================================
 RESPONSIVE
=======================================================================
*/

@media (max-width: 1020px) {

    .ada-hero-layout,
    .ada-control-layout {
        grid-template-columns: 1fr;
    }

    .ada-hero-copy {
        max-width: 760px;
    }

    .ada-terminal,
    .ada-policy-panel {
        max-width: 700px;
    }

    .ada-data-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ada-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 760px) {

    .ada-shell {
        width: min(100% - 28px, 1180px);
    }

    .ada-hero {
        min-height: auto;

        padding: 60px 0;
    }

    .ada-section {
        padding: 72px 0;
    }

    .ada-heading-row,
    .ada-final-panel {
        display: block;
    }

    .ada-text-link {
        display: inline-block;

        margin-top: 20px;
    }

    .ada-explorer {
        display: block;
    }

    .ada-explorer-sidebar {
        display: flex;
        overflow-x: auto;

        gap: 3px;

        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .ada-explorer-sidebar button {
        width: auto;

        white-space: nowrap;
    }

    .ada-endpoint-row {
        grid-template-columns: 45px 1fr 40px;
    }

    .ada-endpoint-description {
        display: none;
    }

    .ada-final-panel .ada-actions {
        margin-top: 30px;
    }
}


@media (max-width: 560px) {

    .ada-data-grid,
    .ada-product-grid {
        grid-template-columns: 1fr;
    }

    .ada-terminal-top {
        grid-template-columns: 60px 1fr 60px;
    }

    .ada-request-line {
        display: block;
    }

    .ada-request-line code {
        display: block;

        margin-top: 8px;

        word-break: break-word;
    }

    .ada-header-line {
        display: block;
    }

    .ada-header-line code {
        display: block;

        margin-top: 6px;
    }

    .ada-endpoint-list {
        padding: 8px 11px;
    }

    .ada-endpoint-row {
        grid-template-columns: 40px 1fr 35px;

        gap: 8px;
    }

    .ada-endpoint-row code {
        overflow: hidden;

        text-overflow: ellipsis;
    }
}