/* ═══════════════════════════════════════════════════════════
 *  css/shared.css — Land of Profits
 *  Global CSS variables + navigation.
 *  Linked by all public-facing HTML pages.
 * ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --navy:#0d1b2e; --navy2:#162236; --navy3:#1c2e45;
  --mocha:#4c3724; --mocha2:#5e4530; --mocha3:#3a2818;

  /* ── Gold ── */
  --gold:#c9a96e; --gold2:#e8c98a;
  --gold-lt:rgba(201,169,110,0.12);
  --gold-dark:#a07840; --gold-glow:rgba(201,169,110,0.18);
  --gold-tier:#c9a96e;

  /* ── Accents ── */
  --rust:#8b3a2a; --rust2:#a84533; --rust-lt:rgba(139,58,42,0.1);
  --plum:#5a2d82; --plum2:#6e3a9a; --plum-lt:rgba(90,45,130,0.1);
  --violet:#7b52ab; --violet-lt:rgba(123,82,171,0.12);
  --lavender:#c4b0e8; --lav-lt:rgba(196,176,232,0.15);
  --sage:#2e6b48; --sage2:#38835a; --sage-lt:rgba(46,107,72,0.10);
  --amber:#b8860b; --amber2:#d4a017;
  --blue:#1a4a7a; --blue2:#1e5a94; --blue-lt:rgba(26,74,122,0.1);
  --indigo:#1e3a6a; --indigo2:#2a4f90; --indigo-lt:rgba(30,58,106,0.1);

  /* ── Tiers ── */
  --bronze:#cd7f32; --silver:#a8a9ad;

  /* ── Neutrals ── */
  --sand:#f5efe6; --cream:#faf7f2; --white:#ffffff;
  --fog:#e8e2da; --smoke:#f0ebe3; --mist:#f7f4f0;
  --ink:#1a2535; --slate:#6a7a8a; --ghost:#9aaabb;

  /* ── Status ── */
  --ok:#2e8b57; --ok-lt:#e6f4ec; --err:#c0392b;

  /* ── Typography ── */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;

  /* ── Radius ── */
  --r6:6px; --r8:8px; --r10:10px; --r12:12px;
  --r14:14px; --r16:16px; --r20:20px; --r24:24px;

  /* ── Shadows ── */
  --sh:0 2px 12px rgba(0,0,0,0.07);
  --sh-md:0 8px 32px rgba(0,0,0,0.10);
  --sh-lg:0 20px 60px rgba(0,0,0,0.14);
  --shadow:0 2px 12px rgba(0,0,0,0.07);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.14);

  /* ── Easing ── */
  --ease:cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  /* ── Extended Colors ── */
  --teal:#1a6b5a; --teal2:#22876f; --teal-lt:rgba(26,107,90,0.1);
  --sky:#5b8fd4;
  --warn:#c17b2a; --warn-lt:#fdf4e7;
  --shadow-md:0 8px 32px rgba(0,0,0,0.10);
}

/* ─── NAV ───────────────────────────────────────────────────── */
      #nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5%;
        height: 72px;
        background: rgba(13, 27, 46, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(201, 169, 110, 0.15);
        transition: all 0.3s;
      }
      #nav.scrolled {
        height: 62px;
        background: rgba(13, 27, 46, 0.98);
      }
      .nav-logo {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .nav-logo-mark {
        width: 36px;
        height: 36px;
        background: var(--gold);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .nav-logo-mark svg {
        width: 18px;
        height: 18px;
        fill: var(--navy);
      }
      .nav-logo-text {
        font-family: var(--serif);
        font-size: 20px;
        font-weight: 600;
        color: var(--white);
        letter-spacing: 0.2px;
      }
      .nav-logo-text span {
        color: var(--gold);
      }
      .lop-sfx {
        color: var(--gold);
        font-weight: 600;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 2px;
      }
      .nav-links a {
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.75);
        border-radius: var(--r6);
        transition: all 0.15s;
        letter-spacing: 0.2px;
      }
      .nav-links a:hover {
        color: var(--white);
        background: rgba(255, 255, 255, 0.07);
      }
      .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .btn-ghost-nav {
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        border-radius: var(--r6);
        transition: all 0.15s;
        letter-spacing: 0.2px;
      }
      .btn-ghost-nav:hover {
        color: var(--white);
        background: rgba(255, 255, 255, 0.07);
      }
      .btn-gold {
        padding: 9px 22px;
        background: var(--gold);
        color: var(--navy);
        font-size: 13px;
        font-weight: 600;
        border-radius: var(--r6);
        letter-spacing: 0.3px;
        transition: all 0.15s;
        border: none;
        cursor: pointer;
      }
      .btn-gold:hover {
        background: var(--gold2);
        transform: translateY(-1px);
      }
      .lang-pill {
        padding: 7px 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--r6);
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .lang-pill svg {
        width: 12px;
        height: 12px;
        fill: currentColor;
      }