/* roulang page: index */
:root {
      --hm-blue: #2F73B8;
      --hm-blue-deep: #2B6AA9;
      --hm-blue-ink: #1E4F82;
      --hm-teal: #2A9B8F;
      --hm-teal-deep: #218178;
      --hm-gold: #D4A017;
      --hm-gold-soft: #F4E4B2;
      --hm-paper: #F5F8FC;
      --hm-white: #FFFFFF;
      --hm-ink: #1B2836;
      --hm-ink-2: #223044;
      --hm-text: #1C2430;
      --hm-muted: #5C6B7A;
      --hm-line: rgba(47, 115, 184, 0.12);
      --hm-line-strong: rgba(47, 115, 184, 0.22);
      --hm-radius-card: 14px;
      --hm-radius-btn: 8px;
      --hm-radius-sm: 8px;
      --hm-shadow: 0 10px 28px rgba(47, 115, 184, 0.08);
      --hm-shadow-hover: 0 16px 36px rgba(47, 115, 184, 0.16);
      --hm-container: 1200px;
      --hm-pad: 104px;
      --hm-pad-m: 64px;
      --hm-nav: 72px;
      --bs-primary: #2F73B8;
      --bs-link-color: #2F73B8;
      --bs-link-hover-color: #1E4F82;
      --bs-body-font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      --bs-body-color: #1C2430;
      --bs-body-bg: #F5F8FC;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--hm-text);
      background: var(--hm-paper);
      line-height: 1.7;
      font-weight: 400;
      overflow-x: hidden;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--hm-blue); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
    a:hover { color: var(--hm-blue-ink); }
    button, input, select, textarea { font-family: inherit; }
    button { cursor: pointer; }
    h1, h2, h3, h4 { font-weight: 700; color: var(--hm-text); letter-spacing: .01em; line-height: 1.35; }
    p { margin: 0 0 1em; }
    ul { margin: 0; padding: 0; }
    :focus-visible {
      outline: 2px solid var(--hm-blue);
      outline-offset: 3px;
    }
    .container, .container-lg, .container-xl, .container-xxl { max-width: var(--hm-container); }
    .container-hm {
      width: min(var(--hm-container), calc(100% - 40px));
      margin-inline: auto;
    }
    section[id] { scroll-margin-top: 88px; }
    .site-header {
      position: relative;
      z-index: 1030;
      background: var(--hm-white);
    }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 40px;
      padding: 6px 0;
      border-bottom: 1px solid var(--hm-line);
      background: #F8FBFE;
      font-size: 13px;
      color: var(--hm-muted);
    }
    .topbar-left, .topbar-right {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
    }
    .topbar a { color: var(--hm-muted); }
    .topbar a:hover { color: var(--hm-blue); }
    .topbar i { color: var(--hm-blue); margin-right: 6px; }
    .trust-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 2px 10px;
      border: 1px solid rgba(212, 160, 23, .35);
      border-radius: 6px;
      color: #8A6A0A;
      background: #FFF9E8;
      font-weight: 600;
      font-size: 12px;
    }
    .nav-main {
      background: var(--hm-white);
      border-bottom: 1px solid transparent;
      transition: box-shadow .2s ease, border-color .2s ease;
    }
    .nav-main.is-stuck {
      position: sticky;
      top: 0;
      box-shadow: var(--hm-shadow);
      border-bottom-color: var(--hm-line);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: var(--hm-nav);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--hm-text);
      min-height: 44px;
      flex: 0 0 auto;
    }
    .brand:hover { color: var(--hm-blue-ink); }
    .brand-mark {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border-radius: 10px;
      background: var(--hm-blue);
      color: #fff;
      display: grid;
      place-items: center;
    }
    .brand-mark svg { width: 22px; height: 22px; }
    .brand-name {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }
    .brand-name strong {
      font-size: 16px;
      font-weight: 700;
    }
    .brand-name small {
      font-size: 12px;
      color: var(--hm-muted);
      font-weight: 500;
    }
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex: 1 1 auto;
    }
    .nav-links a {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 8px 10px;
      color: var(--hm-text);
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 8px;
      height: 2px;
      background: var(--hm-blue);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }
    .nav-links a:hover, .nav-links a.is-active { color: var(--hm-blue); }
    .nav-links a.is-active::after, .nav-links a:hover::after { transform: scaleX(1); }
    .nav-cta { display: flex; align-items: center; gap: 10px; }
    .btn-menu {
      width: 44px;
      height: 44px;
      border: 1px solid var(--hm-line-strong);
      background: #fff;
      border-radius: var(--hm-radius-btn);
      color: var(--hm-text);
      display: none;
      place-items: center;
    }
    .btn-solid, .btn-line, .btn-light, .btn-gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 10px 20px;
      border-radius: var(--hm-radius-btn);
      font-weight: 600;
      font-size: 15px;
      border: 1px solid transparent;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
      text-align: center;
    }
    .btn-solid {
      background: var(--hm-blue);
      color: #fff;
      box-shadow: 0 8px 18px rgba(47, 115, 184, .18);
    }
    .btn-solid:hover { background: var(--hm-blue-deep); color: #fff; transform: translateY(-2px); }
    .btn-solid:active { transform: translateY(0); background: var(--hm-blue-ink); color: #fff; }
    .btn-line {
      background: #fff;
      color: var(--hm-blue);
      border-color: var(--hm-blue);
    }
    .btn-line:hover { background: #EAF3FB; color: var(--hm-blue-ink); transform: translateY(-2px); }
    .btn-light {
      background: #fff;
      color: var(--hm-ink);
    }
    .btn-light:hover { background: var(--hm-gold-soft); color: var(--hm-ink); transform: translateY(-2px); }
    .btn-gold {
      background: var(--hm-gold);
      color: #1B2836;
    }
    .btn-gold:hover { background: #C09012; color: #1B2836; transform: translateY(-2px); }
    .btn-teal {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 10px 18px;
      border-radius: var(--hm-radius-btn);
      border: 1px solid var(--hm-teal);
      color: var(--hm-teal-deep);
      background: #fff;
      font-weight: 600;
    }
    .btn-teal:hover { background: #E7F6F4; color: var(--hm-teal-deep); }
    .badge-live, .badge-rec, .badge-ent, .badge-mix, .badge-gold {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
    }
    .badge-live { background: #E7F6F4; color: var(--hm-teal-deep); }
    .badge-rec { background: #EAF3FB; color: var(--hm-blue-ink); }
    .badge-ent { background: #FFF4D6; color: #8A6A0A; }
    .badge-mix { background: #EEF2F7; color: #3C4A58; }
    .badge-gold { background: rgba(212, 160, 23, .16); color: #F4E4B2; border: 1px solid rgba(212, 160, 23, .45); }
    .drawer {
      position: fixed;
      inset: 0;
      z-index: 1040;
      pointer-events: none;
      visibility: hidden;
    }
    .drawer.is-open { pointer-events: auto; visibility: visible; }
    .drawer-mask {
      position: absolute;
      inset: 0;
      background: rgba(27, 40, 54, .46);
      opacity: 0;
      transition: opacity .2s ease;
    }
    .drawer.is-open .drawer-mask { opacity: 1; }
    .drawer-panel {
      position: absolute;
      top: 0;
      right: 0;
      width: min(360px, 88vw);
      height: 100%;
      background: #fff;
      padding: 24px 20px 32px;
      transform: translateX(100%);
      transition: transform .24s ease;
      overflow: auto;
      box-shadow: -12px 0 32px rgba(27, 40, 54, .12);
    }
    .drawer.is-open .drawer-panel { transform: translateX(0); }
    .drawer-panel a {
      display: flex;
      align-items: center;
      min-height: 48px;
      padding: 8px 4px;
      border-bottom: 1px solid var(--hm-line);
      color: var(--hm-text);
      font-weight: 600;
    }
    .hero {
      position: relative;
      background: var(--hm-ink);
      color: #fff;
    }
    .hero .carousel, .hero-slide {
      min-height: 640px;
    }
    .hero-slide {
      position: relative;
      display: flex;
      align-items: center;
    }
    .hero-slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero-mask {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(16, 24, 33, .82) 0%, rgba(27, 40, 54, .62) 48%, rgba(27, 40, 54, .38) 100%),
        linear-gradient(180deg, rgba(16, 18, 22, .2), rgba(16, 18, 22, .45));
    }
    .hero-copy {
      position: relative;
      z-index: 2;
      padding: 72px 0 92px;
      max-width: 760px;
    }
    .member-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--hm-gold-soft);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: .08em;
      margin-bottom: 12px;
    }
    .hero h1, .hero-title {
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.28;
      color: #fff;
      font-weight: 700;
      margin: 0 0 16px;
    }
    .hero-lead {
      font-size: 16px;
      line-height: 1.85;
      color: rgba(255,255,255,.88);
      margin-bottom: 28px;
      max-width: 42em;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-meta {
      margin-top: 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      color: rgba(255,255,255,.78);
      font-size: 13px;
    }
    .hero-meta strong { color: var(--hm-gold-soft); font-size: 18px; display: block; }
    .carousel-indicators { margin-bottom: 22px; gap: 8px; }
    .carousel-indicators [data-bs-target] {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      opacity: .38;
    }
    .carousel-indicators .active { opacity: 1; background: var(--hm-gold); }
    .carousel-control-prev, .carousel-control-next {
      width: 52px;
      height: 52px;
      top: 50%;
      transform: translateY(-50%);
      bottom: auto;
      border-radius: 10px;
      background: rgba(27, 40, 54, .45);
      opacity: 1;
    }
    .carousel-control-prev { left: 16px; }
    .carousel-control-next { right: 16px; }
    .hero-pause {
      position: absolute;
      right: 20px;
      bottom: 20px;
      z-index: 3;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 8px;
      background: rgba(255,255,255,.16);
      color: #fff;
    }
    .section {
      padding: var(--hm-pad) 0;
    }
    .bg-white { background: var(--hm-white); }
    .bg-paper { background: var(--hm-paper); }
    .sec-head { margin-bottom: 36px; max-width: 760px; }
    .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
    .sec-head h2 {
      font-size: clamp(24px, 3vw, 32px);
      margin-bottom: 12px;
    }
    .sec-head p {
      color: var(--hm-muted);
      margin: 0;
      font-size: 16px;
      line-height: 1.85;
    }
    .card-soft {
      background: #fff;
      border: 1px solid var(--hm-line);
      border-radius: var(--hm-radius-card);
      box-shadow: var(--hm-shadow);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .card-soft:hover { transform: translateY(-5px); box-shadow: var(--hm-shadow-hover); }
    .sell-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 48px;
    }
    .sell-item {
      padding: 24px 22px;
      background: #fff;
      border-radius: var(--hm-radius-card);
      border: 1px solid var(--hm-line);
      box-shadow: var(--hm-shadow);
    }
    .sell-item b { display: block; font-size: 22px; color: var(--hm-blue); margin-bottom: 8px; }
    .sell-item p { margin: 0; color: var(--hm-muted); font-size: 14px; }
    .intro-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 48px;
      align-items: center;
    }
    .intro-photo {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--hm-shadow);
      border: 1px solid var(--hm-line);
    }
    .intro-photo img { width: 100%; height: 420px; object-fit: cover; }
    .param-list { list-style: none; display: grid; gap: 10px; }
    .param-list li {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px dashed var(--hm-line);
      color: var(--hm-text);
      font-size: 15px;
    }
    .param-list i { color: var(--hm-teal); }
    .bento {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 18px;
    }
    .bento-card {
      padding: 28px 26px;
      background: #fff;
      border: 1px solid var(--hm-line);
      border-radius: var(--hm-radius-card);
      box-shadow: var(--hm-shadow);
    }
    .bento-card.span-7 { grid-column: span 7; }
    .bento-card.span-5 { grid-column: span 5; }
    .bento-card.span-4 { grid-column: span 4; }
    .bento-card h3 { font-size: 20px; margin-bottom: 12px; }
    .bento-card .ico {
      width: 44px; height: 44px; border-radius: 10px;
      display: grid; place-items: center; margin-bottom: 14px;
      background: #EAF3FB; color: var(--hm-blue); font-size: 20px;
    }
    .bento-card.span-5 .ico { background: #E7F6F4; color: var(--hm-teal); }
    .check-list { list-style: none; display: grid; gap: 8px; color: var(--hm-muted); font-size: 14px; }
    .check-list li::before { content: "•"; color: var(--hm-blue); margin-right: 8px; }
    .adv-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .adv-card { padding: 22px; }
    .adv-card .ico-line {
      width: 44px; height: 44px; border-radius: 10px;
      border: 1.5px solid var(--hm-blue);
      color: var(--hm-blue);
      display: grid; place-items: center; margin-bottom: 14px; font-size: 20px;
    }
    .adv-card h3 { font-size: 18px; margin-bottom: 8px; }
    .adv-card p { margin: 0; color: var(--hm-muted); font-size: 14px; }
    .scene-block {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 36px;
      align-items: center;
      margin-bottom: 42px;
    }
    .scene-block.reverse { grid-template-columns: .9fr 1.1fr; }
    .scene-block.reverse .scene-copy { order: 2; }
    .scene-photo { border-radius: 16px; overflow: hidden; box-shadow: var(--hm-shadow); }
    .scene-photo img { width: 100%; height: 340px; object-fit: cover; }
    .steps { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
    .steps li {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: start;
      color: var(--hm-muted);
      font-size: 14px;
    }
    .steps b {
      width: 28px; height: 28px; border-radius: 8px;
      background: var(--hm-blue); color: #fff;
      display: grid; place-items: center; font-size: 12px;
    }
    .course-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .course-card { overflow: hidden; display: flex; flex-direction: column; }
    .course-card img { width: 100%; height: 210px; object-fit: cover; }
    .course-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .course-body h3 { font-size: 18px; margin: 0; }
    .course-body p { margin: 0; color: var(--hm-muted); font-size: 14px; }
    .course-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .demo-tabs .nav-link {
      color: var(--hm-muted);
      border: 0;
      border-radius: 8px;
      min-height: 44px;
      padding: 10px 16px;
      font-weight: 600;
    }
    .demo-tabs .nav-link.active {
      background: var(--hm-blue);
      color: #fff;
    }
    .demo-frame {
      margin-top: 22px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--hm-line);
      box-shadow: var(--hm-shadow);
      background: #fff;
    }
    .demo-frame img { width: 100%; height: 460px; object-fit: cover; }
    .demo-note {
      padding: 16px 20px;
      color: var(--hm-muted);
      font-size: 14px;
      border-top: 1px solid var(--hm-line);
    }
    .cases {
      background: var(--hm-ink);
      color: rgba(255,255,255,.86);
      padding: var(--hm-pad) 0;
      position: relative;
    }
    .cases-bg {
      position: absolute; inset: 0;
      background: url("/assets/images/11bad19476d1111f.webp") center/cover no-repeat;
      opacity: .18;
    }
    .cases .container-hm { position: relative; z-index: 1; }
    .cases-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 40px;
    }
    .cases h2 { color: #fff; }
    .principle {
      font-size: 20px;
      line-height: 1.7;
      color: #fff;
      border-left: 3px solid var(--hm-gold);
      padding-left: 16px;
    }
    .case-item {
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .case-item h3 { color: #fff; font-size: 18px; margin-bottom: 6px; }
    .case-nums { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(255,255,255,.74); }
    .case-nums strong { color: var(--hm-gold-soft); font-size: 16px; }
    .story-list { display: grid; gap: 28px; }
    .story-card {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 0;
      overflow: hidden;
    }
    .story-card.alt { grid-template-columns: 1fr 280px; }
    .story-card img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
    .story-body { padding: 28px 30px; }
    .story-body h3 { font-size: 20px; margin-bottom: 8px; }
    .story-body p { color: var(--hm-muted); font-size: 15px; }
    .stats {
      background: #EAF3FB;
      padding: 56px 0;
    }
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .stat-item { text-align: center; padding: 8px; }
    .stat-item .num {
      font-size: 42px;
      font-weight: 700;
      color: var(--hm-blue);
      line-height: 1.1;
    }
    .stat-item .num span { font-size: 16px; margin-left: 4px; }
    .stat-item p { margin: 8px 0 0; color: var(--hm-muted); }
    .price-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: stretch;
    }
    .price-card { padding: 28px 24px 24px; position: relative; }
    .price-card.featured {
      border-color: rgba(47, 115, 184, .35);
      transform: translateY(-8px);
      box-shadow: var(--hm-shadow-hover);
    }
    .price-card h3 { font-size: 20px; margin-bottom: 6px; }
    .price-card .fee {
      font-size: 36px;
      color: var(--hm-blue);
      font-weight: 700;
      margin: 10px 0 4px;
    }
    .price-card .fee small { font-size: 14px; color: var(--hm-muted); font-weight: 500; }
    .price-card ul { list-style: none; margin: 16px 0 22px; display: grid; gap: 8px; color: var(--hm-muted); font-size: 14px; }
    .price-card ul li::before { content: "✓"; color: var(--hm-teal); margin-right: 8px; font-weight: 700; }
    .hot-tag {
      position: absolute;
      top: 16px;
      right: 16px;
      background: var(--hm-gold);
      color: #1B2836;
      font-size: 12px;
      font-weight: 700;
      border-radius: 6px;
      padding: 4px 8px;
    }
    .price-note { margin-top: 18px; font-size: 13px; color: var(--hm-muted); }
    .review-wall {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .review-card { padding: 18px 18px 16px; }
    .stars { color: var(--hm-gold); letter-spacing: 1px; font-size: 13px; }
    .review-card h3 { font-size: 15px; margin: 8px 0 6px; }
    .review-card p { margin: 0; color: var(--hm-muted); font-size: 13px; }
    .voice-grid {
      display: grid;
      grid-template-columns: 1.2fr .9fr .9fr;
      gap: 18px;
    }
    .voice-card { padding: 26px 24px; }
    .voice-card.lead { background: #1B2836; color: #fff; }
    .voice-card.lead h3, .voice-card.lead p { color: #fff; }
    .voice-card h3 { font-size: 18px; }
    .voice-card p { color: var(--hm-muted); font-size: 14px; }
    .voice-metric { color: var(--hm-teal); font-weight: 700; }
    .voice-card.lead .voice-metric { color: var(--hm-gold-soft); }
    .news-list { display: grid; gap: 16px; }
    .news-item {
      display: grid;
      grid-template-columns: 220px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 12px;
    }
    .news-item img { width: 220px; height: 120px; object-fit: cover; border-radius: 10px; }
    .news-item h3 { font-size: 18px; margin: 0 0 6px; }
    .news-item p { margin: 0; color: var(--hm-muted); font-size: 14px; }
    .news-date { color: var(--hm-muted); font-size: 13px; white-space: nowrap; }
    .faq-item { border: 1px solid var(--hm-line); border-radius: 12px; overflow: hidden; background: #fff; margin-bottom: 12px; box-shadow: var(--hm-shadow); }
    .faq-item .accordion-button {
      min-height: 56px;
      font-weight: 600;
      font-size: 16px;
      box-shadow: none;
      background: #fff;
      color: var(--hm-text);
    }
    .faq-item .accordion-button:not(.collapsed) {
      background: #F3F7FB;
      color: var(--hm-blue-ink);
    }
    .faq-item .accordion-body {
      background: #F7F9FC;
      color: var(--hm-muted);
      font-size: 15px;
      line-height: 1.8;
    }
    .cta-band {
      background: #EAF3FB;
      padding: var(--hm-pad) 0;
    }
    .cta-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 40px;
      align-items: start;
    }
    .cta-form {
      background: #fff;
      border-radius: 16px;
      box-shadow: var(--hm-shadow);
      border: 1px solid var(--hm-line);
      padding: 28px;
    }
    .form-label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
    .form-control, .form-select {
      min-height: 44px;
      border-radius: 8px;
      border-color: #D5DEE8;
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--hm-blue);
      box-shadow: 0 0 0 3px rgba(47, 115, 184, .15);
    }
    .form-error { color: #C0392B; font-size: 13px; min-height: 18px; }
    .form-trust { margin-top: 12px; color: var(--hm-muted); font-size: 13px; }
    .site-footer {
      background: #1B2836;
      color: rgba(255,255,255,.78);
      padding: 56px 0 24px;
    }
    .foot-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1.1fr .9fr;
      gap: 28px;
      margin-bottom: 28px;
    }
    .site-footer h3 { color: #fff; font-size: 16px; margin-bottom: 14px; }
    .site-footer a { color: rgba(255,255,255,.78); }
    .site-footer a:hover { color: #fff; }
    .foot-nav { list-style: none; display: grid; gap: 8px; }
    .foot-nav a { display: inline-flex; min-height: 32px; align-items: center; }
    .copy-row {
      border-top: 1px solid rgba(255,255,255,.1);
      padding-top: 16px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 13px;
    }
    .privacy-box { font-size: 13px; color: rgba(255,255,255,.66); margin-top: 8px; }
    .topbar-mobile {
      display: none;
      align-items: center;
      justify-content: space-between;
      min-height: 40px;
      padding: 6px 0;
      border-bottom: 1px solid var(--hm-line);
      font-size: 13px;
      color: var(--hm-muted);
    }
    @media (max-width: 1199.98px) {
      .nav-links a { padding: 8px 7px; font-size: 13px; }
      .hero .carousel, .hero-slide { min-height: 580px; }
      .voice-grid { grid-template-columns: 1fr 1fr; }
      .voice-card.lead { grid-column: 1 / -1; }
    }
    @media (max-width: 991.98px) {
      :root { --hm-pad: 72px; }
      .nav-links, .nav-cta .btn-solid { display: none; }
      .btn-menu { display: grid; }
      .hero .carousel, .hero-slide { min-height: 520px; }
      .sell-row, .adv-grid, .course-grid, .price-grid { grid-template-columns: 1fr 1fr; }
      .intro-grid, .scene-block, .scene-block.reverse, .cases-grid, .cta-grid { grid-template-columns: 1fr; }
      .scene-block.reverse .scene-copy { order: 0; }
      .bento-card.span-7, .bento-card.span-5, .bento-card.span-4 { grid-column: span 12; }
      .story-card, .story-card.alt { grid-template-columns: 1fr; }
      .review-wall { grid-template-columns: 1fr 1fr; }
      .news-item { grid-template-columns: 160px 1fr; }
      .news-date { grid-column: 2; }
      .foot-grid { grid-template-columns: 1fr 1fr; }
      .demo-frame img { height: 340px; }
      .price-card.featured { transform: none; }
    }
    @media (max-width: 767.98px) {
      .topbar { display: none; }
      .topbar-mobile { display: flex; }
      .brand-name strong { font-size: 15px; }
      .hero-copy { padding: 48px 0 80px; }
      .carousel-control-prev, .carousel-control-next { display: none; }
    }
    @media (max-width: 575.98px) {
      :root { --hm-pad: 56px; }
      .container-hm { width: calc(100% - 32px); }
      .sell-row, .adv-grid, .course-grid, .price-grid, .stat-grid, .review-wall, .voice-grid, .foot-grid {
        grid-template-columns: 1fr;
      }
      .stat-grid { grid-template-columns: 1fr 1fr; }
      .news-item { grid-template-columns: 1fr; }
      .news-item img { width: 100%; height: 180px; }
      .cta-form .btn-solid { width: 100%; }
      .hero .carousel, .hero-slide { min-height: 560px; }
      .intro-photo img, .scene-photo img { height: 240px; }
      .demo-frame img { height: 220px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}