* { box-sizing: border-box; }

:root {
    --mono-bg: #131313;
    --mono-accent: #006f61;
    --text: #f6f5ef;
    --muted: #bdc2bf;
    --muted-2: #909892;
    --line: rgba(255, 255, 255, .105);
    --line-strong: rgba(255, 255, 255, .16);
    --accent-soft: #47b9ad;
    --mono-font: "Space Grotesk", Bahnschrift, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: var(--mono-bg);
    color: #f0f0ed;
    font-family: var(--mono-font);
    letter-spacing: .005em;
    line-height: 1.48;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

html {
    scrollbar-color: #3c3c3c #111;
    scrollbar-width: thin;
}

body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, svg, video, canvas { max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--text); text-wrap: balance; }

.container { width: min(1100px, 94%); margin-inline: auto; }
.container.wide { width: min(1220px, 94%); }
.public-layout main { background: var(--mono-bg); }

.public-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid var(--line);
    background: #0f0f0f;
    backdrop-filter: blur(14px);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 0;
}

.brand { display: inline-flex; min-height: 44px; align-items: center; }

.brand img.brand-logo {
    display: block;
    width: min(210px, 100%);
    max-height: 68px;
    object-fit: contain;
}

.public-nav { display: inline-flex; align-items: center; gap: 1rem; }

.public-nav > a:not(.btn) {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
}

.btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: 3px !important;
    background: var(--mono-accent) !important;
    color: #fff !important;
    cursor: pointer;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.btn-ghost { border-color: var(--line-strong); background: transparent !important; color: var(--text) !important; }
.btn:hover, .btn:focus-visible { filter: brightness(1.08); }
.public-footer { border-top: 1px solid var(--line); background: #0f0f0f; }

@media (max-width: 820px) {
    html, body { max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
    h1, h2, h3, p, li, a, span { overflow-wrap: anywhere; }
    button, .btn { min-height: 44px; }
}