/* HOBI88 (hobi88.com) — Minimalist Dark-Slate Editorial & Clean Reading UX */
:root {
  --hb8-bg: #0B0F0E;
  --hb8-surface: #121816;
  --hb8-elevated: #17201D;
  --hb8-border: rgba(255, 255, 255, 0.08);
  --hb8-border-strong: rgba(16, 185, 129, 0.28);
  --hb8-accent: #10B981;
  --hb8-accent-soft: #34D399;
  --hb8-text: #F1F5F3;
  --hb8-body: #CBD5D0;
  --hb8-muted: #84968E;
  --hb8-radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--hb8-bg); color: var(--hb8-text); font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif; line-height: 1.75; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; font-size: 16px; background: radial-gradient(920px 480px at 8% -10%, rgba(16, 185, 129, 0.18), transparent 58%), radial-gradient(760px 420px at 100% 0%, rgba(52, 211, 153, 0.10), transparent 55%), var(--hb8-bg); }
h1, h2, h3, .hb8-kicker, .hb8-stat-val { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }
a { color: var(--hb8-accent-soft); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: #FFFFFF; }
img { max-width: 100%; height: auto; display: block; }

/* Minimal Header */
.hb8-dock-header { position: sticky; top: 0; z-index: 80; background: rgba(11, 15, 14, 0.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.22); }
.hb8-dock-inner { max-width: 1140px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hb8-brand-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.hb8-brand-link img { height: 42px; width: auto; filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.25)); }
.hb8-nav-pills { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; align-items: center; }
.hb8-nav-pills a { padding: 6px 9px; border-radius: 8px; font-size: 0.8rem; font-weight: 500; color: var(--hb8-body); white-space: nowrap; }
.hb8-nav-pills a:hover, .hb8-nav-pills a[aria-current="page"] { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); }
.hb8-cta-pair { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.hb8-btn-mint { padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 0.81rem; background: var(--hb8-accent); color: #04130E; white-space: nowrap; }
.hb8-btn-mint:hover { background: var(--hb8-accent-soft); color: #04130E; }
.hb8-btn-ghost { padding: 7px 12px; border-radius: 9px; font-weight: 500; font-size: 0.81rem; border: 1px solid var(--hb8-border); color: var(--hb8-text); background: transparent; white-space: nowrap; }
.hb8-btn-ghost:hover { border-color: var(--hb8-muted); }

/* Centered Reading Container — Unified 1040px Grid */
.hb8-shell { max-width: 1040px; margin: 0 auto; padding: 28px 24px 20px; }
.hb8-crumb { margin-bottom: 20px; font-size: 0.82rem; color: var(--hb8-muted); }
.hb8-crumb ul.items { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hb8-crumb li.item + li.item::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,0.18); }

/* Clean Minimalist Hero — Consistent Panel Width */
.hb8-hero-deck { width: 100%; background: rgba(18, 25, 23, 0.56); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); border: 1px solid rgba(255,255,255,0.11); border-radius: 22px; padding: 28px 32px; box-shadow: 0 22px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08); margin-bottom: 24px; }
.hb8-kicker { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hb8-accent-soft); margin-bottom: 12px; }
.hb8-hero-deck h1 { font-size: clamp(1.85rem, 3.4vw, 2.65rem); font-weight: 560; letter-spacing: -0.025em; line-height: 1.18; margin-bottom: 18px; color: #FFFFFF; }
.hb8-ai-box { width: 100%; background: rgba(11, 16, 15, 0.62); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border: 1px solid rgba(16, 185, 129, 0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); border-radius: 16px; padding: 20px 24px; margin-bottom: 20px; }
.hb8-ai-tag { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hb8-accent-soft); margin-bottom: 6px; }
.hb8-ai-box p { font-size: 0.96rem; color: var(--hb8-text); margin: 0; line-height: 1.7; }

.hb8-hero-visual { width: 100%; margin: 22px 0 20px; }
.hb8-hero-visual figure { width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: #090D0C; box-shadow: 0 20px 44px rgba(0,0,0,0.34); }
.hb8-hero-visual figure img, .hb8-mini-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; }
.hb8-hero-visual figcaption { padding: 11px 18px; font-size: 0.8rem; color: var(--hb8-muted); border-top: 1px solid var(--hb8-border); background: rgba(11, 15, 14, 0.75); }

.hb8-telemetry-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; align-items: stretch; }
.hb8-stat-tile { background: rgba(11, 16, 15, 0.58); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,0.11); box-shadow: 0 10px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; min-height: 78px; animation: hb8-float 7.2s ease-in-out infinite; }
.hb8-stat-tile:nth-child(2) { animation-delay: -2.2s; }
.hb8-stat-tile:nth-child(3) { animation-delay: -4.4s; }
.hb8-stat-val { font-size: 1.05rem; font-weight: 700; color: #FFFFFF; display: block; margin-bottom: 2px; }
.hb8-stat-lbl { font-size: 0.78rem; color: var(--hb8-muted); }

/* Minimal Byline — Consistent Panel Bar */
.hb8-byline { width: 100%; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 16px 24px; background: rgba(18, 25, 23, 0.48); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; margin-bottom: 24px; font-size: 0.84rem; color: var(--hb8-muted); }
.hb8-byline strong { color: var(--hb8-text); font-weight: 600; }

/* Editorial Sections — 100% Uniform Glass Panel Sizing */
.hb8-article-card, .hb8-edu-slot-card { width: 100%; background: rgba(18, 25, 23, 0.56); backdrop-filter: blur(18px) saturate(1.32); -webkit-backdrop-filter: blur(18px) saturate(1.32); border: 1px solid rgba(255,255,255,0.11); box-shadow: 0 18px 40px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07); border-radius: 20px; padding: 28px 32px; margin-bottom: 24px; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.hb8-article-card:hover, .hb8-edu-slot-card:hover { border-color: rgba(52, 211, 153, 0.28); }
.hb8-article-card.ai-key-takeaways { border-color: rgba(16, 185, 129, 0.32); background: linear-gradient(145deg, rgba(18, 28, 25, 0.68), rgba(14, 20, 18, 0.58)); }
.hb8-article-card h2, .hb8-edu-slot-card h2 { font-size: 1.38rem; font-weight: 650; letter-spacing: -0.015em; color: #FFFFFF; margin: 0 0 14px; line-height: 1.3; }
.hb8-article-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--hb8-text); margin: 18px 0 6px; }
.hb8-article-card p { margin-bottom: 16px; color: var(--hb8-body); font-size: 1rem; }
.hb8-article-card p:last-child { margin-bottom: 0; }
.hb8-article-card ul, .hb8-article-card ol { padding-left: 22px; margin-bottom: 16px; color: var(--hb8-body); }
.hb8-article-card ul:last-child, .hb8-article-card ol:last-child { margin-bottom: 0; }
.hb8-article-card li { margin-bottom: 8px; }

.hb8-edu-slot-card { border-left: 4px solid var(--hb8-accent); }
.hb8-edu-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--hb8-accent-soft); margin-bottom: 8px; text-transform: uppercase; }
.hb8-edu-slot-card p { color: var(--hb8-body); margin: 0; font-size: 0.96rem; line-height: 1.72; }

/* Clean Spec Table — Uniform Inner Frame */
.hb8-table-wrap { width: 100%; overflow-x: auto; margin: 14px 0 0; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(11, 15, 14, 0.65); }
.hb8-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hb8-table caption { text-align: left; padding: 14px 18px; font-weight: 600; color: #FFFFFF; border-bottom: 1px solid var(--hb8-border); background: rgba(16, 185, 129, 0.08); }
.hb8-table th, .hb8-table td { padding: 13px 18px; border-bottom: 1px solid var(--hb8-border); text-align: left; vertical-align: top; }
.hb8-table thead th { color: var(--hb8-accent-soft); font-weight: 600; background: rgba(255,255,255,0.03); }
.hb8-table tbody tr:last-child th, .hb8-table tbody tr:last-child td { border-bottom: 0; }
.hb8-table tbody th { color: var(--hb8-muted); font-weight: 500; width: 36%; }
.hb8-table td { color: var(--hb8-text); }

/* Clean Directory Grid — Equal Height 2-Column Cards */
.hb8-card-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 18px; align-items: stretch; }
.hb8-mini-card { height: 100%; background: rgba(11, 16, 15, 0.68); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.11); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 28px rgba(0,0,0,0.18); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.hb8-mini-card:hover { transform: translateY(-6px); border-color: rgba(52, 211, 153, 0.45); box-shadow: 0 20px 38px rgba(0,0,0,0.28); }
.hb8-mini-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.hb8-mini-body h3 { font-size: 1.02rem; margin: 0 0 8px; color: #FFFFFF; line-height: 1.35; }
.hb8-mini-body p { font-size: 0.86rem; color: var(--hb8-muted); margin-bottom: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Clean FAQ List */
.hb8-faq-item { border-bottom: 1px solid var(--hb8-border); padding: 16px 0; }
.hb8-faq-item:first-of-type { border-top: 1px solid var(--hb8-border); margin-top: 6px; }
.hb8-faq-item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.hb8-faq-item h3 { margin: 0 0 6px; font-size: 1rem; color: #FFFFFF; font-weight: 600; }
.hb8-faq-item p { margin: 0; font-size: 0.94rem; color: var(--hb8-body); }

/* Footer — Complete Multi-Column Glassmorphic Portal Footer */
.hb8-footer { padding: 12px 24px 40px; margin-top: 0; font-size: 0.86rem; color: var(--hb8-muted); }
.hb8-footer-inner { max-width: 1040px; margin: 0 auto; background: linear-gradient(165deg, rgba(16, 24, 22, 0.92) 0%, rgba(9, 14, 13, 0.96) 100%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(16, 185, 129, 0.24); border-radius: 24px; padding: 34px 32px 26px; box-shadow: 0 24px 54px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.08); }
.hb8-ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 24px; padding-bottom: 26px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); align-items: stretch; }
.hb8-ft-brand, .hb8-ft-col { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; }
.hb8-ft-logo { display: inline-block; margin-bottom: 10px; }
.hb8-ft-logo img { height: 44px; width: auto; filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.25)); }
.hb8-ft-desc { color: var(--hb8-body); font-size: 0.84rem; line-height: 1.6; margin-bottom: 12px; }
.hb8-ft-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hb8-ft-badges span { font-size: 0.71rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--hb8-accent-soft); }
.hb8-ft-socials { display: flex; flex-wrap: wrap; gap: 6px; }
.hb8-ft-socials a { font-size: 0.76rem; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--hb8-text); }
.hb8-ft-socials a:hover { border-color: var(--hb8-accent-soft); color: var(--hb8-accent-soft); }
.hb8-ft-col h3 { font-size: 0.94rem; font-weight: 650; color: #FFFFFF; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(16, 185, 129, 0.22); letter-spacing: 0.01em; }
.hb8-ft-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hb8-ft-links a { color: var(--hb8-body); font-size: 0.84rem; transition: color 0.15s ease, transform 0.15s ease; display: inline-block; }
.hb8-ft-links a:hover { color: var(--hb8-accent-soft); transform: translateX(3px); }
.hb8-ft-meta-card { display: flex; flex-direction: column; gap: 7px; font-size: 0.82rem; color: var(--hb8-body); flex: 1; justify-content: space-between; }
.hb8-ft-meta-card p { margin: 0; line-height: 1.5; }
.hb8-ft-meta-card strong { color: #FFFFFF; }
.hb8-ft-ext { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; }
.hb8-ft-subnote { margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.76rem; color: var(--hb8-muted); }
.hb8-ft-subnote strong { color: var(--hb8-accent-soft); }

.ft-pay { margin: 0 0 22px; padding: 20px 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.11); background: rgba(7, 11, 10, 0.72); }
.ft-pay-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ft-pay h3 { color: #FFFFFF; margin-bottom: 2px; font-size: 0.95rem; }
.ft-pay-note { font-size: 0.8rem; margin: 0; color: var(--hb8-muted); }
.ft-pay-tag { font-size: 0.73rem; font-weight: 600; padding: 4px 11px; border-radius: 99px; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--hb8-accent-soft); }
.ft-pay-banner { background: transparent; text-align: center; }
.ft-pay-banner img { width: 100%; max-width: 820px; height: auto; aspect-ratio: 1920 / 400; object-fit: contain; margin: 0 auto; display: block; }

.hb8-ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 4px; font-size: 0.81rem; color: var(--hb8-muted); }
.hb8-ft-bottom-right { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hb8-back-top { padding: 6px 13px; border-radius: 8px; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.35); color: var(--hb8-accent-soft); font-weight: 600; font-size: 0.78rem; }
.hb8-back-top:hover { background: var(--hb8-accent); color: #04130E; border-color: var(--hb8-accent); }

.hb8-inline-shot { width: 100%; margin: 20px 0 6px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 36px rgba(0,0,0,0.22); }
.hb8-inline-shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; }
@keyframes hb8-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hb8-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hb8-hero-deck { animation: hb8-rise 0.65s ease both; }

.gate-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; position: relative; }
.gate-bg { position: fixed; inset: 0; opacity: 0.1; z-index: 0; pointer-events: none; }
.gate-bg img { width: 100%; height: 100%; object-fit: cover; }
.gate { position: relative; z-index: 2; max-width: 460px; width: 100%; background: rgba(18, 24, 22, 0.62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 24px 50px rgba(0,0,0,0.32); border-radius: 22px; padding: 32px; text-align: center; }
.gate-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.gate-actions button { padding: 12px 16px; border-radius: 10px; border: 0; font-weight: 600; cursor: pointer; font-family: inherit; }
#gate-yes { background: var(--hb8-accent); color: #04130E; }
#gate-no { background: transparent; border: 1px solid var(--hb8-border); color: var(--hb8-text); }

@media (max-width: 860px) {
  .hb8-ft-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .hb8-telemetry-strip, .hb8-card-matrix, .hb8-ft-grid { grid-template-columns: 1fr; }
  .hb8-dock-inner { padding: 12px 16px; }
  .hb8-shell { padding: 20px 16px 60px; }
  .hb8-hero-deck, .hb8-article-card, .hb8-edu-slot-card { padding: 20px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}