@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --xbq-deep:#0c2340;
  --xbq-teal:#0d9488;
  --xbq-coral:#f97316;
  --xbq-gold:#fbbf24;
  --xbq-sand:#fef3e2;
  --xbq-white:#fffcf7;
  --xbq-ink:#1a2e44;
  --xbq-soft:#5a7184;
  --xbq-line:rgba(12,35,64,.09);
  --xbq-glass:rgba(255,252,247,.82);
  --xbq-r:16px;
  --xbq-nav:58px;
  --xbq-dl:0px;
}

html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'DM Sans','Noto Serif SC',Georgia,serif;
  background:var(--xbq-white);
  color:var(--xbq-ink);
  line-height:1.82;
  overflow-x:hidden;
}
body.xbq-dl-active{padding-top:calc(var(--xbq-nav) + var(--xbq-dl))}
a{color:var(--xbq-teal);text-decoration:none;transition:color .2s}
a:hover{color:var(--xbq-coral)}

.xbq-top{
  position:fixed;top:0;left:0;right:0;z-index:1200;
  height:var(--xbq-nav);
  background:var(--xbq-glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--xbq-line);
}
.xbq-top.xbq-scrolled{box-shadow:0 8px 32px rgba(12,35,64,.12)}
.xbq-top-inner{
  max-width:1140px;margin:0 auto;padding:0 16px;
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.xbq-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;color:var(--xbq-deep);letter-spacing:.02em}
.xbq-brand img{width:34px;height:34px;border-radius:10px;object-fit:cover}
.xbq-menu-d{display:flex;gap:22px;list-style:none}
.xbq-menu-d a{color:var(--xbq-soft);font-weight:500;font-size:.9rem;padding:4px 0;border-bottom:2px solid transparent}
.xbq-menu-d a:hover,.xbq-menu-d a.xbq-cur{color:var(--xbq-teal);border-bottom-color:var(--xbq-coral)}
.xbq-burger{
  display:none;background:none;border:none;cursor:pointer;
  width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.xbq-burger span{display:block;width:21px;height:2px;background:var(--xbq-deep);border-radius:2px;transition:.26s}
.xbq-burger.xbq-open span:nth-child(1){transform:rotate(40deg) translate(5px,5px)}
.xbq-burger.xbq-open span:nth-child(2){opacity:0}
.xbq-burger.xbq-open span:nth-child(3){transform:rotate(-40deg) translate(5px,-5px)}
.xbq-menu-m{
  display:none;position:fixed;top:var(--xbq-nav);left:0;right:0;
  background:var(--xbq-glass);backdrop-filter:blur(18px);
  padding:16px 18px 20px;border-bottom:1px solid var(--xbq-line);
  z-index:1190;transform:translateY(-120%);transition:transform .3s ease;
}
.xbq-menu-m.xbq-vis{display:block;transform:translateY(0)}
.xbq-menu-m ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.xbq-menu-m a{font-size:1rem;color:var(--xbq-ink);font-weight:500;padding:5px 0;display:block}

.xbq-dlstrip{
  position:fixed;top:var(--xbq-nav);left:0;right:0;z-index:1180;
  background:linear-gradient(105deg,rgba(12,35,64,.95),rgba(13,148,136,.88));
  backdrop-filter:blur(12px);padding:8px 12px;
  transform:translateY(-105%);opacity:0;transition:transform .32s,opacity .32s;pointer-events:none;
}
.xbq-dlstrip.xbq-vis{transform:translateY(0);opacity:1;pointer-events:auto}
.xbq-dlgrid{
  max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
}
.xbq-dlgrid a{
  display:flex;flex-direction:column;align-items:center;
  width:calc(20% - 6px);color:#fff;text-decoration:none;font-size:.65rem;
}
.xbq-dlgrid img{width:46px;height:46px;border-radius:12px;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.xbq-dlgrid span{margin-top:2px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.xbq-adzone{padding:calc(var(--xbq-nav) + 10px) 14px 0;background:linear-gradient(180deg,var(--xbq-sand),var(--xbq-white))}
.xbq-adzone .xbq-ads{display:flex;justify-content:center;flex-wrap:wrap;gap:5px}
.xbq-ads>div{display:flex;flex-direction:column;align-items:center;width:68px}
.xbq-ads img{width:60px;height:60px;border-radius:14px;object-fit:cover;box-shadow:0 4px 14px rgba(12,35,64,.1)}
.xbq-ads .xbq-adcap{font-size:10px;color:var(--xbq-soft);margin-top:2px;max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.xbq-hero{
  position:relative;padding:44px 18px 52px;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 85% 15%,rgba(249,115,22,.16),transparent),
    radial-gradient(ellipse 55% 45% at 5% 75%,rgba(13,148,136,.14),transparent),
    linear-gradient(158deg,var(--xbq-sand) 0%,var(--xbq-white) 60%);
}
.xbq-hero::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:48px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48'%3E%3Cpath fill='%23fffcf7' d='M0 48V20c120 30 240 10 360 0s240-10 360 0 240 10 360 0 120-20 120-20v28z'/%3E%3C/svg%3E") center/cover no-repeat;
}
.xbq-hero-box{max-width:900px;margin:0 auto;position:relative;z-index:2}
.xbq-hero h1{
  font-size:clamp(1.5rem,4.2vw,2.2rem);font-weight:700;line-height:1.34;
  color:var(--xbq-deep);margin-bottom:14px;
}
.xbq-hero-lead{font-size:1.02rem;color:var(--xbq-soft);max-width:780px}

.xbq-body{max-width:920px;margin:0 auto;padding:0 18px 64px}
.xbq-body h2{
  font-size:clamp(1.22rem,3vw,1.55rem);color:var(--xbq-deep);
  margin:42px 0 16px;padding-left:14px;
  border-left:4px solid var(--xbq-coral);
}
.xbq-body h3{font-size:1.08rem;color:var(--xbq-teal);margin:26px 0 10px}
.xbq-body p{margin-bottom:14px;text-align:justify}
.xbq-body ul,.xbq-body ol{margin:0 0 16px 22px}
.xbq-body li{margin-bottom:7px}

.xbq-ribbon{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0;
}
.xbq-ribbon-item{
  background:linear-gradient(145deg,rgba(13,148,136,.08),rgba(249,115,22,.06));
  border:1px solid var(--xbq-line);border-radius:var(--xbq-r);
  padding:18px 14px;text-align:center;
  transition:transform .25s,box-shadow .25s;
}
.xbq-ribbon-item:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(12,35,64,.1)}
.xbq-ribbon-item strong{display:block;font-size:.95rem;color:var(--xbq-deep);margin-bottom:5px}
.xbq-ribbon-item span{font-size:.82rem;color:var(--xbq-soft)}

.xbq-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:24px 0}
.xbq-duo.xbq-flip .xbq-pic{order:2}
.xbq-pic{text-align:center}
.xbq-pic img{
  max-width:280px;width:100%;border-radius:var(--xbq-r);
  box-shadow:0 12px 36px rgba(12,35,64,.14);
  border:3px solid rgba(13,148,136,.12);
}
.xbq-pic figcaption{font-size:.78rem;color:var(--xbq-soft);margin-top:8px}

.xbq-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0}
.xbq-tile{
  background:var(--xbq-white);border:1px solid var(--xbq-line);
  border-radius:var(--xbq-r);padding:20px 16px;
  border-top:3px solid var(--xbq-teal);
  transition:box-shadow .22s;
}
.xbq-tile:nth-child(even){border-top-color:var(--xbq-coral)}
.xbq-tile:hover{box-shadow:0 8px 24px rgba(12,35,64,.08)}
.xbq-tile h3{margin:0 0 8px;font-size:.98rem}

.xbq-quote{
  margin:28px 0;padding:22px 20px;
  background:linear-gradient(120deg,rgba(12,35,64,.04),rgba(13,148,136,.06));
  border-radius:var(--xbq-r);border-left:5px solid var(--xbq-gold);
  font-style:italic;color:var(--xbq-soft);
}

.xbq-cta{
  text-align:center;margin:36px 0;padding:28px 20px;
  background:linear-gradient(135deg,var(--xbq-deep),var(--xbq-teal));
  border-radius:var(--xbq-r);color:#fff;
}
.xbq-cta p{color:rgba(255,255,255,.88);margin-bottom:16px}
.xbq-btn-dl{
  display:inline-block;padding:12px 32px;
  background:var(--xbq-coral);color:#fff;font-weight:600;
  border-radius:999px;font-size:.95rem;
  box-shadow:0 6px 20px rgba(249,115,22,.35);
  transition:transform .2s,box-shadow .2s;
}
.xbq-btn-dl:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 28px rgba(249,115,22,.45)}

.xbq-crumb{
  max-width:920px;margin:calc(var(--xbq-nav) + 16px) auto 0;padding:0 18px;
  font-size:.82rem;color:var(--xbq-soft);
}
.xbq-crumb a{color:var(--xbq-teal)}
.xbq-crumb span{margin:0 6px}

.xbq-subhead{
  max-width:920px;margin:0 auto;padding:28px 18px 0;
}
.xbq-subhead h1{font-size:clamp(1.35rem,3.5vw,1.85rem);color:var(--xbq-deep);margin-bottom:8px}
.xbq-subhead p{color:var(--xbq-soft);font-size:.95rem}

.xbq-legal{max-width:820px;margin:0 auto;padding:20px 18px 64px}
.xbq-legal h2{font-size:1.15rem;color:var(--xbq-deep);margin:32px 0 12px;padding-left:12px;border-left:3px solid var(--xbq-teal)}
.xbq-legal h3{font-size:1rem;color:var(--xbq-teal);margin:20px 0 8px}
.xbq-legal p,.xbq-legal li{font-size:.93rem;margin-bottom:10px}

.xbq-foot{
  background:var(--xbq-deep);color:rgba(255,255,255,.72);
  padding:28px 18px 32px;text-align:center;
}
.xbq-foot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-bottom:14px;list-style:none}
.xbq-foot-nav a{color:rgba(255,255,255,.85);font-size:.88rem}
.xbq-foot-nav a:hover{color:var(--xbq-gold)}
.xbq-foot-copy{font-size:.78rem;color:rgba(255,255,255,.45)}

.xbq-err{
  min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 18px;
}
.xbq-err h1{font-size:4rem;color:var(--xbq-coral);line-height:1;margin-bottom:8px}
.xbq-err p{color:var(--xbq-soft);margin-bottom:20px}

@media(min-width:769px){
  .xbq-dlgrid a{width:calc(12.5% - 7px)}
}

@media(max-width:768px){
  .xbq-menu-d{display:none}
  .xbq-burger{display:flex}
  .xbq-ribbon{grid-template-columns:1fr}
  .xbq-duo,.xbq-duo.xbq-flip{grid-template-columns:1fr}
  .xbq-duo.xbq-flip .xbq-pic{order:0}
  .xbq-tiles{grid-template-columns:1fr}
  .xbq-pic img{max-width:240px}
}