body { margin: 0; padding: 0; font: 13px/1.8 Arial, sans-serif; color: #000; text-align: center; background-color: #000;}
body.en { font-size: 14px;}
a { text-decoration: none; color: #fff;}
.clear:after { display: block; clear: both; height: 0; width: 0; content: '';}

.header { padding: 10px 0 18px 0; z-index: 9999; position: fixed; width: 100%; background-color: #000; box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.header .logo { line-height: 1.6; font-size: 30px; color: #fff; font-weight: bolder; float: left; padding: 4px 0 0 20px;}
.header .logo img { height: 38px; display: block;}
.nav { float: right; margin: 0 170px 0 0; padding: 13px 0 0 0; list-style: none;}
.nav li { float: left; margin-left: 30px; font-size: 13px; list-style: none;}
.nav li a { border-bottom: 1px solid transparent; padding-bottom: 10px; transition: all .3s ease;}
.nav li a:hover { border-bottom: 1px solid #fff; transition: all .3s ease;}
body.en .nav { margin-right: 160px;}
body.en .nav li { font-size: 15px;}

.language { position: absolute; right: 25px; top: 20px;}
.language a.cur { position: relative; text-align: left; text-indent: 27px; display: inline-block; padding: 2px 0; border-radius: 3px; width: 94px; background-color: #000; border: 1px solid #fff; color: #fff; transition: all .3s ease;}
.language a.cur i.icon-world { position: absolute; top: 5px; left: 7px; display: inline-block; width: 18px; height: 18px; background: url(../images/icon-language.png) no-repeat 0 0; background-size: 100% auto; transition: all .3s ease;}
.language a.cur:hover { background-color: #fff; border: 1px solid #fff; color: #000; transition: all .3s ease;}
.language a.cur:hover i.icon-world { background-position: 0 -18px; transition: all .3s ease;}
.language-box { display: none; position: absolute; background-color: #fff; padding: 3px 0; box-shadow: 0 1px 5px -1px rgba(10, 16, 34, .1); border-radius: 2px; border: 1px solid #fff; top: 40px;}
.language-box ul, .language-box li { list-style: none; margin: 0; padding: 0;}
.language-box li a { position: relative; text-indent: 28px; color: #000; display: block; width: 94px; text-align: left; padding: 3px 0;}
.language-box li a i { position: absolute; top: 7px; left: 9px; display: inline-block; width: 14px; height: 14px; background: url(../images/icon-language.png) no-repeat 0 -28px; background-size: 100% auto;}
.language-box li a i.icon-cn { background-position: 0 -28px;}
.language-box li a i.icon-en { background-position: 0 -42px;}
.language-box li a i.icon-jp { background-position: 0 -56px;}
.language-box li a i.icon-kr { background-position: 0 -70px;}
.language-box li a:hover { background-color: #eee;}
.language-box i.icon-triangle { left: 50%; margin-left: -4px; top: -5px; position: absolute; display: inline-block; width: 0; height: 0; border-bottom: 5px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent;}

.banner { margin: 0 auto; max-width: 680px; padding-top: 80px;}
.banner img { width: 100%; height: auto; display: block;}

.banner-cta { text-align: center; padding: 4px 12px 24px 12px;}
.banner-sub { color: #bbb; font-size: 14px; margin: 0 0 16px 0; line-height: 1.7;}
.btn { display: inline-block; margin: 0 7px; padding: 9px 26px; border-radius: 22px; font-size: 14px; font-weight: 700; border: 1px solid transparent; cursor: pointer; transition: all .25s ease;}
.btn-primary { background: #0b70e2; color: #fff;}
.btn-primary:hover { background: #095cb5;}
.btn-ghost { border-color: #666; color: #ddd; background: transparent;}
.btn-ghost:hover { border-color: #fff; color: #fff;}

.container { text-align: left; margin: 0 auto; max-width: 800px; padding: 25px; background-color: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); border-radius: 4px;}
.container h1 { line-height: 1.2; font-size: 32px;}
.container h2 { font-size: 26px; padding-bottom: 5px;}
.container h3:before { display: inline-block; content: ''; width: 6px; height: 12px; border-radius: 2px; position: relative; margin-right: 5px; background-color: #0b70e2;}
.container ul, .container p { color: #666; line-height: 2;}
.container a { color: #0b70e2;}
.container a:hover { color: #095cb5;}
.container a.btn-primary, .container a.btn-primary:hover { color: #fff;}
.container .essence-text { padding-left: 27px;}
.container .email { font-weight: bold; color: #0b70e2; text-align: center;}
.container .email span { display: inline-block; border: 1px solid #0b70e2; padding: 5px 35px; font-size: 14px;}
.container .email span i { position: relative; margin-right: 5px; top: 2px; display: inline-block; width: 16px; height: 14px; background: url("../images/icon-email.png") no-repeat; background-size: 100% auto;}

.footer p { color: #555; padding: 10px 0;}
.footer p + p { padding-top: 0;}
.footer a { color: #888;}
.footer a:hover { color: #ccc;}

#Cases, #Process, #FAQ, #Advantages, #Assessment, #AntiScam, #Contact { padding-top: 20px;}

.assess-form { background: #f6f8fa; border: 1px solid #eaecef; border-radius: 6px; padding: 16px 18px 14px 18px;}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px;}
.form-row { margin-bottom: 10px;}
.form-row label { display: block; font-size: 12.5px; color: #333; font-weight: 700; margin-bottom: 4px;}
.form-row select, .form-row input, .form-row textarea { width: 100%; box-sizing: border-box; border: 1px solid #d7dce2; border-radius: 4px; padding: 8px 10px; font: 13px/1.5 Arial, sans-serif; color: #333; background: #fff;}
.form-row select:focus, .form-row input:focus, .form-row textarea:focus { outline: none; border-color: #0b70e2;}
.form-row textarea { resize: vertical;}
.form-row .contact-group { display: flex; gap: 8px;}
.form-row .contact-group select { flex: 0 0 128px; width: 128px;}
.form-row .contact-group input { flex: 1; min-width: 0;}
.form-warning { color: #c0392b; font-size: 12.5px; font-weight: 700; text-align: center; margin: 10px 0;}
.assess-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;}
.form-actions { text-align: center; padding-bottom: 4px;}
.form-actions .btn-tg { border-color: #0b70e2; color: #0b70e2; background: #fff;}
.form-actions .btn-tg:hover { background: #e7f0fc;}

.process { list-style: none; margin: 0 0 12px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
.process li { position: relative; background: #f6f8fa; border: 1px solid #eaecef; border-radius: 6px; padding: 14px 16px 10px 16px;}
.process .step-num { position: absolute; top: 10px; right: 14px; font-size: 30px; font-weight: 800; color: rgba(11, 112, 226, 0.16); line-height: 1;}
.process h4 { margin: 0 0 4px 0; font-size: 14px; color: #0b70e2;}
.process p { margin: 0; font-size: 12.5px; color: #555; line-height: 1.75;}
.no-fee { text-align: center; font-weight: 700; color: #0b70e2; background: #e7f0fc; border-radius: 6px; padding: 8px 12px;}

.faq details { border: 1px solid #eaecef; border-radius: 6px; margin-bottom: 8px; background: #fff;}
.faq summary { cursor: pointer; padding: 10px 36px 10px 14px; font-weight: 700; color: #333; font-size: 13.5px; list-style: none; position: relative;}
.faq summary::-webkit-details-marker { display: none;}
.faq summary:after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #0b70e2; font-size: 16px; font-weight: 700;}
.faq details[open] summary:after { content: '−';}
.faq details p { margin: 0; padding: 0 14px 12px 14px; color: #666; font-size: 12.5px; line-height: 1.8;}
.faq details a { color: #0b70e2;}

.antiscam { border: 1px solid #f0c36d; background: #fffaf0; border-radius: 6px; padding: 14px 18px; margin-bottom: 10px;}
.antiscam p { margin: 6px 0; color: #555;}
.antiscam .antiscam-lead { font-weight: 700; color: #8a6d3b;}
.antiscam ul, .antiscam ol { margin: 4px 0; padding-left: 22px; color: #555;}
.antiscam a { color: #0b70e2; font-weight: 700;}
.antiscam .antiscam-warn { color: #c0392b; font-weight: 700;}

.legal-wrap { padding-top: 90px; padding-bottom: 20px;}
.breadcrumb { font-size: 12px; color: #999;}
.breadcrumb a { color: #0b70e2;}

/* case detail pages */
.case-wrap .container { padding: 28px 32px;}
.case-wrap .breadcrumb { margin: 0 0 16px 0;}
.case-wrap .tag { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #e7f0fc; color: #0b70e2; margin: 0 6px 6px 0; letter-spacing: .3px;}
.case-wrap h1 { font-size: 25px; line-height: 1.4; margin: 6px 0 14px 0;}
.case-wrap .container > p { font-size: 13.5px; line-height: 1.9;}
.case-wrap .case-img { position: relative; display: block; margin: 22px auto; max-width: 480px; border-radius: 8px; overflow: hidden; border: 1px solid #e3e6ea; background: #fafbfc; cursor: zoom-in; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow .25s ease;}
.case-wrap .case-img:hover { box-shadow: 0 6px 18px rgba(11, 112, 226, 0.14);}
.case-wrap .case-img img { display: block; width: 100%; height: auto; max-height: 600px; object-fit: cover; object-position: top;}
.case-wrap .case-img.tweet { max-width: 540px;}
.case-wrap .case-img:before { content: '🔍'; position: absolute; top: 10px; right: 10px; z-index: 1; background: rgba(0, 0, 0, 0.45); color: #fff; border-radius: 14px; padding: 2px 9px; font-size: 13px; opacity: 0; transition: opacity .25s ease;}
.case-wrap .case-img:hover:before { opacity: 1;}
.case-wrap .case-img figcaption { font-size: 12px; color: #888; padding: 8px 14px; background: #fafbfc; border-top: 1px solid #eee; text-align: center; line-height: 1.6;}
.case-wrap blockquote { margin: 20px 0; padding: 12px 18px; border-left: 3px solid #0b70e2; background: #f6f8fa; border-radius: 0 6px 6px 0; color: #444; font-style: italic; font-size: 13px; line-height: 1.85;}
.case-wrap blockquote cite { display: block; font-style: normal; color: #888; font-size: 12px; margin-top: 6px;}
.case-wrap .case-cta { margin-top: 28px;}
.case-wrap .case-cta p { margin: 6px 0 12px 0;}
.case-wrap .case-cta + .breadcrumb { margin-top: 24px;}
.case-cta { margin-top: 24px; background: #f6f8fa; border: 1px solid #eaecef; border-radius: 6px; padding: 14px 18px 18px 18px; text-align: center;}
.case-cta h3 { margin: 6px 0;}
.case-cta h3:before { display: none;}
.case-cta .btn-tg { border-color: #0b70e2; color: #0b70e2; background: #fff;}
.case-cta .btn-tg:hover { background: #e7f0fc;}
.case-card h4 a { color: #111;}
.case-card h4 a:hover { color: #0b70e2;}
.case-more { text-align: right; margin: 4px 0 0 0;}
.case-more a { color: #0b70e2; font-weight: 700; font-size: 12.5px;}
.case-more a:hover { color: #095cb5;}
.legal-wrap .container h1 { font-size: 24px;}
.legal-wrap .container h3 { font-size: 15px;}
.legal-wrap .updated { color: #999; font-size: 12px;}

.cases-block { position: relative;}
.cases-block:before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: rgba(11, 112, 226, 0.28);}

.stats { list-style: none; padding: 0 0 0 30px; margin: 0 0 28px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;}
.stats li { background: #f6f8fa; border-left: 3px solid #0b70e2; border-radius: 2px; padding: 10px 10px; color: #333; line-height: 1.35; min-width: 0;}
.stats li strong { display: block; font-size: 15px; color: #0b70e2; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap;}
.stats li span { display: block; font-size: 11px; color: #888; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.timeline { list-style: none; margin: 0; padding: 0 0 0 30px;}
.timeline > li { position: relative; margin: 0 0 28px 0; padding: 0;}
.timeline > li:before { content: ''; position: absolute; left: -24px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #0b70e2; border: 3px solid #fff; box-shadow: 0 0 0 2px #0b70e2; box-sizing: border-box; z-index: 2;}
.timeline > li:last-child { margin-bottom: 0;}

.cases-more { margin: 28px 0 0 30px; padding: 18px 20px; background: #f6f8fa; border: 1px solid #eaecef; border-radius: 6px; text-align: center; font-size: 13px; color: #555; line-height: 1.8;}
.cases-more a { color: #0b70e2; font-weight: 700; text-decoration: none;}
.cases-more a:hover { color: #095cb5;}

.case-card { background: #fff; border: 1px solid #eaecef; border-radius: 6px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow .25s ease, transform .25s ease;}
.case-card:hover { box-shadow: 0 4px 14px rgba(11,112,226,0.12); transform: translateY(-1px);}
.case-card .tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #e7f0fc; color: #0b70e2; margin-right: 6px; letter-spacing: .3px;}
.case-card h4 { margin: 8px 0 6px 0; font-size: 16px; color: #111; line-height: 1.4;}
.case-card p { margin: 6px 0; color: #555; font-size: 13px; line-height: 1.75;}
.case-card .case-img { display: block; margin: 12px auto 6px auto; max-width: 420px; border-radius: 4px; overflow: hidden; border: 1px solid #eee; background: #fafbfc; cursor: zoom-in;}
.case-card .case-img img { display: block; width: 100%; max-height: 320px; height: auto; object-fit: contain;}
.case-card .case-img figcaption { font-size: 11px; color: #888; padding: 6px 10px; background: #fafbfc; text-align: center; line-height: 1.4;}
.case-card .case-img.tweet { max-width: 460px;}
.case-card .case-img.tweet img { max-height: 520px;}

.lightbox { display: none; position: fixed; z-index: 10000; inset: 0; background: rgba(0,0,0,0.88); align-items: center; justify-content: center; cursor: zoom-out; padding: 20px;}
.lightbox.show { display: flex;}
.lightbox img { max-width: 95vw; max-height: 92vh; box-shadow: 0 10px 40px rgba(0,0,0,0.6); border-radius: 4px;}
.case-card blockquote { margin: 10px 0 4px 0; padding: 8px 12px; border-left: 3px solid #0b70e2; background: #f6f8fa; color: #444; font-style: italic; font-size: 12.5px; line-height: 1.7;}
.case-card blockquote cite { display: block; font-style: normal; color: #888; font-size: 11px; margin-top: 4px;}

.partners-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px 0;}
.partners-grid .case-card { display: flex; flex-direction: column;}
.partners-grid .case-more { margin-top: auto;}

@media screen and (max-width: 750px) {
  .cases-block:before { left: 10px;}

  .stats { padding-left: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;}
  .stats li:last-child { grid-column: 1 / -1;}
  .stats li strong { font-size: 16px;}

  .cases-more { margin-left: 26px; padding: 14px 16px;}

  .timeline { padding-left: 26px;}
  .timeline > li:before { left: -21px; width: 12px; height: 12px; top: 16px;}
  .case-card { padding: 12px 14px;}
  .case-card h4 { font-size: 15px;}
  .case-card .case-img { max-width: 100%;}
  .case-card .case-img img { max-height: 260px;}
  .case-card .case-img.tweet img { max-height: 420px;}

  .partners-grid { grid-template-columns: 1fr; gap: 12px;}
}

.contact-box { margin: 0 16%; padding: 10px 0 20px 0;}
.contact-box dd { float: left; width: 33.33%; margin: 0; padding: 0;}
.contact-box dd a { display: block; text-align: center; margin: 10px; padding: 20px 0; border: 1px solid transparent;}
.contact-box dd a:hover { border: 1px solid #eee; border-radius: 6px; box-shadow: 0 0 8px rgba(150, 150, 150, 0.1);}
.contact-box dd a h4 { color: #000; margin: 0; font-size: 14px;}
.contact-box dd a p { margin: 0; line-height: 1.2;}
.contact-box dd a i { display: inline-block; width: 40px; height: 40px; background: url(../images/icon-pic.png) no-repeat 0 0; background-size: 100% auto;}
.contact-box dd a i.icon-twitter { background-position: 0 -40px;}
.contact-box dd a i.icon-telegram { background-position: 0 -80px;}

@media screen and (max-width: 880px) {
    .container { margin: 0 20px;}
}


@media screen and (max-width: 750px) {
    .header { padding-bottom: 12px;}
    .nav { display: none;}
    .nav { float: none; width: 100%; margin: 0; padding: 65px 0 0 0;}
    .nav li { width: 25%; margin: 0;}
    .banner { padding: 75px 10px 0 10px;}
    .container h1 { font-size: 24px;}
    body.en .container h1 { font-size: 20px;}
    body.en .language { top: 19px;}

    #Cases, #Process, #FAQ, #Advantages, #Assessment, #AntiScam, #Contact { padding-top: 10px;}
    .process { grid-template-columns: 1fr;}
    .form-grid { grid-template-columns: 1fr;}
    .banner-sub { font-size: 13px;}
    .btn { padding: 8px 20px; font-size: 13px;}

    .case-wrap .container { padding: 18px;}
    .case-wrap h1 { font-size: 19px;}
    .case-wrap .case-img, .case-wrap .case-img.tweet { max-width: 100%;}
    .case-wrap .case-img img { max-height: 480px;}
    .case-wrap .case-img:before { opacity: 1;}
    .case-wrap .case-cta + .breadcrumb { margin-top: 28px;}

    .form-actions .btn, .case-cta .btn { display: block; width: 100%; max-width: 320px; margin: 10px auto; box-sizing: border-box;}
    .banner-cta .btn { margin: 5px 6px;}
    .contact-box { margin: 0; padding: 5px 0;}
    .contact-box dd a { margin: 0;}
    .contact-box dd a h4 { font-size: 12px;}
    .contact-box dd a p { font-size: 11px;}
}