/* ============================================================================
   AlgoForgeX — marketing.css
   Single source of style for the public (anonymous) marketing site.

   Introduced in Phase 187A. Consolidates the nav / footer / form chrome that was
   previously duplicated inline across Landing / Features / Pricing and the
   _PublicLayout / _PublicFooter partials, and self-hosts the web fonts so the
   public site makes no Google Fonts CDN request.

   Loaded by:
     - _PublicLayout.cshtml  (Contact / Terms / Privacy / Blog / Glossary / Changelog)
     - Landing.cshtml, FeaturesPage.cshtml, PricingPage.cshtml  (linked directly)

   Page-specific styles still live in each page's own <style> block (hero, pricing
   table, feature showcase, …); this file holds only what is shared. The "foundry"
   design tokens below give Phase 187B–D a single place to evolve the visual
   language. 187A is an invisible refactor: every value here matches what the pages
   rendered before, so the shared chrome looks identical.
   ============================================================================ */

/* ── Self-hosted fonts (replaces the Google Fonts CDN on public pages) ──────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
}
@font-face {
    /* Icon font: `block` avoids a flash of the ligature text (e.g. "psychology"). */
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/material-icons.woff2') format('woff2');
}
/* Canonical Material Icons rule (mirrors the CSS Google's CDN served) so icons
   render identically now that the font is self-hosted. */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ── Foundry design tokens ──────────────────────────────────────────────────
   Defined once; the shared components below and the per-page styles migrate onto
   these in 187B–D. Values match the current palette so 187A stays invisible. */
:root {
    --afx-bg: #0a0a1a;
    --afx-text: #e0e0e0;
    --afx-accent: #7c4dff;
    --afx-accent-strong: #651fff;
    --afx-accent-soft: #b39dff;
    --afx-verify: #4dd0e1; /* semantic reconciled / verified teal */
    --afx-hairline: rgba(255, 255, 255, 0.08);
    --afx-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --afx-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ── Reset + base ───────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--afx-font-sans);
    background: var(--afx-bg);
    color: var(--afx-text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Animated backdrop (static baseline) ──
   The full-bleed marquee pages (Landing/Features) override .bg-grid with an
   animated variant and add extra glows in their own <style>; legal/form pages
   use this static baseline. */
.bg-grid {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(124, 77, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 77, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}
.bg-glow {
    position: fixed; top: -30%; left: 50%; transform: translateX(-50%);
    width: 700px; height: 700px; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(124, 77, 255, 0.08) 0%, transparent 70%);
}
.page-content, .page-content-wrapper { position: relative; z-index: 1; }

/* ── Top navigation (single source; markup in _PublicNav.cshtml) ────────────── */
.top-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(30, 30, 46, 0.95); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 32px; display: flex; align-items: center; justify-content: space-between;
}
.logo { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; color: #e0e0e0; }
.logo span { color: #7c4dff; }
.top-nav { display: flex; align-items: center; gap: 20px; }
.top-nav a { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.top-nav a:hover { color: #fff; }
.top-nav a.active { color: #7c4dff; } /* current-section highlight (was inline style) */
.btn-signin {
    background: #7c4dff; color: #fff; padding: 8px 24px; border-radius: 6px;
    font-weight: 600; text-decoration: none; font-size: 0.85rem; transition: background 0.2s;
}
.btn-signin:hover { background: #651fff; color: #fff; }

/* ── Mobile menu (checkbox-toggle drawer) ───────────────────────────────────── */
.mobile-toggle { display: none; position: absolute; opacity: 0; width: 0; height: 0; }
.hamburger {
    display: none; cursor: pointer; width: 40px; height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.7)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem transparent;
    appearance: none; -webkit-appearance: none;
}
.hamburger:hover { background-color: rgba(255, 255, 255, 0.06); }
.mobile-nav {
    display: none; position: fixed; top: 56px; left: 0; right: 0;
    flex-direction: column; gap: 4px; padding: 12px 16px;
    background: rgba(10, 10, 26, 0.97); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); z-index: 999;
}
.mobile-nav a {
    color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.95rem;
    font-weight: 500; padding: 12px 16px; border-radius: 8px; transition: background 0.2s;
}
.mobile-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.mobile-nav a.active { color: #7c4dff; }
.mobile-nav .btn-signin-mobile {
    background: #7c4dff; color: #fff; text-align: center; border-radius: 8px;
    font-weight: 600; margin-top: 4px;
}
.mobile-nav .btn-signin-mobile:hover { background: #651fff; }
.mobile-toggle:checked ~ .mobile-nav { display: flex; }

@media (max-width: 768px) {
    .hamburger { display: block; }
    .top-nav { display: none; }
    .top-bar { padding: 10px 16px; }
}

/* ── Narrow-column chrome for form / legal pages (Contact, Terms, Privacy, …) ── */
.public-content {
    padding-top: 110px; max-width: 760px; margin: 0 auto;
    padding-left: 24px; padding-right: 24px;
}
.card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
/* Public action button. The full-width variant is scoped to the narrow form/legal
   column (.public-content, e.g. the Contact submit button) — NOT the base rule — so
   the Landing/Features hero + CTA buttons keep their natural (padded) width. Making
   width:100% the base leaked full-width onto those buttons, since their inline rules
   don't reset width. */
.btn-primary {
    background: linear-gradient(135deg, #7c4dff 0%, #651fff 100%);
    color: #fff; border: none; padding: 14px 32px;
    border-radius: 9px; font-size: 1rem; font-weight: 700; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none; display: inline-block; text-align: center;
    box-shadow: 0 4px 18px rgba(124, 77, 255, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(124, 77, 255, 0.5); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.public-content .btn-primary { width: 100%; }
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; font-size: 0.82rem; font-weight: 600;
    opacity: 0.75; margin-bottom: 6px; letter-spacing: 0.2px;
}
.form-input {
    width: 100%; padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px; color: #e0e0e0;
    font-size: 0.95rem; font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.form-input:focus {
    outline: none; border-color: #7c4dff;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.15);
}
.form-input::placeholder { color: rgba(255, 255, 255, 0.28); }
select.form-input { appearance: auto; background: #1a1a2e; color: #e0e0e0; }
select.form-input option { background: #1a1a2e; color: #e0e0e0; }
textarea.form-input { resize: vertical; min-height: 130px; line-height: 1.5; }
.alert-success {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 10px; padding: 18px; color: #81c784;
}
.alert-warning {
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 10px; padding: 14px 16px; color: #ffb74d; font-size: 0.9rem;
}

@media (max-width: 768px) {
    .public-content { padding-top: 90px; }
    .card { padding: 22px 18px; border-radius: 14px; }
    .contact-name-email-grid { grid-template-columns: 1fr !important; }
}

/* ── Shared public footer (markup in _PublicFooter.cshtml) ──────────────────── */
.afx-public-footer {
    padding: 32px 24px; text-align: center; font-size: 0.75rem; line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.04); margin-top: 48px;
}
.afx-public-footer .afx-footer-wrap { max-width: 900px; margin: 0 auto; }
.afx-public-footer .afx-footer-links { margin-bottom: 12px; }
.afx-public-footer .afx-footer-links a {
    color: rgba(255, 255, 255, 0.55); text-decoration: none;
    margin: 0 10px; font-size: 0.85rem; transition: color 0.2s;
}
.afx-public-footer .afx-footer-links a:hover { color: #7c4dff; }
.afx-public-footer .afx-footer-brand { font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.afx-public-footer .afx-footer-disclaimer {
    display: block; margin-top: 6px; opacity: 0.4;
    max-width: 820px; margin-left: auto; margin-right: auto;
}
.afx-public-footer .afx-footer-copy { margin-top: 14px; opacity: 0.45; font-size: 0.72rem; }
@media (max-width: 600px) {
    .afx-public-footer { padding: 24px 16px; }
    .afx-public-footer .afx-footer-links a { margin: 0 6px; font-size: 0.78rem; }
}

/* ── Foundry utilities ──
   Available for 187B–D (monospace-as-proof, eyebrow labels, verify tint). Defined
   here but intentionally unused in 187A so the refactor stays invisible. */
.afx-mono { font-family: var(--afx-font-mono); font-variant-numeric: tabular-nums; }
.afx-eyebrow {
    font-family: var(--afx-font-mono); text-transform: uppercase;
    letter-spacing: 2px; font-size: 0.7rem; font-weight: 600;
}
.afx-verify { color: var(--afx-verify); }