/* ═══════════════════════════════════════════════
   ARCHERGATE — GLOBAL STYLESHEET
   Single source of truth. No duplication.
═══════════════════════════════════════════════ */

:root {
  --text:   #E8E4DC;
  --text2:  #9B978E;
  --text3:  #6B6860;
  --teal:   #6A9ABF;
  --gold:   #C9A96E;
  --green:  #7EB87A;
  --purple: #B09FD8;
  --serif:  'DM Serif Display', Georgia, serif;
  --mono:   'IBM Plex Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #000;
  color: var(--text);
  min-height: 100vh;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Normalized numbers — consistent tabular mono rendering everywhere ── */
.num,
.price-val,
.stat-val,
.stat-n,
[class*="price"] [class*="val"],
[class*="stat"] [class*="val"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }

/* ── Canvas field ── */
canvas#field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ── Ambient glow ── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 800px 600px at 50% 25%, rgba(60,100,180,0.22) 0%, transparent 100%),
    radial-gradient(ellipse 1000px 700px at 15% 65%, rgba(50,90,170,0.16) 0%, transparent 100%),
    radial-gradient(ellipse 900px 550px at 85% 40%, rgba(70,110,190,0.14) 0%, transparent 100%);
}

/* ── Wireframe mesh (sitewide) ── */
.hero-mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.hero-mesh canvas { width: 100%; height: 100%; }
.hero-mesh::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 140% 100% at 50% 30%, transparent 30%, rgba(0,0,0,0.5) 100%);
}

/* ── Film grain ── */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 512px 512px;
}

/* ── Fade-in animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.f  { opacity: 0; animation: fadeUp 0.8s ease-out forwards; }
.f1 { animation-delay: 0s; }
.f2 { animation-delay: 0.12s; }
.f3 { animation-delay: 0.24s; }
.f4 { animation-delay: 0.36s; }
.f5 { animation-delay: 0.48s; }
.f6 { animation-delay: 0.6s; }

/* ══ NAV ══════════════════════════════════════ */
.nav {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 40px;
  border-bottom: 1px solid rgba(232,228,220,0.06);
}

.nav-brand {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  white-space: nowrap; color: var(--text);
}

.nav-links {
  display: flex; gap: 28px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text3);
}
.nav-links a { transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--teal); }

.nav-cta {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text3);
  border: 1px solid rgba(232,228,220,0.15);
  padding: 8px 18px; transition: all 0.2s;
}
.nav-cta:hover { border-color: var(--teal); color: var(--teal); }

/* ── Mobile bottom nav ── */
.nav-bottom {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(2,4,10,0.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(232,228,220,0.07);
  justify-content: space-around; align-items: center;
  padding: 11px 0 calc(11px + env(safe-area-inset-bottom));
}
.nav-bottom a {
  font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text3); text-align: center; transition: color 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 2px 10px;
}
.nav-bottom a:hover, .nav-bottom a.active { color: var(--teal); }

/* ══ GLASS PANEL ═════════════════════════════ */
.glass {
  background: rgba(232,228,220,0.04);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(232,228,220,0.1);
  border-top: 1px solid rgba(232,228,220,0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.glass:hover {
  background: rgba(232,228,220,0.07);
  border-color: rgba(232,228,220,0.15);
}

/* ══ ROLE CHIPS ══════════════════════════════ */
.chip {
  display: inline-block;
  font-size: 7px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 500; padding: 3px 10px;
}
.chip-dev    { color: var(--teal);   border: 1px solid rgba(106,154,191,0.35); background: rgba(106,154,191,0.08); }
.chip-buyer  { color: var(--gold);   border: 1px solid rgba(201,169,110,0.35); background: rgba(201,169,110,0.08); }
.chip-studio { color: var(--gold);   border: 1px solid rgba(201,169,110,0.35); background: rgba(201,169,110,0.08); }
.chip-agent  { color: var(--green);  border: 1px solid rgba(126,184,122,0.35); background: rgba(126,184,122,0.08); }
.chip-disc   { color: var(--purple); border: 1px solid rgba(176,159,216,0.35); background: rgba(176,159,216,0.08); }

/* ══ SECTION ══════════════════════════════════ */
.section { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 0 24px 80px; }
.section-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); margin-bottom: 40px; }

/* ══ BUTTON ══════════════════════════════════ */
.btn {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text);
  background: rgba(232,228,220,0.04);
  border: 1px solid rgba(232,228,220,0.18);
  padding: 12px 24px; cursor: pointer; transition: all 0.25s;
}
.btn:hover   { border-color: var(--teal); color: var(--teal); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-sm { padding: 8px 16px; font-size: 9px; }

/* ══ FORM ════════════════════════════════════ */
.fg { margin-bottom: 12px; }
.fg label {
  display: block; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text3); margin-bottom: 5px;
}
.fg input, .fg select, .fg textarea {
  width: 100%;
  background: rgba(232,228,220,0.03);
  border: 1px solid rgba(232,228,220,0.1);
  color: var(--text); font-family: var(--mono); font-size: 12px;
  padding: 11px 14px; outline: none; transition: border-color 0.2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--teal); }
.fg select { background: #050810; cursor: pointer; }
.fg textarea { min-height: 72px; resize: vertical; }
.fg input::placeholder, .fg textarea::placeholder { color: var(--text3); }

/* ══ FOOTER ══════════════════════════════════ */
.footer {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(232,228,220,0.06);
  padding: 28px 40px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-links { display: flex; gap: 24px; font-size: 11px; letter-spacing: 1px; color: var(--text3); }
.footer-links a { transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-right { text-align: right; }
.footer-copy  { font-size: 10px; letter-spacing: 1px; color: var(--text3); margin-bottom: 2px; }
.footer-city  { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); }

/* ══ UTILS ═══════════════════════════════════ */
.z1  { position: relative; z-index: 1; }
.sep { height: 1px; background: rgba(232,228,220,0.07); margin: 40px 0; }

/* ══ MOBILE ══════════════════════════════════ */
@media (max-width: 640px) {
  .nav        { padding: 14px 20px; }
  .nav-links  { display: none; }
  .nav-cta    { display: none; }
  .nav-bottom { display: flex; }

  /* push page content above bottom nav */
  body > *:last-child { padding-bottom: 72px; }
  .footer { padding: 20px; flex-direction: column; text-align: center; padding-bottom: 80px; }
}

@media (min-width: 641px) {
  .nav-bottom { display: none !important; }
}

/* ── Notification bell (global — used by login-overlay.js on all pages) ── */
#ag-notif-bell { position: relative; cursor: pointer; color: var(--text3); transition: color 0.2s; }
#ag-notif-bell:hover { color: var(--teal); }
.ag-notif-badge { position: absolute; top: -4px; right: -6px; min-width: 14px; height: 14px; border-radius: 7px; background: #e07070; color: #fff; font-family: var(--mono); font-size: 7px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; }
.ag-notif-drop { display: none; position: absolute; top: 28px; right: -10px; width: 320px; max-height: 400px; overflow-y: auto; background: rgba(8,12,20,0.97); border: 1px solid rgba(232,228,220,0.12); border-top: 1px solid rgba(232,228,220,0.2); box-shadow: 0 16px 48px rgba(0,0,0,0.6); z-index: 100; }
.ag-notif-drop.open { display: block; }
.ag-notif-empty { padding: 32px 20px; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); }
.ag-notif-item { display: block; padding: 14px 16px; border-bottom: 1px solid rgba(232,228,220,0.06); transition: background 0.15s; text-decoration: none; }
.ag-notif-item:hover { background: rgba(232,228,220,0.04); }
.ag-notif-item.unread { background: rgba(106,154,191,0.04); border-left: 2px solid var(--teal); }
.ag-notif-title { font-family: var(--mono); font-size: 11px; color: var(--text); margin-bottom: 3px; }
.ag-notif-body { font-size: 10px; color: var(--text3); line-height: 1.5; }
.ag-notif-time { font-family: var(--mono); font-size: 9px; color: var(--text3); opacity: 0.6; margin-top: 4px; }
.ag-notif-footer { padding: 10px 16px; border-top: 1px solid rgba(232,228,220,0.08); text-align: center; }
.ag-notif-footer button { background: none; border: none; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); cursor: pointer; padding: 4px 8px; transition: opacity 0.2s; }
.ag-notif-footer button:hover { opacity: 0.7; }