/**
 * CryptoGate — Shared Redesign Primitives ("quiet luxury" DNA backbone)
 * Linked by every redesigned surface (docs, learn, payment, dashboard, …) on top of
 * sites-base.css so they share the SAME brand DNA: glass top nav, footer, eyebrow,
 * section heads, article template, and card hovers. Page-specific layout lives in each
 * page's own stylesheet ("same skin, different cut"). Tokens come from sites-base.css.
 *
 * (info.cryptogate.live carries an equivalent set inline in information-redesign.css.)
 */

/* ============================================================
   GLASS TOP NAV
   ============================================================ */
.site-nav {
    position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 500;
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--color-bg-primary) 72%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
}
.site-nav-inner {
    width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; gap: 1.5rem;
}
.nav-brand {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em;
    color: var(--color-text-primary); text-decoration: none; margin-right: .5rem;
}
.nav-brand:hover { text-decoration: none; color: var(--color-text-primary); }
.nav-mark {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--grad);
    box-shadow: 0 6px 16px -6px rgba(99,102,241,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.nav-mark img { width: 100%; height: 100%; border-radius: 8px; display: block; }
.nav-logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; display: block; }
.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links a {
    padding: .45rem .7rem; font-size: .9rem; font-weight: 500;
    color: var(--color-text-secondary); border-radius: 8px; text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--color-text-primary); background: var(--color-bg-secondary); text-decoration: none; }
.nav-links a.active { color: var(--color-text-primary); font-weight: 600; }
.nav-spacer { flex: 1; }
.nav-utility { display: flex; align-items: center; gap: .35rem; }
.nav-icon-btn {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 9px; background: transparent;
    color: var(--color-text-secondary); cursor: pointer; font-size: .9rem;
    transition: color .15s ease, background .15s ease;
}
.nav-icon-btn:hover { color: var(--color-text-primary); background: var(--color-bg-secondary); }
.nav-signin {
    font-size: .9rem; font-weight: 500; color: var(--color-text-secondary);
    text-decoration: none; padding: .45rem .6rem; border-radius: 8px;
}
.nav-signin:hover { color: var(--color-text-primary); text-decoration: none; }

/* ============================================================
   EYEBROW + SECTION HEAD
   ============================================================ */
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; padding: 6px 13px;
    border: 1px solid var(--hairline); background: var(--color-bg-secondary);
    border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    color: var(--color-text-secondary);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--grad); }
.grad-text, .grad {
    background-image: var(--grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   ARTICLE / READING TEMPLATE (shared by docs deep pages, learn articles)
   ============================================================ */
.breadcrumb { font-size: .82rem; color: var(--color-text-tertiary); margin-bottom: 1rem; }
.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text-primary); }
.breadcrumb span { margin: 0 .4rem; opacity: .5; }

/* ============================================================
   SHARED FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--hairline); margin-top: 4rem; background: var(--color-bg-secondary); }
.site-footer-inner {
    max-width: 1280px; margin: 0 auto; padding: 2.5rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.site-footer-inner p { margin: 0; font-size: .85rem; color: var(--color-text-tertiary); }
.site-footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.site-footer-links a { font-size: .85rem; color: var(--color-text-secondary); text-decoration: none; }
.site-footer-links a:hover { color: var(--color-text-primary); }

@media (max-width: 760px) {
    .nav-links { display: none; }
}