/* ============================================================
   OKX (欧易) 主题覆盖样式
   深色主题：纯黑背景 + 青绿色强调色 #00D7C2
   在所有模板样式之后加载，通过高优先级选择器覆盖
   ============================================================ */

:root {
  --okx-primary: #00D7C2;
  --okx-primary-hover: #00E6CF;
  --okx-primary-dark: #00B8A6;
  --okx-bg: #000000;
  --okx-bg-soft: #0B0E11;
  --okx-bg-card: #121212;
  --okx-bg-card-2: #16181D;
  --okx-bg-elevated: #1B1F27;
  --okx-border: rgba(255, 255, 255, 0.08);
  --okx-border-hover: rgba(255, 255, 255, 0.18);
  --okx-text: #FFFFFF;
  --okx-text-2: rgba(255, 255, 255, 0.65);
  --okx-text-3: rgba(255, 255, 255, 0.42);
  --okx-up: #00D7C2;
  --okx-down: #FF5C5C;
  --okx-radius: 10px;
}

/* ---------- 全局 ---------- */
html,
body {
  background-color: var(--okx-bg);
}
body {
  color: var(--okx-text);
  font-family: "Outfit", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.sec-title_heading,
.sec-title_title {
  color: var(--okx-text);
}
p, span, li, label, strong, b, dd, dt, address {
  color: var(--okx-text-2);
}
a {
  color: var(--okx-primary);
}
a:hover {
  color: var(--okx-primary-hover);
}
::selection {
  background: rgba(0, 215, 194, 0.35);
  color: #fff;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--okx-bg-soft); }
::-webkit-scrollbar-thumb { background: #2A2F3A; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #39404D; }

/* 所有区块统一深色底（仅覆盖颜色，不破坏背景图） */
body .main-header,
body .cta-three,
body .about-two,
body .clients-two,
body .services-five,
body .skill-one,
body .price-one,
body .marketing-three,
body .gallery-three,
body .team-two,
body .marketing-four,
body .testimonial-three,
body .news-three,
body .feature-two,
body .marketing-two,
body .process-one,
body .counter-three,
body .feature-one,
body .team-one,
body .agency-one,
body .app-one,
body .testimonial-two,
body .news-one,
body .about-one,
body .services-one,
body .services-two,
body .services-three,
body .price-one,
body .price-two,
body .gallery-one,
body .testimonial-one,
body .contact-one,
body .faq-one,
body .blog-one,
body .shop-one,
body .cart-one,
body .checkout-one,
body .register-one,
body .coming-soon,
body .error-page,
body .sidebar-page-container,
body .team-details,
body .project-details,
body .service-details,
body .blog-details,
body .shop-details,
body .privacy-one,
body .terms-one {
  background-color: var(--okx-bg);
  color: var(--okx-text);
}

/* 带背景图的区块加深色压暗 */
body .page-title,
body .skill-one_bg,
body .main-footer_bg,
body .counter-three_gallery-column .image img {
  background-blend-mode: multiply;
}
body .page-title,
body .skill-one_bg,
body .main-footer_bg {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

/* 装饰性水印文字压暗 */
body .animation_mode h1,
body .marketing-two h1,
body .marketing-three h1,
body .marketing-four h1 {
  color: rgba(255, 255, 255, 0.05);
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.06);
}

/* ---------- Preloader ---------- */
body .preloader {
  background-color: var(--okx-bg);
}
body .preloader .outer-circle,
body .preloader .inner-circle {
  border-color: rgba(0, 215, 194, 0.2);
  border-top-color: var(--okx-primary);
}
body .preloader .dot {
  background-color: var(--okx-primary);
}

/* 自定义光标 */
body .cursor,
body .cursor-follower {
  border-color: rgba(0, 215, 194, 0.6);
}

/* ---------- Header ---------- */
body .main-header .header-lower {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--okx-border);
}
body .sticky-header {
  background-color: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid var(--okx-border);
}
body .main-header .logo img {
  filter: none;
}
body .main-menu .navigation > li > a {
  color: var(--okx-text);
  transition: color 0.25s ease;
}
body .main-menu .navigation > li > a:hover,
body .main-menu .navigation > li.current > a,
body .main-menu .navigation > li:hover > a {
  color: var(--okx-primary);
}
body .main-menu .navigation > li > ul,
body .main-menu .navigation > li > .mega-menu {
  background-color: var(--okx-bg-card-2);
  border: 1px solid var(--okx-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
body .main-menu .navigation > li > ul > li > a {
  color: var(--okx-text-2);
  border-bottom: 1px solid var(--okx-border);
}
body .main-menu .navigation > li > ul > li > a:hover {
  color: var(--okx-primary);
  background-color: rgba(0, 215, 194, 0.06);
}
body .main-menu .navigation > li > .mega-menu h6 {
  color: var(--okx-text);
}
body .main-menu .navigation > li > .mega-menu ul li a {
  color: var(--okx-text-2);
}
body .main-menu .navigation > li > .mega-menu ul li a:hover {
  color: var(--okx-primary);
}
body .header-phone_box,
body .header-phone_box-inner {
  color: var(--okx-text);
}
body .header-phone_box strong {
  color: var(--okx-text);
}
body .header-phone_box a {
  color: var(--okx-primary);
}
body .mobile-nav-toggler .icon {
  color: var(--okx-text);
}
body .navbar-toggler .icon-bar {
  background-color: var(--okx-text);
}

/* 登录/注册链接 */
.okx-login-link {
  display: inline-block;
  margin-right: 18px;
  color: var(--okx-text);
  font-weight: 600;
  transition: color 0.25s ease;
}
.okx-login-link:hover {
  color: var(--okx-primary);
}
.outer-box .okx-register-btn {
  padding: 10px 26px;
}

/* 移动端菜单 */
body .mobile-menu .menu-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}
body .mobile-menu .menu-box {
  background-color: var(--okx-bg-soft);
}
body .mobile-menu .close-btn .icon {
  color: var(--okx-text);
}
body .mobile-menu .menu-outer li a,
body .mobile-menu .nav-logo a {
  color: var(--okx-text);
}
body .mobile-menu .menu-outer li.dropdown .dropdown-btn {
  border-color: var(--okx-border);
  color: var(--okx-text-2);
}
body .mobile-menu .menu-outer li ul li a {
  color: var(--okx-text-2);
}
body .mobile-menu .social-box a {
  color: var(--okx-text-2);
}

/* 侧边栏 */
body .about-sidebar .gradient-layer {
  background: linear-gradient(180deg, rgba(0,0,0,0.96), rgba(11,14,17,0.98));
}
body .about-sidebar .sidebar-inner {
  background-color: var(--okx-bg-soft);
}
body .about-sidebar h3 {
  color: var(--okx-text);
}
body .about-sidebar h3 span {
  color: var(--okx-primary);
}

/* ---------- 按钮 ---------- */
body .theme-btn {
  border-radius: 6px;
  overflow: hidden;
}
body .theme-btn .btn-wrap .text-one,
body .theme-btn .btn-wrap .text-two {
  color: #000;
}
body .theme-btn.btn-style-one {
  background-color: var(--okx-primary);
  border: 1px solid var(--okx-primary);
}
body .theme-btn.btn-style-one:hover {
  background-color: var(--okx-primary-hover);
  border-color: var(--okx-primary-hover);
}
body .theme-btn.btn-style-two {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
body .theme-btn.btn-style-two .btn-wrap .text-one,
body .theme-btn.btn-style-two .btn-wrap .text-two {
  color: var(--okx-text);
}
body .theme-btn.btn-style-two:hover {
  border-color: var(--okx-primary);
}
body .theme-btn.btn-style-three {
     background-color: #ffc107;
    border: 1px solid #ffc107;
}
body .theme-btn.btn-style-three:hover {
  background-color: var(--okx-primary);
}
body .theme-btn.arrow {
  background-color: rgba(0, 215, 194, 0.12);
  color: var(--okx-primary);
}
body .theme-btn.arrow:before {
  background-color: var(--okx-primary);
}
body .theme-btn.arrow:hover {
  color: #000;
}

/* ---------- 标题组件 ---------- */
body .sec-title_title {
  color: var(--okx-primary);
}
body .sec-title_heading {
  color: var(--okx-text);
}
body .sec-title_text {
  color: var(--okx-text-2);
}
body .sec-title.light .sec-title_title,
body .sec-title.light .sec-title_heading {
  color: var(--okx-text);
}
body .sec-title.light .sec-title_text {
  color: var(--okx-text-2);
}

/* ---------- Page Title ---------- */
body .page-title {
  padding: 140px 0 120px;
}
body .page-title h2 {
  color: var(--okx-text);
}
body .page-title .bread-crumb li,
body .page-title .bread-crumb li a {
  color: var(--okx-text-2);
}
body .page-title .bread-crumb li a:hover {
  color: var(--okx-primary);
}

/* ---------- 卡片类组件 ---------- */
body .service-block_five,
body .service-block_five-inner,
body .about-block_one-inner,
body .process-block_one-inner,
body .agency-block_one-inner,
body .price-block_one-inner,
body .feature-block_two-inner,
body .app-block_one-inner,
body .team-block_one-content,
body .testimonial-block_two-inner,
body .news-block_one-inner,
body .default-skill-item {
  background-color: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-radius: var(--okx-radius);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
body .service-block_five:hover .service-block_five-inner,
body .price-block_one-inner:hover,
body .feature-block_two-inner:hover,
body .app-block_one-inner:hover {
  border-color: rgba(0, 215, 194, 0.4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
body .service-block_five-heading,
body .service-block_five-heading a {
  color: var(--okx-text);
}
body .service-block_five-heading span {
  color: var(--okx-text-2);
}
body .service-block_five-icon {
  color: var(--okx-primary);
  background-color: rgba(0, 215, 194, 0.1);
  border-radius: 10px;
}
body .service-block_five-hover {
  opacity: 0.35;
  mix-blend-mode: luminosity;
}
body .about-block_one-icon,
body .feature-block_two-title,
body .app-block_one-icon {
  color: var(--okx-primary);
}
body .process-block_one-number {
  color: rgba(0, 215, 194, 0.25);
}
body .process-block_one-title {
  color: var(--okx-text);
}
body .agency-block_one-number {
  color: var(--okx-primary);
}
body .agency-block_one-inner strong {
  color: var(--okx-text);
}
body .feature-block_two-heading {
  color: var(--okx-text);
}
body .price-block_one-title {
  background-color: var(--okx-bg-elevated);
  color: var(--okx-text);
}
body .price-block_one-price {
  color: var(--okx-text);
}
body .price-block_one-price sub {
  color: var(--okx-text-3);
}
body .price-block_one-list li {
  color: var(--okx-text-2);
  border-bottom: 1px solid var(--okx-border);
}
body .price-block_one-list li i {
  color: var(--okx-primary);
}
body .app-block_one-title {
  color: var(--okx-text);
}
body .team-block_one-title a,
body .team-block_one-designation {
  color: var(--okx-text);
}
body .team-block_one-designation {
  color: var(--okx-text-2);
}
body .team-block_one-email {
  color: var(--okx-primary);
}
body .team-block_one-socials a {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--okx-text-2);
}
body .team-block_one-socials a:hover {
  background-color: var(--okx-primary);
  color: #000;
}
body .testimonial-block_two-text {
  color: var(--okx-text-2);
}
body .testimonial-block_two-content:after {
  color: rgba(0, 215, 194, 0.15);
}
body .testimonial-block_two .info {
  color: var(--okx-text);
}
body .rating .fa-star {
  color: #F5A623;
}
body .news-block_one-content {
  background-color: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-top: none;
  border-radius: 0 0 var(--okx-radius) var(--okx-radius);
}
body .news-block_one-title a {
  color: var(--okx-text);
}
body .news-block_one-title a:hover {
  color: var(--okx-primary);
}
body .news-block_one-meta li,
body .news-block_one-meta li a {
  color: var(--okx-text-3);
}
body .news-block_one-category {
  background-color: rgba(0, 215, 194, 0.12);
  color: var(--okx-primary);
}
body .default-skill-title {
  color: var(--okx-text);
}
body .default-skill-bar {
  background-color: rgba(255, 255, 255, 0.08);
}
body .default-bar {
  background-color: var(--okx-primary);
}
body .default-count-box {
  color: var(--okx-primary);
}
body .odometer,
body .counter-block_three-count,
body .counter-block_three-count .odometer {
  color: var(--okx-text);
}
body .counter-block_three-text {
  color: var(--okx-text-2);
}
body .client-image {
  border-color: var(--okx-border);
  background-color: var(--okx-bg-soft);
}
body .clients-two .client-image img {
  filter: grayscale(1) brightness(1.6);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
body .clients-two .client-image img:hover {
  opacity: 0.9;
}

/* ---------- 表单 / 表格 ---------- */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="tel"],
body input[type="number"],
body input[type="date"],
body textarea,
body select,
body .form-group input,
body .form-group textarea {
  background-color: var(--okx-bg-card-2);
  border: 1px solid var(--okx-border);
  color: var(--okx-text);
  border-radius: 6px;
}
body input::placeholder,
body textarea::placeholder {
  color: var(--okx-text-3);
}
body input:focus,
body textarea:focus,
body select:focus {
  border-color: var(--okx-primary);
  outline: none;
}
body table {
  color: var(--okx-text);
}
body table th,
body table td {
  color: var(--okx-text-2);
  border-color: var(--okx-border);
}
body table th {
  color: var(--okx-text);
  background-color: var(--okx-bg-elevated);
}

/* ---------- Footer ---------- */
body footer.main-footer,
body footer.footer-style_two {
  background-color: var(--okx-bg-soft);
  border-top: 1px solid var(--okx-border);
}
body .main-footer .inner-container,
body .footer-style_two .widgets-section {
  background-color: transparent;
}
body .footer-title,
body footer h2,
body footer h3,
body footer h4 {
  color: var(--okx-text);
}
body .footer-text,
body .location-address {
  color: var(--okx-text-2);
}
body .footer-list li a {
  color: var(--okx-text-2);
}
body .footer-list li a:hover {
  color: var(--okx-primary);
}
body .newsletter-box input {
  background-color: var(--okx-bg-card-2);
  border: 1px solid var(--okx-border);
  color: var(--okx-text);
}
body .newsletter-box .theme-btn {
  background-color: var(--okx-primary);
  color: #000;
}
body .footer-social_box a {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--okx-text-2);
}
body .footer-social_box a:hover {
  background-color: var(--okx-primary);
  color: #000;
}
body .main-footer_copyright,
body .footer-bottom,
body .main-footer_copyright a {
  color: var(--okx-text-3);
}
body .main-footer_copyright a:hover {
  color: var(--okx-primary);
}

/* 隐藏演示用配色切换器 */
body .color-palate {
  display: none;
}

/* 返回顶部 */
body .progress-wrap {
  background-color: rgba(0, 215, 194, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 215, 194, 0.35);
}
body .progress-wrap svg path {
  stroke: var(--okx-primary);
}

/* ============================================================
   首页 OKX 自定义区块
   ============================================================ */

/* Hero */
.okx-hero {
  position: relative;
  padding: 150px 0 110px;
  overflow: hidden;
  background-color: #000;
}
.okx-hero_bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}
.okx-hero_bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.85) 100%);
}
.okx-hero .auto-container {
  position: relative;
  z-index: 2;
}
.okx-hero_badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid rgba(0, 215, 194, 0.4);
  background: rgba(0, 215, 194, 0.08);
  color: var(--okx-primary);
  border-radius: 999px;
  font-size: 14px;
  margin-bottom: 26px;
}
.okx-hero_heading {
  font-size: 56px;
  line-height: 1.18;
  font-weight: 700;
  color: #fff;
  margin-bottom: 22px;
}
.okx-hero_heading span {
  color: var(--okx-primary);
}
.okx-hero_text {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--okx-text-2);
  margin-bottom: 34px;
}
.okx-hero_btns {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}
.okx-hero_btns .theme-btn {
  min-width: 160px;
}
.okx-hero_stats {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.okx-hero_stat strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}
.okx-hero_stat span {
  font-size: 14px;
  color: var(--okx-text-3);
}

/* Hero 行情卡片 */
.okx-hero_card {
  background: rgba(18, 18, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--okx-border);
  border-radius: 14px;
  padding: 8px 22px 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.okx-hero_card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--okx-border);
}
.okx-hero_card-head h4 {
  margin: 0;
  font-size: 17px;
  color: #fff;
}
.okx-hero_card-head a {
  font-size: 13px;
  color: var(--okx-text-3);
}
.okx-hero_card-head a:hover {
  color: var(--okx-primary);
}
.okx-coin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.okx-coin-row:last-child {
  border-bottom: none;
}
.okx-coin-row .coin-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.okx-coin-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #000;
}
.okx-coin-row .coin-name {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.okx-coin-row .coin-pair {
  display: block;
  font-size: 12px;
  color: var(--okx-text-3);
  font-weight: 400;
}
.okx-coin-row .coin-price {
  text-align: right;
}
.okx-coin-row .coin-price strong {
  display: block;
  color: #fff;
  font-size: 15px;
}
.okx-up {
  color: var(--okx-up);
}
.okx-down {
  color: var(--okx-down);
}

/* 滚动行情条 */
.okx-ticker {
  background: var(--okx-bg-soft);
  border-top: 1px solid var(--okx-border);
  border-bottom: 1px solid var(--okx-border);
  overflow: hidden;
  padding: 14px 0;
}
.okx-ticker_track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: okx-marquee 32s linear infinite;
}
.okx-ticker:hover .okx-ticker_track {
  animation-play-state: paused;
}
.okx-ticker_item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  font-size: 14px;
}
.okx-ticker_item b {
  color: #fff;
  font-weight: 600;
}
.okx-ticker_item .price {
  color: var(--okx-text-2);
}
@keyframes okx-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 区块通用 */
.okx-section {
  padding: 100px 0;
  background-color: #000;
  position: relative;
}
.okx-section.soft {
  background-color: var(--okx-bg-soft);
}
.okx-sec-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.okx-sec-head .tag {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--okx-primary);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.okx-sec-head h2 {
  font-size: 38px;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 16px;
}
.okx-sec-head p {
  color: var(--okx-text-2);
  font-size: 16px;
  line-height: 1.9;
}

/* 产品卡片 */
.okx-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.okx-product-card {
  background: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-radius: 12px;
  padding: 34px 30px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.okx-product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 215, 194, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
}
.okx-product-card .icon {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: rgba(0, 215, 194, 0.1);
  color: var(--okx-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;
}
.okx-product-card h4 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 12px;
}
.okx-product-card p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--okx-text-2);
  margin-bottom: 18px;
}
.okx-product-card .more {
  font-size: 14px;
  color: var(--okx-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 行情表格 */
.okx-market-tabs {
  display: inline-flex;
  background: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 30px;
}
.okx-market-tabs li {
  list-style: none;
  padding: 9px 26px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--okx-text-2);
  cursor: pointer;
  transition: all 0.25s ease;
}
.okx-market-tabs li.active,
.okx-market-tabs li:hover {
  background: var(--okx-primary);
  color: #000;
  font-weight: 600;
}
.okx-market-panel {
  display: none;
}
.okx-market-panel.active {
  display: block;
}
.okx-market-table {
  width: 100%;
  background: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.okx-market-table th {
  text-align: left;
  font-size: 13px;
  color: var(--okx-text-3);
  font-weight: 500;
  padding: 16px 24px;
  background: var(--okx-bg-card-2);
  border-bottom: 1px solid var(--okx-border);
}
.okx-market-table td {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 15px;
  color: #fff;
}
.okx-market-table tr:last-child td {
  border-bottom: none;
}
.okx-market-table tr {
  transition: background 0.2s ease;
}
.okx-market-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.okx-market-table .coin-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.okx-market-table .coin-cell .pair small {
  color: var(--okx-text-3);
  margin-left: 6px;
}
.okx-market-table .trade-btn {
  padding: 7px 22px;
  border-radius: 6px;
  background: rgba(0, 215, 194, 0.12);
  color: var(--okx-primary);
  font-size: 13px;
  border: 1px solid rgba(0, 215, 194, 0.35);
  transition: all 0.25s ease;
}
.okx-market-table .trade-btn:hover {
  background: var(--okx-primary);
  color: #000;
}

/* 安全保障 */
.okx-security-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.okx-security-card {
  background: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-radius: 12px;
  padding: 34px 26px;
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.okx-security-card:hover {
  border-color: rgba(0, 215, 194, 0.45);
  transform: translateY(-6px);
}
.okx-security-card .icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(0, 215, 194, 0.1);
  color: var(--okx-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.okx-security-card h4 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
}
.okx-security-card p {
  font-size: 13px;
  color: var(--okx-text-2);
  line-height: 1.8;
  margin: 0;
}

/* 数据统计 */
.okx-stats {
  background: linear-gradient(180deg, var(--okx-bg-soft), #000);
  border-top: 1px solid var(--okx-border);
  border-bottom: 1px solid var(--okx-border);
}
.okx-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.okx-stat-item {
  text-align: center;
  padding: 30px 12px;
  background: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-radius: 12px;
}
.okx-stat-item .num {
  font-size: 44px;
  font-weight: 700;
  color: var(--okx-primary);
  line-height: 1.1;
}
.okx-stat-item .num sup {
  font-size: 22px;
}
.okx-stat-item p {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--okx-text-2);
}

/* App 下载 */
.okx-app-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.okx-app-img {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--okx-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.okx-app-img img {
  width: 100%;
  display: block;
}
.okx-app-list {
  margin: 26px 0 34px;
}
.okx-app-list li {
  list-style: none;
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--okx-text-2);
  font-size: 15px;
}
.okx-app-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 215, 194, 0.12);
  border: 1px solid rgba(0, 215, 194, 0.5);
}
.okx-app-list li:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--okx-primary);
  border-bottom: 2px solid var(--okx-primary);
  transform: rotate(-45deg);
}
.okx-qr-box {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  background: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-radius: 12px;
  padding: 16px 22px;
}
.okx-qr-box img {
  width: 92px;
  height: 92px;
  border-radius: 8px;
}
.okx-qr-box .txt strong {
  display: block;
  color: #fff;
  font-size: 16px;
  margin-bottom: 4px;
}
.okx-qr-box .txt span {
  font-size: 13px;
  color: var(--okx-text-3);
}

/* 资讯 */
.okx-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.okx-news-card {
  background: var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.okx-news-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 215, 194, 0.45);
}
.okx-news-card .thumb {
  display: block;
  overflow: hidden;
}
.okx-news-card .thumb img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}
.okx-news-card:hover .thumb img {
  transform: scale(1.06);
}
.okx-news-card .body {
  padding: 24px;
}
.okx-news-card .meta {
  font-size: 13px;
  color: var(--okx-text-3);
  margin-bottom: 10px;
}
.okx-news-card h4 {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.okx-news-card h4 a {
  color: #fff;
}
.okx-news-card h4 a:hover {
  color: var(--okx-primary);
}
.okx-news-card p {
  font-size: 14px;
  color: var(--okx-text-2);
  line-height: 1.8;
  margin: 0;
}

/* CTA */
.okx-cta-box {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  padding: 70px 60px;
  background: radial-gradient(1200px 400px at 20% 0%, rgba(0, 215, 194, 0.18), transparent 60%), var(--okx-bg-card);
  border: 1px solid var(--okx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.okx-cta-box h2 {
  font-size: 34px;
  color: #fff;
  margin-bottom: 10px;
}
.okx-cta-box p {
  color: var(--okx-text-2);
  margin: 0;
}

/* 响应式 */
@media (max-width: 1199px) {
  .okx-security-grid { grid-template-columns: repeat(2, 1fr); }
  .okx-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .okx-hero { padding: 120px 0 80px; }
  .okx-hero_heading { font-size: 42px; }
  .okx-hero_card { margin-top: 40px; }
  .okx-product-grid { grid-template-columns: repeat(2, 1fr); }
  .okx-news-grid { grid-template-columns: repeat(2, 1fr); }
  .okx-app-wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  .okx-section { padding: 70px 0; }
  .okx-hero_heading { font-size: 32px; }
  .okx-hero_stats { gap: 24px; }
  .okx-product-grid,
  .okx-news-grid,
  .okx-security-grid,
  .okx-stats-grid { grid-template-columns: 1fr; }
  .okx-sec-head h2 { font-size: 28px; }
  .okx-cta-box { padding: 44px 28px; }
  .okx-cta-box h2 { font-size: 26px; }
  .okx-market-table th:nth-child(4),
  .okx-market-table td:nth-child(4) { display: none; }
}