.hb-content-page { background: #f7fafc; }
.hb-content-main { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 58px 0 80px; }
.hb-content-hero { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; padding: 56px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, #3b82f6 0%, #387cea 62%, #2368db 100%); overflow: hidden; position: relative; }
.hb-content-hero::after { content: ''; position: absolute; width: 360px; height: 360px; right: -110px; top: -160px; border: 70px solid rgba(255,255,255,.14); border-radius: 50%; }
.hb-content-kicker { display: block; margin-bottom: 10px; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.hb-content-hero h1 { position: relative; z-index: 1; margin: 0; font: 400 clamp(34px, 7vw, 84px)/.95 Anton, Impact, sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.hb-content-hero-copy { position: relative; z-index: 1; max-width: 900px; }
.hb-content-hero p { margin: 0; color: rgba(255,255,255,.92); font-size: 15px; line-height: 1.8; }
.hb-content-jump { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 0; }
.hb-content-jump a { padding: 10px 14px; border: 1px solid #d8e4ec; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; }
.hb-topic-bar { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 24px; overflow: hidden; border: 1px solid #d8e4ec; border-radius: 15px; background: #d8e4ec; box-shadow: 0 10px 28px rgba(13,32,53,.08); }
.hb-topic-bar a { min-height: 52px; display: grid; place-items: center; padding: 10px; background: rgba(255,255,255,.96); font-size: 11px; font-weight: 800; text-align: center; }
.hb-topic-bar a:hover { color: #fff; background: #247dde; }
.hb-content-section { margin-top: 64px; scroll-margin-top: 24px; }
.hb-content-heading { display: grid; grid-template-columns: 1fr minmax(280px, .6fr); gap: 50px; align-items: end; margin-bottom: 26px; }
.hb-content-heading h2 { margin: 0; font: 400 clamp(34px, 4.3vw, 54px)/1 Anton, Impact, sans-serif; }
.hb-content-heading p { margin: 0; color: #52687a; font-size: 14px; line-height: 1.7; }
.hb-guide-cards, .hb-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hb-guide-card, .hb-blog-card { padding: 27px; border: 1px solid #dfe8ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(13,32,53,.045); }
.hb-guide-card span, .hb-blog-card span { color: #247dde; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.hb-guide-card h3, .hb-blog-card h2 { margin: 28px 0 10px; font-size: 19px; line-height: 1.22; }
.hb-guide-card p, .hb-blog-card p { margin: 0; color: #52687a; font-size: 13px; line-height: 1.72; }
.hb-guide-card a, .hb-blog-card a { display: inline-flex; gap: 10px; margin-top: 20px; color: #ff4a12; font-size: 12px; font-weight: 800; }
.hb-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.hb-steps-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hb-steps li { counter-increment: step; min-height: 210px; padding: 24px; border: solid #dfe8ef; border-width: 1px 1px 1px 0; background: #fff; }
.hb-steps li:first-child { border-left-width: 1px; border-radius: 18px 0 0 18px; }
.hb-steps li:last-child { border-radius: 0 18px 18px 0; }
.hb-steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 44px; color: #ff4a12; font: 400 28px/1 Anton, Impact, sans-serif; }
.hb-steps b { font-size: 14px; }
.hb-steps p { margin: 9px 0 0; color: #52687a; font-size: 12px; line-height: 1.6; }
.hb-content-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hb-content-faq details { padding: 0 20px; border: 1px solid #dfe8ef; border-radius: 14px; background: #fff; }
.hb-content-faq summary { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; font-size: 13px; font-weight: 800; list-style: none; }
.hb-content-faq summary::after { content: '+'; font-size: 22px; font-weight: 400; }
.hb-content-faq details[open] summary::after { content: '−'; }
.hb-content-faq p { margin: -2px 0 20px; color: #52687a; font-size: 12px; line-height: 1.7; }
.hb-content-faq p strong { color: #0d2035; }
.hb-faq-group { scroll-margin-top: 80px; }
.hb-official-source { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin-top: 70px; padding: 36px; border-radius: 20px; color: #fff; background: #0d2035; }
.hb-official-source span { color: #82c8ff; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.hb-official-source h2 { margin: 9px 0; font-size: 25px; }
.hb-official-source p { max-width: 760px; margin: 0; color: #bad0df; font-size: 12px; line-height: 1.7; }
.hb-official-source > a { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border-radius: 999px; color: #0d2035; background: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; }
.hb-content-note { margin-top: 50px; padding: 22px 25px; border-radius: 15px; background: #edf6fc; color: #425a6f; font-size: 12px; line-height: 1.7; }
.hb-blog-card { min-height: 285px; display: flex; flex-direction: column; }
.hb-blog-card a { margin-top: auto; }
.hb-blog-article { padding: 38px; border: 1px solid #dfe8ef; border-radius: 20px; background: #fff; }
.hb-blog-article + .hb-blog-article { margin-top: 16px; }
.hb-blog-article h2 { margin: 0 0 16px; font-size: 28px; }
.hb-blog-article h3 { margin: 26px 0 8px; font-size: 17px; }
.hb-blog-article p, .hb-blog-article li { color: #52687a; font-size: 14px; line-height: 1.75; }
.hb-blog-article ul { padding-left: 20px; }
.hb-content-footer { padding: 34px 20px; color: #c6d5df; background: #0d2035; text-align: center; font-size: 11px; line-height: 1.7; }
.hb-content-footer a { color: #fff; text-decoration: underline; }
.hb-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hb-news-card { min-height: 300px; display: flex; flex-direction: column; padding: 28px; border: 1px solid #dfe8ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(13,32,53,.045); }
.hb-news-card span { color: #247dde; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.hb-news-card h2 { margin: 28px 0 12px; font-size: 21px; line-height: 1.22; }
.hb-news-card p { margin: 0; color: #52687a; font-size: 13px; line-height: 1.72; }
.hb-news-card a { display: inline-flex; margin-top: auto; padding-top: 22px; color: #ff4a12; font-size: 12px; font-weight: 800; }
.hb-article-main { width: min(1000px, calc(100% - 36px)); margin: 0 auto; padding: 54px 0 84px; }
.hb-article-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; color: #607589; font-size: 12px; }
.hb-article-breadcrumbs a { color: #247dde; font-weight: 700; }
.hb-article-hero { padding: 48px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #0d2035 0%, #174b75 100%); }
.hb-article-hero h1 { margin: 12px 0 16px; font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -.035em; }
.hb-article-hero p { max-width: 780px; margin: 0; color: #d7e7f2; font-size: 15px; line-height: 1.75; }
.hb-article-meta { margin-top: 20px; color: #94bdd8; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.hb-article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; margin-top: 28px; align-items: start; }
.hb-article-toc { position: sticky; top: 20px; padding: 22px; border: 1px solid #dfe8ef; border-radius: 16px; background: #fff; }
.hb-article-toc strong { display: block; margin-bottom: 12px; font-size: 12px; }
.hb-article-toc a { display: block; padding: 7px 0; color: #52687a; font-size: 12px; line-height: 1.45; }
.hb-article-body { padding: 38px; border: 1px solid #dfe8ef; border-radius: 20px; background: #fff; }
.hb-article-body h2 { margin: 38px 0 12px; scroll-margin-top: 22px; font-size: 26px; line-height: 1.18; }
.hb-article-body h2:first-child { margin-top: 0; }
.hb-article-body h3 { margin: 25px 0 8px; font-size: 18px; }
.hb-article-body p, .hb-article-body li { color: #52687a; font-size: 15px; line-height: 1.82; }
.hb-article-body ul, .hb-article-body ol { padding-left: 22px; }
.hb-article-callout { margin: 24px 0; padding: 20px 22px; border-left: 4px solid #ff4a12; border-radius: 0 14px 14px 0; background: #fff4ef; color: #40566a; font-size: 14px; line-height: 1.75; }
.hb-article-faq details { margin-top: 10px; padding: 0 18px; border: 1px solid #dfe8ef; border-radius: 12px; }
.hb-article-faq summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; font-weight: 800; }
.hb-article-faq p { margin: 0 0 18px; font-size: 14px; }
.hb-article-related { margin-top: 28px; padding: 28px; border-radius: 18px; background: #edf6fc; }
.hb-article-related h2 { margin: 0 0 16px; font-size: 22px; }
.hb-article-related a { display: block; padding: 7px 0; color: #176fc5; font-size: 13px; font-weight: 700; }
.hb-source-note { margin-top: 22px; color: #6f8293; font-size: 11px; line-height: 1.7; }
@media (max-width: 900px) {
  .hb-content-hero, .hb-content-heading { grid-template-columns: 1fr; gap: 25px; }
  .hb-guide-cards, .hb-blog-grid { grid-template-columns: 1fr 1fr; }
  .hb-steps { grid-template-columns: 1fr; }
  .hb-steps li { min-height: 0; border-width: 0 1px 1px; }
  .hb-steps li:first-child { border-top-width: 1px; border-radius: 18px 18px 0 0; }
  .hb-steps li:last-child { border-radius: 0 0 18px 18px; }
  .hb-steps li::before { margin-bottom: 18px; }
  .hb-steps-six { grid-template-columns: 1fr; }
  .hb-topic-bar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-official-source { grid-template-columns: 1fr; }
  .hb-news-grid { grid-template-columns: 1fr 1fr; }
  .hb-article-layout { grid-template-columns: 1fr; }
  .hb-article-toc { position: static; }
}
@media (max-width: 620px) {
  .hb-content-main { width: min(100% - 28px, 1180px); padding-top: 28px; }
  .hb-content-hero { padding: 34px 26px; }
  .hb-guide-cards, .hb-blog-grid, .hb-content-faq { grid-template-columns: 1fr; }
  .hb-topic-bar { grid-template-columns: 1fr; }
  .hb-blog-article { padding: 25px; }
  .hb-news-grid { grid-template-columns: 1fr; }
  .hb-article-main { width: min(100% - 28px, 1000px); padding-top: 28px; }
  .hb-article-hero, .hb-article-body { padding: 28px 24px; }
}