/* =========================================================================
   SUVARNASETU / GUPTA JEWELLERS  —  "Gilded Bridge" theme
   Own design language (not a copy of any reference site's CSS):
   - Palette lifted from LOGO-1.png (deep navy ink + warm gold + diamond white)
   - Medium-toned surfaces throughout: no pure-white "light mode" panels and
     no near-black "dark mode" panels — every surface sits in a mid-tone
     navy/steel band so the site reads the same regardless of display mode.
   - Motion language: a horizontal "bridge" beam that glints, diamond-glint
     icon sparkles, scroll-reveal rises, and a rate-flash pulse for live data.
   ========================================================================= */

:root{
  /* Ink / navy family (medium-toned — never crushes to near-black) */
  --ink-deep:#1f2c42;      /* darkest surface used, still mid-tone not black */
  --ink:#283956;           /* primary page background */
  --ink-mid:#33486b;       /* card / panel background */
  --ink-soft:#3e5680;      /* raised panel / hover surface */
  --ink-line:#4a6690;      /* hairlines & borders on navy */

  /* Gold family (from logo diamond + wordmark) */
  --gold:#d8a838;
  --gold-light:#f3d377;
  --gold-pale:#fdeec0;
  --gold-dark:#a97a1c;

  /* Text */
  --text-hi:#f5f1e6;       /* headings on navy */
  --text-lo:#c9d3e6;       /* body copy on navy */
  --text-ink:#1c2740;      /* text on gold/pale surfaces */

  /* Signal colours */
  --up:#3ecf7e;
  --down:#f2665b;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 12px 28px rgba(10,16,28,.45);
  --shadow-sm:0 6px 16px rgba(10,16,28,.35);
}

*{box-sizing:border-box}
.gj-trading-links{line-height:1.8;overflow-wrap:anywhere}
#tradingStatus{min-height:1.5em;overflow-wrap:anywhere}
.gj-order-table-wrap{overflow-x:auto;margin-top:16px}
.gj-order-table-wrap td{overflow-wrap:anywhere}
.gj-order-table-wrap a{color:inherit;text-decoration:underline}
.gj-btn:disabled{opacity:.5;cursor:not-allowed}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--text-lo);
  font-family:"Segoe UI",Arial,"Noto Sans",sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(216,168,56,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(216,168,56,.08), transparent 55%),
    var(--ink);
  background-attachment:fixed;
}
main{flex:1 0 auto}
a{color:inherit}
img{max-width:100%}

/* ---------------------------------------------------------------------
   Decorative animated backdrop — slow-drifting diamond lattice, kept at
   low opacity so the medium-tone background never reads as "dark mode".
   --------------------------------------------------------------------- */
.gj-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.5}
.gj-bg::before,.gj-bg::after{
  content:"";position:absolute;inset:-25%;background-repeat:repeat;
}
.gj-bg::before{
  background-size:120px 120px;
  background-image:
    linear-gradient(45deg,rgba(216,168,56,.07) 25%,transparent 25.5%,transparent 74.5%,rgba(216,168,56,.07) 75%),
    linear-gradient(-45deg,rgba(216,168,56,.05) 25%,transparent 25.5%,transparent 74.5%,rgba(216,168,56,.05) 75%);
  animation:gj-drift-a 50s linear infinite;
}
.gj-bg::after{
  background-size:200px 200px;
  background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 2px, transparent 3px);
  animation:gj-drift-b 70s linear infinite;
}
@keyframes gj-drift-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(-240px,220px,0)}}
@keyframes gj-drift-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(260px,-200px,0)}}

/* ---------------------------------------------------------------------
   Bullion-market backdrop variant — used behind liverates.html only
   (opted into via body[data-bg="bullion"], wired in common.js).
   Same navy/gold palette as the default lattice, but the motif reads as
   a trading floor: stacked gold-ingot bars drifting like a conveyor,
   plus a faint zig-zag price-ticker weave scrolling across at a
   different speed, so the "live market" page feels distinct from the
   rest of the site while staying on-theme.
   --------------------------------------------------------------------- */
.gj-bg.bg-bullion{opacity:.6}
.gj-bg.bg-bullion::before{
  background-size:190px 96px;
  background-image:
    linear-gradient(115deg,
      rgba(216,168,56,.14) 0%, rgba(216,168,56,.14) 34%,
      transparent 34%, transparent 40%,
      rgba(243,211,119,.10) 40%, rgba(243,211,119,.10) 60%,
      transparent 60%, transparent 66%,
      rgba(216,168,56,.14) 66%, rgba(216,168,56,.14) 100%),
    linear-gradient(rgba(255,255,255,.06) 0 3px, transparent 3px 96px);
  animation:gj-bullion-drift 42s linear infinite;
}
.gj-bg.bg-bullion::after{
  background-size:280px 140px;
  background-image:
    repeating-linear-gradient(68deg, transparent 0 36px, rgba(255,255,255,.05) 36px 39px, transparent 39px 76px),
    repeating-linear-gradient(-68deg, transparent 0 36px, rgba(216,168,56,.08) 36px 39px, transparent 39px 76px);
  animation:gj-ticker-weave 30s linear infinite;
}
@keyframes gj-bullion-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-190px,190px,0)}}
@keyframes gj-ticker-weave{from{background-position:0 0,0 0}to{background-position:-280px 0,280px 0}}
@media(prefers-reduced-motion:reduce){
  .gj-bg.bg-bullion::before,.gj-bg.bg-bullion::after{animation:none}
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.gj-header{
  position:sticky;top:0;z-index:40;
  padding:10px 20px;
  background:linear-gradient(180deg, rgba(31,44,66,.97), rgba(40,57,86,.92));
  border-bottom:2px solid rgba(216,168,56,.35);
  backdrop-filter:blur(6px);
}
/* ---------------------------------------------------------------------
   Single-row header: quick-contact | logo | inline menu (flexes to fill
   remaining space, scrolls horizontally only if it truly has to) |
   hamburger (mobile only). Efficient use of width — no stacked rows,
   no wasted vertical space on desktop/tablet.
   --------------------------------------------------------------------- */
.gj-brand-row{
  width:min(1400px,100%);margin:auto;
  display:flex;align-items:center;gap:18px;
}
.gj-quick{flex:0 0 auto;display:flex;gap:8px}
.gj-dot{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-ink);font-weight:900;font-size:16px;text-decoration:none;
  background:linear-gradient(145deg,var(--gold-light),var(--gold-dark));
  border:2px solid rgba(255,255,255,.4);box-shadow:var(--shadow-sm);position:relative;
}
.gj-dot.whatsapp{background:linear-gradient(145deg,#37d67a,#1c9c53);color:#fff}
.gj-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(216,168,56,.55);animation:gj-ring 2.6s ease-out infinite}
.gj-dot.whatsapp::after{border-color:rgba(55,214,122,.55)}
@keyframes gj-ring{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}

.gj-brand{flex:0 0 auto;display:flex;align-items:center;gap:10px;text-decoration:none}
.gj-brand img{height:64px;width:auto;max-width:220px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.gj-brand-text{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.gj-brand-text strong{color:var(--gold-light);font-size:17px;font-weight:800;letter-spacing:.02em}
.gj-brand-text span{color:var(--text-lo);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

/* the inline menu itself — sits in the same row, fills what's left */
.gj-nav-links{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:stretch;justify-content:flex-end;flex-wrap:wrap;gap:2px;
}
.gj-nav-links::-webkit-scrollbar{display:none}
.gj-nav-link{
  flex:0 0 auto;white-space:nowrap;text-decoration:none;color:var(--text-lo);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  padding:10px 12px;display:flex;align-items:center;position:relative;border-radius:8px;
  transition:color .2s ease, background .2s ease;
}
.gj-nav-link:hover,.gj-nav-link:focus-visible{color:var(--gold-light);background:rgba(216,168,56,.1)}
.gj-nav-link.active{color:var(--gold-light)}
.gj-nav-link.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2.5px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light),var(--gold-dark));
  background-size:200% 100%;animation:gj-beam-shimmer 2.4s linear infinite;
}
@keyframes gj-beam-shimmer{from{background-position:0% 0}to{background-position:200% 0}}
.gj-nav-icon{display:inline-block;margin-right:6px;font-size:15px;vertical-align:-2px}

/* hamburger toggle — hidden on desktop, shown once the inline menu is
   swapped for the drawer at the responsive breakpoint below */
.gj-nav-toggle{
  display:none;flex:0 0 auto;width:44px;height:44px;margin-left:auto;border-radius:8px;
  border:1px solid var(--ink-line);background:var(--ink-soft);cursor:pointer;
  align-items:center;justify-content:center;
}
.gj-nav-toggle-icon{display:grid;gap:4px}
.gj-nav-toggle-icon i{display:block;width:18px;height:2px;background:var(--gold-light);border-radius:2px;transition:transform .2s ease, opacity .2s ease}

/* mobile dropdown drawer — sits in normal flow directly under the sticky
   header (it's the next element in the DOM), so it never affects the
   single-row header layout above it and needs no absolute positioning */
.gj-nav-drawer{
  display:none;z-index:35;
  background:rgba(24,34,52,.98);border-bottom:2px solid rgba(216,168,56,.35);
  box-shadow:var(--shadow);padding:8px;
  grid-template-columns:1fr 1fr;gap:4px;
  max-height:calc(100vh - 64px);overflow-y:auto;
}
.gj-nav-drawer.nav-open{display:none}
.gj-nav-link--drawer{border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;justify-content:flex-start}
.icon-spin{animation:gj-spin 2.6s linear infinite;display:inline-block}
.icon-bounce{animation:gj-bounce 1.5s ease-in-out infinite;display:inline-block}
.icon-pulse{animation:gj-pulse 1.8s ease-in-out infinite;display:inline-block}
.icon-wiggle{animation:gj-wiggle 1.9s ease-in-out infinite;display:inline-block}
.icon-swap{animation:gj-swap 2.1s ease-in-out infinite;display:inline-block}
.icon-shake{animation:gj-shake 2.3s ease-in-out infinite;display:inline-block}
.icon-glint{animation:gj-glint 2.2s ease-in-out infinite;display:inline-block}
@keyframes gj-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes gj-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes gj-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes gj-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}75%{transform:rotate(13deg)}}
@keyframes gj-swap{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(2px) rotate(180deg)}}
@keyframes gj-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes gj-glint{0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}50%{filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}}
.gj-nav-toggle{display:none}
.hidden{display:none!important}

/* ---------------------------------------------------------------------
   Marquee notice band
   --------------------------------------------------------------------- */
.gj-marquee{background:linear-gradient(90deg,var(--gold-dark),var(--gold-light) 50%,var(--gold-dark));overflow:hidden;position:relative;border-block:1px solid rgba(255,255,255,.28);box-shadow:0 7px 20px rgba(0,0,0,.2)}
.gj-marquee-track{display:inline-flex;white-space:nowrap;padding:8px 0;animation:gj-marquee-scroll 30s linear infinite;will-change:transform}
.gj-marquee:hover .gj-marquee-track,.gj-marquee:focus-within .gj-marquee-track{animation-play-state:paused}
.gj-marquee-item{display:inline-flex;align-items:center;padding:0 46px;font-size:clamp(12.5px,1.55vw,16px);color:#241a04;letter-spacing:.02em}
.gj-marquee-message{font-weight:850}
@keyframes gj-marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------------
   Hero / page title
   --------------------------------------------------------------------- */
.gj-page-title{
  color:var(--gold-light);text-align:center;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(21px,4vw,30px);font-weight:900;margin:22px 0 16px;
  animation:gj-title-glow 3.6s ease-in-out infinite;
}
@keyframes gj-title-glow{0%,100%{text-shadow:0 0 6px rgba(216,168,56,.25)}50%{text-shadow:0 0 20px rgba(216,168,56,.65)}}
.gj-subtitle{text-align:center;color:var(--text-lo);margin:-8px 0 18px;font-size:14px}

/* ---------------------------------------------------------------------
   Rate board — own redesigned table system with 3 tabs (Gold / Silver / Coins)
   --------------------------------------------------------------------- */
.gj-stage{width:min(1040px,96vw);margin:18px auto 0}
.gj-scroll-hint{display:none;text-align:center;color:var(--text-lo);font-size:13px;margin:0 auto 10px}

.gj-panel{display:grid;gap:14px}
.gj-panel.hidden{display:none}
.gj-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.gj-tab{appearance:none;border:1px solid var(--ink-line);border-radius:12px;background:var(--ink-mid);color:var(--text-lo);padding:13px 10px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:transform .2s ease-out,box-shadow .2s ease-out}
.gj-tab:hover{transform:translateY(-2px)}
.gj-tab:focus-visible{outline:3px solid var(--gold-light);outline-offset:2px}
.gj-tab.active{color:var(--text-ink);background:linear-gradient(135deg,var(--gold-dark),var(--gold-light) 55%,var(--gold-dark));border-color:var(--gold-light);box-shadow:0 8px 20px rgba(216,168,56,.35)}
.gj-rate-panel.hidden{display:none}

/* MCX-style mini futures strip */
.gj-future-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gj-future-card{
  border-radius:var(--radius-sm);overflow:hidden;position:relative;height:84px;
  border:1px solid var(--ink-line);box-shadow:var(--shadow-sm);
}
.gj-future-gold{background:linear-gradient(135deg,#6b4a12,#a97a1c 45%,#d8a838)}
.gj-future-silver{background:linear-gradient(135deg,#3c4b5e,#6a7c92 45%,#9fb0c2)}
.gj-future-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  background-size:220% 100%;animation:gj-sheen 3.6s ease-in-out infinite;
}
@keyframes gj-sheen{0%{background-position:120% 0}100%{background-position:-20% 0}}
.gj-future-card .gj-future-body{
  position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;color:#fff;
}
.gj-future-body strong{font-size:15px;text-transform:uppercase;text-shadow:0 2px 4px #000}
.gj-future-vals{display:flex;gap:14px;text-align:center}
.gj-future-vals div{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.gj-future-vals span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;opacity:.85}

/* Market summary strip (Comex / INR style cards) */
.gj-summary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gj-live-top-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
.gj-summary-card{min-width:0;overflow-wrap:anywhere}
.gj-panel,.gj-rate-panel{min-width:0}
.gj-live-top-cards .gj-loading-row{grid-column:1/-1}
.gj-live-status{margin:0;text-align:center;font-size:12.5px}
.gj-live-retry{margin-inline-start:8px;border:0;border-radius:7px;padding:6px 10px;background:var(--gold-light);color:var(--text-ink);font:inherit;font-weight:800;cursor:pointer}
.gj-summary-card{
  border-radius:var(--radius-sm);padding:14px 10px;text-align:center;color:#fff;
  border:1px solid var(--ink-line);box-shadow:var(--shadow-sm);
  background:linear-gradient(150deg,var(--ink-soft),var(--ink-mid));
}
.gj-summary-card h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;color:var(--gold-light);font-weight:800}
.gj-summary-card strong{display:block;font-size:24px;margin-bottom:8px;font-variant-numeric:tabular-nums}
.gj-summary-card .gj-lh{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gj-summary-card .gj-lh span{display:block;padding:5px 3px;border-radius:6px;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.08)}
.gj-lo{color:var(--down)}.gj-hi{color:var(--up)}

/* Redesigned product rate "table" — card-row list, own visual language */
.gj-rate-table{border-radius:var(--radius);overflow:hidden;border:1px solid var(--ink-line);box-shadow:var(--shadow);background:var(--ink-mid)}
.gj-rate-head,.gj-rate-row{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center}
.gj-rate-head{
  padding:10px 18px;background:linear-gradient(100deg,var(--gold-dark),var(--gold-light) 50%,var(--gold-dark));
  color:var(--text-ink);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;text-align:center;
}
.gj-rate-head span:first-child{text-align:left}
.gj-rate-row{padding:11px 18px;border-top:1px solid var(--ink-line);transition:background .2s ease}
.gj-rate-row:hover{background:var(--ink-soft)}
.gj-rate-row .gj-product{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text-hi);font-size:14.5px;text-transform:uppercase;min-width:0}
.gj-rate-row .gj-product img{width:28px;height:28px;object-fit:contain;flex:0 0 28px}
.gj-rate-row .gj-quote{text-align:center;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--text-hi)}
.gj-rate-row .gj-range{display:block;margin-top:3px;font-size:11.5px;font-weight:800}

/* ---------------------------------------------------------------
   Coin matrix table — WEIGHT × BRAND grid (matches cointable.jpeg)
   Layout: deep navy header, alternating light rows, horizontal
   scroll on narrow screens so the brand columns never collapse.
   Column widths are set inline by JS (130px + N×1fr).
   --------------------------------------------------------------- */
#coinsRatesBody{overflow-x:auto}
.gj-coin-matrix{
  min-width:320px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--ink-line);
  box-shadow:var(--shadow);
  font-size:14px;
}

/* header */
.gj-coin-matrix-head{
  display:grid;
  background:linear-gradient(100deg,var(--gold-dark),var(--gold-light) 50%,var(--gold-dark));
  color:var(--text-ink);
  font-weight:800;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.gj-coin-matrix-head span{
  padding:12px 10px;
  text-align:center;
  border-right:1px solid rgba(0,0,0,.15);
}
.gj-coin-matrix-head span:last-child{border-right:0}
.gj-cm-weight-hdr{text-align:left!important}

/* data rows */
.gj-coin-matrix-row{
  display:grid;
  background:#f5f1e6;   /* warm off-white — matches reference image */
  border-top:1px solid rgba(31,44,66,.14);
  transition:background .15s ease;
}
.gj-coin-matrix-row:hover{background:#eddfa0}
.gj-coin-matrix-row--alt{background:#fff}
.gj-coin-matrix-row--alt:hover{background:#eddfa0}

/* weight label cell */
.gj-cm-weight{
  padding:11px 12px;
  font-weight:800;
  font-size:13px;
  color:var(--ink-deep);
  text-transform:uppercase;
  letter-spacing:.02em;
  border-right:1px solid rgba(31,44,66,.12);
}

/* price cells */
.gj-cm-price{
  padding:11px 8px;
  text-align:center;
  font-size:13.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink-deep);
  border-right:1px solid rgba(31,44,66,.08);
}
.gj-cm-price:last-child{border-right:0}
.gj-cm-dash{color:#aaa;font-size:15px;font-weight:400}

/* flash pulse on individual price cells */
.gj-cm-price.flash-up{animation:gj-flash-up .7s ease-out}
.gj-cm-price.flash-down{animation:gj-flash-down .7s ease-out}

/* mobile: ensure matrix scrolls horizontally */
@media(max-width:600px){
  .gj-coin-matrix{font-size:12.5px}
  .gj-coin-matrix-head span,.gj-cm-weight,.gj-cm-price{padding:9px 7px}
}


/* Only Gold/Silver rows advertise and perform Buy/Sell navigation. */
.gj-rate-row--clickable{cursor:pointer}
.gj-rate-row--clickable:hover,
.gj-rate-row--clickable:focus-visible{background:var(--ink-soft);outline:1px solid rgba(216,168,56,.55);outline-offset:-1px}
.gj-rate-row--clickable::after{content:"\2192";position:absolute;right:7px;color:var(--gold-light);opacity:0;transform:translateX(-5px);transition:opacity .2s ease,transform .2s ease}
.gj-rate-row--clickable:hover::after,
.gj-rate-row--clickable:focus-visible::after{opacity:1;transform:translateX(0)}
.gj-rate-row--clickable{position:relative}
.gj-loading-row{padding:22px;text-align:center;color:var(--text-lo);font-weight:700}

/* Rate flash pulse (green up / red down) applied briefly by JS */
@keyframes gj-flash-up{0%,45%{background-color:rgba(62,207,126,.28);box-shadow:inset 0 0 0 1px rgba(62,207,126,.6)}100%{background-color:transparent;box-shadow:none}}
@keyframes gj-flash-down{0%,45%{background-color:rgba(242,102,91,.28);box-shadow:inset 0 0 0 1px rgba(242,102,91,.6)}100%{background-color:transparent;box-shadow:none}}
.flash-up{animation:gj-flash-up .7s ease-out}
.flash-down{animation:gj-flash-down .7s ease-out}

.gj-trust-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink-line);border-radius:var(--radius-sm);overflow:hidden;background:var(--ink-mid)}
.gj-trust-strip span{padding:10px 8px;text-align:center;font-size:12.5px;font-weight:800;border-right:1px solid var(--ink-line);color:var(--text-lo)}
.gj-trust-strip span:last-child{border-right:0}
.gj-trust-strip b{color:var(--gold-light);margin-right:6px}

@media(max-width:760px){
  .gj-future-grid{grid-template-columns:1fr}
  .gj-summary-strip{grid-template-columns:1fr 1fr}
  .gj-live-top-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .gj-live-top-cards .gj-summary-card{grid-column:span 2;padding:12px 5px}
  .gj-live-top-cards .gj-summary-card:nth-child(4),
  .gj-live-top-cards .gj-summary-card:nth-child(5){grid-column:span 3}
  .gj-live-top-cards .gj-summary-card h3{font-size:11px}
  .gj-live-top-cards .gj-summary-card strong{font-size:clamp(14px,3.6vw,24px)}
  .gj-live-top-cards .gj-lh{grid-template-columns:1fr;gap:4px}
  .gj-live-top-cards .gj-lh span{font-size:10px;padding:4px 2px}
  .gj-rate-head,.gj-rate-row{grid-template-columns:1.5fr 1fr 1fr;padding-inline:12px}
  .gj-rate-row .gj-quote{font-size:17px}
  .gj-trust-strip{grid-template-columns:1fr}
  .gj-trust-strip span{border-right:0;border-bottom:1px solid var(--ink-line)}
  .gj-trust-strip span:last-child{border-bottom:0}
}

/* ---------------------------------------------------------------------
   Generic card/board surfaces used across pages (forms, lists, policy…)
   --------------------------------------------------------------------- */
.gj-card{
  background:var(--ink-mid);border:1px solid var(--ink-line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;margin-bottom:18px;
}
.gj-card label{display:block;font-weight:800;color:var(--text-hi);margin:12px 0 6px;font-size:13.5px;text-transform:uppercase;letter-spacing:.02em}
.gj-card input[type="text"],.gj-card input[type="number"],.gj-card input[type="tel"],
.gj-card input[type="email"],.gj-card select,.gj-card textarea{
  width:100%;padding:0 14px;height:46px;border-radius:var(--radius-sm);border:1px solid var(--ink-line);
  background:var(--ink-soft);color:var(--text-hi);font-size:15px;
}
.gj-card textarea{height:auto;min-height:120px;padding:12px 14px;resize:vertical}
.gj-card input::placeholder{color:var(--text-lo)}
.gj-btn{
  display:inline-block;width:100%;margin-top:16px;padding:14px 0;text-align:center;border:0;border-radius:var(--radius-sm);
  font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;color:var(--text-ink);
  background:linear-gradient(135deg,var(--gold-dark),var(--gold-light));box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.gj-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,0,0,.4)}
.gj-btn:active{transform:translateY(0)}
.gj-btn:disabled{cursor:wait;opacity:.65;transform:none;box-shadow:var(--shadow-sm)}
.gj-btn.buy{background:linear-gradient(135deg,#1c5fa8,#4f8fe0);color:#fff}
.gj-btn.sell{background:linear-gradient(135deg,#8f2323,#d85d54);color:#fff}
.gj-btn.ghost{background:var(--ink-soft);color:var(--text-hi)}
.gj-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.gj-login-status{margin:0 0 16px;padding:12px 14px;border:1px solid var(--ink-line);border-radius:var(--radius-sm);background:var(--ink-mid);color:var(--text-hi);font-size:14px;font-weight:700}
.gj-login-status[hidden]{display:none}
.gj-login-status.is-info{border-color:rgba(216,168,56,.55);color:var(--gold-light)}
.gj-login-status.is-success{border-color:rgba(74,190,120,.6);color:#8ee0ad;background:rgba(25,98,58,.22)}
.gj-login-status.is-error{border-color:rgba(216,93,84,.65);color:#ffaaa4;background:rgba(143,35,35,.22)}
.gj-login-note{margin:0 0 14px;color:var(--text-lo);font-size:13.5px}
.gj-login-note strong{color:var(--gold-light);letter-spacing:.05em}
.gj-login-link{display:block;margin:15px auto 0;border:0;background:transparent;color:var(--gold-light);font:inherit;font-size:13px;font-weight:800;text-decoration:underline;cursor:pointer}
.gj-login-link:disabled{cursor:wait;opacity:.55}

.gj-page-stage{width:min(640px,94vw);margin:0 auto 40px}
.gj-wide-stage{width:min(1040px,96vw);margin:0 auto 40px}

.gj-mode-tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--ink-line);margin-bottom:16px}
.gj-mode-tabs button{appearance:none;border:0;background:var(--ink-soft);color:var(--text-lo);padding:13px;font-size:14px;font-weight:800;text-transform:uppercase;cursor:pointer}
.gj-mode-tabs button.active{background:linear-gradient(135deg,var(--gold-dark),var(--gold-light));color:var(--text-ink)}

.gj-readout{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center;margin:10px 0}
.gj-readout div{background:var(--ink-deep);border-radius:var(--radius-sm);padding:14px 6px}
.gj-readout .lbl{display:block;color:var(--gold-light);font-size:12px;font-weight:800;text-transform:uppercase;margin-bottom:4px}
.gj-readout .val{color:#fff;font-size:25px;font-weight:900}

.gj-list-table{width:100%;border-collapse:collapse;border-radius:var(--radius-sm);overflow:hidden}
.gj-list-table th{padding:11px 12px;background:linear-gradient(100deg,var(--gold-dark),var(--gold-light) 50%,var(--gold-dark));color:var(--text-ink);font-size:13px;text-transform:uppercase;text-align:center}
.gj-list-table td{padding:11px 12px;border-bottom:1px solid var(--ink-line);text-align:center;font-weight:700;color:var(--text-hi)}
.gj-list-table tr.buy-row td{background:rgba(28,95,168,.35)}
.gj-list-table tr.sell-row td{background:rgba(143,35,35,.35)}
.gj-list-table tr[data-clickable]{cursor:pointer;transition:transform .15s ease}
.gj-list-table tr[data-clickable]:hover{transform:scale(1.008)}
.gj-empty-note{padding:22px;text-align:center;color:var(--text-lo);font-weight:700}

/* ---------------------------------------------------------------------
   Calculator page extensions
   --------------------------------------------------------------------- */
.gj-calc-stage{width:min(1040px,96vw);display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);gap:18px;align-items:start;margin:0 auto 40px}
.gj-calc-stage>.gj-page-title{grid-column:1/-1}
@media(max-width:760px){.gj-calc-stage{display:block}.gj-calc-stage .gj-card{margin-bottom:18px}}
.gj-carat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.gj-carat-grid button{
  min-height:48px;border:1px solid var(--ink-line);border-radius:var(--radius-sm);background:var(--ink-soft);
  color:var(--text-hi);font-weight:900;cursor:pointer;transition:all .2s ease;
}
.gj-carat-grid button.active{background:linear-gradient(135deg,var(--gold-dark),var(--gold-light));color:var(--text-ink);border-color:var(--gold-light)}
.gj-calc-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.gj-carat-grid{grid-template-columns:repeat(3,1fr)}.gj-calc-fields{grid-template-columns:1fr}}
.gj-calc-error{min-height:22px;margin:10px 0 0;color:var(--down);font-weight:800}
.gj-fine-rate{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--ink-deep);color:#fff;padding:14px 16px;border-radius:var(--radius-sm)}
.gj-fine-rate span{color:var(--gold-light);font-weight:800;text-transform:uppercase;font-size:13px}
.gj-fine-rate strong{font-size:19px}
.gj-calc-rate-table{width:100%;margin-top:12px;border-collapse:collapse}
.gj-calc-rate-table th{padding:9px 6px;background:linear-gradient(100deg,var(--gold-dark),var(--gold-light) 50%,var(--gold-dark));color:var(--text-ink);text-transform:uppercase;font-size:12px}
.gj-calc-rate-table td{padding:10px 6px;border-bottom:1px solid var(--ink-line);text-align:center;font-weight:800;color:var(--text-hi)}
.gj-calc-rate-table td:first-child{text-align:left}
.gj-calc-total-table{width:100%;margin-top:12px;border-collapse:collapse}
.gj-calc-total-table td{padding:9px 4px;font-weight:700;color:var(--text-hi)}
.gj-calc-total-table td.amt{text-align:right;font-weight:900;color:var(--gold-light)}
.gj-calc-total-table tr.final-row td{padding-top:14px;border-top:2px solid var(--gold-dark);font-size:18px}
.gj-results[hidden]{display:none}

/* ---------------------------------------------------------------------
   Gold trend gauge
   --------------------------------------------------------------------- */
.gj-gauge-wrap{text-align:center;margin:10px 0 6px}
.gj-gauge-wrap figcaption{margin-bottom:10px;font-size:16px;font-weight:900;text-transform:uppercase;color:var(--text-hi)}
.gj-gauge-ring{position:relative;width:min(230px,72vw);margin:auto}
.gj-gauge-ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg);filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.gj-gauge-track,.gj-gauge-value{fill:none;stroke-width:16}
.gj-gauge-track{stroke:var(--ink-line)}
.gj-gauge-value{stroke:var(--trend-color,var(--gold));stroke-linecap:round;stroke-dasharray:565.48;stroke-dashoffset:var(--trend-offset,565.48);transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)}
.gj-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gj-gauge-center strong{color:var(--trend-color,var(--gold));font-size:clamp(26px,7vw,40px);font-weight:900;text-transform:uppercase}
.gj-gauge-center span{margin-top:8px;color:var(--text-hi);font-size:clamp(19px,5vw,28px);font-weight:900}

/* ---------------------------------------------------------------------
   Bank details — medium-toned statement card (no stark white panel)
   --------------------------------------------------------------------- */
.gj-bank-card{padding:0;overflow:hidden}
.gj-bank-logo{min-height:64px;display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;color:#fff;background:linear-gradient(135deg,#7c1f1f,#c23b3b)}
.gj-bank-logo strong{font-size:clamp(20px,5vw,28px);letter-spacing:.03em}
.gj-bank-table{width:100%;border-collapse:collapse}
.gj-bank-table td{padding:13px 18px;border-bottom:1px solid var(--ink-line);color:var(--text-hi);font-size:15px}
.gj-bank-table tr:last-child td{border-bottom:0}
.gj-bank-table td:first-child{width:38%;font-weight:800;color:var(--gold-light);text-transform:uppercase;background:rgba(216,168,56,.08)}
.gj-bank-table td:last-child{font-weight:700}

/* ---------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------- */
.gj-contact-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
@media(max-width:760px){.gj-contact-layout{grid-template-columns:1fr}}
.gj-contact-map{width:100%;height:340px;border:0;border-radius:var(--radius);display:block;filter:saturate(.85)}
.gj-contact-detail{display:grid;grid-template-columns:34px 1fr;gap:10px;margin:14px 0}
.gj-contact-detail span{font-size:22px}
.gj-contact-detail strong{display:block;color:var(--gold-light);font-size:13px;text-transform:uppercase}
.gj-contact-detail a,.gj-contact-detail p{display:block;color:var(--text-hi);text-decoration:none;margin:2px 0;line-height:1.55}
.gj-contact-note{font-weight:700;color:var(--up);margin:12px 0 0}
.gj-contact-note:empty{display:none}

/* ---------------------------------------------------------------------
   Policy copy
   --------------------------------------------------------------------- */
.gj-policy h1{color:var(--gold-light);font-size:24px;margin-top:0}
.gj-policy h2{color:var(--gold-light);font-size:18px;margin-top:22px}
.gj-policy p,.gj-policy li{color:var(--text-lo);line-height:1.65;font-size:15px}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.gj-footer{margin-top:auto;background:linear-gradient(180deg,var(--ink-mid),var(--ink-deep));border-top:2px solid rgba(216,168,56,.4);color:var(--text-lo);padding:36px 20px 20px}
.gj-footer-inner{width:min(1040px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gj-footer-col h3{color:var(--gold-light);font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin:0 0 12px}
.gj-footer-col p{color:var(--text-lo);font-size:15px;font-weight:600;line-height:1.75}

/* ---------------------------------------------------------------------
   Footer links — "arrow line" hover animation:
   an underline draws itself in from the left, and a gilded arrow glides
   out of the line's leading edge to the right, as if the rule itself is
   pulling the arrow along. Icon gets a gentle lift + glow to match.
   --------------------------------------------------------------------- */
.gj-footer-col a{
  position:relative;
  display:flex;align-items:center;
  width:fit-content;max-width:100%;
  color:var(--text-lo);font-size:15px;font-weight:600;line-height:1.75;
  text-decoration:none;padding:3px 0 7px;margin-bottom:2px;
}
.gj-footer-icon{font-size:16px;margin-right:8px;transition:transform .3s ease, filter .3s ease}

/* the arrow — hidden flush against the text, glides right on hover */
.gj-footer-col a::after{
  content:"\2192";
  display:inline-block;
  margin-left:8px;
  color:var(--gold-light);
  font-weight:900;
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1);
}

/* the underline — draws left-to-right beneath the label, independent of
   the arrow so the two motions feel layered rather than identical */
.gj-footer-col a::before{
  content:"";
  position:absolute;left:0;bottom:0;
  height:2px;width:0;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
  border-radius:2px;
  transition:width .4s cubic-bezier(.22,1,.36,1);
}

.gj-footer-col a:hover,
.gj-footer-col a:focus-visible{color:var(--gold-light)}
.gj-footer-col a:hover .gj-footer-icon,
.gj-footer-col a:focus-visible .gj-footer-icon{transform:translateY(-2px) scale(1.12);filter:drop-shadow(0 0 5px rgba(216,168,56,.7))}
.gj-footer-col a:hover::before,
.gj-footer-col a:focus-visible::before{width:100%}
.gj-footer-col a:hover::after,
.gj-footer-col a:focus-visible::after{opacity:1;transform:translateX(0)}
.gj-footer-col a:active::after{transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){
  .gj-footer-col a::after,.gj-footer-col a::before,.gj-footer-icon{transition:none}
}
.gj-footer-bottom{width:min(1040px,100%);margin:22px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:13.5px;color:#9caac2}
@media(max-width:760px){.gj-footer-inner{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   Scroll-reveal system (own IntersectionObserver-driven "rise & glint")
   --------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-reveal="pop"]{transform:scale(.94) translateY(12px)}
[data-reveal="pop"].is-visible{transform:scale(1) translateY(0)}

/* Loading spinner overlay */
#gjSpinner{display:none;position:fixed;inset:0;z-index:80;background:rgba(15,22,36,.65);align-items:center;justify-content:center}
#gjSpinner .gj-spin-box{width:54px;height:54px;border:5px solid rgba(255,255,255,.2);border-top-color:var(--gold-light);border-radius:50%;animation:gj-spin .8s linear infinite}

/* Sparkling diamond accent used near headings/badges */
.gj-spark{display:inline-block;animation:gj-glint 2s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gj-bg::before,.gj-bg::after,.gj-dot::after,.gj-page-title,
  .icon-spin,.icon-bounce,.icon-pulse,.icon-wiggle,.icon-swap,.icon-shake,.icon-glint,.gj-spark,
  .gj-nav-link.active::after{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .flash-up{animation:none;background-color:rgba(62,207,126,.28)}
  .flash-down{animation:none;background-color:rgba(242,102,91,.28)}
}

/* ---------------------------------------------------------------------
   Responsive header/nav collapse
   The header stays ONE efficient row at every width: as space tightens,
   the inline menu's font/padding shrink first; only below 760px does the
   menu leave the row entirely, replaced by the hamburger + dropdown drawer.
   --------------------------------------------------------------------- */
@media(max-width:1080px){
  .gj-nav-link{font-size:11px;padding:9px 9px}
  .gj-nav-icon{margin-right:4px}
}
@media(max-width:900px){
  .gj-brand img{height:48px;max-width:170px}
  .gj-brand-text span{display:none}
  .gj-quick{gap:6px}
  .gj-dot{width:32px;height:32px;font-size:14px}
}
@media(max-width:1023px){
  .gj-nav-links{display:none}
  .gj-nav-toggle{display:flex}
  .gj-nav-drawer.nav-open{display:grid}
  .gj-brand-row{gap:12px}
  .gj-nav-link--drawer{min-height:44px;white-space:normal;overflow-wrap:anywhere}
  .gj-dot{width:44px;height:44px}
  .gj-nav-toggle[aria-expanded="true"] .gj-nav-toggle-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .gj-nav-toggle[aria-expanded="true"] .gj-nav-toggle-icon i:nth-child(2){opacity:0}
  .gj-nav-toggle[aria-expanded="true"] .gj-nav-toggle-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media(max-width:420px){
  .gj-brand-text{display:none}
  .gj-quick{gap:4px}
}
@media(max-width:480px){
  .gj-rate-head,.gj-rate-row{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));padding-inline:8px;gap:6px}
  .gj-rate-row .gj-product{font-size:12px;overflow-wrap:anywhere}
  .gj-rate-row .gj-quote{font-size:15px;overflow-wrap:anywhere}
  .gj-rate-row .gj-range{font-size:10px}
}
.gj-nav-toggle:focus-visible,.gj-nav-link:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}