/* NPCDAN — generous type, readable contrast, ink and ice-blue surfaces. */
:root {
  --bg: #090c10;
  --surface: #11171e;
  --raised: #17212c;
  --border: #293847;
  --muted: #a4b3c3;
  --text: #f1f5f9;
  --blue: #c3e6ff;
  --blue-strong: #a7d8ff;
}
html { scroll-padding-top: 118px; }
body { font-size: 15px; line-height: 1.8; background: var(--bg); color: var(--text); }
html, body { max-width: 100%; }
body { overflow-x: clip; }
button, input, select, textarea { font: inherit; }
input::placeholder, textarea::placeholder { color: #8a9bad; opacity: 1; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid #b9e3ff; outline-offset: 5px;
}
.site-shell, .main, .intro-grid, .intro-copy, .featured-grid, .product-grid,
.detail-layout, .detail-main, .order-panel, .contact-page { min-width: 0; }
.topbar {
  height: 94px;
  padding: 0 max(36px, calc((100vw - 1240px) / 2));
  gap: 30px;
  border-bottom-color: #22303c;
  background: #090d12ed;
}
.topbar > .brand { gap: 12px; }
.topbar .brand-mark { width: 41px; height: 41px; border-radius: 11px; font-size: 27px; }
.topbar .brand-mark span { font-size: 27px; }
.brand-name { font-size: 19px; font-weight: 650; letter-spacing: 1.1px; }
.brand-caption { font-size: 11px; color: #91a5b9; letter-spacing: 1.5px; margin-top: 7px; }
.top-nav { gap: 30px; margin-right: 24px; }
.top-nav-item { font-size: 14px; font-weight: 500; color: #a8b5c5; padding: 33px 0; }
.top-nav-item:hover, .top-nav-item.active { color: #eef8ff; }
.top-nav-item.active:after { width: 20px; bottom: 22px; background: #b7dfff; }
.topbar-right { flex-shrink: 0; }
.contact-top {
  font-size: 14px; font-weight: 600; padding: 10px 15px; gap: 9px;
  background: #c0e3ff; color: #102438; border-color: #d4edff; border-radius: 8px;
}
.contact-top svg { width: 16px; height: 16px; }
.main { max-width: 1320px; padding: 34px 40px 0; }
.announcement {
  font-size: 14px; line-height: 1.8; color: #bacada; margin-bottom: 40px;
  padding: 13px 17px; gap: 12px; border: 1px solid #263749; border-radius: 9px;
  background: linear-gradient(100deg, #14202c, #0d141c 80%);
}
.announcement svg { width: 18px; height: 18px; color: #b4dfff; }
.announcement a { font-size: 13px; color: #ceeaff; gap: 7px; }
.announcement a svg { width: 15px; height: 15px; }
.announcement-text { min-width: 0; overflow-wrap: anywhere; }
.intro-grid { grid-template-columns: .84fr 2.16fr; gap: 38px; min-height: 530px; align-items: center; }
.intro-copy { padding: 0; }
.intro-copy .eyebrow { font-size: 12px; letter-spacing: 1.8px; color: #a9c8e1; white-space: normal; }
.intro-copy h1 {
  font-size: 58px; font-weight: 600; line-height: 1.3; letter-spacing: -2.7px;
  margin: 24px 0 24px; overflow-wrap: anywhere;
}
.intro-copy h1 span { color: #bfddf5; }
.intro-description { max-width: 320px; font-size: 15px; line-height: 2; color: #a6b7c9; }
.intro-cta { font-size: 15px; font-weight: 500; color: #d5eafa; margin-top: 30px; gap: 15px; }
.circle-arrow {
  width: 43px; height: 43px; border-color: #58738b; color: #c8e5fb;
  background: #182635; flex-shrink: 0;
}
.circle-arrow svg { width: 19px; height: 19px; }
.intro-footnote { font-size: 11px; line-height: 1.9; letter-spacing: .35px; color: #91a8bc; margin-top: 48px; white-space: normal; }
.intro-footnote span { width: 5px; height: 5px; flex-shrink: 0; }
.featured-grid { gap: 16px; align-items: stretch; }
.featured-card, .featured-card.tone-0, .featured-card.tone-1, .featured-card.tone-2 {
  min-height: 524px;
  border: 1px solid #344a60;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 13%, #33577b33, transparent 57%),
    linear-gradient(160deg, #1c2b3b 0%, #13202e 50%, #101923 100%);
  box-shadow: 0 18px 35px #00000018, inset 0 1px 0 #dcefff08;
}
.featured-card.tone-1 { background: radial-gradient(ellipse at 65% 13%, #3a68953d, transparent 58%), linear-gradient(160deg, #203348, #142332 50%, #111b26); }
.featured-card.tone-2 { background: radial-gradient(ellipse at 50% 13%, #44698d33, transparent 58%), linear-gradient(160deg, #1c2a3a, #13202c 50%, #101923); }
.featured-card:hover { border-color: #779cbc; transform: translateY(-5px); box-shadow: 0 24px 46px #00000030; }
.featured-card-top { padding: 22px 22px 0; font-size: 11px; letter-spacing: .8px; color: #c6d9e9; gap: 10px; line-height: 1.6; }
.featured-index { font-size: 11px; color: #9bb6ce; }
.featured-art { height: 204px; margin-top: 10px; isolation: isolate; }
.featured-art:after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #17253600 50%, #14212e66 83%, #14212ecc 100%);
}
.featured-art img, .tone-0 .featured-art img, .tone-1 .featured-art img, .tone-2 .featured-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 47%;
  opacity: .92; mix-blend-mode: screen;
  filter: grayscale(1) sepia(.65) hue-rotate(162deg) saturate(1.5) brightness(.83) contrast(1.1);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 74%, transparent);
}
.featured-card-info { position: relative; z-index: 2; padding: 0 22px 22px; margin-top: -1px; }
.featured-kicker { font-size: 12px; color: #a9c2d8; letter-spacing: .1px; }
.featured-card h2 { font-size: 34px; font-weight: 550; letter-spacing: -1px; line-height: 1.25; margin: 9px 0 15px; color: #f0f7fd; }
.featured-price { font-size: 32px; color: #d1e9fc; line-height: 1.35; letter-spacing: -.7px; }
.featured-price .currency { font-size: 15px; vertical-align: 5px; margin-right: 4px; }
.featured-price small { font-size: 12px; color: #a6bdd1; margin-left: 7px; }
.featured-rule { margin: 21px 0 17px; background: #6e8da53a; }
.featured-feature { font-size: 13px; color: #bfd0df; gap: 8px; margin-top: 8px; line-height: 1.7; }
.featured-feature svg { width: 15px; height: 15px; color: #b8e1ff; }
.featured-link { font-size: 12px; color: #b8d0e4; letter-spacing: .1px; margin-top: 23px; }
.featured-link .circle-arrow { width: 35px; height: 35px; }
.featured-link .circle-arrow svg { width: 16px; height: 16px; }
.benefits { margin-top: 42px; padding: 29px 6px; gap: 24px; border-color: #253340; }
.benefit { gap: 14px; }
.benefit-icon { display: grid; width: 38px; height: 38px; border-radius: 10px; background: #15212d; color: #bad8ef; }
.benefit-icon svg { width: 20px; height: 20px; }
.benefit strong { font-size: 14px; color: #dce6ee; font-weight: 500; }
.benefit p { font-size: 12px; line-height: 1.8; color: #9aadc0; margin-top: 3px; }
.catalog { padding-top: 42px; }
.section-heading { gap: 24px; }
.section-heading h2 { font-size: 26px; font-weight: 550; letter-spacing: -.7px; }
.section-heading h2 span { font-size: 11px; letter-spacing: 1.4px; color: #95aabe; margin-left: 16px; }
.search { min-width: 280px; padding: 11px 14px; border-color: #324252; border-radius: 8px; gap: 11px; background: #111923; }
.search input { font-size: 14px; color: #e3edf5; }
.search input::placeholder { color: #8e9fb2; }
.search svg { width: 19px; height: 19px; color: #a0b7cc; }
.search kbd { font-size: 12px; color: #a1b5c8; border-color: #3d5064; padding: 1px 5px; }
.filters-row { margin: 24px 0 26px; gap: 18px; }
.category-tabs { gap: 8px; min-width: 0; }
.category-tab { font-size: 14px; color: #afbed0; padding: 9px 16px; border-radius: 7px; }
.category-tab:hover { background: #1b2c3d; color: #d6edff; }
.category-tab.active { background: #c0e0f8; color: #12283b; font-weight: 600; }
.catalog-meta { font-size: 12px; color: #9aaec2; gap: 16px; }
.sort-select { font-size: 12px; padding: 8px; color: #bfd0de; border-color: #33475a; background: #101923; }
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.product-card { border-color: #2b3947; border-radius: 13px; background: #111820; }
.product-card:hover { border-color: #6386a5; box-shadow: 0 20px 38px #0003; }
.product-card-main { padding: 28px 27px 24px; }
.product-top { margin-bottom: 23px; gap: 12px; }
.product-icon { width: 68px; height: 68px; border-radius: 15px; background: #18293b; border-color: #3e5770; flex-shrink: 0; }
.product-icon img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.65) hue-rotate(162deg) saturate(1.5) brightness(.86) contrast(1.08); }
.badge, .badge.warm { font-size: 12px; letter-spacing: .1px; padding: 4px 9px; color: #c7e1f5; background: #243b50; border: 1px solid #3a546c; }
.product-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -.4px; line-height: 1.5; overflow-wrap: anywhere; }
.product-subtitle { font-size: 13px; color: #a1b5c8; line-height: 1.8; margin-top: 5px; min-height: 23px; }
.product-card .product-desc { max-width: none; font-size: 14px; color: #b0bece; line-height: 1.9; margin-top: 15px; min-height: 54px; }
.product-tags { margin-top: 20px; gap: 6px; }
.product-tag { font-size: 12px; color: #aabfd1; padding: 3px 8px; background: #17232f; border-color: #2e4255; border-radius: 4px; }
.product-bottom { padding: 21px 27px; gap: 12px; background: #121d28; border-top-color: #2a3b4d; }
.price { font-size: 30px; color: #e0f1ff; line-height: 1.2; letter-spacing: -.8px; }
.price .currency { font-size: 15px; vertical-align: 4px; }
.price small { font-size: 12px; color: #a2b7ca; margin-left: 7px; }
.price.inquiry { font-size: 20px; }
.buy-button { font-size: 13px; font-weight: 500; padding: 10px 13px; gap: 9px; color: #d3eaff; background: #233b50; border-color: #496880; border-radius: 7px; }
.buy-button svg { width: 15px; height: 15px; }
.catalog-note { font-size: 12px; color: #98acc0; line-height: 1.9; margin-top: 28px; }
.no-results { color: #a6bbcc; font-size: 15px; }
.no-results h3 { font-size: 23px; color: #e1f0fc; }
.button { font-size: 15px; padding: 12px 21px; border-radius: 8px; font-weight: 600; }
.button svg { width: 18px; height: 18px; }
.button.secondary { border-color: #456079; background: #1b2c3d; color: #d9edfb; }
.text-link { font-size: 14px; color: #bfd2e2; }
.consult-banner { margin-top: 48px; padding: 33px 36px; border-radius: 14px; border-color: #324c64; background: radial-gradient(ellipse at 15% 50%, #35516b1c, transparent 65%), linear-gradient(110deg, #172838, #111a24); }
.eyebrow { font-size: 12px; color: #a4bfd6; letter-spacing: 2px; }
.consult-banner h3 { font-size: 23px; color: #e0edf7; line-height: 1.5; margin-top: 10px; font-weight: 500; }
.consult-banner p { font-size: 14px; color: #a6bcd0; line-height: 1.9; margin-top: 9px; }
.site-footer { max-width: 1240px; margin: 46px auto 0; padding: 29px 0 34px; color: #96abc0; font-size: 12px; line-height: 1.9; border-top-color: #293a49; gap: 18px; }
.footer-brand { font-size: 14px; color: #c0d5e5; letter-spacing: 1px; }
.footer-copyright { font-size: 12px; color: #8fa5ba; margin-left: 15px; }
.footer-links { gap: 24px; font-size: 13px; }
.site-footer > span { font-size: 12px; }
.page-intro { margin: 15px 0 38px; }
.page-intro h1 { font-size: 42px; line-height: 1.45; font-weight: 550; margin-top: 18px; letter-spacing: -1.3px; }
.page-intro > p { font-size: 16px; color: #a9bed1; line-height: 2; max-width: 730px; }
.back-link { font-size: 14px; color: #adc9df; gap: 10px; margin-bottom: 28px; }
.back-link svg { width: 18px; height: 18px; }
.detail-layout { gap: 28px; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); }
.detail-main, .order-panel { border-color: #304458; background: #111a24; border-radius: 14px; }
.detail-identity { padding: 34px; gap: 21px; background: radial-gradient(ellipse at 80% 0, #77b9ee14, transparent 70%); }
.detail-identity .product-icon { width: 80px; height: 80px; border-radius: 19px; }
.detail-identity .product-icon img { width: 100%; height: 100%; }
.detail-identity h1 { font-size: 30px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.detail-identity p { font-size: 14px; color: #aac0d5; line-height: 1.8; }
.detail-content { padding: 0 34px 34px; }
.detail-content > p { font-size: 15px; line-height: 2.1; color: #bacbdc; padding-bottom: 29px; }
.detail-content h2 { font-size: 18px; font-weight: 550; color: #d8e9f6; margin-bottom: 18px; }
.feature-list { gap: 15px; }
.feature-list li { font-size: 14px; line-height: 1.9; color: #b4c9dc; gap: 11px; }
.feature-list svg { width: 18px; height: 18px; margin-top: 4px; }
.detail-callout { margin-top: 30px; padding: 20px; font-size: 14px; line-height: 2; color: #b2cce1; background: #1a2b3c; border-left-color: #a2d7ff; border-radius: 0 8px 8px 0; }
.detail-section { margin-top: 27px; padding-top: 27px; border-top-color: #2d4256; }
.detail-section p { font-size: 15px; color: #b0c5d9; line-height: 2.1; overflow-wrap: anywhere; }
.order-panel { padding: 30px; top: 118px; }
.panel-label { font-size: 12px; letter-spacing: 1.8px; color: #9abbd6; margin-bottom: 12px; }
.order-panel h2 { font-size: 23px; line-height: 1.5; font-weight: 550; margin-bottom: 25px; }
.plan-list { gap: 12px; margin-bottom: 22px; }
.plan-button { padding: 17px; font-size: 15px; color: #b6cade; background: #14212d; border-color: #3a5268; border-radius: 9px; }
.plan-button.active { color: #e5f4ff; background: #233c52; border-color: #a4d4f8; }
.plan-button b { font-size: 18px; color: #d1ebff; }
.plan-button small { font-size: 12px; color: #a5bfd4; margin-top: 5px; }
.order-summary { padding: 20px 0 24px; border-bottom-color: #30475c; }
.order-summary > span { font-size: 14px; color: #a6c0d6; }
.wechat-block { padding-top: 25px; }
.wechat-heading { font-size: 17px; color: #e0f1ff; gap: 10px; }
.wechat-heading svg { width: 22px; height: 22px; }
.wechat-help { font-size: 14px; line-height: 2; color: #afc6da; margin-top: 10px; }
.qr-area { min-height: 210px; padding: 21px; margin-top: 21px; border-color: #354f67; background: #0e1721; border-radius: 10px; }
.qr-image { width: 190px; height: 190px; }
.qr-pending { color: #adc8df; max-width: 225px; }
.qr-pending p { font-size: 14px; }
.qr-frame { width: 76px; height: 76px; border-radius: 17px; color: #badffb; border-color: #52728e; }
.qr-frame svg { width: 35px; height: 35px; }
.wechat-id { font-size: 15px; padding: 14px 15px; margin-top: 18px; color: #e0f0fd; background: #21364a; border-radius: 7px; flex-wrap: wrap; overflow-wrap: anywhere; }
.wechat-id button { font-size: 13px; color: #c3e7ff; gap: 7px; }
.wechat-id button svg { width: 16px; height: 16px; }
.full-button { font-size: 14px; padding: 12px; margin-top: 15px; }
.order-note { font-size: 12px; color: #9eb8ce; line-height: 2; margin-top: 16px; }
.detail-flow { gap: 19px; margin-top: 35px; }
.flow-step { padding: 26px; border-radius: 11px; background: #111b25; border-color: #30465b; }
.step-number { color: #a1c3de; font-size: 14px; }
.flow-step h3 { font-size: 17px; font-weight: 550; margin: 14px 0 9px; }
.flow-step p { font-size: 14px; line-height: 2; color: #aec4d9; }
.related-title { font-size: 24px; font-weight: 550; margin: 42px 0 25px; }
.faq-list { max-width: 990px; gap: 15px; }
.faq-list details { padding: 0 27px; background: #131e29; border-color: #30465a; border-radius: 11px; }
.faq-list summary { font-size: 16px; color: #dfedf8; gap: 20px; padding: 22px 0; line-height: 1.8; }
.faq-list summary:after { font-size: 26px; color: #b2d6f2; flex-shrink: 0; }
.faq-list details p { font-size: 15px; color: #b1c8dc; line-height: 2.1; padding-bottom: 25px; overflow-wrap: anywhere; }
.guide-columns { gap: 23px; margin-top: 38px; }
.guide-article, .journal-card { padding: 31px; background: #121d28; border-color: #30475e; border-radius: 13px; }
.guide-article h2, .journal-card h2 { font-size: 23px; color: #e1effa; font-weight: 550; line-height: 1.6; margin: 14px 0; }
.guide-article p, .journal-card p { font-size: 15px; line-height: 2.1; color: #b1c8dc; overflow-wrap: anywhere; }
.journal-list { gap: 23px; max-width: 990px; }
.about-panel { max-width: 950px; padding: 43px; border-radius: 14px; border-color: #344d65; background: radial-gradient(ellipse at 80% 0, #a6dfff10, transparent 65%), #131f2a; }
.about-panel h2 { font-size: 28px; color: #edf6fc; }
.about-panel h2 span { font-size: 15px; color: #aec8dd; }
.about-panel p { font-size: 16px; line-height: 2.1; color: #b8ccde; max-width: 720px; }
.contact-page { grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; }
.contact-copy h2 { font-size: 29px; color: #deeffb; }
.contact-copy > p { max-width: 560px; font-size: 16px; line-height: 2.1; color: #b1c8db; }
.contact-points { gap: 24px; margin-top: 30px; }
.contact-point { gap: 16px; }
.contact-point strong { font-size: 16px; color: #d8ebfa; }
.contact-point p { font-size: 14px; line-height: 1.9; color: #aac2d7; margin-top: 6px; }
.contact-point svg { width: 22px; height: 22px; color: #b6daf4; margin-top: 5px; }
.nav-label, .side-categories p { color: #91a9be; font-size: 12px; }
.nav-item { font-size: 15px; color: #acbdce; padding: 13px 16px; }
.nav-item.active { color: #e0f1ff; background: #203549; border-color: #385670; }
.side-category { font-size: 14px; color: #a8bfd1; }
.side-category b { font-size: 12px; color: #91abc0; }
.side-contact strong { font-size: 14px; color: #d2e6f7; }
.side-contact p, .side-domain { font-size: 12px; color: #9cb4c8; }
.sidebar { border-right-color: #314253; background: #0e151d; }
#toast { font-size: 14px; line-height: 1.8; padding: 13px 21px; border-radius: 9px; }
.preview-bar { font-size: 13px; padding: 9px; }
.announcement-modal-label span { font-size: 12px; color: #a6bed2; letter-spacing: 1.5px; }
.announcement-modal-footnote { color: #a3bbd0; }

@media (min-width: 1570px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .topbar { padding: 0 32px; gap: 22px; }
  .top-nav { gap: 25px; margin-right: 12px; }
  .main { padding-left: 32px; padding-right: 32px; }
  .site-footer { margin-left: 32px; margin-right: 32px; }
  .intro-grid { grid-template-columns: .85fr 2.15fr; gap: 29px; }
  .intro-copy h1 { font-size: 55px; letter-spacing: -2.5px; }
  .featured-grid { gap: 13px; }
  .featured-card-top { padding-left: 18px; padding-right: 18px; }
  .featured-card-info { padding-left: 18px; padding-right: 18px; }
  .featured-card h2 { font-size: 31px; }
  .product-bottom { padding-left: 23px; padding-right: 23px; flex-wrap: wrap; }
}
@media (max-width: 1080px) {
  .topbar { gap: 20px; }
  .top-nav { gap: 23px; margin-right: 0; }
  .topbar .brand-caption { display: none; }
  .intro-grid { grid-template-columns: 1fr; gap: 34px; }
  .intro-copy { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0 35px; }
  .intro-copy .eyebrow { grid-column: 1 / -1; }
  .intro-copy h1 { grid-column: 1; grid-row: 2 / 4; font-size: 55px; margin: 22px 0 0; }
  .intro-description { grid-column: 2; grid-row: 2; max-width: 410px; margin-top: 23px; }
  .intro-cta { grid-column: 2; grid-row: 3; margin-top: 19px; }
  .intro-footnote { display: none; }
  .featured-card { min-height: 530px; }
  .featured-card h2 { font-size: 34px; }
  .featured-card-info { padding-left: 23px; padding-right: 23px; }
  .featured-card-top { padding-left: 23px; padding-right: 23px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card-main { padding: 27px; }
  .product-bottom { padding: 22px 27px; }
  .buy-button { width: auto; justify-content: center; }
  .detail-layout, .contact-page { grid-template-columns: 1fr; }
  .order-panel { position: static; }
  .contact-page .order-panel { max-width: 540px; }
  .benefits { gap: 17px; }
  .benefit-icon { display: none; }
  .benefit + .benefit { padding-left: 20px; }
}
@media (max-width: 900px) {
  .topbar { gap: 15px; padding-left: 25px; padding-right: 25px; }
  .top-nav { gap: 18px; }
  .topbar .brand-name { font-size: 17px; }
  .contact-top { font-size: 13px; padding: 10px 12px; }
  .topbar .brand-mark { width: 36px; height: 36px; }
  .topbar-right { gap: 13px; }
  .main { padding-left: 25px; padding-right: 25px; }
  .featured-grid { gap: 13px; }
  .featured-card-top { padding-left: 17px; padding-right: 17px; }
  .featured-card-info { padding-left: 17px; padding-right: 17px; }
  .featured-card h2 { font-size: 31px; }
  .featured-price { font-size: 30px; }
  .featured-price small { font-size: 12px; margin-left: 5px; }
  .featured-feature { font-size: 12px; }
  .featured-card, .featured-card.tone-0, .featured-card.tone-1, .featured-card.tone-2 { min-height: 515px; }
  .site-footer { margin-left: 25px; margin-right: 25px; flex-wrap: wrap; }
  .section-heading { align-items: flex-start; }
  .section-heading h2 span { display: block; margin: 5px 0 0; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 94px; }
  body { font-size: 15px; }
  .topbar { height: 78px; padding: 0 21px; gap: 10px; }
  .topbar > .brand { gap: 10px; }
  .topbar > .brand .brand-mark { width: 37px; height: 37px; border-radius: 10px; font-size: 24px; }
  .topbar .brand-name { font-size: 17px; letter-spacing: 1px; }
  .topbar .brand-caption, .top-nav { display: none; }
  .topbar-right { gap: 8px; }
  .contact-top { font-size: 13px; padding: 9px 11px; gap: 7px; border-radius: 7px; }
  .contact-top svg { width: 15px; height: 15px; }
  .contact-top svg:last-child { display: none; }
  .menu-toggle { padding: 6px; }
  .menu-toggle svg { width: 24px; height: 24px; }
  .main { padding: 24px 21px 0; }
  .announcement { font-size: 13px; gap: 10px; padding: 12px 14px; margin-bottom: 31px; align-items: flex-start; flex-wrap: wrap; }
  .announcement > svg { width: 17px; height: 17px; margin-top: 4px; }
  .announcement-text { flex: 1; flex-basis: calc(100% - 30px); }
  .announcement a { font-size: 12px; margin-left: 27px; }
  .intro-grid { gap: 31px; }
  .intro-copy { display: block; }
  .intro-copy .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
  .intro-copy h1 { font-size: 44px; line-height: 1.32; letter-spacing: -1.7px; margin: 21px 0 20px; }
  .intro-description { font-size: 15px; line-height: 2; max-width: 440px; margin-top: 0; }
  .intro-cta { font-size: 15px; margin-top: 24px; gap: 13px; }
  .intro-cta .circle-arrow { width: 41px; height: 41px; }
  .featured-grid {
    grid-template-columns: repeat(3, 264px); gap: 15px; width: 100%; max-width: 100%;
    overflow-x: auto; padding: 0 0 15px; scroll-snap-type: x mandatory;
    scroll-padding-inline: 0; scrollbar-width: thin; scrollbar-color: #6388a9 #172332;
    overscroll-behavior-x: contain;
  }
  .featured-card, .featured-card.tone-0, .featured-card.tone-1, .featured-card.tone-2 { min-height: 522px; border-radius: 16px; scroll-snap-align: start; }
  .featured-card:hover { transform: none; }
  .featured-card-top { font-size: 11px; padding: 22px 23px 0; letter-spacing: .8px; }
  .featured-index { display: inline; font-size: 11px; }
  .featured-art { height: 200px; margin-top: 8px; }
  .featured-card-info { padding: 0 23px 23px; }
  .featured-kicker { font-size: 12px; }
  .featured-card h2 { font-size: 34px; margin: 9px 0 15px; letter-spacing: -.9px; }
  .featured-price { font-size: 32px; letter-spacing: -.7px; }
  .featured-price .currency { font-size: 15px; vertical-align: 5px; margin-right: 4px; }
  .featured-price small { font-size: 12px; margin-left: 7px; }
  .featured-rule { margin: 20px 0 17px; }
  .featured-feature { font-size: 13px; line-height: 1.7; margin-top: 8px; gap: 8px; }
  .featured-feature svg { width: 15px; height: 15px; }
  .featured-link { font-size: 12px; margin-top: 23px; justify-content: space-between; }
  .featured-link > span:first-child { display: inline; }
  .featured-link .circle-arrow { width: 35px; height: 35px; }
  .featured-link .circle-arrow svg { width: 16px; height: 16px; }
  .benefits { padding: 23px 0; margin-top: 27px; gap: 12px; align-items: start; }
  .benefit { display: block; }
  .benefit + .benefit { padding-left: 12px; }
  .benefit-icon { display: none; }
  .benefit strong { font-size: 13px; color: #dae7f1; line-height: 1.8; }
  .benefit p { font-size: 11px; line-height: 1.9; max-width: 140px; color: #a5bacd; margin-top: 5px; }
  .catalog { padding-top: 32px; }
  .section-heading { gap: 18px; flex-direction: column; }
  .section-heading h2 { font-size: 24px; }
  .section-heading h2 span { display: inline; font-size: 11px; margin-left: 11px; letter-spacing: 1px; }
  .search { min-width: 0; width: 100%; padding: 12px 14px; }
  .search input { font-size: 14px; }
  .filters-row { margin-top: 21px; margin-bottom: 23px; align-items: stretch; flex-direction: column; gap: 12px; }
  .category-tabs { width: 100%; }
  .category-tab { font-size: 14px; padding: 9px 15px; }
  .catalog-meta { font-size: 12px; margin-top: 0; justify-content: space-between; width: 100%; }
  .sort-select { font-size: 12px; padding: 7px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .product-card-main { padding: 24px 21px 23px; }
  .product-top { margin-bottom: 21px; }
  .product-icon { width: 64px; height: 64px; border-radius: 15px; }
  .badge, .badge.warm { font-size: 11px; padding: 4px 7px; }
  .product-card h3 { font-size: 21px; }
  .product-subtitle { font-size: 13px; }
  .product-card .product-desc { font-size: 14px; min-height: 54px; -webkit-line-clamp: 3; }
  .product-tag { font-size: 11px; padding: 3px 7px; }
  .product-tags { margin-top: 17px; }
  .product-bottom { padding: 21px; gap: 15px; }
  .price { font-size: 29px; }
  .price small { font-size: 12px; }
  .buy-button { font-size: 13px; padding: 10px 13px; width: 100%; justify-content: space-between; }
  .consult-banner { padding: 27px; margin-top: 35px; gap: 23px; align-items: flex-start; flex-direction: column; }
  .consult-banner h3 { font-size: 21px; line-height: 1.65; }
  .consult-banner p { font-size: 14px; }
  .eyebrow { font-size: 11px; letter-spacing: 1.7px; }
  .button { font-size: 14px; padding: 12px 18px; }
  .site-footer { margin: 35px 21px 0; padding: 27px 0 31px; gap: 18px; flex-wrap: wrap; justify-content: space-between; font-size: 12px; }
  .site-footer > div:first-child { width: 100%; }
  .footer-brand { font-size: 14px; }
  .footer-copyright { font-size: 12px; margin-left: 12px; }
  .footer-links { margin-left: 0; gap: 23px; font-size: 13px; }
  .site-footer > span { font-size: 11px; width: 100%; }
  .page-intro { margin-top: 9px; margin-bottom: 30px; }
  .page-intro h1 { font-size: 33px; letter-spacing: -1px; margin-top: 16px; }
  .page-intro > p { font-size: 15px; margin-top: 13px; }
  .back-link { font-size: 14px; margin-bottom: 23px; }
  .detail-layout { grid-template-columns: 1fr; gap: 23px; }
  .detail-identity { padding: 27px 23px; gap: 16px; align-items: flex-start; }
  .detail-identity .product-icon { width: 64px; height: 64px; border-radius: 15px; }
  .detail-identity h1 { font-size: 25px; line-height: 1.4; }
  .detail-identity p { font-size: 13px; margin-top: 9px; }
  .detail-content { padding: 0 23px 27px; }
  .detail-content > p, .detail-section p { font-size: 15px; }
  .detail-content h2 { font-size: 18px; }
  .feature-list li { font-size: 14px; }
  .detail-callout { font-size: 14px; padding: 18px; }
  .order-panel { padding: 25px 23px; }
  .order-panel h2 { font-size: 23px; }
  .plan-button { font-size: 14px; padding: 16px 14px; }
  .plan-button b { font-size: 17px; }
  .plan-button small { font-size: 12px; }
  .panel-label { font-size: 12px; }
  .wechat-heading { font-size: 17px; }
  .wechat-help { font-size: 14px; }
  .wechat-id { font-size: 15px; }
  .wechat-id button { font-size: 13px; }
  .full-button { font-size: 14px; }
  .order-note { font-size: 12px; }
  .detail-flow { grid-template-columns: 1fr; gap: 14px; }
  .flow-step { padding: 23px; display: grid; grid-template-columns: 32px 1fr; column-gap: 15px; }
  .step-number { font-size: 14px; grid-row: 1 / 3; margin-top: 3px; }
  .flow-step h3 { font-size: 17px; margin: 0 0 7px; }
  .flow-step p { font-size: 14px; }
  .related-title { font-size: 23px; margin: 36px 0 23px; }
  .faq-list details { padding: 0 22px; }
  .faq-list summary { font-size: 16px; padding: 21px 0; }
  .faq-list details p { font-size: 14px; line-height: 2.1; padding-bottom: 23px; }
  .guide-columns { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
  .guide-article, .journal-card { padding: 26px 23px; }
  .guide-article h2, .journal-card h2 { font-size: 22px; }
  .guide-article p, .journal-card p { font-size: 15px; }
  .about-panel { padding: 30px 25px; }
  .about-panel h2 { font-size: 26px; }
  .about-panel h2 span { display: block; font-size: 14px; margin-top: 9px; }
  .about-panel p { font-size: 15px; }
  .contact-page { grid-template-columns: 1fr; gap: 27px; }
  .contact-copy { padding-top: 0; }
  .contact-copy h2 { font-size: 27px; }
  .contact-copy > p { font-size: 15px; }
  .contact-point strong { font-size: 16px; }
  .contact-point p { font-size: 14px; }
  .sidebar { width: 275px; padding: 28px 22px; }
  .sidebar .brand-name { font-size: 19px; }
  .sidebar .brand-caption { font-size: 11px; }
  .nav-label { font-size: 12px; margin-top: 34px; }
  .nav-item { font-size: 15px; padding: 13px 16px; }
  #toast { font-size: 14px; max-width: calc(100vw - 36px); }
  .preview-bar { font-size: 12px; line-height: 1.8; }
  .announcement-modal-label span { font-size: 11px; }
}
@media (max-width: 520px) {
  .contact-top svg { display: none; }
  .topbar > .brand { gap: 9px; }
  .topbar > .brand .brand-mark { width: 36px; height: 36px; }
  .announcement-trigger { width: 34px; height: 34px; border-radius: 8px; }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; gap: 18px; }
  .product-card-main { padding: 25px; }
  .product-card .product-desc { -webkit-line-clamp: 3; min-height: 0; }
  .product-card h3 { font-size: 23px; }
  .product-top { margin-bottom: 20px; }
  .product-icon { width: 72px; height: 72px; border-radius: 16px; }
  .product-subtitle { font-size: 14px; }
  .product-bottom { padding: 22px 25px; flex-wrap: nowrap; }
  .buy-button { width: auto; justify-content: center; }
  .product-tags { gap: 7px; }
  .product-tag { font-size: 12px; }
  .section-heading h2 span { display: block; margin: 5px 0 0; }
}
@media (max-width: 370px) {
  .main { padding-left: 17px; padding-right: 17px; }
  .topbar { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .topbar .brand-name, .topbar > .brand .brand-name { font-size: 15px; }
  .topbar > .brand .brand-mark, .topbar .brand-logo { width: 31px; height: 31px; }
  .topbar > .brand { gap: 7px; }
  .topbar-right { gap: 6px; }
  .contact-top { font-size: 12px; padding: 8px; }
  .menu-toggle { padding: 4px; }
  .menu-toggle svg { width: 22px; height: 22px; }
  .intro-copy h1 { font-size: 40px; letter-spacing: -1.5px; }
  .featured-grid { grid-template-columns: repeat(3, 258px); gap: 13px; }
  .featured-card-top { padding-left: 21px; padding-right: 21px; }
  .featured-card-info { padding-left: 21px; padding-right: 21px; }
  .featured-card h2 { font-size: 33px; }
  .benefit strong { font-size: 12px; }
  .benefit p { font-size: 11px; }
  .benefit + .benefit { padding-left: 9px; }
  .benefits { gap: 9px; }
  .product-card-main { padding: 23px; }
  .product-bottom { padding: 21px 23px; flex-wrap: wrap; }
  .buy-button { font-size: 13px; }
  .footer-copyright { display: block; margin-left: 0; margin-top: 4px; }
  .site-footer { margin-left: 17px; margin-right: 17px; }
  .detail-identity { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { transition: none !important; animation: none !important; }
}
/* Keep configured secondary prices and long-form product copy readable. */
.price .price-secondary,.featured-price .price-secondary{display:block;font-size:12px;line-height:1.7;font-weight:400;letter-spacing:0;margin:6px 0 0;color:#b3cadf}
.detail-content>p{white-space:pre-line;overflow-wrap:anywhere}
.plan-button b{text-align:right;overflow-wrap:anywhere}
/* Uploaded custom artwork retains the colors chosen by the owner. */
.product-icon img.original-art,.featured-card .featured-art img.original-art{filter:none;opacity:1;mix-blend-mode:normal}


/* Keep the homepage domain together, with a proportionate title size. */
.intro-copy h1 > span{
  display:inline-block;
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
  font-size:clamp(28px,2.85vw,39px);
  letter-spacing:-.035em;
  line-height:1.4;
}
@media(max-width:760px){
  .intro-copy h1 > span{font-size:clamp(29px,8.4vw,38px)}
}

/* Keep six navigation entries comfortable on tablet widths. */
@media(min-width:761px) and (max-width:940px){
  .top-nav{display:none}
  .topbar-right{margin-left:auto}
  .menu-toggle{display:grid;place-items:center;background:transparent;color:#d7e8fa;padding:6px}
  .menu-toggle svg{width:24px;height:24px}
  .sidebar{display:flex;transform:translateX(-100%);transition:transform .2s;width:275px;padding:28px 22px;box-shadow:20px 0 80px #0008}
  .sidebar.mobile-open{transform:translateX(0)}
  .menu-backdrop{position:fixed;z-index:29;inset:0;background:#0008;backdrop-filter:blur(3px)}
}