/* roulang page: index */
/* ========== 设计变量 ========== */
:root {
  --jy-primary: #FF7A00;
  --jy-primary-light: #FF8C32;
  --jy-primary-dark: #FF6A00;
  --jy-secondary: #0B1B3A;
  --jy-secondary-light: #142C5A;
  --jy-teal: #00C2A8;
  --jy-gold: #FFC53D;
  --jy-bg: #F7F5F2;
  --jy-white: #FFFFFF;
  --jy-text: #1A2333;
  --jy-text-secondary: #5A6B85;
  --jy-text-muted: #8A97AB;
  --jy-border: #E5E9F0;
  --jy-radius-lg: 20px;
  --jy-radius-md: 12px;
  --jy-radius-sm: 8px;
  --jy-shadow-sm: 0 2px 8px rgba(10,20,40,0.04);
  --jy-shadow-lg: 0 8px 24px rgba(10,20,40,0.08);
  --jy-shadow-primary: 0 4px 14px rgba(255,106,0,0.25);
  --jy-max-width: 1280px;
  --jy-gap-section: 96px;
  --jy-gap-section-mobile: 48px;
  --jy-transition: 0.25s ease;
}
/* ========== Reset / Base ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif; background: var(--jy-bg); color: var(--jy-text); line-height: 1.7; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5 { line-height: 1.3; font-weight: 700; }

/* ========== 容器 ========== */
.jy-container { max-width: var(--jy-max-width); margin: 0 auto; padding: 0 24px; }
/* ========== Header / 导航 ========== */
.jy-header { position: sticky; top: 0; z-index: 100; background: linear-gradient(135deg, #0B1B3A 0%, #142C5A 60%, #1B3A6F 100%); box-shadow: 0 4px 20px rgba(11,27,58,0.25); }
.jy-nav-panel { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; min-height: 68px; gap: 16px; }
.jy-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.jy-logo-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--jy-primary-light), var(--jy-primary-dark)); border-radius: 10px; color: #fff; font-size: 18px; box-shadow: 0 2px 8px rgba(255,106,0,0.3); }
.jy-logo-text { color: #fff; font-size: 1.35rem; font-weight: 400; letter-spacing: 0.5px; }
.jy-logo-text strong { font-weight: 800; }
.jy-logo-dot { display: inline-block; width: 8px; height: 8px; background: var(--jy-primary); border-radius: 50%; margin-left: 2px; }
.jy-nav-links { display: flex; gap: 8px; flex: 1; justify-content: center; }
.jy-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 18px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); font-size: 0.85rem; font-weight: 500; transition: all var(--jy-transition); }
.jy-nav-item i { font-size: 15px; }
.jy-nav-item:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }
.jy-nav-item.active { background: linear-gradient(135deg, var(--jy-primary-light), var(--jy-primary-dark)); border-color: transparent; color: #fff; box-shadow: 0 2px 10px rgba(255,106,0,0.3); }
.jy-nav-cta { flex-shrink: 0; }
.jy-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(90deg, var(--jy-primary-light), var(--jy-primary-dark)); color: #fff; font-weight: 600; border-radius: var(--jy-radius-md); padding: 12px 26px; font-size: 0.95rem; transition: all var(--jy-transition); box-shadow: var(--jy-shadow-primary); border: none; line-height: 1.2; }
.jy-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,106,0,0.35); filter: brightness(1.05); }
.jy-btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 8px rgba(255,106,0,0.2); }
.jy-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; color: var(--jy-text); font-weight: 600; border-radius: var(--jy-radius-md); padding: 11px 26px; font-size: 0.95rem; border: 1.5px solid #D0D9E8; transition: all var(--jy-transition); }
.jy-btn-secondary:hover { border-color: var(--jy-primary); color: var(--jy-primary); }
.jy-btn-secondary:active { transform: scale(0.98); }
.jy-mobile-toggle { display: none; background: linear-gradient(135deg, var(--jy-primary-light), var(--jy-primary-dark)); width: 40px; height: 40px; border-radius: 10px; color: #fff; font-size: 16px; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(255,106,0,0.3); }
.jy-mobile-menu { display: none; background: linear-gradient(135deg, #0B1B3A, #142C5A); border-radius: 16px 16px 0 0; padding: 20px 16px; position: fixed; top: 68px; left: 0; right: 0; z-index: 99; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.jy-mobile-menu.open { display: block; }
.jy-mobile-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,0.06); color: #fff; margin-bottom: 8px; font-weight: 500; }
.jy-mobile-menu a.active { background: linear-gradient(135deg, var(--jy-primary-light), var(--jy-primary-dark)); }
.jy-mobile-menu a i { width: 20px; text-align: center; }

/* ========== Hero ========== */
.jy-hero { background: linear-gradient(135deg, #0B1B3A 0%, #142C5A 70%, #1B3A6F 100%); position: relative; overflow: hidden; padding: 72px 0 120px; }
.jy-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/assets/images/backpic/back-1.webp'); background-size: cover; background-position: center; opacity: 0.15; }
.jy-hero::after { content: ''; position: absolute; bottom: -80px; right: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,122,0,0.2) 0%, transparent 70%); border-radius: 50%; }
.jy-hero-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 56px; }
.jy-hero-left { flex: 1.2; }
.jy-hero-right { flex: 0.9; }
.jy-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,194,168,0.15); border: 1px solid rgba(0,194,168,0.3); color: #7FF0DB; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 50px; margin-bottom: 20px; }
.jy-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.25; margin-bottom: 20px; }
.jy-hero h1 span { background: linear-gradient(90deg, #FF8C32, #FFC53D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.jy-hero-sub { color: rgba(255,255,255,0.78); font-size: 1.02rem; line-height: 1.8; max-width: 560px; margin-bottom: 26px; }
.jy-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.jy-hero-tag { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,0.85); font-size: 0.85rem; background: rgba(255,255,255,0.08); border-radius: 50px; padding: 5px 14px; }
.jy-hero-tag i { color: var(--jy-teal); font-size: 0.75rem; }
.jy-hero-buttons { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
/* 注册面板 */
.jy-register-card { background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); position: relative; border: 1px solid rgba(255,122,0,0.15); }
.jy-register-card::before { content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1.5px; background: linear-gradient(135deg, #FF8C32, #FFC53D, #FF6A00); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.jy-register-ribbon { position: absolute; top: -12px; left: 20px; background: linear-gradient(90deg, var(--jy-primary-light), var(--jy-primary-dark)); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 5px 16px; border-radius: 50px; box-shadow: 0 2px 8px rgba(255,106,0,0.3); }
.jy-register-title { font-size: 1.12rem; font-weight: 700; color: var(--jy-text); text-align: center; margin-bottom: 4px; }
.jy-register-sub { text-align: center; color: var(--jy-text-muted); font-size: 0.8rem; margin-bottom: 22px; }
.jy-form-group { margin-bottom: 14px; }
.jy-input-wrap { display: flex; align-items: center; border: 1.5px solid #E2E8F0; border-radius: 12px; overflow: hidden; transition: box-shadow var(--jy-transition); }
.jy-input-wrap:focus-within { border-color: var(--jy-primary); box-shadow: 0 0 0 3px rgba(255,106,0,0.15); }
.jy-input-prefix { padding: 0 10px 0 14px; color: var(--jy-text-secondary); font-size: 0.9rem; background: #F7F8FA; display: flex; align-items: center; border-right: 1px solid #EDF0F5; }
.jy-input-wrap input { flex: 1; border: none; outline: none; padding: 12px 14px; font-size: 0.9rem; background: transparent; color: var(--jy-text); }
.jy-input-wrap input::placeholder { color: #B4BFCE; }
.jy-code-row { display: flex; gap: 10px; }
.jy-code-row .jy-input-wrap { flex: 1; }
.jy-code-btn { background: linear-gradient(90deg, var(--jy-primary-light), var(--jy-primary-dark)); color: #fff; font-size: 0.82rem; font-weight: 600; border-radius: 12px; padding: 0 16px; white-space: nowrap; transition: all var(--jy-transition); }
.jy-code-btn:hover { filter: brightness(1.08); }
.jy-check-row { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; font-size: 0.8rem; color: var(--jy-text-secondary); }
.jy-check-row input { margin-top: 3px; accent-color: var(--jy-primary); }
.jy-check-row a { color: #2D6FF2; text-decoration: underline; }
.jy-register-btn { width: 100%; height: 50px; font-size: 1rem; }

/* ========== 指标看板 ========== */
.jy-metrics { margin-top: -50px; position: relative; z-index: 5; }
.jy-metrics-panel { background: linear-gradient(135deg, #0B1B3A, #142C5A); border-radius: 20px; padding: 36px 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; box-shadow: 0 8px 30px rgba(11,27,58,0.2); border: 1px solid rgba(255,255,255,0.08); }
.jy-metric-item { display: flex; align-items: center; gap: 16px; }
.jy-metric-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.jy-metric-icon.orange { background: linear-gradient(135deg, #FF8C32, #FF6A00); }
.jy-metric-icon.blue { background: linear-gradient(135deg, #3D6FB4, #2560A8); }
.jy-metric-icon.green { background: linear-gradient(135deg, #00C2A8, #00A88F); }
.jy-metric-icon.gold { background: linear-gradient(135deg, #FFC53D, #F0A500); }
.jy-metric-num { color: #fff; font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.2; }
.jy-metric-label { color: #B8C4DC; font-size: 0.82rem; }

/* ========== 板块通用 ========== */
.jy-section { padding: var(--jy-gap-section) 0; }
.jy-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; gap: 16px; flex-wrap: wrap; }
.jy-section-title { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 700; color: var(--jy-text); position: relative; padding-left: 18px; }
.jy-section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 24px; background: linear-gradient(180deg, var(--jy-primary-light), var(--jy-primary-dark)); border-radius: 4px; }
.jy-section-tag { display: inline-flex; align-items: center; gap: 6px; background: #FFF0E4; color: var(--jy-primary-dark); font-size: 0.8rem; font-weight: 600; padding: 6px 16px; border-radius: 50px; }
.jy-section-sub { color: var(--jy-text-muted); font-size: 0.95rem; margin-top: 6px; }

/* ========== 服务矩阵 ========== */
.jy-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jy-service-card { background: #fff; border-radius: 20px; padding: 32px 28px; box-shadow: var(--jy-shadow-sm); transition: all var(--jy-transition); border: 1px solid rgba(229,233,240,0.5); position: relative; overflow: hidden; }
.jy-service-card:hover { transform: translateY(-4px); box-shadow: var(--jy-shadow-lg); }
.jy-service-card.featured { background: linear-gradient(160deg, #FFF8F2, #FFFFFF); }
.jy-service-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #FFF0E4, #FFE0C2); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--jy-primary-dark); margin-bottom: 20px; transition: all var(--jy-transition); }
.jy-service-card:hover .jy-service-icon { transform: scale(1.08); }
.jy-service-title { font-size: 1.12rem; font-weight: 700; color: var(--jy-text); margin-bottom: 10px; }
.jy-service-desc { color: var(--jy-text-secondary); font-size: 0.9rem; line-height: 1.7; margin-bottom: 18px; }
.jy-service-link { display: inline-flex; align-items: center; gap: 6px; color: var(--jy-primary-dark); font-size: 0.85rem; font-weight: 600; transition: gap var(--jy-transition); }
.jy-service-link:hover { gap: 10px; }

/* ========== 特色功能（图文） ========== */
.jy-features { background: #fff; padding: var(--jy-gap-section) 0; }
.jy-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jy-feature-card { border-radius: 20px; overflow: hidden; background: var(--jy-bg); border: 1px solid rgba(229,233,240,0.6); transition: all var(--jy-transition); }
.jy-feature-card:hover { transform: translateY(-4px); box-shadow: var(--jy-shadow-lg); }
.jy-feature-img { height: 200px; overflow: hidden; background: #F0F2F5; }
.jy-feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.jy-feature-card:hover .jy-feature-img img { transform: scale(1.05); }
.jy-feature-body { padding: 24px; }
.jy-feature-tag { display: inline-block; background: #FFF0E4; color: var(--jy-primary-dark); font-size: 0.75rem; font-weight: 600; padding: 3px 12px; border-radius: 50px; margin-bottom: 10px; }
.jy-feature-title { font-size: 1.1rem; font-weight: 700; color: var(--jy-text); margin-bottom: 8px; }
.jy-feature-desc { color: var(--jy-text-secondary); font-size: 0.88rem; line-height: 1.7; }

/* ========== 结果对比 ========== */
.jy-compare-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.jy-compare-card { border-radius: 20px; padding: 32px; background: #F4F6F9; border: 1px solid rgba(229,233,240,0.8); }
.jy-compare-card.after { border-top: 4px solid var(--jy-primary); background: linear-gradient(160deg, #FFF9F4, #FFFFFF); }
.jy-compare-card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.jy-compare-card.before .jy-compare-card-title { color: var(--jy-text-muted); }
.jy-compare-card.after .jy-compare-card-title { color: var(--jy-primary-dark); }
.jy-compare-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; color: var(--jy-text-secondary); font-size: 0.92rem; }
.jy-compare-item i { margin-top: 4px; font-size: 0.9rem; }
.jy-compare-item.bad i { color: #C0C8D4; }
.jy-compare-item.good i { color: var(--jy-teal); }
.jy-compare-arrow { display: flex; align-items: center; justify-content: center; color: var(--jy-primary); font-size: 24px; }
.jy-compare-cta { text-align: center; margin-top: 40px; }

/* ========== 最新信息（CMS） ========== */
.jy-cms-panel { background: #fff; border-radius: 20px; padding: 32px; box-shadow: var(--jy-shadow-sm); }
.jy-cms-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.jy-cms-featured { display: flex; flex-direction: column; background: var(--jy-bg); border-radius: 16px; overflow: hidden; transition: all var(--jy-transition); cursor: pointer; }
.jy-cms-featured:hover { box-shadow: var(--jy-shadow-lg); transform: translateY(-3px); }
.jy-cms-featured-img { height: 200px; overflow: hidden; background: #F0F2F5; }
.jy-cms-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.jy-cms-featured-body { padding: 22px; }
.jy-cms-tag { display: inline-block; background: #FFF0E4; color: var(--jy-primary-dark); font-size: 0.72rem; font-weight: 600; padding: 3px 12px; border-radius: 50px; margin-bottom: 10px; }
.jy-cms-featured-title { font-size: 1.1rem; font-weight: 700; color: var(--jy-text); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jy-cms-featured-desc { color: var(--jy-text-secondary); font-size: 0.88rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.jy-cms-meta { display: flex; gap: 14px; color: var(--jy-text-muted); font-size: 0.8rem; }
.jy-cms-meta i { margin-right: 4px; }
.jy-cms-list { display: flex; flex-direction: column; }
.jy-cms-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid #F0F2F5; transition: background var(--jy-transition); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.jy-cms-list-item:last-child { border-bottom: none; }
.jy-cms-list-item:hover { background: #FafBFC; }
.jy-cms-list-item-title { font-size: 0.92rem; font-weight: 600; color: var(--jy-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.jy-cms-list-item-date { font-size: 0.78rem; color: var(--jy-text-muted); flex-shrink: 0; }
.jy-cms-empty { border: 1.5px dashed #C8CFDB; background: #FAFAFC; border-radius: 16px; padding: 60px 20px; text-align: center; }
.jy-cms-empty i { font-size: 48px; color: #C0C8D4; margin-bottom: 16px; display: block; }
.jy-cms-empty-title { font-size: 1rem; font-weight: 600; color: var(--jy-text-secondary); margin-bottom: 6px; }
.jy-cms-empty-desc { font-size: 0.85rem; color: var(--jy-text-muted); }

/* ========== FAQ ========== */
.jy-faq-wrap { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: start; }
.jy-faq-list { display: flex; flex-direction: column; gap: 14px; }
.jy-faq-item { background: #fff; border-radius: 16px; padding: 22px 24px; box-shadow: var(--jy-shadow-sm); border: 1px solid rgba(229,233,240,0.5); transition: all var(--jy-transition); }
.jy-faq-item:hover { box-shadow: var(--jy-shadow-lg); }
.jy-faq-q { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; color: var(--jy-text); cursor: pointer; }
.jy-faq-q-icon { width: 26px; height: 26px; border-radius: 50%; background: #FFF0E4; color: var(--jy-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; transition: all var(--jy-transition); }
.jy-faq-item.open .jy-faq-q-icon { transform: rotate(45deg); background: var(--jy-primary-dark); color: #fff; }
.jy-faq-a { display: none; margin-top: 14px; padding: 14px 16px; background: #F8F9FB; border-left: 3px solid var(--jy-teal); border-radius: 0 8px 8px 0; font-size: 0.9rem; color: var(--jy-text-secondary); line-height: 1.7; }
.jy-faq-item.open .jy-faq-a { display: block; }
.jy-faq-label-q { color: var(--jy-primary-dark); font-weight: 700; margin-right: 4px; }
.jy-faq-label-a { color: var(--jy-teal); font-weight: 700; margin-right: 4px; }
/* FAQ侧卡 */
.jy-faq-side { position: sticky; top: 100px; }
.jy-faq-side-card { background: linear-gradient(135deg, #0B1B3A, #142C5A); border-radius: 20px; padding: 32px 28px; color: #fff; text-align: center; }
.jy-faq-side-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 16px; border: 1px solid rgba(255,255,255,0.15); }
.jy-faq-side-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.jy-faq-side-desc { color: #B8C4DC; font-size: 0.88rem; margin-bottom: 22px; line-height: 1.6; }
.jy-btn-outline-white { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(255,255,255,0.6); color: #fff; font-weight: 600; padding: 10px 24px; border-radius: 50px; transition: all var(--jy-transition); font-size: 0.9rem; }
.jy-btn-outline-white:hover { background: var(--jy-primary); border-color: var(--jy-primary); }

/* ========== CTA 表单 ========== */
.jy-cta-section { background: linear-gradient(135deg, #FFF4E8, #FFE8D0); position: relative; overflow: hidden; }
.jy-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; padding: 0 20px; position: relative; z-index: 2; }
.jy-cta-title { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; color: var(--jy-text); margin-bottom: 14px; }
.jy-cta-sub { color: var(--jy-text-secondary); font-size: 0.95rem; margin-bottom: 32px; line-height: 1.7; }
.jy-cta-form { background: #fff; border-radius: 20px; padding: 32px; box-shadow: 0 8px 30px rgba(255,106,0,0.08); }
.jy-cta-form-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.jy-cta-form-row .jy-input-wrap { flex: 1; min-width: 180px; }
.jy-cta-form .jy-btn-primary { width: 100%; height: 52px; font-size: 1rem; }
.jy-cta-secure { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--jy-text-muted); font-size: 0.8rem; margin-top: 16px; }
.jy-cta-secure i { color: var(--jy-teal); }

/* ========== 页脚 ========== */
.jy-footer { background: linear-gradient(135deg, #0B1B3A, #142C5A); color: #B8C4DC; padding: 64px 0 0; }
.jy-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
.jy-footer-brand .jy-logo-text { font-size: 1.4rem; }
.jy-footer-brand-desc { font-size: 0.88rem; line-height: 1.7; margin-top: 16px; color: #8A9BB8; }
.jy-footer-title { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 16px; }
.jy-footer-links li { margin-bottom: 10px; }
.jy-footer-links a { font-size: 0.88rem; color: #8A9BB8; transition: color var(--jy-transition); }
.jy-footer-links a:hover { color: var(--jy-primary-light); }
.jy-footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; margin-bottom: 12px; color: #8A9BB8; }
.jy-footer-contact i { color: var(--jy-primary-light); margin-top: 4px; font-size: 0.85rem; width: 16px; text-align: center; }
.jy-footer-friend { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; font-size: 0.8rem; color: #6B7B96; }
.jy-footer-friend span { margin-right: 8px; }
.jy-footer-friend a { color: #6B7B96; margin-right: 12px; transition: color var(--jy-transition); }
.jy-footer-friend a:hover { color: #fff; }
.jy-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: #6B7B96; }
.jy-footer-bottom-links a { margin-left: 18px; color: #6B7B96; }
.jy-footer-bottom-links a:hover { color: #fff; }

/* ========== 响应式 ========== */
@media (max-width: 1024px) {
  .jy-hero-inner { flex-direction: column; gap: 40px; }
  .jy-metrics-panel { grid-template-columns: repeat(2, 1fr); }
  .jy-services-grid { grid-template-columns: repeat(2, 1fr); }
  .jy-features-grid { grid-template-columns: repeat(2, 1fr); }
  .jy-cms-layout { grid-template-columns: 1fr; }
  .jy-faq-wrap { grid-template-columns: 1fr; }
  .jy-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .jy-nav-item { padding: 8px 14px; font-size: 0.8rem; }
}
@media (max-width: 820px) {
  .jy-nav-links { display: none; }
  .jy-mobile-toggle { display: flex; }
  .jy-nav-cta { display: none; }
  .jy-compare-wrap { grid-template-columns: 1fr; }
  .jy-compare-arrow { transform: rotate(90deg); }
  .jy-services-grid { grid-template-columns: 1fr; }
  .jy-features-grid { grid-template-columns: 1fr; }
  .jy-section { padding: var(--jy-gap-section-mobile) 0; }
  .jy-metrics-panel { padding: 24px; }
  .jy-cta-form-row .jy-input-wrap { min-width: 100%; }
}
@media (max-width: 520px) {
  .jy-container { padding: 0 16px; }
  .jy-hero { padding: 48px 0 100px; }
  .jy-metrics-panel { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .jy-metric-item { flex-direction: column; text-align: center; gap: 8px; }
  .jy-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .jy-footer-bottom { flex-direction: column; text-align: center; }
  .jy-section-header { flex-direction: column; align-items: flex-start; }
  .jy-register-card { padding: 24px 20px; }
}

/* roulang page: category1 */
:root {
  --jy-primary: #FF7A00;
  --jy-primary-dark: #FF6A00;
  --jy-primary-light: #FF8C32;
  --jy-primary-grad: linear-gradient(90deg, #FF8C32, #FF6A00);
  --jy-secondary: #0B1B3A;
  --jy-secondary-2: #142C5A;
  --jy-secondary-grad: linear-gradient(135deg, #0B1B3A, #142C5A);
  --jy-teal: #00C2A8;
  --jy-gold: #FFC53D;
  --jy-bg: #F7F5F2;
  --jy-white: #FFFFFF;
  --jy-text: #1A2333;
  --jy-text-2: #5A6B85;
  --jy-text-3: #8A97AB;
  --jy-border: #E5E9F0;
  --jy-radius-lg: 20px;
  --jy-radius-md: 12px;
  --jy-radius-sm: 8px;
  --jy-shadow: 0 2px 8px rgba(10,20,40,0.04);
  --jy-shadow-hover: 0 8px 24px rgba(10,20,40,0.08);
  --jy-transition: all 0.3s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; background: var(--jy-bg); color: var(--jy-text); line-height: 1.7; font-size: 1rem; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; transition: var(--jy-transition); }
img { max-width: 100%; display: block; border-radius: 16px; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
.jy-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ===== Header / Nav ===== */
.jy-header { position: sticky; top: 0; z-index: 100; background: var(--jy-secondary-grad); box-shadow: 0 4px 20px rgba(11,27,58,0.25); }
.jy-nav-panel { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.jy-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.jy-logo-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--jy-primary-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; box-shadow: 0 4px 12px rgba(255,106,0,0.35); }
.jy-logo-text { font-size: 1.3rem; color: #fff; font-weight: 400; letter-spacing: 0.5px; display: flex; align-items: center; gap: 2px; }
.jy-logo-text strong { font-weight: 800; color: var(--jy-primary-light); }
.jy-logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jy-primary); display: inline-block; margin-left: 3px; box-shadow: 0 0 0 3px rgba(255,122,0,0.25); }
.jy-nav-links { display: flex; align-items: center; gap: 6px; }
.jy-nav-item { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 12px; color: #B8C4DC; font-size: 0.9rem; font-weight: 500; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.06); transition: var(--jy-transition); }
.jy-nav-item i { font-size: 0.85rem; }
.jy-nav-item:hover { background: rgba(255,255,255,0.16); color: #fff; transform: translateY(-1px); }
.jy-nav-item.active { background: var(--jy-primary-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(255,106,0,0.35); }
.jy-nav-item:active { transform: translateY(0) scale(0.97); }
.jy-nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 12px; background: var(--jy-primary-grad); color: #fff; font-weight: 600; font-size: 0.92rem; box-shadow: 0 4px 14px rgba(255,106,0,0.3); transition: var(--jy-transition); flex-shrink: 0; }
.jy-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,106,0,0.4); }
.jy-nav-cta:active { transform: translateY(0) scale(0.98); }
.jy-mobile-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.2rem; align-items: center; justify-content: center; }
.jy-mobile-toggle:hover { background: rgba(255,255,255,0.22); }
.jy-mobile-menu { display: none; padding: 16px; background: var(--jy-secondary-grad); border-radius: 16px; margin: 0 20px 16px; box-shadow: 0 8px 24px rgba(11,27,58,0.3); }
.jy-mobile-menu a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #B8C4DC; border-radius: 12px; font-weight: 500; }
.jy-mobile-menu a i { width: 20px; text-align: center; }
.jy-mobile-menu a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.jy-mobile-menu a.active { background: var(--jy-primary-grad); color: #fff; }
.jy-mobile-menu.show { display: block; }

/* ===== Page Hero ===== */
.jy-page-hero { position: relative; padding: 72px 0 96px; background: var(--jy-secondary-grad); background-image: linear-gradient(rgba(11,27,58,0.82), rgba(11,27,58,0.9)), url('/assets/images/backpic/back-2.webp'); background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.jy-page-hero::after { content: ''; position: absolute; bottom: -40px; left: 0; width: 100%; height: 80px; background: var(--jy-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.jy-breadcrumb { font-size: 0.85rem; color: #8A97AB; margin-bottom: 28px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jy-breadcrumb a { color: #B8C4DC; }
.jy-breadcrumb a:hover { color: var(--jy-primary-light); }
.jy-breadcrumb i { font-size: 0.75rem; opacity: 0.6; }
.jy-breadcrumb span { color: var(--jy-primary-light); }
.jy-page-hero-inner { position: relative; z-index: 2; max-width: 960px; }
.jy-cate-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); padding: 6px 16px; border-radius: 999px; font-size: 0.82rem; color: var(--jy-gold); font-weight: 600; margin-bottom: 20px; letter-spacing: 0.5px; }
.jy-cate-tag i { font-size: 0.75rem; }
.jy-page-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.35; margin-bottom: 18px; letter-spacing: 1px; }
.jy-page-hero h1 .jy-highlight { background: var(--jy-primary-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jy-page-hero p { font-size: clamp(0.95rem, 1.4vw, 1.1rem); color: #B8C4DC; max-width: 640px; margin-bottom: 32px; line-height: 1.8; }
.jy-hero-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.jy-hero-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,194,168,0.15); border: 1px solid rgba(0,194,168,0.3); color: var(--jy-teal); font-size: 0.82rem; padding: 5px 14px; border-radius: 999px; font-weight: 500; }
.jy-hero-tag i { font-size: 0.7rem; }

/* ===== Stats Bar ===== */
.jy-stats-bar { margin-top: -48px; position: relative; z-index: 10; }
.jy-stats-panel { background: var(--jy-secondary-grad); border-radius: var(--jy-radius-lg); box-shadow: 0 16px 40px rgba(11,27,58,0.25); padding: 36px 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border: 1px solid rgba(255,255,255,0.08); }
.jy-stat-item { display: flex; align-items: center; gap: 16px; }
.jy-stat-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--jy-primary-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 6px 16px rgba(255,106,0,0.3); }
.jy-stat-icon.teal { background: linear-gradient(135deg, #00C2A8, #00A28A); box-shadow: 0 6px 16px rgba(0,194,168,0.3); }
.jy-stat-icon.blue { background: linear-gradient(135deg, #4A7CF7, #2D6FF2); box-shadow: 0 6px 16px rgba(45,111,242,0.3); }
.jy-stat-icon.gold { background: linear-gradient(135deg, #FFC53D, #F5A623); box-shadow: 0 6px 16px rgba(255,197,61,0.3); }
.jy-stat-num { font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: 1px; }
.jy-stat-num small { font-size: 0.75rem; font-weight: 500; color: #8A97AB; margin-left: 2px; }
.jy-stat-label { font-size: 0.85rem; color: #B8C4DC; margin-top: 2px; }

/* ===== Section Common ===== */
.jy-section { padding: 80px 0; }
.jy-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.jy-section-head-left { display: flex; align-items: center; gap: 14px; }
.jy-section-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,122,0,0.1); display: flex; align-items: center; justify-content: center; color: var(--jy-primary); font-size: 1.2rem; flex-shrink: 0; }
.jy-section-title { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 700; color: var(--jy-text); letter-spacing: 0.5px; }
.jy-section-sub { color: var(--jy-text-2); font-size: 0.95rem; margin-top: 6px; }
.jy-section-link { display: inline-flex; align-items: center; gap: 6px; color: var(--jy-primary); font-size: 0.9rem; font-weight: 500; padding: 8px 18px; border: 1.5px solid rgba(255,122,0,0.3); border-radius: 999px; transition: var(--jy-transition); }
.jy-section-link:hover { background: var(--jy-primary-grad); color: #fff; border-color: transparent; }
.jy-section-link i { font-size: 0.8rem; }

/* ===== Process ===== */
.jy-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.jy-process-card { background: var(--jy-white); border-radius: var(--jy-radius-lg); padding: 32px 24px; box-shadow: var(--jy-shadow); border: 1px solid rgba(10,20,40,0.03); position: relative; transition: var(--jy-transition); }
.jy-process-card:hover { transform: translateY(-4px); box-shadow: var(--jy-shadow-hover); }
.jy-process-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 4px; border-radius: 0 0 4px 4px; background: var(--jy-primary-grad); opacity: 0.7; }
.jy-process-num { font-size: 2.4rem; font-weight: 800; color: rgba(255,122,0,0.15); line-height: 1; margin-bottom: 14px; letter-spacing: -1px; }
.jy-process-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,122,0,0.1); display: flex; align-items: center; justify-content: center; color: var(--jy-primary); font-size: 1.2rem; margin-bottom: 16px; }
.jy-process-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.jy-process-card p { font-size: 0.88rem; color: var(--jy-text-2); line-height: 1.65; }

/* ===== Guide Section ===== */
.jy-guide-section { padding-top: 20px; }
.jy-guide-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
.jy-guide-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-content: start; }
.jy-guide-card { background: var(--jy-white); border-radius: var(--jy-radius-lg); overflow: hidden; box-shadow: var(--jy-shadow); transition: var(--jy-transition); border: 1px solid rgba(10,20,40,0.03); }
.jy-guide-card:hover { transform: translateY(-4px); box-shadow: var(--jy-shadow-hover); }
.jy-guide-card-img { position: relative; height: 170px; overflow: hidden; border-radius: 0; }
.jy-guide-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.jy-guide-card:hover .jy-guide-card-img img { transform: scale(1.05); }
.jy-guide-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(11,27,58,0.5)); }
.jy-guide-card-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--jy-primary-grad); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; box-shadow: 0 4px 10px rgba(255,106,0,0.3); }
.jy-guide-card-body { padding: 22px 24px 26px; }
.jy-guide-card-body h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.jy-guide-card-body h3 i { color: var(--jy-primary); font-size: 0.9rem; }
.jy-guide-card-body p { font-size: 0.88rem; color: var(--jy-text-2); line-height: 1.7; margin-bottom: 14px; }
.jy-guide-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #F0F2F5; font-size: 0.82rem; color: var(--jy-text-3); }

/* Sidebar */
.jy-sidebar { display: flex; flex-direction: column; gap: 24px; }
.jy-side-card { background: var(--jy-white); border-radius: var(--jy-radius-lg); padding: 26px; box-shadow: var(--jy-shadow); border: 1px solid rgba(10,20,40,0.03); }
.jy-side-card-title { font-size: 1rem; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.jy-side-card-title i { color: var(--jy-primary); }
.jy-side-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jy-side-quick-item { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #F9FAFB; border-radius: 14px; padding: 16px 10px; border: 1px solid #EDF0F5; transition: var(--jy-transition); text-align: center; }
.jy-side-quick-item:hover { background: rgba(255,122,0,0.06); border-color: rgba(255,122,0,0.3); transform: translateY(-2px); }
.jy-side-quick-item i { color: var(--jy-primary); font-size: 1.1rem; }
.jy-side-quick-item span { font-size: 0.78rem; color: var(--jy-text); font-weight: 500; }
.jy-side-faq-item { border-bottom: 1px solid #F0F2F5; padding: 12px 0; }
.jy-side-faq-item:last-child { border-bottom: none; }
.jy-side-faq-item summary { font-size: 0.85rem; font-weight: 500; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--jy-text); }
.jy-side-faq-item summary::-webkit-details-marker { display: none; }
.jy-side-faq-item summary i { color: var(--jy-primary); font-size: 0.75rem; flex-shrink: 0; }
.jy-side-faq-item p { font-size: 0.82rem; color: var(--jy-text-2); padding-left: 22px; margin-top: 8px; line-height: 1.6; }
.jy-side-contact { background: var(--jy-secondary-grad); border-radius: var(--jy-radius-lg); padding: 28px; color: #fff; position: relative; overflow: hidden; }
.jy-side-contact::before { content: ''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,122,0,0.2); }
.jy-side-contact h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.jy-side-contact h3 i { color: var(--jy-primary-light); }
.jy-side-contact p { color: #B8C4DC; font-size: 0.88rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.jy-side-contact p i { color: var(--jy-teal); width: 16px; text-align: center; }
.jy-btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; padding: 12px 20px; border-radius: var(--jy-radius-md); background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.4); color: #fff; font-weight: 600; font-size: 0.9rem; transition: var(--jy-transition); }
.jy-btn-white:hover { background: var(--jy-primary-grad); border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,106,0,0.3); }
.jy-btn-white:active { transform: translateY(0) scale(0.98); }

/* ===== Scenes & Social ===== */
.jy-scenes-wrap { background: var(--jy-white); border-radius: var(--jy-radius-lg); padding: 56px; box-shadow: var(--jy-shadow); }
.jy-scenes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.jy-scene-card { border-radius: var(--jy-radius-md); padding: 28px 24px; background: #F9FAFB; border: 1px solid #EDF0F5; transition: var(--jy-transition); position: relative; }
.jy-scene-card:hover { transform: translateY(-3px); box-shadow: var(--jy-shadow-hover); background: #fff; }
.jy-scene-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 18px; }
.jy-scene-icon.orange { background: rgba(255,122,0,0.1); color: var(--jy-primary); }
.jy-scene-icon.blue { background: rgba(45,111,242,0.1); color: #2D6FF2; }
.jy-scene-icon.teal { background: rgba(0,194,168,0.1); color: var(--jy-teal); }
.jy-scene-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.jy-scene-card p { font-size: 0.88rem; color: var(--jy-text-2); line-height: 1.7; }
.jy-scene-tag { display: inline-block; margin-top: 14px; font-size: 0.78rem; color: var(--jy-text-3); background: #EDF0F5; padding: 4px 10px; border-radius: 999px; }

/* Social proof */
.jy-social-proof { display: flex; align-items: center; gap: 32px; margin-top: 48px; padding-top: 40px; border-top: 1px solid #EDF0F5; flex-wrap: wrap; }
.jy-social-avatars { display: flex; align-items: center; }
.jy-social-avatar { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--jy-white); margin-left: -10px; background: var(--jy-primary-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; font-weight: 700; box-shadow: var(--jy-shadow); }
.jy-social-avatar:first-child { margin-left: 0; }
.jy-social-avatar:nth-child(2) { background: linear-gradient(135deg, #4A7CF7, #2D6FF2); }
.jy-social-avatar:nth-child(3) { background: linear-gradient(135deg, #00C2A8, #00A28A); }
.jy-social-avatar:nth-child(4) { background: linear-gradient(135deg, #FFC53D, #F5A623); }
.jy-social-avatar.more { background: var(--jy-secondary-grad); font-size: 0.75rem; }
.jy-social-stats h4 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.jy-social-stats p { font-size: 0.85rem; color: var(--jy-text-3); display: flex; align-items: center; gap: 6px; }
.jy-social-stars { color: var(--jy-gold); font-size: 0.9rem; }

/* ===== FAQ ===== */
.jy-faq-section { background: var(--jy-white); }
.jy-faq-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.jy-faq-list { display: flex; flex-direction: column; gap: 14px; }
.jy-faq-item { background: var(--jy-bg); border-radius: var(--jy-radius-md); padding: 0; border: 1px solid transparent; transition: var(--jy-transition); overflow: hidden; }
.jy-faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.98rem; font-weight: 600; color: var(--jy-text); }
.jy-faq-item summary::-webkit-details-marker { display: none; }
.jy-faq-item summary .jy-faq-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,122,0,0.12); color: var(--jy-primary); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; transition: transform 0.3s ease; }
.jy-faq-item[open] summary .jy-faq-icon { transform: rotate(45deg); background: var(--jy-primary-grad); color: #fff; }
.jy-faq-body { padding: 0 24px 20px; }
.jy-faq-body p { font-size: 0.9rem; color: var(--jy-text-2); line-height: 1.8; padding-left: 14px; border-left: 3px solid rgba(0,194,168,0.5); }
.jy-faq-item[open] { background: #fff; box-shadow: var(--jy-shadow); border-color: rgba(255,122,0,0.15); }
.jy-faq-side-card { background: var(--jy-secondary-grad); border-radius: var(--jy-radius-lg); padding: 32px 28px; color: #fff; text-align: center; position: relative; overflow: hidden; }
.jy-faq-side-card::before { content: ''; position: absolute; bottom: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,122,0,0.15); }
.jy-faq-side-card::after { content: ''; position: absolute; top: -20px; left: -20px; width: 60px; height: 60px; border-radius: 50%; background: rgba(0,194,168,0.12); }
.jy-faq-side-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; background: var(--jy-primary-grad); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 8px 24px rgba(255,106,0,0.35); position: relative; z-index: 1; }
.jy-faq-side-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; position: relative; z-index: 1; }
.jy-faq-side-card p { font-size: 0.88rem; color: #B8C4DC; margin-bottom: 20px; position: relative; z-index: 1; }
.jy-btn-outline-white { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.5); color: #fff; font-size: 0.88rem; font-weight: 600; transition: var(--jy-transition); position: relative; z-index: 1; }
.jy-btn-outline-white:hover { background: var(--jy-primary-grad); border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,106,0,0.3); }
.jy-btn-outline-white:active { transform: translateY(0) scale(0.98); }

/* ===== CTA ===== */
.jy-cta-section { padding: 80px 0; background: linear-gradient(180deg, #FFF4E8, #FFE8D0); position: relative; overflow: hidden; }
.jy-cta-section::before { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,122,0,0.1); }
.jy-cta-section::after { content: ''; position: absolute; bottom: -30px; left: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(0,194,168,0.1); }
.jy-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.jy-cta-inner h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; color: var(--jy-text); margin-bottom: 14px; }
.jy-cta-inner > p { font-size: 0.95rem; color: var(--jy-text-2); margin-bottom: 36px; line-height: 1.7; }
.jy-cta-form { background: var(--jy-white); border-radius: var(--jy-radius-lg); padding: 36px 32px; box-shadow: 0 16px 40px rgba(255,106,0,0.12); border: 1px solid rgba(255,122,0,0.1); }
.jy-form-row { display: flex; gap: 14px; margin-bottom: 16px; }
.jy-form-input { flex: 1; height: 50px; border: 1.5px solid #E5E9F0; border-radius: var(--jy-radius-md); padding: 0 16px; font-size: 0.92rem; background: #FAFAFC; outline: none; transition: var(--jy-transition); }
.jy-form-input:focus { border-color: var(--jy-primary); box-shadow: 0 0 0 3px rgba(255,106,0,0.15); background: #fff; }
.jy-form-input::placeholder { color: #B0B9C8; }
.jy-form-btn { width: 100%; height: 52px; border-radius: var(--jy-radius-md); background: var(--jy-primary-grad); color: #fff; font-size: 1rem; font-weight: 600; box-shadow: 0 6px 18px rgba(255,106,0,0.3); transition: var(--jy-transition); }
.jy-form-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,106,0,0.4); }
.jy-form-btn:active { transform: translateY(0) scale(0.98); }
.jy-cta-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 0.82rem; color: var(--jy-text-2); }
.jy-cta-secure i { color: var(--jy-teal); }

/* ===== Footer ===== */
.jy-footer { background: var(--jy-secondary-grad); color: #B8C4DC; padding: 64px 0 24px; }
.jy-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.jy-footer-brand-desc { font-size: 0.88rem; line-height: 1.8; margin-top: 16px; color: #8A97AB; max-width: 320px; }
.jy-footer-title { font-size: 1rem; color: #fff; font-weight: 600; margin-bottom: 18px; }
.jy-footer-links { list-style: none; }
.jy-footer-links li { margin-bottom: 10px; }
.jy-footer-links a { font-size: 0.88rem; color: #8A97AB; transition: var(--jy-transition); display: inline-flex; align-items: center; gap: 6px; }
.jy-footer-links a:hover { color: var(--jy-primary-light); padding-left: 4px; }
.jy-footer-links i { font-size: 0.7rem; color: var(--jy-primary); }
.jy-footer-contact { list-style: none; }
.jy-footer-contact li { font-size: 0.88rem; color: #8A97AB; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.jy-footer-contact i { width: 18px; text-align: center; color: var(--jy-teal); }
.jy-footer-friend { padding: 20px 0; font-size: 0.82rem; color: #6B7B96; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.jy-footer-friend a { color: #8A97AB; transition: var(--jy-transition); }
.jy-footer-friend a:hover { color: var(--jy-primary-light); }
.jy-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 0.82rem; color: #6B7B96; }
.jy-footer-bottom-links { display: flex; gap: 20px; }
.jy-footer-bottom-links a { color: #8A97AB; }
.jy-footer-bottom-links a:hover { color: var(--jy-primary-light); }

/* ===== Buttons Common ===== */
.jy-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 28px; border-radius: var(--jy-radius-md); background: var(--jy-primary-grad); color: #fff; font-weight: 600; font-size: 0.92rem; box-shadow: 0 4px 14px rgba(255,106,0,0.25); transition: var(--jy-transition); }
.jy-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,106,0,0.35); }
.jy-btn-primary:active { transform: translateY(0) scale(0.98); }
.jy-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 28px; border-radius: var(--jy-radius-md); background: transparent; border: 1.5px solid #D0D9E8; color: var(--jy-text); font-weight: 500; font-size: 0.9rem; transition: var(--jy-transition); }
.jy-btn-secondary:hover { border-color: var(--jy-primary); color: var(--jy-primary); }
.jy-btn-secondary:active { transform: scale(0.98); }

/* ===== Mobile Menu & Responsive ===== */
@media (max-width: 991px) {
  .jy-nav-links { display: none; }
  .jy-nav-cta { display: none; }
  .jy-mobile-toggle { display: flex; }
  .jy-process-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .jy-stats-panel { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 28px 24px; }
  .jy-guide-layout { grid-template-columns: 1fr; }
  .jy-guide-main { grid-template-columns: repeat(2, 1fr); }
  .jy-faq-layout { grid-template-columns: 1fr; }
  .jy-scenes-grid { grid-template-columns: repeat(2, 1fr); }
  .jy-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .jy-page-hero { padding: 56px 0 80px; }
}
@media (max-width: 767px) {
  .jy-section { padding: 48px 0; }
  .jy-process-grid { grid-template-columns: 1fr; }
  .jy-guide-main { grid-template-columns: 1fr; }
  .jy-scenes-wrap { padding: 32px 20px; }
  .jy-scenes-grid { grid-template-columns: 1fr; }
  .jy-stats-panel { grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 20px; }
  .jy-stat-item { flex-direction: column; text-align: center; gap: 8px; }
  .jy-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .jy-footer-bottom { justify-content: center; gap: 8px; }
  .jy-social-proof { flex-direction: column; align-items: flex-start; gap: 16px; }
  .jy-cta-form { padding: 24px 20px; }
  .jy-form-row { flex-direction: column; gap: 12px; }
  .jy-page-hero-inner { text-align: center; }
  .jy-page-hero p { margin-left: auto; margin-right: auto; }
  .jy-hero-tags { justify-content: center; }
  .jy-breadcrumb { justify-content: center; }
  .jy-section-head { flex-direction: column; align-items: flex-start; }
}

/* ===== Keyframe ===== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.jy-page-hero-inner, .jy-stats-panel { animation: fadeInUp 0.8s ease both; }

/* roulang page: article */
:root{
    --jy-primary:#FF7A00;
    --jy-primary-light:#FF8C32;
    --jy-primary-dark:#FF6A00;
    --jy-secondary:#0B1B3A;
    --jy-secondary-2:#142C5A;
    --jy-accent:#00C2A8;
    --jy-warning:#FFC53D;
    --jy-bg:#F7F5F2;
    --jy-card:#FFFFFF;
    --jy-text:#1A2333;
    --jy-text-2:#5A6B85;
    --jy-text-3:#8A97AB;
    --jy-border:#E3E8F0;
    --jy-radius-lg:20px;
    --jy-radius-md:12px;
    --jy-radius-sm:8px;
    --jy-shadow-sm:0 2px 8px rgba(10,20,40,0.04);
    --jy-shadow-lg:0 8px 24px rgba(10,20,40,0.08);
    --jy-primary-shadow:0 4px 14px rgba(255,106,0,0.25);
    --jy-font:'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,sans-serif;
    --jy-header-h:68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:var(--jy-font);
    background:var(--jy-bg);
    color:var(--jy-text);
    line-height:1.7;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.jy-container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
}
/* ========== Header / Nav ========== */
.jy-header{
    position:sticky;
    top:0;
    z-index:100;
    background:linear-gradient(135deg,#0B1B3A 0%,#142C5A 100%);
    box-shadow:0 4px 24px rgba(11,27,58,0.35);
}
.jy-nav-panel{
    display:flex;
    align-items:center;
    gap:16px;
    height:var(--jy-header-h);
    position:relative;
}
.jy-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}
.jy-logo-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--jy-primary-light),var(--jy-primary-dark));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:#fff;
    box-shadow:0 4px 12px rgba(255,106,0,0.35);
}
.jy-logo-text{
    font-size:1.25rem;
    color:#fff;
    letter-spacing:0.5px;
    font-weight:400;
}
.jy-logo-text strong{
    font-weight:800;
    color:var(--jy-primary-light);
}
.jy-logo-dot{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--jy-warning);
    margin-left:3px;
    vertical-align:middle;
    box-shadow:0 0 8px rgba(255,197,61,0.7);
}
.jy-nav-links{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:8px;
    flex:1;
    flex-wrap:nowrap;
}
.jy-nav-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    border-radius:var(--jy-radius-md);
    color:rgba(255,255,255,0.85);
    font-size:0.9rem;
    font-weight:500;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    transition:all 0.25s ease;
    white-space:nowrap;
}
.jy-nav-item:hover{
    background:rgba(255,255,255,0.13);
    color:#fff;
    transform:translateY(-1px);
}
.jy-nav-item.active{
    background:linear-gradient(135deg,var(--jy-primary-light),var(--jy-primary-dark));
    color:#fff;
    border-color:transparent;
    box-shadow:0 4px 14px rgba(255,106,0,0.35);
}
.jy-nav-item i{font-size:0.85rem}
.jy-nav-cta{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(90deg,var(--jy-primary-light),var(--jy-primary-dark));
    color:#fff;
    padding:11px 24px;
    border-radius:var(--jy-radius-md);
    font-weight:600;
    font-size:0.92rem;
    box-shadow:var(--jy-primary-shadow);
    transition:all 0.25s ease;
    cursor:pointer;
    border:none;
    white-space:nowrap;
}
.jy-nav-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(255,106,0,0.4);
    color:#fff;
}
.jy-nav-cta:active{
    transform:translateY(0);
    box-shadow:0 2px 8px rgba(255,106,0,0.25);
}
.jy-mobile-toggle{
    display:none;
    width:40px;
    height:40px;
    border-radius:10px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;
    font-size:1rem;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    transition:all 0.25s;
}
.jy-mobile-toggle:hover{background:rgba(255,255,255,0.2)}
/* ========== Buttons ========== */
.jy-btn-primary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(90deg,var(--jy-primary-light),var(--jy-primary-dark));
    color:#fff;
    padding:13px 30px;
    border-radius:var(--jy-radius-md);
    font-weight:600;
    font-size:0.95rem;
    box-shadow:var(--jy-primary-shadow);
    transition:all 0.25s ease;
    cursor:pointer;
    border:none;
    text-decoration:none;
}
.jy-btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(255,106,0,0.4);
    color:#fff;
}
.jy-btn-primary:active{
    transform:translateY(0);
    box-shadow:0 2px 8px rgba(255,106,0,0.25);
}
.jy-btn-outline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff;
    color:var(--jy-text);
    padding:12px 28px;
    border-radius:var(--jy-radius-md);
    font-weight:500;
    font-size:0.95rem;
    border:1.5px solid #D0D9E8;
    transition:all 0.25s ease;
    cursor:pointer;
    text-decoration:none;
}
.jy-btn-outline:hover{
    border-color:var(--jy-primary);
    color:var(--jy-primary);
    background:#FFF8F3;
}
.jy-btn-outline:active{
    transform:scale(0.98);
}
/* ========== Breadcrumb ========== */
.jy-breadcrumb{
    background:#fff;
    border-bottom:1px solid #EDF0F5;
    padding:14px 0;
    font-size:0.85rem;
    color:var(--jy-text-3);
}
.jy-breadcrumb .jy-container{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.jy-breadcrumb a{
    color:var(--jy-text-2);
    transition:color 0.2s;
}
.jy-breadcrumb a:hover{color:var(--jy-primary)}
.jy-breadcrumb-sep{color:#C0C8D4}
.jy-breadcrumb .current{color:var(--jy-text-3);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ========== Article Header ========== */
.jy-article-header{
    background:#fff;
    padding:52px 0 36px;
    border-bottom:1px solid #EDF0F5;
    position:relative;
    overflow:hidden;
}
.jy-article-header::before{
    content:"";
    position:absolute;
    top:-60px;
    right:-60px;
    width:200px;
    height:200px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,122,0,0.08),transparent 70%);
    pointer-events:none;
}
.jy-article-header-inner{
    max-width:820px;
    margin:0 auto;
    position:relative;
}
.jy-article-cat{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,122,0,0.1);
    color:var(--jy-primary);
    font-size:0.78rem;
    font-weight:600;
    padding:5px 14px;
    border-radius:999px;
    margin-bottom:18px;
    border:1px solid rgba(255,122,0,0.15);
}
.jy-article-title{
    font-size:clamp(1.5rem,3vw,2.2rem);
    font-weight:700;
    line-height:1.4;
    color:var(--jy-text);
    margin-bottom:18px;
    letter-spacing:0.2px;
}
.jy-article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    color:var(--jy-text-3);
    font-size:0.85rem;
    align-items:center;
}
.jy-article-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.jy-article-meta i{font-size:0.8rem}
.jy-article-meta strong{color:var(--jy-text-2);font-weight:600}
/* ========== Article Main ========== */
.jy-article-main{
    background:var(--jy-bg);
    padding:48px 0 64px;
}
.jy-article-body{
    background:#fff;
    max-width:820px;
    margin:0 auto;
    padding:48px 56px;
    border-radius:var(--jy-radius-lg);
    box-shadow:var(--jy-shadow-sm);
    border:1px solid #F0F2F5;
}
.jy-article-content{
    font-size:1.05rem;
    line-height:1.8;
    color:var(--jy-text);
}
.jy-article-content p{margin:0 0 1.5em}
.jy-article-content h2{
    font-size:1.35rem;
    font-weight:700;
    color:var(--jy-text);
    margin:1.8em 0 0.8em;
    padding-left:14px;
    border-left:3px solid var(--jy-primary);
    border-radius:2px;
    line-height:1.4;
}
.jy-article-content h3{
    font-size:1.12rem;
    font-weight:600;
    color:var(--jy-text);
    margin:1.5em 0 0.6em;
    line-height:1.5;
}
.jy-article-content h4{
    font-size:1rem;
    font-weight:600;
    color:var(--jy-text);
    margin:1.2em 0 0.5em;
}
.jy-article-content ul{
    margin:1em 0 1.5em;
    padding-left:1.4em;
}
.jy-article-content ul li{
    position:relative;
    margin:0.5em 0;
    padding-left:6px;
}
.jy-article-content ul li::before{
    content:"";
    position:absolute;
    left:-1.2em;
    top:0.7em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--jy-primary);
}
.jy-article-content ol{
    margin:1em 0 1.5em;
    padding-left:1.4em;
    counter-reset:item;
}
.jy-article-content ol li{
    position:relative;
    margin:0.5em 0;
    padding-left:8px;
    counter-increment:item;
}
.jy-article-content ol li::before{
    content:counter(item) ".";
    position:absolute;
    left:-1.4em;
    font-weight:700;
    color:var(--jy-primary);
}
.jy-article-content a{
    color:#2D6FF2;
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color 0.2s;
}
.jy-article-content a:hover{color:var(--jy-primary)}
.jy-article-content blockquote{
    border-left:4px solid var(--jy-primary);
    background:#FFF8F2;
    padding:18px 22px;
    margin:1.5em 0;
    border-radius:0 12px 12px 0;
    color:var(--jy-text-2);
    font-size:0.98rem;
}
.jy-article-content blockquote p:last-child{margin-bottom:0}
.jy-article-content img{
    width:100%;
    border-radius:16px;
    margin:1.8em 0;
    box-shadow:var(--jy-shadow-sm);
}
.jy-article-content table{
    width:100%;
    border-collapse:collapse;
    margin:1.8em 0;
    border-radius:12px;
    overflow:hidden;
    font-size:0.95rem;
}
.jy-article-content th,
.jy-article-content td{
    padding:13px 16px;
    border:1px solid var(--jy-border);
    text-align:left;
}
.jy-article-content th{
    background:#F8FAFD;
    font-weight:600;
    color:var(--jy-text);
}
.jy-article-content strong{color:var(--jy-text);font-weight:700}
.jy-article-content em{font-style:italic}
/* 分隔装饰线 */
.jy-divider-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:36px 0 28px;
}
.jy-divider-line::before,
.jy-divider-line::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,#EDF0F5 50%,transparent);
}
.jy-divider-line span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--jy-primary-light),var(--jy-primary-dark));
    box-shadow:0 0 10px rgba(255,122,0,0.3);
}
/* ========== Article Tags ========== */
.jy-article-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}
.jy-tag{
    display:inline-block;
    padding:6px 16px;
    border-radius:999px;
    background:#F8FAFD;
    border:1px solid var(--jy-border);
    color:var(--jy-text-2);
    font-size:0.8rem;
    transition:all 0.2s;
}
.jy-tag:hover{
    border-color:var(--jy-primary);
    color:var(--jy-primary);
    background:#FFF8F3;
}
/* ========== Article Empty ========== */
.jy-article-empty{
    max-width:820px;
    margin:0 auto;
    background:#fff;
    border-radius:var(--jy-radius-lg);
    box-shadow:var(--jy-shadow-sm);
    padding:80px 40px;
    text-align:center;
    border:1.5px dashed #C8CFDB;
    background:#FAFAFC;
}
.jy-article-empty i{
    font-size:56px;
    color:#C8CFDB;
    margin-bottom:20px;
}
.jy-article-empty h2{
    font-size:1.6rem;
    color:var(--jy-text);
    margin-bottom:12px;
    font-weight:700;
}
.jy-article-empty p{
    color:var(--jy-text-3);
    margin-bottom:28px;
}
/* ========== Related ========== */
.jy-related{
    background:var(--jy-bg);
    padding:70px 0;
    position:relative;
    overflow:hidden;
}
.jy-related::before{
    content:"";
    position:absolute;
    inset:0;
    background:url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
    opacity:0.03;
    pointer-events:none;
}
.jy-related .jy-container{position:relative}
.jy-related-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:36px;
    flex-wrap:wrap;
    gap:12px;
}
.jy-related-header h2{
    font-size:clamp(1.3rem,2.2vw,1.8rem);
    font-weight:700;
    color:var(--jy-text);
    position:relative;
    padding-left:14px;
}
.jy-related-header h2::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:22px;
    border-radius:4px;
    background:linear-gradient(180deg,var(--jy-primary-light),var(--jy-primary-dark));
}
.jy-related-more{
    color:var(--jy-text-2);
    font-size:0.9rem;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:all 0.25s;
}
.jy-related-more:hover{
    color:var(--jy-primary);
    gap:10px;
}
.jy-related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.jy-related-card{
    background:#fff;
    border-radius:var(--jy-radius-lg);
    overflow:hidden;
    box-shadow:var(--jy-shadow-sm);
    border:1px solid #F0F2F5;
    transition:all 0.3s ease;
    display:block;
    color:inherit;
}
.jy-related-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--jy-shadow-lg);
    border-color:rgba(255,122,0,0.15);
}
.jy-related-card-img{
    width:100%;
    height:190px;
    object-fit:cover;
    display:block;
    background:#F0F2F5;
}
.jy-related-card-body{
    padding:20px 22px 22px;
}
.jy-related-cat{
    display:inline-block;
    background:rgba(255,122,0,0.1);
    color:var(--jy-primary);
    padding:3px 12px;
    border-radius:999px;
    font-size:0.72rem;
    font-weight:600;
    margin-bottom:10px;
}
.jy-related-title{
    font-size:1rem;
    font-weight:600;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 14px;
    color:var(--jy-text);
    min-height:49px;
    transition:color 0.2s;
}
.jy-related-card:hover .jy-related-title{color:var(--jy-primary)}
.jy-related-date{
    font-size:0.8rem;
    color:var(--jy-text-3);
    display:flex;
    align-items:center;
    gap:6px;
}
.jy-related-empty{
    background:#FAFAFC;
    border:1.5px dashed #C8CFDB;
    border-radius:var(--jy-radius-lg);
    padding:60px 20px;
    text-align:center;
    color:var(--jy-text-3);
}
.jy-related-empty i{
    font-size:48px;
    color:#C8CFDB;
    margin-bottom:16px;
    display:block;
}
/* ========== Return CTA ========== */
.jy-article-return{
    background:
        linear-gradient(135deg,rgba(255,244,232,0.94),rgba(255,232,208,0.92)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
    padding:72px 0 80px;
    text-align:center;
    border-top:1px solid #F5E6D8;
}
.jy-return-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}
.jy-return-icon{
    font-size:36px;
    color:var(--jy-primary);
    margin-bottom:16px;
    display:block;
}
.jy-return-title{
    font-size:clamp(1.3rem,2.4vw,1.8rem);
    font-weight:700;
    color:var(--jy-text);
    margin-bottom:10px;
}
.jy-return-sub{
    color:var(--jy-text-2);
    margin-bottom:28px;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
    font-size:0.95rem;
}
/* ========== Footer ========== */
.jy-footer{
    background:linear-gradient(135deg,#0B1B3A 0%,#142C5A 100%);
    color:rgba(255,255,255,0.75);
    padding:64px 0 0;
    position:relative;
}
.jy-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg,var(--jy-primary-light),var(--jy-warning),var(--jy-accent));
}
.jy-footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:40px;
}
.jy-footer .jy-logo{margin-bottom:16px}
.jy-footer-brand-desc{
    font-size:0.88rem;
    line-height:1.8;
    color:rgba(255,255,255,0.6);
    margin-bottom:8px;
}
.jy-footer-title{
    font-size:1rem;
    color:#fff;
    font-weight:600;
    margin-bottom:18px;
    position:relative;
    padding-bottom:10px;
}
.jy-footer-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:32px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,var(--jy-primary-light),var(--jy-primary-dark));
}
.jy-footer-links li{
    margin-bottom:10px;
}
.jy-footer-links a{
    color:rgba(255,255,255,0.6);
    font-size:0.88rem;
    transition:all 0.2s;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.jy-footer-links a:hover{
    color:var(--jy-primary-light);
    padding-left:4px;
}
.jy-footer-contact li{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    font-size:0.88rem;
    color:rgba(255,255,255,0.6);
}
.jy-footer-contact i{
    width:16px;
    color:var(--jy-primary-light);
}
.jy-footer-friend{
    border-top:1px solid rgba(255,255,255,0.1);
    padding:22px 0;
    font-size:0.82rem;
    color:rgba(255,255,255,0.4);
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
}
.jy-footer-friend a{
    color:rgba(255,255,255,0.5);
    transition:color 0.2s;
}
.jy-footer-friend a:hover{color:var(--jy-primary-light)}
.jy-footer-bottom{
    border-top:1px solid rgba(255,255,255,0.1);
    padding:20px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    font-size:0.82rem;
    color:rgba(255,255,255,0.45);
}
.jy-footer-bottom-links{
    display:flex;
    gap:20px;
}
.jy-footer-bottom-links a{
    color:rgba(255,255,255,0.5);
    transition:color 0.2s;
}
.jy-footer-bottom-links a:hover{
    color:var(--jy-primary-light);
}
/* ========== Responsive ========== */
@media (max-width:1100px){
    .jy-nav-item{
        padding:10px 14px;
        font-size:0.85rem;
    }
    .jy-nav-item i{display:none}
}
@media (max-width:900px){
    .jy-nav-links{
        display:none;
        position:absolute;
        top:calc(var(--jy-header-h) + 10px);
        left:0;
        right:0;
        background:linear-gradient(135deg,#0B1B3A,#142C5A);
        border-radius:16px;
        padding:16px;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        box-shadow:0 16px 40px rgba(0,0,0,0.35);
        z-index:99;
        margin-left:0;
    }
    .jy-nav-links.open{
        display:flex;
        animation:jyFadeIn 0.25s ease;
    }
    @keyframes jyFadeIn{
        from{opacity:0;transform:translateY(-8px)}
        to{opacity:1;transform:translateY(0)}
    }
    .jy-nav-links .jy-nav-item,
    .jy-nav-links .jy-nav-item.active{
        justify-content:center;
        padding:13px 20px;
        font-size:0.95rem;
    }
    .jy-nav-links .jy-nav-item i{
        display:inline-flex;
    }
    .jy-mobile-toggle{
        display:inline-flex;
    }
    .jy-nav-cta{
        width:42px;
        height:42px;
        padding:0;
        border-radius:50%;
        font-size:0;
        justify-content:center;
        gap:0;
    }
    .jy-nav-cta i{
        font-size:1rem;
        margin:0;
    }
    .jy-article-body{
        padding:36px 30px;
    }
    .jy-related-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .jy-footer-grid{
        grid-template-columns:1fr 1fr;
        gap:28px;
    }
}
@media (max-width:768px){
    .jy-article-header{
        padding:40px 0 28px;
    }
    .jy-article-body{
        padding:28px 20px;
        border-radius:16px;
    }
    .jy-article-content{
        font-size:1rem;
    }
    .jy-article-meta{
        gap:12px;
        font-size:0.8rem;
    }
    .jy-related-grid{
        grid-template-columns:1fr;
    }
    .jy-related-card-img{
        height:200px;
    }
    .jy-return-inner{
        flex-direction:column;
    }
    .jy-return-inner .jy-btn-primary,
    .jy-return-inner .jy-btn-outline{
        width:100%;
        justify-content:center;
    }
}
@media (max-width:520px){
    .jy-nav-panel{
        gap:10px;
    }
    .jy-logo-text{
        font-size:1.05rem;
    }
    .jy-logo-icon{
        width:34px;
        height:34px;
    }
    .jy-nav-item i{
        display:inline-flex;
        font-size:0.9rem;
    }
    .jy-article-title{
        font-size:1.35rem;
    }
    .jy-article-main{
        padding:32px 0 48px;
    }
    .jy-article-body{
        padding:24px 16px;
        border-radius:14px;
    }
    .jy-article-content{
        font-size:0.98rem;
        line-height:1.75;
    }
    .jy-related{
        padding:50px 0;
    }
    .jy-related-header{
        flex-direction:column;
        align-items:flex-start;
    }
    .jy-footer-grid{
        grid-template-columns:1fr;
    }
    .jy-footer-bottom{
        flex-direction:column;
        text-align:center;
    }
    .jy-footer-bottom-links{
        justify-content:center;
    }
    .jy-breadcrumb .current{
        max-width:160px;
    }
}