/* ==========================================================================
   99exch — get99exch.co.in  |  shared site stylesheet
   Theme: royal-blue panel chrome + white content, matching the live 99exch
   exchange panel (blue header, white market rows, blue/pink odds cells,
   red fixture times, yellow brand mark).
   Page-unique rules stay in that page's own <style> block.
   ========================================================================== */

:root{
  /* panel blues */
  --blue:#2036b8;
  --blue-dk:#18299a;
  --blue-dp:#131f74;
  --blue-lt:#3550d8;
  --blue-soft:#e8ecfb;
  --blue-line:#c7d2f2;

  /* surfaces */
  --bg:#ffffff;
  --bg-2:#f3f6fc;
  --bg-3:#e9eef8;

  /* text */
  --ink:#15191f;
  --txt:#242a33;
  --txt-dim:#4d5766;
  --txt-mute:#6b7686;

  /* accents from the panel */
  --gold:#fdc218;
  --gold-dark:#f0a500;
  --gold-soft:#fff6dc;
  --gold-ink:#2A1A00;
  --red:#dc1f1f;
  --back:#72bbef;      /* odds — back side */
  --back-dk:#4aa4e4;
  --lay:#f9a9ba;       /* odds — lay side */
  --lay-dk:#f27f97;
  --green:#22a447;
  --wa:#25D366;
  --wa-ink:#04250F;    /* 8.29:1 on WhatsApp green. White is 1.98:1 and fails WCAG. */

  --line:#dae1ef;
  --line-2:#c2cee9;
  --white:#fff;

  --radius:14px;
  --radius-sm:10px;
  --wrap:1180px;
  --hdr-h:64px;
}

/* ---- overflow guard: clip, never hidden (hidden kills sticky header) ---- */
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:clip;max-width:100%}
main{max-width:100%;overflow-x:clip}

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

body{
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--txt);
  line-height:1.72;
  font-size:16.5px;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.24;font-weight:800;color:var(--ink)}
h1{font-size:clamp(1.7rem,4.3vw,2.6rem);margin-bottom:16px}
h2{font-size:clamp(1.32rem,3vw,1.82rem);margin:38px 0 14px}
h3{font-size:clamp(1.08rem,2.2vw,1.26rem);margin:26px 0 10px;color:var(--blue)}
h4{font-size:1.02rem;margin:18px 0 8px;color:var(--ink)}
p{margin-bottom:16px}
ul,ol{margin:0 0 18px 22px}
li{margin-bottom:8px}
strong{color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px;width:100%}

/* ---- skip link ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--gold);color:var(--gold-ink);padding:11px 18px;font-weight:700;border-radius:0 0 10px 0}
.skip-link:focus{left:0;text-decoration:none}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================  HEADER  ========================== */
.hdr{
  position:sticky;top:0;z-index:900;
  width:100%;max-width:100vw;
  background:var(--blue);
  border-bottom:3px solid var(--blue-dp);
}
.hdr-in{
  max-width:var(--wrap);margin:0 auto;padding:0 18px;
  min-height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.hdr-logo{display:flex;align-items:center;flex-shrink:0}
.hdr-logo img{height:36px;width:auto}
@media(min-width:900px){.hdr-logo img{height:42px}}

.hdr-nav{display:none;align-items:center;gap:20px}
@media(min-width:1024px){.hdr-nav{display:flex}}
.hdr-nav a{color:#fff;font-size:.875rem;font-weight:700;letter-spacing:.2px;text-transform:uppercase}
.hdr-nav a:hover{color:var(--gold);text-decoration:none}
.hdr-nav a[aria-current="page"]{color:var(--gold)}

.hdr-cta{
  display:none;
  background:var(--wa)!important;color:var(--wa-ink)!important;
  font-weight:800;font-size:.83rem;padding:9px 17px;border-radius:6px;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.3px;
}
@media(min-width:1024px){.hdr-cta{display:inline-block}}
.hdr-cta:hover{background:#1eb356!important;text-decoration:none}

.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:36px;padding:8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);border-radius:7px;cursor:pointer;
}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px}

/* mobile menu: ABSOLUTE dropdown BELOW the header row.
   Never display:flex inline — toggle the .open class only. */
#mnav{
  /* +3px clears the header's own border-bottom: top:100% resolves against the
     padding box, so without it the dropdown sits on top of the border. */
  position:absolute;top:calc(100% + 3px);left:0;right:0;
  display:flex;flex-direction:column;
  background:var(--blue-dk);
  max-height:0;overflow:hidden;
  transition:max-height .28s ease;
}
#mnav.open{max-height:82vh;overflow-y:auto}
@media(min-width:1024px){#mnav{display:none}}
#mnav a{
  color:#fff;font-size:.93rem;font-weight:700;
  padding:12px 20px;border-top:1px solid rgba(255,255,255,.13);
}
#mnav a:hover{color:var(--gold);background:rgba(0,0,0,.16);text-decoration:none}
#mnav a[aria-current="page"]{color:var(--gold)}
#mnav .mnav-cta{
  margin:14px 20px 20px;text-align:center;border:0;border-radius:6px;
  background:var(--wa)!important;color:var(--wa-ink)!important;font-weight:800;padding:13px;
  text-transform:uppercase;
}

/* ==========================  CONTENT HELPERS  ========================== */
main{flex:1}
.sec{padding:6px 0}
.lead{font-size:1.06rem;color:var(--txt)}

/* quotable answer block — panel blue */
.answer{
  background:var(--blue-soft);
  border-left:4px solid var(--blue);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:15px 18px;margin:0 0 20px;
}
.answer p:last-child{margin-bottom:0}

.note{
  background:var(--gold-soft);border:1px solid #f4dfa4;
  border-radius:var(--radius-sm);padding:15px 18px;margin:0 0 20px;
}
.note p:last-child{margin-bottom:0}

.tbl-wrap{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-sm)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.93rem}
th,td{padding:11px 13px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:left;vertical-align:top}
th:last-child,td:last-child{border-right:0}
tbody tr:last-child td{border-bottom:0}
th{background:var(--blue);color:#fff;font-weight:700}
tbody tr:nth-child(even){background:var(--bg-2)}

/* odds strip — mirrors the panel's blue/pink market cells */
.odds{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin:0 0 22px;background:#fff}
.odds-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.odds-hd b{color:var(--ink);font-size:.98rem}
.odds-hd .when{color:var(--red);font-size:.8rem;font-weight:700}
.odds-row{display:grid;grid-template-columns:1fr repeat(6,minmax(44px,58px));align-items:stretch;gap:2px;padding:8px;background:var(--bg-2)}
.odds-row .team{display:flex;align-items:center;font-weight:700;font-size:.9rem;color:var(--ink);padding-right:8px;min-width:0}
.odds-row i{display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:.88rem;padding:9px 2px;border-radius:3px;font-variant-numeric:tabular-nums;color:#0d2138}
.odds-row .b{background:var(--back)}
.odds-row .l{background:var(--lay)}
.odds-row .b.dim,.odds-row .l.dim{opacity:.55}

/* content figures */
.shot{margin:26px auto;max-width:820px;width:100%}
.shot img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.shot figcaption{margin-top:9px;font-size:.85rem;color:var(--txt-mute);text-align:center}

/* breadcrumb */
.crumb{font-size:.82rem;color:rgba(255,255,255,.75);padding:14px 0 4px}
.crumb a{color:#fff}
.crumb a:hover{color:var(--gold)}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:11px;background:#fff}
.faq summary{cursor:pointer;padding:14px 17px;font-weight:700;color:var(--ink);list-style:none;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--blue);font-weight:800}
.faq details[open] summary::after{content:'\2013'}
.faq details[open] summary{color:var(--blue);background:var(--blue-soft)}
.faq .faq-a{padding:13px 17px 15px;color:var(--txt-dim)}
.faq .faq-a p:last-child{margin-bottom:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border:0;border-radius:7px;cursor:pointer;
  font-family:inherit;font-size:.96rem;font-weight:800;text-align:center;
}
.btn:hover{text-decoration:none;filter:brightness(1.04)}
.btn-wa{background:var(--wa)!important;color:var(--wa-ink)!important}
.btn-gold{background:var(--gold)!important;color:var(--gold-ink)!important}

/* ==========================  SEO BOX + KEYWORD CLOUD  ========================== */
.seo-box{
  margin:44px 0 26px;padding:20px 22px;
  background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:0 var(--radius) var(--radius) 0;
  max-height:340px;overflow-y:auto;
}
.seo-box h2{margin-top:0;font-size:1.24rem}
.seo-box h3{font-size:1.02rem;margin:18px 0 8px}
.seo-box p,.seo-box li{font-size:.93rem;color:var(--txt-dim)}
.seo-box::-webkit-scrollbar{width:8px}
.seo-box::-webkit-scrollbar-thumb{background:var(--blue-line);border-radius:8px}

.also-search{margin:0 0 42px}
.also-search h2{font-size:1.16rem;margin-bottom:14px}
.also-search ul{display:flex;flex-wrap:wrap;gap:9px;margin:0;list-style:none}
.also-search li{margin:0}
.also-search li a,.also-search li span{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--blue-line);
  color:var(--txt-dim);font-size:.82rem;
}
.also-search li a:hover{background:var(--blue-soft);color:var(--blue);text-decoration:none}

/* ==========================  FOOTER  ========================== */
.ftr{background:var(--blue-dp);color:#cdd6f5;border-top:4px solid var(--gold);padding:38px 0 22px;margin-top:auto}
.ftr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px;margin-bottom:28px}
.ftr-brand{max-width:300px}
.ftr-brand img{height:44px;width:auto;margin-bottom:13px}
.ftr-brand p{color:#aab7e4;font-size:.88rem}
.ftr-col h3{color:var(--gold);font-size:.98rem;margin:0 0 13px}
.ftr-col a{display:block;color:#c3cdf0;font-size:.88rem;margin-bottom:9px}
.ftr-col a:hover{color:var(--gold);text-decoration:none}

.ftr-social{display:flex;gap:11px;margin-top:16px}
.ftr-social a{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.ftr-social a:hover{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.ftr-social svg{width:19px;height:19px;fill:currentColor}

.ftr-legal{border-top:1px solid rgba(255,255,255,.16);padding-top:20px;font-size:.82rem;color:#a5b2df}
.ftr-legal p{margin-bottom:9px}
.ftr-legal .age{color:var(--gold);font-weight:800}

/* ==========================  WHATSAPP FLOAT  ========================== */
.wa-float{position:fixed;right:20px;bottom:22px;z-index:880}
.wa-float a{
  width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 26px rgba(37,211,102,.45);animation:wapulse 2.4s infinite;
}
.wa-float a:hover{transform:scale(1.07)}
.wa-float svg{width:32px;height:32px;fill:#fff}
@keyframes wapulse{0%,100%{box-shadow:0 6px 26px rgba(37,211,102,.45)}50%{box-shadow:0 6px 38px rgba(37,211,102,.72)}}

/* light numbered list used on several pages */
.rail-lite{counter-reset:rl;list-style:none;margin:20px 0 22px;padding:0}
.rail-lite li{counter-increment:rl;position:relative;padding:11px 15px 11px 46px;margin-bottom:9px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.rail-lite li::before{content:counter(rl);position:absolute;left:13px;top:12px;width:23px;height:23px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:.76rem;display:flex;align-items:center;justify-content:center}
.rail-lite li b{color:var(--ink)}



/* red-flag checklist — used on more than one page, so it lives here */
.flags{list-style:none;margin:0 0 24px;padding:0}
.flags li{position:relative;padding:12px 16px 12px 46px;margin-bottom:10px;background:#fdeff1;border:1px solid var(--lay-dk);border-radius:var(--radius-sm);font-size:.95rem;color:var(--txt-dim)}
.flags li::before{content:'!';position:absolute;left:15px;top:12px;width:20px;height:20px;border-radius:50%;background:#d81f42;color:#fff;font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center}
.flags li b{color:var(--ink)}

/* ==========================================================================
   MOTION LAYER
   Everything here degrades to a static page: reveals only activate once JS
   adds .js to <html>, so content is never hidden from a crawler or a
   no-script browser. All of it is disabled under prefers-reduced-motion
   by the block at the end of this file.
   ========================================================================== */

/* ---- scrolling news bar, same idea as the strip on the live panel ---- */
.newsbar{
  background:var(--blue-dp);color:#fff;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.newsbar-in{display:flex;align-items:center;gap:0;max-width:100%}
.newsbar .tag{
  flex-shrink:0;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;
  letter-spacing:.9px;padding:7px 12px;z-index:2;position:relative;
}
.newsbar .track{
  display:flex;flex:1;min-width:0;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
}
.newsbar .track .run{
  display:flex;flex-shrink:0;align-items:center;white-space:nowrap;
  padding:7px 0;font-size:.76rem;font-weight:600;color:#d6ddf8;
  animation:ticker 34s linear infinite;
}
.newsbar:hover .track .run{animation-play-state:paused}
/* two identical runs sit side by side, so shifting one full width loops seamlessly
   and text is on screen from the first frame */
@keyframes ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
.newsbar .track b{color:var(--gold);font-weight:800}
.newsbar .track i{font-style:normal;color:#7d8cc9;padding:0 12px}

/* ---- scroll reveal ---- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.07s}
.js .reveal.d2{transition-delay:.14s}

/* ---- header: nav underline slide ---- */
.hdr-nav a{position:relative;padding-bottom:3px}
.hdr-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.hdr-nav a:hover::after,.hdr-nav a[aria-current="page"]::after{transform:scaleX(1)}
.burger span{transition:background .2s ease}
.hdr-logo img{transition:transform .3s ease}
.hdr-logo:hover img{transform:scale(1.04)}

/* ---- buttons: lift + shine sweep ---- */
.btn,.go,.hdr-cta,.mnav-cta{
  position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn:hover,.go:hover,.hdr-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.btn:active,.go:active{transform:translateY(0)}
.go::before,.btn::before{
  content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.go:hover::before,.btn:hover::before{animation:shine .75s ease}
@keyframes shine{to{left:150%}}

/* ---- cards, tables, tiles ---- */
.acc,.brow,.split,.tick,.dash,.phone,.plain{transition:transform .3s ease,box-shadow .3s ease}
.acc:hover,.brow:hover,.split:hover,.tick:hover,.dash:hover,.plain:hover{transform:translateY(-3px)}
.fact,.acc-perk div,.defs div,.rail-lite li,.steps li,.fixlist>li,.checks li,.flags li{
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.fact:hover,.defs div:hover,.rail-lite li:hover,.steps li:hover{transform:translateX(3px)}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:var(--blue-soft)}
.also-search li a,.also-search li span{transition:transform .2s ease,background .2s ease,border-color .2s ease}
.also-search li:hover span,.also-search li:hover a{transform:translateY(-2px);border-color:var(--blue);background:var(--blue-soft)}
.ftr-col a{transition:transform .2s ease,color .2s ease}
.ftr-col a:hover{transform:translateX(3px)}
.ftr-social a{transition:transform .25s ease,background .25s ease,color .25s ease}
.ftr-social a:hover{transform:translateY(-3px)}

/* ---- odds cells: gentle attention pulse on the live price ---- */
.odds-row i:not(.dim){animation:oddspulse 3.4s ease-in-out infinite}
.odds-row i{transition:transform .18s ease}
.odds-row i:hover{transform:scale(1.06)}
@keyframes oddspulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09)}}

/* ---- FAQ open/close ---- */
.faq details{transition:border-color .25s ease,box-shadow .25s ease}
.faq details[open]{border-color:var(--blue-line);box-shadow:0 4px 14px rgba(32,54,184,.08)}
.faq summary{transition:background .2s ease,color .2s ease}
.faq summary::after{transition:transform .25s ease}
.faq details[open] .faq-a{animation:faqin .3s ease}
@keyframes faqin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ---- answer block accent grow ---- */
.answer{position:relative;overflow:hidden}
.answer::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .6s ease .1s;
}
.js .reveal.in .answer::after,.answer:hover::after{transform:scaleY(1)}

/* ---- back-to-top ---- */
.totop{
  position:fixed;right:24px;bottom:94px;z-index:879;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:var(--blue);color:#fff;font-size:1.1rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .2s ease;
  box-shadow:0 5px 18px rgba(0,0,0,.28);
}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--blue-dk)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1!important;transform:none!important}
  .newsbar .track .run{animation:none}
  .answer::after{transform:scaleY(1)!important}
}