/* jack88 — custom layer on top of Tailwind CDN */
:root { --jo: #ff8a1f; --jo-soft: rgba(255, 138, 31, .35); --ivory: #f6ecd9; --ink: #0c0b0e; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(255, 138, 31, .10), transparent 60%),
    radial-gradient(40rem 26rem at -10% 30%, rgba(246, 236, 217, .05), transparent 60%),
    var(--ink);
}

/* glass card with an orange edge that lights up on hover */
.jk-glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(246, 236, 217, .10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 1.25rem;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.jk-glass:hover { border-color: var(--jo-soft); box-shadow: 0 0 0 1px var(--jo-soft), 0 18px 40px -18px rgba(255, 138, 31, .45); }
.jk-lift:hover { transform: translateY(-4px); }

.jk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; font-weight: 700; padding: .8rem 1.6rem;
  background: linear-gradient(135deg, #ffa24a, #ff8a1f 45%, #e06a00);
  color: #1a0d00; box-shadow: 0 10px 28px -10px rgba(255, 138, 31, .8);
  transition: transform .2s, box-shadow .2s;
}
.jk-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(255, 138, 31, .95); }
.jk-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; font-weight: 600; padding: .8rem 1.6rem;
  border: 1px solid rgba(246, 236, 217, .25); color: var(--ivory); transition: border-color .2s, background .2s;
}
.jk-btn-ghost:hover { border-color: var(--jo); background: rgba(255, 138, 31, .08); }

/* navigation */
.jk-nav-link { position: relative; padding: .4rem .2rem; color: rgba(246, 236, 217, .78); transition: color .2s; }
.jk-nav-link:hover, .jk-nav-link[aria-current="page"] { color: var(--ivory); }
.jk-nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.35rem; height: 2px;
  background: var(--jo); border-radius: 2px; box-shadow: 0 0 10px var(--jo);
}
#jk-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8); }
#jk-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
#jk-menu.open { grid-template-rows: 1fr; }
#jk-menu > div { overflow: hidden; }

/* hero character art: feather the edges into the page background */
.jk-hero-art img {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 62%, transparent 100%);
}

/* logo art has a black plate: let it melt into the dark header/footer */
.jk-blend { mix-blend-mode: lighten; }

/* swipeable banner row on mobile */
.jk-snap { scrollbar-width: none; }
.jk-snap::-webkit-scrollbar { display: none; }

/* provider logo slider (structure from topspinonline, restyled for jack88) */
.jk-prov-rail {
  overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.jk-prov-belt {
  display: flex; gap: 18px; width: max-content; margin: 0; padding: 8px 0; list-style: none;
  animation: jk-belt 48s linear infinite; animation-play-state: paused;
}
.jk-prov-rail.is-on .jk-prov-belt { animation-play-state: running; }
.jk-prov-rail.is-on:hover .jk-prov-belt { animation-play-state: paused; }
.jk-prov-belt li {
  flex: none; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 138, 31, .22);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .3);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.jk-prov-belt li:hover { transform: translateY(-4px); border-color: var(--jo); box-shadow: 0 0 24px -4px rgba(255, 138, 31, .55); }
.jk-prov-belt img { width: 220px; height: 141px; display: block; background: #1a181f; }
/* track holds two identical sets: shift by one set (+ half a gap) for a seamless loop */
@keyframes jk-belt { to { transform: translateX(calc(-50% - 9px)); } }
@media (max-width: 600px) {
  .jk-prov-belt { gap: 12px; animation-duration: 34s; }
  .jk-prov-belt img { width: 170px; height: 109px; }
  @keyframes jk-belt { to { transform: translateX(calc(-50% - 6px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .jk-prov-belt { animation-duration: 110s; }
  .jk-prov-belt li { transition: none; }
}

/* article typography */
.jk-prose h2 { font-family: "Krub", sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--ivory); margin: 2.2rem 0 .8rem; }
.jk-prose h3 { font-family: "Krub", sans-serif; font-size: 1.18rem; font-weight: 600; color: #ffc185; margin: 1.6rem 0 .6rem; }
.jk-prose p { margin: 0 0 1rem; line-height: 1.95; color: rgba(246, 236, 217, .82); }
.jk-prose ul, .jk-prose ol { margin: 0 0 1.2rem 1.3rem; line-height: 1.9; color: rgba(246, 236, 217, .82); }
.jk-prose ul { list-style: disc; } .jk-prose ol { list-style: decimal; }
.jk-prose a { color: var(--jo); text-decoration: underline; text-underline-offset: 3px; }
.jk-prose blockquote { border-left: 3px solid var(--jo); padding: .4rem 0 .4rem 1rem; margin: 1.4rem 0; color: var(--ivory); font-style: italic; }

/* FAQ accordion */
.jk-faq summary { cursor: pointer; list-style: none; }
.jk-faq summary::-webkit-details-marker { display: none; }
.jk-faq summary .chev { transition: transform .25s; }
.jk-faq[open] summary .chev { transform: rotate(45deg); }

/* floating CTA chip (desktop only — mobile uses the bottom nav's play button) */
#jk-float { transform: translateY(140%); transition: transform .35s ease; }
#jk-float.show { transform: none; }

/* mobile bottom navigation */
#jk-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
.jk-bn-link { position: relative; transition: color .2s; }
.jk-bn-link:hover { color: var(--ivory); }
.jk-bn-link[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px;
  background: var(--jo); border-radius: 2px; box-shadow: 0 0 10px var(--jo);
}
@media (max-width: 1023px) {
  .jk-has-bn { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #jk-float { display: none; }
}

.jk-tab[aria-selected="true"] { background: var(--jo); color: #1a0d00; border-color: var(--jo); }