/* roulang page: index */
:root {
  --brand-500:#3B7DD8; --brand-600:#2E68B0; --brand-700:#24548F;
  --brand-100:#DCE9F7; --brand-50:#EFF5FC;
  --accent-500:#B08968; --accent-600:#947457; --accent-100:#F2EAE2;
  --bg-body:#F8FAFC; --bg-card:#FFFFFF; --bg-blue:#EEF4FB; --bg-gray:#F1F5F9;
  --ink-title:#13202E; --ink-body:#30455B; --ink-muted:#667C8F;
  --border-card:#EAF0F6; --border-btn:#E2E8F0;
  --success:#2E8B72; --warning:#C77A3D;
  --radius-card:12px; --radius-btn:8px;
  --shadow-card:0 1px 3px rgba(16,42,67,.06);
  --shadow-hover:0 12px 28px rgba(16,42,67,.1);
  --shadow-dock:0 8px 24px rgba(16,42,67,.12);
}
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg-body);
  color:var(--ink-body);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
}
a{ color:var(--brand-600); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--brand-700); }
img{ display:block; max-width:100%; height:auto; }
|focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(59,125,216,.25); border-radius:4px; }
.container-site{ max-width:1152px; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:768px){ .container-site{ padding-inline:2rem; } }
.section{ padding-top:80px; padding-bottom:80px; }
@media (max-width:768px){ .section{ padding-top:56px; padding-bottom:56px; } }
.section-label{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--brand-50); color:var(--brand-600);
  border:1px solid var(--brand-100);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:.3rem .9rem; border-radius:999px;
}
.section-title{ font-size:28px; line-height:1.3; font-weight:700; color:var(--ink-title); margin-top:1rem; }
.section-desc{ font-size:15px; line-height:1.75; color:var(--ink-muted); max-width:560px; margin-top:.75rem; }
@media (min-width:768px){ .section-title{ font-size:32px; } }
@media (max-width:768px){ .section-title{ font-size:22px; } }

.dock-nav{
  position:fixed; top:1rem; left:50%; transform:translateX(-50%);
  z-index:50; width:calc(100% - 2rem); max-width:720px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:16px; box-shadow:var(--shadow-dock);
  padding:.625rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
}
.dock-logo{ font-size:15px; font-weight:700; color:var(--ink-title); display:flex; align-items:center; gap:.5rem; letter-spacing:.01em; }
.dock-logo-icon{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dock-links{ display:flex; align-items:center; gap:1.4rem; }
.dock-link{ font-size:14px; font-weight:500; color:var(--ink-body); }
.dock-link:hover{ color:var(--brand-600); }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:var(--radius-btn); padding:.7rem 1.35rem;
  font-size:14px; font-weight:600; color:#fff;
  background:var(--brand-500); border:1px solid transparent;
  transition:all .2s ease; cursor:pointer; line-height:1.4;
}
.btn-primary:hover{ background:var(--brand-600); transform:translateY(-1px); box-shadow:0 6px 16px rgba(59,125,216,.3); color:#fff; }
.btn-primary:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(59,125,216,.25); }
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:var(--radius-btn); padding:.7rem 1.35rem;
  font-size:14px; font-weight:600; color:var(--ink-title);
  background:#fff; border:1px solid var(--border-btn);
  transition:all .2s ease; cursor:pointer; line-height:1.4;
}
.btn-secondary:hover{ border-color:var(--brand-500); color:var(--brand-600); box-shadow:0 4px 12px rgba(16,42,67,.06); }

.hamburger-btn{ display:none; background:none; border:none; cursor:pointer; padding:.35rem .25rem; color:var(--ink-title); }
.mobile-menu{
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border-radius:16px; box-shadow:var(--shadow-dock);
  padding:1rem; flex-direction:column; gap:.25rem;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:.7rem .8rem; font-size:15px; font-weight:500; color:var(--ink-body); border-radius:8px; }
.mobile-menu a:hover{ background:var(--brand-50); color:var(--brand-600); }
@media (max-width:767px){
  .dock-links{ display:none; }
  .dock-cta{ display:none; }
  .hamburger-btn{ display:block; }
}

.hero{
  background:var(--bg-blue);
  background-image:
    linear-gradient(rgba(59,125,216,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,125,216,.04) 1px, transparent 1px);
  background-size:32px 32px;
  padding:120px 0 96px;
  min-height:600px;
  display:flex; align-items:center;
}
@media (max-width:768px){ .hero{ padding:100px 0 56px; min-height:auto; } }
.hero-inner{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media (min-width:1024px){ .hero-inner{ grid-template-columns:6fr 5fr; gap:4rem; } }
.hero-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.85); border:1px solid var(--brand-100);
  color:var(--brand-600); font-size:13px; font-weight:600;
  padding:.38rem .95rem; border-radius:999px;
}
.hero-title{ font-size:32px; font-weight:700; line-height:1.3; color:var(--ink-title); margin-top:1.2rem; letter-spacing:.01em; }
@media (min-width:768px){ .hero-title{ font-size:40px; } }
.hero-sub{ font-size:16px; line-height:1.7; color:var(--ink-body); margin-top:1rem; max-width:480px; }
@media (min-width:768px){ .hero-sub{ font-size:17px; } }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:2.2rem; font-size:13px; color:var(--ink-muted); }
.hero-trust strong{ font-size:22px; font-weight:800; color:var(--brand-600); margin-right:.15rem; }
.hero-trust-divider{ width:1px; height:28px; background:var(--border-btn); }
.hero-img-wrap{ position:relative; }
.hero-img-wrap img{ width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow-hover); object-fit:cover; }
.hero-float-card{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-radius:12px; box-shadow:var(--shadow-hover);
  padding:.85rem 1.1rem; display:flex; align-items:center; gap:.7rem;
}
.hero-float-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); flex-shrink:0; }
.hero-float-text{ font-size:13px; color:var(--ink-title); font-weight:600; }

.metric-card{
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:1.8rem 1.5rem 1.5rem; position:relative; overflow:hidden;
  transition:all .2s ease;
}
.metric-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--brand-500); }
.metric-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.metric-icon{ width:40px; height:40px; border-radius:10px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; color:var(--brand-600); }
.metric-num{ font-size:34px; font-weight:800; color:var(--brand-600); line-height:1.2; margin-top:1rem; }
.metric-unit{ font-size:16px; font-weight:700; color:var(--brand-500); }
.metric-label{ font-size:13px; color:var(--ink-muted); margin-top:.35rem; }

.benefit-card{
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:1.8rem 1.6rem; transition:all .2s ease; height:100%;
}
.benefit-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.benefit-icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--accent-100); color:var(--accent-600);
  display:flex; align-items:center; justify-content:center;
}
.benefit-title{ font-size:17px; font-weight:700; color:var(--ink-title); margin-top:1rem; }
.benefit-text{ font-size:14px; color:var(--ink-muted); margin-top:.5rem; line-height:1.75; }

.service-card{
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  overflow:hidden; transition:all .2s ease; height:100%; display:flex; flex-direction:column;
}
.service-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.service-card img{ width:100%; height:160px; object-fit:cover; }
.service-card-body{ padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.service-title{ font-size:18px; font-weight:700; color:var(--ink-title); }
.service-text{ font-size:14px; color:var(--ink-muted); line-height:1.75; margin-top:.5rem; flex:1; }
.service-tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.service-tag{ background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand-100); font-size:12px; font-weight:500; padding:.2rem .7rem; border-radius:999px; }
.service-link{ display:inline-flex; align-items:center; gap:.35rem; font-size:14px; font-weight:600; color:var(--brand-600); margin-top:1.1rem; transition:all .2s ease; }
.service-link:hover{ color:var(--brand-700); text-decoration:underline; }

.update-item{
  display:flex; gap:.9rem; padding:1.1rem 1.2rem;
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  transition:all .2s ease; margin-bottom:.75rem;
}
.update-item:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.update-num{ font-size:16px; font-weight:800; color:var(--brand-500); line-height:1.6; min-width:2ch; }
.update-title{ font-size:15px; font-weight:600; color:var(--ink-title); line-height:1.55; }
.update-meta{ font-size:12px; color:var(--ink-muted); margin-top:.3rem; }
.sidebar-card{
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:1.5rem 1.4rem;
}
.sidebar-tag{ display:inline-block; background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand-100); font-size:12px; font-weight:500; padding:.25rem .8rem; border-radius:999px; margin:.25rem .2rem 0; }

.compare-wrap{ display:grid; grid-template-columns:1fr; gap:2rem; position:relative; max-width:880px; margin-inline:auto; }
@media (min-width:768px){ .compare-wrap{ grid-template-columns:1fr 1fr; gap:2.5rem; } }
.compare-card{ border-radius:var(--radius-card); padding:1.8rem 1.6rem; }
.compare-card h3{ font-size:17px; font-weight:700; color:var(--ink-title); margin-bottom:1.1rem; }
.compare-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--brand-500); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; box-shadow:0 4px 14px rgba(59,125,216,.4);
  z-index:2; letter-spacing:.05em;
}
@media (max-width:767px){ .compare-badge{ top:auto; bottom:-26px; transform:translateX(-50%); } }
.compare-list{ list-style:none; }
.compare-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:14px; line-height:1.7; color:var(--ink-body); margin-bottom:.7rem; }
.compare-list li:last-child{ margin-bottom:0; }
.compare-dot{ width:7px; height:7px; border-radius:50%; background:var(--warning); flex-shrink:0; margin-top:.55rem; }
.compare-check{ flex-shrink:0; color:var(--success); margin-top:.2rem; }
.compare-quote{
  margin-top:3rem; display:flex; gap:1rem; align-items:flex-start;
  background:var(--brand-50); border-left:4px solid var(--brand-500);
  border-radius:8px; padding:1.2rem 1.4rem;
  max-width:880px; margin-inline:auto;
}
.compare-quote p{ font-size:15px; color:var(--ink-title); line-height:1.7; }

.faq-layout{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:1024px){ .faq-layout{ grid-template-columns:2fr 3fr; gap:3.5rem; } }
.faq-item{
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  margin-bottom:.85rem; overflow:hidden; transition:box-shadow .2s ease;
}
.faq-item:hover{ box-shadow:var(--shadow-hover); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.3rem; font-size:15px; font-weight:600; color:var(--ink-title);
  user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary svg{ transition:transform .2s ease; flex-shrink:0; color:var(--brand-500); }
.faq-item[open] summary svg{ transform:rotate(180deg); }
.faq-answer{ padding:0 1.3rem 1.2rem; font-size:14px; color:var(--ink-muted); line-height:1.75; }
.faq-cta{
  margin-top:2.5rem; border-radius:16px; overflow:hidden; position:relative;
  background-image:url('/assets/images/backpic/back-1.jpg');
  background-size:cover; background-position:center;
}
.faq-cta-overlay{ background:linear-gradient(100deg,rgba(19,32,46,.86),rgba(36,84,143,.78)); padding:2.4rem 2rem; }
.faq-cta-title{ font-size:20px; font-weight:700; color:#fff; line-height:1.4; }
.faq-cta-text{ font-size:14px; color:rgba(255,255,255,.85); margin-top:.5rem; }

.contact-panel{
  max-width:640px; margin-inline:auto;
  background:var(--bg-card); border-radius:var(--radius-card);
  box-shadow:var(--shadow-hover); overflow:hidden;
  border-top:6px solid var(--brand-500);
}
.contact-body{ padding:2rem 1.6rem; }
@media (min-width:768px){ .contact-body{ padding:2.4rem; } }
.form-label{ display:block; font-size:13px; font-weight:600; color:var(--ink-title); margin-bottom:.4rem; }
.form-input{
  width:100%; padding:.72rem 1rem; border-radius:var(--radius-btn);
  border:1px solid var(--border-btn); background:var(--bg-body);
  font-size:14px; color:var(--ink-title);
  transition:border-color .2s ease, box-shadow .2s ease;
  font-family:inherit;
}
.form-input::placeholder{ color:#94A3B8; }
.form-input:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(59,125,216,.15); background:#fff; }
select.form-input{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23667C8F' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:16px;
  padding-right:2.5rem; cursor:pointer;
}
textarea.form-input{ resize:vertical; min-height:80px; }
.form-note{ font-size:12px; color:var(--ink-muted); text-align:center; margin-top:1.2rem; }

.site-footer{ background:var(--bg-gray); border-top:1px solid #E2E8F0; padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; padding-bottom:3.5rem; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:3rem; } }
.footer-logo{ font-size:17px; font-weight:700; color:var(--ink-title); display:flex; align-items:center; gap:.55rem; }
.footer-desc{ font-size:14px; color:var(--ink-muted); margin-top:.85rem; line-height:1.75; max-width:280px; }
.footer-title{ font-size:14px; font-weight:700; color:var(--ink-title); margin-bottom:1rem; letter-spacing:.02em; }
.footer-links{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.footer-links a{ font-size:14px; color:var(--ink-body); }
.footer-links a:hover{ color:var(--brand-600); }
.footer-contact{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-contact li{ font-size:14px; color:var(--ink-body); display:flex; gap:.5rem; align-items:flex-start; }
.footer-contact-key{ color:var(--ink-muted); flex-shrink:0; }
.footer-copyright{
  border-top:1px solid #E2E8F0; padding:1.4rem 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem;
  font-size:13px; color:var(--ink-muted);
}
@media (max-width:767px){
  .footer-copyright{ justify-content:center; text-align:center; }
}
@keyframes heroFadeIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
.hero-animate{ animation:heroFadeIn .7s ease both; }
.hero-animate-delay{ animation:heroFadeIn .7s ease .15s both; }