/* ==========================================================================
   Live gold & silver rates — velvet hero with spot prices, rupee boards.
   ========================================================================== */
.rates-page{
  --up:#3E8E5A;--up-soft:#E3F2E6;--down:#B05B5B;--down-soft:#F7E6E6;
  --up-lit:#86D9A6;--down-lit:#F2949A;
  --gold-metal:linear-gradient(135deg,#FFF3C4 0%,#E9C46A 28%,#B8862B 55%,#F4D58A 78%,#9C6F1E 100%);
  --silver-metal:linear-gradient(135deg,#FFFFFF 0%,#DADDE2 30%,#9DA3AC 55%,#EEF0F3 78%,#868C95 100%);
}

/* ---------- Hero: live spot prices ---------- */
.rates-hero{
  position:relative;overflow:hidden;isolation:isolate;color:var(--ivory);
  padding:84px 0 96px;
  background:radial-gradient(120% 90% at 50% -10%,var(--velvet-2,#1B2A20),var(--velvet,#101A14) 62%,#09100C);
}
/* A slow aurora of gold light drifting behind the cards. */
.rates-hero::before{
  content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(30% 25% at 30% 40%,rgba(232,194,104,.22),transparent 70%),
    radial-gradient(28% 22% at 72% 55%,rgba(210,214,222,.14),transparent 70%);
  animation:aurora 18s ease-in-out infinite alternate;
}
.rates-hero::after{ /* velvet grain */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes aurora{from{transform:translate3d(-4%,-2%,0) rotate(0deg)}to{transform:translate3d(5%,3%,0) rotate(8deg)}}

.rh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.rh-kicker{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.08em;color:var(--champagne)}
.rh-kicker span:last-child{color:rgba(243,239,231,.55)}
.live-dot{width:9px;height:9px;border-radius:50%;background:#5FD08A;box-shadow:0 0 0 0 rgba(95,208,138,.6);animation:livePulse 1.8s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(95,208,138,.55)}100%{box-shadow:0 0 0 12px rgba(95,208,138,0)}}
.rates-hero h1{font-size:clamp(36px,5vw,60px);margin:14px 0 12px;color:var(--ivory)}
.rh-sub{max-width:52ch;color:rgba(243,239,231,.66);font-size:16px}

.rh-clock{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:999px;border:1px solid rgba(195,165,114,.25);background:rgba(16,26,20,.5);backdrop-filter:blur(8px)}
.rh-clock-label{display:block;font-size:11px;letter-spacing:.08em;color:rgba(243,239,231,.55)}
.rh-clock time{font-family:var(--body);font-weight:300;font-size:18px;font-variant-numeric:tabular-nums;color:var(--ivory)}
.tick-ring{width:40px;height:40px;transform:rotate(-90deg)}
.tr-track{fill:none;stroke:rgba(195,165,114,.18);stroke-width:3}
.tr-fill{fill:none;stroke:var(--champagne);stroke-width:3;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4}
.tr-fill.run{animation:ringFill var(--tick,5s) linear forwards}
@keyframes ringFill{from{stroke-dashoffset:119.4}to{stroke-dashoffset:0}}

.spot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.spot-card{
  position:relative;overflow:hidden;border-radius:28px;padding:30px 30px 0;
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  border:1px solid rgba(195,165,114,.22);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s;
}
.spot-card:hover{transform:translateY(-4px);border-color:rgba(195,165,114,.45)}
.spot-gold{color:#E8C268}
.spot-silver{color:#D5D9DF}

/* Periodic-table tile in polished metal, with a sheen that passes now and then. */
.element-tile{
  position:relative;overflow:hidden;width:112px;aspect-ratio:1;border-radius:20px;color:#2A2312;
  display:grid;grid-template-rows:auto 1fr auto;padding:12px 14px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 6px rgba(0,0,0,.25);
}
.spot-gold .element-tile{background:var(--gold-metal)}
.spot-silver .element-tile{background:var(--silver-metal);color:#2B2F35}
.element-tile::after{
  content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
  transform:translateX(-70%);animation:sheen 6s ease-in-out infinite;
}
.spot-silver .element-tile::after{animation-delay:3s}
@keyframes sheen{0%,62%{transform:translateX(-70%)}82%,100%{transform:translateX(70%)}}
.el-num{font-size:12px;font-weight:500;opacity:.75}
.el-sym{font-family:var(--display);font-size:44px;line-height:1;align-self:center}
.el-name{font-size:11px;letter-spacing:.1em;opacity:.8}

.spot-body{min-width:0}
.spot-name{font-family:var(--body);font-weight:400;font-size:14px;color:rgba(243,239,231,.75);display:flex;gap:10px;align-items:baseline}
.spot-name span{font-size:12px;letter-spacing:.12em;color:currentColor;opacity:.9}
.spot-price{font-family:var(--body);font-weight:300;letter-spacing:-.02em;font-size:clamp(38px,4.4vw,58px);line-height:1.05;color:var(--ivory);margin:8px 0 10px;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.spot-change{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:5px 12px;border-radius:999px;font-variant-numeric:tabular-nums;transition:background .4s,color .4s}
.spot-change.is-up{background:rgba(95,208,138,.12);color:var(--up-lit)}
.spot-change.is-down{background:rgba(240,128,128,.12);color:var(--down-lit)}
.spot-change .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.spot-change.is-up .arrow{border-bottom:7px solid currentColor}
.spot-change.is-down .arrow{border-top:7px solid currentColor}

.spark{grid-column:1/-1;width:calc(100% + 60px);margin:18px -30px 0;height:96px;display:block;overflow:visible}
.spark-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark-line.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:sparkDraw 1.6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes sparkDraw{to{stroke-dashoffset:0}}
.spark-dot{fill:currentColor;filter:drop-shadow(0 0 6px currentColor);transition:cx .6s ease,cy .6s ease}

/* ---------- Rolling digits (shared by spot prices and boards) ---------- */
.roll{display:inline-flex;white-space:pre;font-variant-numeric:tabular-nums lining-nums}
.roll .dg{display:inline-block;height:1.15em;overflow:hidden;vertical-align:top}
.roll .dg-strip{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.2,.85,.25,1)}
.roll .dg-strip span{height:1.15em;line-height:1.15em}
.roll .ch{display:inline-block;height:1.15em;line-height:1.15em}

/* ---------- Rupee boards ---------- */
.rate-boards{padding:72px 0 96px;background:var(--ivory)}
.rates-hero + .rate-boards{margin-top:-56px;padding-top:0;background:linear-gradient(to bottom,transparent 56px,var(--ivory) 56px)}
.boards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start;position:relative;z-index:2}
.board{background:var(--porcelain);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 40px 70px -46px rgba(30,41,33,.45)}
.board-head{display:flex;align-items:center;gap:16px;padding:24px 26px;border-bottom:1px solid var(--line)}
.board-sym{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:21px;color:#2A2312;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 18px -10px rgba(0,0,0,.5)}
.board-gold .board-sym{background:var(--gold-metal)}
.board-silver .board-sym{background:var(--silver-metal);color:#2B2F35}
.board-head h2{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2}
.board-head p{font-size:13px;color:var(--moss)}
.board-cur{margin-left:auto;font-size:12px;letter-spacing:.12em;padding:6px 12px;border-radius:999px;background:var(--ivory);border:1px solid var(--line);color:var(--moss)}
.board-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.board-table thead th{font-size:12px;letter-spacing:.1em;font-weight:400;color:var(--moss);text-align:right;padding:14px 26px 10px}
.board-table thead th:first-child{text-align:left}
.board-table tbody tr{position:relative;border-top:1px solid var(--line);transition:background .3s}
.board-table tbody tr:hover{background:var(--ivory)}
.board-table tbody th{text-align:left;font-weight:400;padding:17px 26px;font-size:15px;white-space:nowrap}
.board-table tbody th small{display:block;font-size:12px;color:var(--moss);margin-top:2px}
.board-table td{text-align:right;padding:17px 26px 17px 8px;white-space:nowrap;position:relative}
.board-table td:last-child{padding-right:46px}
.rate{font-family:var(--body);font-weight:400;font-size:17px;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}
.row-move{position:absolute;right:20px;top:50%;width:0;height:0;margin-top:-3px;border-left:5px solid transparent;border-right:5px solid transparent;opacity:0;transition:opacity .4s}
tr.is-up .row-move{border-bottom:7px solid var(--up);opacity:1}
tr.is-down .row-move{border-top:7px solid var(--down);opacity:1}
/* A wash of colour sweeps across a row when its price moves. */
.board-table tbody tr.flash-up{animation:washUp 1.4s ease}
.board-table tbody tr.flash-down{animation:washDown 1.4s ease}
@keyframes washUp{0%{background:linear-gradient(90deg,var(--up-soft),transparent)}100%{background:transparent}}
@keyframes washDown{0%{background:linear-gradient(90deg,var(--down-soft),transparent)}100%{background:transparent}}
tr.flash-up .rate{color:var(--up);transition:color 1.4s}
tr.flash-down .rate{color:var(--down);transition:color 1.4s}

.rates-foot{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;margin-top:36px;padding:26px 30px;border:1px solid var(--line);border-radius:22px;background:var(--porcelain)}
.rates-legend{display:flex;gap:22px;font-size:14px}
.rates-legend dt{font-family:var(--display);display:inline}
.rates-legend dd{display:inline;color:var(--moss);margin-left:6px}
.rates-note{font-size:14px;color:var(--moss);max-width:60ch}
.rates-cta{display:flex;gap:12px;flex-wrap:wrap}
.rates-cta .btn{padding:14px 24px}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .spot-grid,.boards-grid{grid-template-columns:1fr}
  .rates-foot{grid-template-columns:1fr;gap:16px}
}
@media (max-width:560px){
  .rates-hero{padding:56px 0 80px}
  .spot-card{grid-template-columns:1fr;padding:24px 22px 0;gap:18px}
  .element-tile{width:84px}
  .el-sym{font-size:34px}
  .spark{width:calc(100% + 44px);margin:12px -22px 0}
  .board-head{padding:20px}
  .board-table thead th,.board-table tbody th{padding-left:18px}
  .board-table td{padding:15px 18px 15px 6px}
  .board-table td:last-child{padding-right:36px}
  .row-move{right:14px}
  .rate{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .rates-hero::before,.live-dot,.element-tile::after{animation:none}
  .roll .dg-strip{transition:none}
  .board-table tbody tr.flash-up,.board-table tbody tr.flash-down{animation:none}
  .spark-line.draw{animation:none;stroke-dashoffset:0}
}