/* tb6.site — ember / tide on warm coal */
html { scroll-behavior: smooth; }
body {
  background-color: #0b0908;
  background-image:
    radial-gradient(52rem 28rem at 88% -6%, rgba(245, 111, 18, .16), transparent 70%),
    radial-gradient(40rem 26rem at -8% 32%, rgba(46, 220, 203, .08), transparent 70%);
  background-attachment: fixed;
}
::selection { background: #ff8f3d; color: #0b0908; }

/* top navigation */
.t6-bar { background: rgba(11, 9, 8, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.t6-link { position: relative; display: block; padding: .5rem .85rem; border-radius: .6rem; color: #cbbfb6; transition: color .2s, background .2s; }
.t6-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.t6-link[aria-current="page"] { color: #fff; }
.t6-link[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .15rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ff8f3d, #2edccb);
}
.t6-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.t6-drawer > div { overflow: hidden; }
.t6-drawer.is-open { grid-template-rows: 1fr; }
.t6-drawer .t6-link[aria-current="page"]::after { left: 0; right: auto; top: .6rem; bottom: .6rem; width: 3px; height: auto; }

/* buttons */
.t6-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .8rem 1.5rem; font-family: Anuphan, sans-serif; font-weight: 600; transition: transform .2s, box-shadow .2s, background .2s; }
.t6-btn:hover { transform: translateY(-2px); }
.t6-btn--hot { color: #1a0c02; background: linear-gradient(120deg, #ffb57a, #ff8f3d 45%, #f56f12); box-shadow: 0 8px 28px -8px rgba(245, 111, 18, .7); }
.t6-btn--hot:hover { box-shadow: 0 12px 34px -8px rgba(245, 111, 18, .9); }
.t6-btn--ghost { color: #e8fffc; border: 1px solid rgba(46, 220, 203, .45); background: rgba(46, 220, 203, .06); }
.t6-btn--ghost:hover { background: rgba(46, 220, 203, .14); }

/* glass cards with a glowing gradient edge */
.t6-glass { position: relative; border-radius: 1.25rem; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.t6-edge::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 143, 61, .85), rgba(255, 143, 61, 0) 38%, rgba(46, 220, 203, 0) 62%, rgba(46, 220, 203, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.t6-lift { transition: transform .25s, box-shadow .25s; }
.t6-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(245, 111, 18, .55); }
.t6-solid { border-radius: 1.25rem; background: #151110; border: 1px solid #2a221d; }

.t6-tag { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .3rem .8rem; font-size: .78rem; font-weight: 500; color: #ffd9b8; background: rgba(255, 143, 61, .1); border: 1px solid rgba(255, 143, 61, .28); }
.t6-tag--tide { color: #b9fbf3; background: rgba(46, 220, 203, .08); border-color: rgba(46, 220, 203, .3); }
.t6-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #2edccb; box-shadow: 0 0 10px #2edccb; }
.t6-grad { background: linear-gradient(100deg, #ffb57a, #ff8f3d 40%, #6ff2e2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t6-dots { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; }

/* provider marquee: the track holds two identical sets, so -50% loops seamlessly */
.t6-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.t6-track { display: flex; gap: 1rem; width: max-content; animation: t6-slide 46s linear infinite; }
.t6-marquee:hover .t6-track, .t6-marquee:focus-within .t6-track { animation-play-state: paused; }
.t6-track li { flex: none; border-radius: .9rem; padding: 3px; background: linear-gradient(140deg, rgba(255, 143, 61, .55), rgba(46, 220, 203, .35)); transition: transform .25s, box-shadow .25s; }
.t6-track li:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 28px -10px rgba(255, 143, 61, .8); }
.t6-track img { display: block; width: 176px; height: auto; border-radius: .7rem; }
@media (min-width: 768px) { .t6-track img { width: 210px; } }
@keyframes t6-slide { to { transform: translateX(-50%); } }

/* hero visual */
.t6-orbit { animation: t6-float 7s ease-in-out infinite; }
@keyframes t6-float { 50% { transform: translateY(-10px); } }
.t6-meter { height: .45rem; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.t6-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f56f12, #2edccb); }

/* article */
.t6-prose { line-height: 1.95; color: #d6cbc3; }
.t6-prose h2 { margin-top: 2.6rem; font-family: Anuphan, sans-serif; font-weight: 700; font-size: 1.55rem; line-height: 1.35; color: #fff; scroll-margin-top: 6rem; }
.t6-prose h3 { margin-top: 1.8rem; font-family: Anuphan, sans-serif; font-weight: 600; font-size: 1.2rem; color: #ffd9b8; }
.t6-prose p { margin-top: 1rem; }
.t6-prose ul, .t6-prose ol { margin-top: 1rem; padding-left: 1.3rem; }
.t6-prose ul { list-style: disc; }
.t6-prose ol { list-style: decimal; }
.t6-prose li { margin-top: .45rem; }
.t6-prose li::marker { color: #ff8f3d; }
.t6-prose a { color: #6ff2e2; text-decoration: underline; text-underline-offset: 3px; }
.t6-prose a:hover { color: #ffb57a; }
.t6-prose strong { color: #fff; }
.t6-prose blockquote { margin-top: 1.4rem; padding: 1rem 1.25rem; border-left: 3px solid #ff8f3d; border-radius: 0 .9rem .9rem 0; background: rgba(255, 143, 61, .07); color: #f3e7de; }
.t6-toc a { display: block; padding: .4rem .75rem; border-left: 2px solid #2a221d; color: #a99c93; transition: color .2s, border-color .2s; }
.t6-toc a:hover, .t6-toc a.is-active { color: #fff; border-color: #ff8f3d; }
#t6-progress { width: 0; transition: width .1s linear; }

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

.t6-chip[aria-pressed="true"] { color: #1a0c02; background: #ff8f3d; border-color: #ff8f3d; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .t6-track, .t6-orbit { animation: none; }
  .t6-marquee { overflow-x: auto; }
  .t6-btn, .t6-lift, .t6-track li { transition: none; }
}

/* mobile bottom navigation */
.t6-bnav { background: rgba(17, 14, 12, .86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding-bottom: env(safe-area-inset-bottom); }
.t6-bnav a { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .55rem 0 .5rem; font-size: .7rem; color: #a99c93; transition: color .2s; }
.t6-bnav a svg { width: 1.35rem; height: 1.35rem; }
.t6-bnav a:hover, .t6-bnav a[aria-current="page"] { color: #ffb57a; }
.t6-bnav a[aria-current="page"] svg { filter: drop-shadow(0 0 6px rgba(255, 143, 61, .7)); }
.t6-bnav .t6-bnav-cta { position: relative; top: -1.1rem; padding: 0; color: #fff; }
.t6-bnav .t6-bnav-cta span:first-child { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #1a0c02; background: linear-gradient(140deg, #ffb57a, #f56f12); box-shadow: 0 0 0 4px #110e0c, 0 8px 24px -4px rgba(245, 111, 18, .8); }
.t6-bnav .t6-bnav-cta svg { width: 1.5rem; height: 1.5rem; }
@media (max-width: 1023px) {
  body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}