:root {
    --font-heading: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
    --font-body: "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
    --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;

    --page-background:
        linear-gradient(90deg, rgba(19, 45, 65, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(19, 45, 65, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
    --header-background: #ffffff;
    --brand-mark-background: linear-gradient(145deg, #102f45, #1d526d 120%);
    --brand-mark-color: #f7fbff;
    --panel-background: #ffffff;
    --product-panel-background: #ffffff;
    --section-background: #f8fafc;
    --tile-background: #f9fbfd;
    --field-background: #ffffff;
    --field-border: #b9c4cf;
    --code-background: #eef3f7;
    --chip-background: #f4f7fa;

    --color-text: #12202b;
    --color-muted: #52616f;
    --color-line: #d8e0e8;
    --color-line-strong: #b7c3cf;
    --color-accent: #174963;
    --color-accent-strong: #0e2f45;
    --color-accent-contrast: #f8fbfd;
    --color-success: #23664d;
    --color-info: #174963;
    --color-danger: #8f4039;
    --color-warning: #855820;

    --notice-success-border: rgba(35, 102, 77, 0.34);
    --notice-info-border: rgba(23, 73, 99, 0.3);
    --notice-error-border: rgba(143, 64, 57, 0.32);

    --button-primary-background: linear-gradient(180deg, #1b526e, #123b52);
    --button-primary-color: #f8fbfd;
    --button-primary-shadow: 0 2px 0 rgba(14, 47, 69, 0.24), 0 10px 20px rgba(18, 32, 43, 0.08);
    --button-ghost-background: #ffffff;
    --button-ghost-color: #12202b;
    --button-ghost-border: #b7c3cf;
    --button-danger-background: linear-gradient(180deg, #a84f46, #843831);
    --button-danger-color: #fff;

    --focus-border-color: rgba(23, 73, 99, 0.56);
    --focus-ring: 0 0 0 3px rgba(23, 73, 99, 0.12);
    --shadow-elevated: 0 1px 2px rgba(18, 32, 43, 0.08), 0 14px 30px rgba(18, 32, 43, 0.06);

    --radius-pill: 6px;
    --radius-panel: 8px;
    --radius-card: 7px;
    --radius-field: 5px;
    --radius-notice: 6px;
    --radius-section: 8px;
    --radius-mobile-shell: 8px;
    --radius-mobile-field: 5px;
}

body {
    font-size: 15px;
    letter-spacing: 0;
    background-size: 40px 40px, 40px 40px, auto;
}

code {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
}

.site-header {
    padding-top: 0.65rem;
}

.site-header__inner {
    padding: 0.65rem 0.8rem;
    border-color: var(--color-line-strong);
    border-radius: var(--radius-panel);
    box-shadow: 0 1px 2px rgba(18, 32, 43, 0.08);
    backdrop-filter: none;
}

.brand__mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--radius-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(14, 47, 69, 0.18);
}

.brand__text strong {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.main-nav a {
    padding: 0.45rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--radius-field);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.main-nav a:hover {
    background: #f3f7fa;
    border-color: var(--color-line);
}

.button {
    min-height: 2.45rem;
    padding: 0.62rem 0.95rem;
    border-color: rgba(14, 47, 69, 0.22);
    border-radius: var(--radius-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.button:hover,
.button:focus-visible {
    transform: none;
}

.button--ghost {
    backdrop-filter: none;
}

.notice,
.panel,
.metric-card,
.auth-card,
.product-panel,
.cta-card,
.error-card {
    backdrop-filter: none;
    border-color: var(--color-line);
}

.hero__content h1,
.section-heading h2,
.auth-card h1,
.app-hero h1,
.error-card h1 {
    font-weight: 680;
    letter-spacing: -0.035em;
}

.hero__content h1 {
    max-width: 11ch;
}

.hero__lead,
.app-hero p,
.auth-card p,
.panel p {
    line-height: 1.55;
}

.eyebrow {
    color: var(--color-accent);
    font-weight: 700;
    letter-spacing: 0.16em;
}

.trust-strip span,
.chip-card,
.inline-meta span {
    border-color: var(--color-line);
    background: var(--chip-background);
}

.product-panel,
.section--workflow,
.section--security,
.cta-card {
    border-color: var(--color-line);
}

.metric-grid article,
.policy-grid article,
.step-card,
.security-card,
.use-case-grid article,
.stack-item,
.audit-feed__row,
.secret-box {
    border-color: var(--color-line);
    box-shadow: none;
}

input,
textarea,
select {
    min-height: 2.55rem;
    padding: 0.62rem 0.78rem;
    border-color: var(--field-border);
    box-shadow: inset 0 1px 0 rgba(18, 32, 43, 0.02);
}

input:focus,
textarea:focus,
select:focus {
    background: #fff;
}

.site-main {
    padding: 1.25rem 0 2.75rem;
}

.product-panel,
.panel,
.metric-card,
.auth-card,
.cta-card {
    padding: 1.15rem;
}

.app-hero {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-panel);
    background: #ffffff;
    box-shadow: var(--shadow-elevated);
}

.hero,
.section,
.app-hero,
.section-grid,
.metric-cards {
    margin-bottom: 1rem;
}

.form-grid,
.stack-list,
.audit-feed,
.metric-grid,
.security-grid,
.step-grid,
.metric-cards,
.section-grid,
.use-case-grid {
    gap: 0.75rem;
}

.panel__header,
.product-panel__header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--color-line);
}

.metric-card {
    min-height: 98px;
    gap: 0.45rem;
}

.metric-card strong {
    font-size: 1.75rem;
}

.metric-card::before {
    opacity: 1;
}

.section--upload {
    margin-bottom: 1rem;
}

.section--workflow,
.section--security {
    padding: 1.35rem;
}

.form-section {
    padding: 0.9rem;
}

.form-section__title {
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

textarea {
    min-height: 6.2rem;
}

.table-wrapper {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background: #fff;
}

.data-table th,
.data-table td {
    padding: 0.62rem 0.7rem;
}

.data-table th {
    border-bottom-color: var(--color-line-strong);
    background: #f5f8fb;
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.data-table tbody tr:nth-child(even) {
    background: #fbfcfe;
}

/* Home page: stricter enterprise landing surface. */
.page-home .hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    gap: 1.25rem;
    align-items: stretch;
    padding: 1.25rem;
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-section);
    background: #fff;
    box-shadow: var(--shadow-elevated);
}

.page-home .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.35rem 0.4rem 0.35rem 0.2rem;
}

.page-home .hero__content h1 {
    max-width: 12ch;
    font-size: clamp(2.9rem, 5.2vw, 5rem);
}

.page-home .hero__lead {
    max-width: 48ch;
    margin: 1rem 0 1.15rem;
}

.page-home .hero__actions {
    margin-bottom: 1.1rem;
}

.page-home .hero__panel {
    display: grid;
}

.page-home .product-panel {
    position: relative;
    min-height: 100%;
    padding: 1rem;
    border-color: var(--color-line-strong);
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.page-home .product-panel__header {
    align-items: flex-start;
    margin: -1rem -1rem 0.9rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-line-strong);
    background: #f3f7fa;
}

.page-home .product-panel__header strong {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
}

.page-home .metric-grid {
    gap: 0;
    border: 1px solid var(--color-line);
    background: #fff;
}

.page-home .metric-grid article {
    padding: 0.75rem;
    border: 0;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
    background: #fff;
}

.page-home .metric-grid article:nth-child(2n) {
    border-right: 0;
}

.page-home .metric-grid article:nth-last-child(-n+2) {
    border-bottom: 0;
}

.page-home .metric-grid span,
.page-home .step-card span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-home .metric-grid strong {
    display: block;
    margin: 0.2rem 0 0.15rem;
    font-size: 0.98rem;
    line-height: 1.25;
}

.page-home .activity-log {
    gap: 0;
    border: 1px solid var(--color-line);
    border-top: 0;
    margin-top: 0;
    background: #fff;
}

.page-home .activity-log div {
    grid-template-columns: 4.2rem 1fr;
    padding: 0.62rem 0.75rem;
    border-top: 1px solid var(--color-line);
}

.page-home .activity-log span {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.page-home .activity-log strong {
    font-size: 0.88rem;
}

.page-home .section--tight {
    margin-top: -0.2rem;
}

.page-home .chip-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #fff;
}

.page-home .chip-card {
    justify-content: center;
    min-height: 3.1rem;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-right: 1px solid var(--color-line);
    border-radius: 0;
    background: #fff;
    font-size: 0.86rem;
    font-weight: 650;
}

.page-home .chip-card:last-child {
    border-right: 0;
}

.page-home .section-heading {
    display: block;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-line);
}

.page-home .section-heading .eyebrow {
    margin-bottom: 0.35rem;
}

.page-home .section-heading h2 {
    max-width: 24ch;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
}

.page-home .section--workflow,
.page-home .section--security {
    border-color: var(--color-line-strong);
    background: rgba(255, 255, 255, 0.86);
}

.page-home .step-grid,
.page-home .security-grid,
.page-home .use-case-grid {
    gap: 0.85rem;
}

.page-home .step-card,
.page-home .security-card,
.page-home .use-case-grid article {
    position: relative;
    padding: 1rem;
    border-color: var(--color-line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: none;
}

.page-home .step-card::before,
.page-home .security-card::before,
.page-home .use-case-grid article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
    opacity: 0.9;
}

.page-home .step-card:hover,
.page-home .security-card:hover,
.page-home .use-case-grid article:hover {
    transform: none;
    box-shadow: 0 0 0 1px var(--color-line-strong);
}

.page-home .step-card .icon,
.page-home .security-card .icon,
.page-home .use-case-grid .icon {
    color: var(--color-accent);
}

.page-home .step-card h3,
.page-home .security-card h3,
.page-home .use-case-grid h3 {
    margin: 0.55rem 0 0.35rem;
    font-size: 1.02rem;
}

.page-home .step-card p,
.page-home .security-card p,
.page-home .use-case-grid p {
    margin: 0;
    line-height: 1.5;
}

.page-home .cta-card {
    padding: 1.25rem;
    border-left: 4px solid var(--color-accent);
    background: #fff;
}

/* ── Active nav ── */
.main-nav a.is-active {
    background: #edf4f8;
    border-color: rgba(23, 73, 99, 0.22);
    color: var(--color-accent);
}

/* ── Badge fine-tuning ── */
.badge {
    border-radius: 4px;
    box-shadow: none;
}

/* ── Toggle fine-tuning ── */
.toggle input[type="checkbox"] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ── Form section ── */
.form-section {
    border-color: var(--color-line);
    box-shadow: none;
}

/* ── Nav toggle ── */
.nav-toggle {
    border-radius: var(--radius-field);
    border-color: var(--color-line-strong);
}

/* ── File input ── */
input[type="file"]::file-selector-button {
    border-radius: var(--radius-field);
}

@media (max-width: 980px) {
    .site-header__inner {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .brand {
        flex: 1 1 auto;
    }

    .nav-collapsible {
        flex-basis: 100%;
    }

    .page-home .hero {
        grid-template-columns: 1fr;
    }

    .page-home .chip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .chip-card:nth-child(2n) {
        border-right: 0;
    }

    .page-home .chip-card:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--color-line);
    }

    .page-home .chip-card:last-child {
        grid-column: 1 / -1;
        border-bottom: 0;
    }

    .page-home .section-heading {
        display: block;
    }
}

@media (max-width: 680px) {
    body {
        font-size: 15px;
    }

    .site-header {
        padding-top: 0.5rem;
    }

    .site-main {
        padding-top: 0.9rem;
    }

    .product-panel,
    .panel,
    .metric-card,
    .auth-card,
    .cta-card {
        padding: 0.95rem;
    }

    .app-hero {
        padding: 0.85rem;
    }

    .nav-collapsible .main-nav a {
        border: 1px solid var(--color-line);
    }

    .page-home .hero {
        grid-template-columns: 1fr;
        padding: 0.9rem;
    }

    .page-home .hero__content {
        padding: 0;
    }

    .page-home .hero__content h1 {
        font-size: clamp(2.25rem, 13vw, 3.1rem);
    }

    .page-home .chip-grid,
    .page-home .metric-grid,
    .page-home .section-heading {
        grid-template-columns: 1fr;
    }

    .page-home .chip-card,
    .page-home .metric-grid article {
        border-right: 0;
        border-bottom: 1px solid var(--color-line);
    }

    .page-home .chip-card:last-child,
    .page-home .metric-grid article:last-child {
        border-bottom: 0;
    }
}