/* ============================================================
   JEGO PREMIUM DESIGN SYSTEM — v1 (2026-07-07)
   Shared premium layer for jegodigital.com
   Framework-agnostic (works with or without Tailwind).
   All classes are prefixed `jgo-` to avoid collisions.
   ============================================================ */

:root {
  --jgo-gold: #C5A059;
  --jgo-gold-soft: #E5C893;
  --jgo-gold-deep: #9a7a3c;
  --jgo-bg: #0f1115;
  --jgo-bg-deep: #0a0b0f;
  --jgo-ink: #f5f6f7;
  --jgo-muted: rgba(235, 238, 244, 0.58);
  --jgo-line: rgba(255, 255, 255, 0.07);
  --jgo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --jgo-nav-h: 72px;
}

/* ---------- global polish ---------- */
::selection { background: rgba(197, 160, 89, 0.85); color: #0f1115; }

html { scrollbar-color: rgba(197, 160, 89, 0.45) #0c0d11; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #0c0d11; }
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(197,160,89,.55), rgba(197,160,89,.25));
  border-radius: 99px; border: 2px solid #0c0d11;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(197, 160, 89, 0.85);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- premium hairlines ---------- */
.jgo-hairline {
  height: 1px; border: 0; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,.35) 30%, rgba(197,160,89,.35) 70%, transparent);
}

/* ============================================================
   NAV — floating glass bar
   Structure:
   <nav class="jgo-nav" data-jgo-nav>
     <div class="jgo-nav-shell">
       <a class="jgo-brand">…</a>
       <div class="jgo-nav-links"> <a class="jgo-nav-link">…</a> … </div>
       <div class="jgo-nav-actions"> lang / cta / burger </div>
     </div>
   </nav>
   ============================================================ */
.jgo-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: transform .5s var(--jgo-ease);
}
.jgo-nav-shell {
  position: relative;
  max-width: 80rem;
  margin: 12px auto 0;
  padding: 0 22px;
  height: var(--jgo-nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(21, 23, 30, 0.72), rgba(13, 14, 19, 0.66));
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: box-shadow .5s var(--jgo-ease), background .5s var(--jgo-ease),
              border-color .5s var(--jgo-ease), height .4s var(--jgo-ease), margin .4s var(--jgo-ease);
}
@media (max-width: 767px) {
  .jgo-nav-shell { margin: 10px 12px 0; padding: 0 16px; height: 60px; border-radius: 16px; }
}
@media (min-width: 768px) and (max-width: 1330px) {
  .jgo-nav-shell { margin-left: 16px; margin-right: 16px; }
}
/* gold hairline that fades in on scroll */
.jgo-nav-shell::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,.6), transparent);
  opacity: 0; transition: opacity .6s var(--jgo-ease);
}
.jgo-nav.is-scrolled .jgo-nav-shell {
  background: linear-gradient(180deg, rgba(17, 18, 24, 0.9), rgba(11, 12, 16, 0.88));
  border-color: rgba(197, 160, 89, 0.16);
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(197, 160, 89, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.jgo-nav.is-scrolled .jgo-nav-shell::after { opacity: 1; }

/* brand */
.jgo-brand {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-weight: 800; letter-spacing: -0.03em; font-size: 22px; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.jgo-brand .g { color: var(--jgo-gold); }
.jgo-brand .w { color: #fff; }
.jgo-brand .dot {
  width: 5px; height: 5px; margin-left: 5px; border-radius: 50%;
  background: var(--jgo-gold);
  box-shadow: 0 0 10px rgba(197,160,89,.9);
  align-self: center;
  animation: jgoPulse 3s ease-in-out infinite;
}
@keyframes jgoPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* links */
.jgo-nav-links { display: flex; align-items: center; gap: 4px; }
.jgo-nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 11px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.005em;
  color: rgba(235, 238, 244, 0.62);
  text-decoration: none; white-space: nowrap;
  transition: color .3s var(--jgo-ease), background .3s var(--jgo-ease);
}
.jgo-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.jgo-nav-link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--jgo-gold), var(--jgo-gold-soft));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s var(--jgo-ease);
}
.jgo-nav-link:hover::after { transform: scaleX(1); }
.jgo-nav-link.is-active { color: var(--jgo-gold-soft); }
.jgo-nav-link.is-active::after { transform: scaleX(1); }
/* highlighted offer link (e.g. Real Estate Leads) */
.jgo-nav-link.is-offer { color: var(--jgo-gold-soft); font-weight: 600; }
.jgo-nav-link.is-offer:hover { color: #fff; background: rgba(197, 160, 89, 0.09); }
.jgo-nav-link.is-offer.is-green { color: #5ee69a; }
.jgo-nav-link.is-offer.is-green:hover { background: rgba(37, 211, 102, 0.09); }
.jgo-nav-link.is-offer.is-green::after { background: linear-gradient(90deg, #25D366, #7af0ae); }

/* tiny pill tag inside a nav link */
.jgo-tag {
  font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  line-height: 1; padding: 4px 6.5px; border-radius: 99px;
  background: linear-gradient(135deg, var(--jgo-gold), var(--jgo-gold-soft));
  color: #14110a;
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.35);
}
.jgo-tag.is-green { background: linear-gradient(135deg, #25D366, #6ceea4); color: #04210f; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35); }

/* actions cluster */
.jgo-nav-actions { display: flex; align-items: center; gap: 10px; }

/* language segmented control */
.jgo-lang {
  display: inline-flex; align-items: center; padding: 3px;
  border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
}
.jgo-lang button, .jgo-lang .seg {
  padding: 5px 10px; border-radius: 99px; border: 0; cursor: pointer;
  background: transparent; color: rgba(235, 238, 244, 0.5);
  transition: all .3s var(--jgo-ease); line-height: 1;
}
.jgo-lang button.is-active, .jgo-lang .seg.is-active {
  background: linear-gradient(135deg, var(--jgo-gold), var(--jgo-gold-soft));
  color: #14110a; box-shadow: 0 3px 10px rgba(197, 160, 89, 0.35);
}

/* nav CTA — gold gradient pill with shine sweep */
.jgo-nav-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 99px;
  background: linear-gradient(135deg, #C5A059 0%, #E5C893 55%, #C5A059 100%);
  background-size: 200% 100%;
  color: #14110a; text-decoration: none;
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 10px 28px -8px rgba(197, 160, 89, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform .35s var(--jgo-ease), box-shadow .35s var(--jgo-ease), background-position .8s;
}
.jgo-nav-cta::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.6), transparent 75%);
  transition: left .9s var(--jgo-ease);
}
.jgo-nav-cta:hover { transform: translateY(-1.5px); box-shadow: 0 16px 36px -8px rgba(197, 160, 89, 0.7); background-position: 100% 50%; }
.jgo-nav-cta:hover::before { left: 130%; }

/* burger */
.jgo-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04); color: rgba(235, 238, 244, 0.85);
  transition: all .3s var(--jgo-ease);
}
.jgo-burger:hover { border-color: rgba(197, 160, 89, 0.5); color: var(--jgo-gold-soft); background: rgba(197, 160, 89, 0.08); }

/* body offset for fixed nav */
.jgo-nav-pad { height: calc(var(--jgo-nav-h) + 12px); }
@media (max-width: 767px) { .jgo-nav-pad { height: 70px; } }

/* ---------- mobile drawer / menu panel ---------- */
.jgo-drawer {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 9, 12, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--jgo-ease);
}
.jgo-drawer.is-open { opacity: 1; pointer-events: auto; }
.jgo-drawer-panel {
  position: absolute; top: 10px; right: 10px; left: 10px;
  border-radius: 22px; padding: 22px 22px 26px;
  background: linear-gradient(165deg, rgba(24, 26, 33, 0.97), rgba(12, 13, 17, 0.98));
  border: 1px solid rgba(197, 160, 89, 0.18);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-14px) scale(.98); opacity: 0;
  transition: transform .45s var(--jgo-ease), opacity .45s var(--jgo-ease);
  max-height: calc(100dvh - 20px); overflow-y: auto;
}
.jgo-drawer.is-open .jgo-drawer-panel { transform: translateY(0) scale(1); opacity: 1; }
.jgo-drawer-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 6px; text-decoration: none;
  font-size: 17px; font-weight: 600; color: rgba(240, 242, 246, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color .3s, padding-left .3s var(--jgo-ease);
}
.jgo-drawer-link:hover { color: var(--jgo-gold-soft); padding-left: 12px; }
.jgo-drawer-link .jgo-tag { font-size: 9px; }
/* staggered entrance */
.jgo-drawer.is-open .jgo-drawer-link { animation: jgoDrawerIn .5s var(--jgo-ease) both; }
.jgo-drawer.is-open .jgo-drawer-link:nth-child(1) { animation-delay: .05s; }
.jgo-drawer.is-open .jgo-drawer-link:nth-child(2) { animation-delay: .09s; }
.jgo-drawer.is-open .jgo-drawer-link:nth-child(3) { animation-delay: .13s; }
.jgo-drawer.is-open .jgo-drawer-link:nth-child(4) { animation-delay: .17s; }
.jgo-drawer.is-open .jgo-drawer-link:nth-child(5) { animation-delay: .21s; }
.jgo-drawer.is-open .jgo-drawer-link:nth-child(6) { animation-delay: .25s; }
.jgo-drawer.is-open .jgo-drawer-link:nth-child(7) { animation-delay: .29s; }
.jgo-drawer.is-open .jgo-drawer-link:nth-child(8) { animation-delay: .33s; }
@keyframes jgoDrawerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.jgo-btn-gold {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 32px; border-radius: 99px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #C5A059 0%, #E5C893 55%, #C5A059 100%);
  background-size: 200% 100%;
  color: #14110a; text-decoration: none;
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 16px 44px -10px rgba(197, 160, 89, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform .4s var(--jgo-ease), box-shadow .4s var(--jgo-ease), background-position .9s;
}
.jgo-btn-gold::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.55), transparent 75%);
  transition: left 1s var(--jgo-ease);
}
.jgo-btn-gold:hover { transform: translateY(-2.5px); box-shadow: 0 24px 60px -12px rgba(197,160,89,.8); background-position: 100% 50%; }
.jgo-btn-gold:hover::before { left: 130%; }

.jgo-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 30px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid rgba(197, 160, 89, 0.38);
  background: rgba(197, 160, 89, 0.07);
  color: var(--jgo-gold-soft); text-decoration: none;
  font-size: 14.5px; font-weight: 600;
  transition: all .35s var(--jgo-ease);
}
.jgo-btn-ghost:hover { border-color: var(--jgo-gold); background: rgba(197, 160, 89, 0.15); color: #fff; transform: translateY(-2px); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.jgo-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--jgo-gold);
}
.jgo-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--jgo-gold));
}
.jgo-eyebrow.is-centered::after {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--jgo-gold), transparent);
}

/* soft white gradient headline */
.jgo-grad {
  background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.6));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.jgo-grad-gold {
  background: linear-gradient(120deg, #d9b878 0%, #f0dcb0 45%, #C5A059 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================
   CARDS + PANELS
   ============================================================ */
.jgo-card {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform .45s var(--jgo-ease), border-color .45s var(--jgo-ease), box-shadow .45s var(--jgo-ease);
}
.jgo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 160, 89, 0.32);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.7), 0 0 40px -12px rgba(197, 160, 89, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* gold corner glow on hover */
.jgo-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 200px at 12% -8%, rgba(197, 160, 89, 0.12), transparent 60%);
  opacity: 0; transition: opacity .5s var(--jgo-ease);
}
.jgo-card:hover::before { opacity: 1; }

/* ============================================================
   REVEAL ON SCROLL  (pair with js/jego-premium.js)
   ============================================================ */
.jgo-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--jgo-ease), transform .8s var(--jgo-ease); }
.jgo-reveal.is-in { opacity: 1; transform: none; }
.jgo-reveal[data-jgo-delay="1"] { transition-delay: .08s; }
.jgo-reveal[data-jgo-delay="2"] { transition-delay: .16s; }
.jgo-reveal[data-jgo-delay="3"] { transition-delay: .24s; }
.jgo-reveal[data-jgo-delay="4"] { transition-delay: .32s; }

/* ============================================================
   AMBIENT ATMOSPHERE
   ============================================================ */
.jgo-aurora {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.jgo-aurora i {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  animation: jgoFloat 14s ease-in-out infinite alternate;
}
.jgo-aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -18vw; background: radial-gradient(circle, rgba(197,160,89,.2), transparent 65%); }
.jgo-aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -10vw; top: 4vw; background: radial-gradient(circle, rgba(102,126,234,.13), transparent 65%); animation-delay: -5s; }
.jgo-aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 30vw; bottom: -16vw; background: radial-gradient(circle, rgba(197,160,89,.1), transparent 65%); animation-delay: -9s; }
@keyframes jgoFloat { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(3vw, 2vw, 0) scale(1.08); } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .jgo-reveal { opacity: 1; transform: none; transition: none; }
  .jgo-aurora i, .jgo-brand .dot { animation: none; }
  .jgo-nav-cta, .jgo-btn-gold, .jgo-btn-ghost, .jgo-card { transition: none; }
}