/* hoki108 — custom layer on top of Tailwind CDN */
html { scroll-behavior: smooth; }
body {
  background-color: #0a0818;
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgba(255, 77, 125, .14), transparent 60%),
    radial-gradient(50rem 28rem at -10% 20%, rgba(92, 225, 255, .10), transparent 60%);
  background-attachment: fixed;
}
::selection { background: #ff4d7d; color: #0a0818; }

/* Glass card with a gradient glowing hairline */
.hk-glass {
  position: relative;
  background: linear-gradient(160deg, rgba(46, 39, 88, .55), rgba(16, 13, 36, .72));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 1.25rem;
  isolation: isolate;
}
.hk-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 77, 125, .65), rgba(92, 225, 255, .15) 45%, rgba(92, 225, 255, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.hk-glass.hk-hover { transition: transform .25s ease, box-shadow .25s ease; }
.hk-glass.hk-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(255, 77, 125, .55); }

/* Solid dark card */
.hk-solid { background: #17132f; border: 1px solid #2e2758; border-radius: 1.25rem; }

.hk-grad-text {
  background: linear-gradient(100deg, #ff9db8 0%, #ff4d7d 35%, #5ce1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: "Krub", sans-serif; font-weight: 700;
  border-radius: 999px; padding: .8rem 1.6rem;
  background: linear-gradient(100deg, #ff4d7d, #e0305f 55%, #ff7a5c);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(255, 77, 125, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hk-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(255, 77, 125, .95), inset 0 1px 0 rgba(255, 255, 255, .25); }
.hk-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: "Krub", sans-serif; font-weight: 600;
  border-radius: 999px; padding: .8rem 1.6rem;
  border: 1px solid rgba(92, 225, 255, .45); color: #b5f1ff;
  transition: background .2s ease, border-color .2s ease;
}
.hk-btn-ghost:hover { background: rgba(92, 225, 255, .08); border-color: #5ce1ff; }

#hk-header { transition: background-color .25s ease, box-shadow .25s ease; }
#hk-header.hk-scrolled { background-color: rgba(10, 8, 24, .92); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .9); }

.hk-nav-link { position: relative; padding: .4rem .2rem; color: #cbd5e1; transition: color .2s; }
.hk-nav-link:hover, .hk-nav-link[aria-current="page"] { color: #fff; }
.hk-nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ff4d7d, #5ce1ff);
}

.hk-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: #b5f1ff; border: 1px solid rgba(92, 225, 255, .3); background: rgba(92, 225, 255, .06);
  padding: .3rem .8rem; border-radius: 999px;
}
.hk-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #5ce1ff; box-shadow: 0 0 0 0 rgba(92, 225, 255, .7); animation: hk-ping 2s infinite; }
@keyframes hk-ping { 70% { box-shadow: 0 0 0 8px rgba(92, 225, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(92, 225, 255, 0); } }

/* Bento reel tile in the hero */
.hk-reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.hk-reel span {
  aspect-ratio: 1; display: grid; place-items: center; font-size: 1rem;
  border-radius: .6rem; background: rgba(10, 8, 24, .7); border: 1px solid #2e2758;
  animation: hk-flick 3.6s ease-in-out infinite;
}
.hk-reel span:nth-child(3n+2) { animation-delay: .4s; }
.hk-reel span:nth-child(3n) { animation-delay: .8s; }
.hk-reel span.is-win { border-color: #ff4d7d; box-shadow: 0 0 18px -4px rgba(255, 77, 125, .9) inset; }
@keyframes hk-flick { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ===== Provider Logo Slider (structure from topspinonline, restyled for hoki108) ===== */
.providers-section { position: relative; }
.providers-header { text-align: center; }
.providers-header h2 { font-family: "Krub", sans-serif; font-weight: 700; color: #fff; font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
.providers-header p { color: #94a3b8; max-width: 46rem; margin: .5rem auto 0; font-size: .95rem; }
.providers-marquee {
  overflow: hidden;
  margin-top: 1.25rem;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 77, 125, .25);
  border-bottom: 1px solid rgba(92, 225, 255, .25);
  background: linear-gradient(90deg, rgba(255, 77, 125, .06), rgba(92, 225, 255, .06));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.providers-track {
  display: flex;
  gap: 18px;
  width: max-content;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  animation: providers-scroll 48s linear infinite;
  animation-play-state: paused;
}
/* runs only while on screen (toggled by hk108.js) */
.providers-marquee.is-active .providers-track { animation-play-state: running; }
.providers-marquee.is-active:hover .providers-track { animation-play-state: paused; }
.providers-track li {
  flex: none;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 77, 125, .35), 0 10px 24px -12px rgba(255, 77, 125, .6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.providers-track li:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 0 1px rgba(92, 225, 255, .8), 0 14px 30px -10px rgba(92, 225, 255, .55); }
.providers-track img { width: 220px; height: 141px; display: block; border-radius: 16px; background: #17132f; }
/* track holds two identical sets: shift by one set (+ half a gap) for a seamless loop */
@keyframes providers-scroll {
  to { transform: translateX(calc(-50% - 9px)); }
}
@media (max-width: 600px) {
  .providers-track { gap: 12px; animation-duration: 34s; }
  .providers-track img { width: 170px; height: 109px; }
  @keyframes providers-scroll { to { transform: translateX(calc(-50% - 6px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .providers-track { animation-duration: 100s; }
  .providers-track li, .hk-reel span, .hk-dot { transition: none; animation: none; }
}

/* Long-form article typography */
.hk-prose { color: #cbd5e1; line-height: 1.9; font-size: 1.06rem; }
.hk-prose h2 { font-family: "Krub", sans-serif; color: #fff; font-weight: 700; font-size: 1.5rem; margin: 2.2rem 0 .8rem; line-height: 1.4; }
.hk-prose h3 { font-family: "Krub", sans-serif; color: #ff9db8; font-weight: 600; font-size: 1.18rem; margin: 1.6rem 0 .5rem; }
.hk-prose p { margin: 0 0 1.05rem; }
.hk-prose ul, .hk-prose ol { margin: 0 0 1.1rem 1.3rem; }
.hk-prose ul { list-style: disc; }
.hk-prose ol { list-style: decimal; }
.hk-prose li { margin: .35rem 0; }
.hk-prose a { color: #5ce1ff; text-decoration: underline; text-underline-offset: 3px; }
.hk-prose strong { color: #fff; }
.hk-prose blockquote { border-left: 3px solid #ff4d7d; background: rgba(255, 77, 125, .06); padding: .9rem 1.1rem; border-radius: 0 .8rem .8rem 0; margin: 1.4rem 0; color: #e2e8f0; }

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

/* Reveal on scroll (only when JS runs) */
html:not(.no-js) .hk-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
html:not(.no-js) .hk-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html:not(.no-js) .hk-reveal { opacity: 1; transform: none; transition: none; } }

.hk-chip[aria-pressed="true"] { background: #ff4d7d; color: #0a0818; border-color: #ff4d7d; }

/* Mobile bottom navigation: clear the iPhone home indicator */
.hk-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }