:root {
  --ink: #e8f7ff;
  --ink-soft: #8ea6b8;
  --paper: #050713;
  --paper-2: #090d1d;
  --white: #0c1225;
  --lime: #55f6ff;
  --lime-deep: #22d3ee;
  --line: rgba(111, 218, 255, .16);
  --shadow: 0 28px 90px rgba(0, 0, 0, .5);
  --cyan: #55f6ff;
  --violet: #9b7bff;
  --signal: #b8ff61;
  --danger: #ff5f91;
}

html { color-scheme: dark; }
#top, section[id] { scroll-margin-top: 90px; }
body {
  background:
    radial-gradient(circle at 78% 8%, rgba(71, 99, 255, .16), transparent 32rem),
    radial-gradient(circle at 12% 28%, rgba(0, 229, 255, .1), transparent 26rem),
    #050713;
  color: var(--ink);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(85, 246, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 246, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 82%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.025) 4px);
  mix-blend-mode: overlay;
}
::selection { background: rgba(85,246,255,.28); color: white; }

.ambient-one {
  width: 340px;
  height: 340px;
  right: 0;
  background: rgba(75, 110, 255, .18);
  box-shadow: 0 0 120px rgba(75, 110, 255, .2);
}
.ambient-two { left: 0; border-color: rgba(85,246,255,.12); }

.site-header {
  position: sticky;
  top: 10px;
  height: 68px;
  padding: 0 20px;
  border: 1px solid rgba(118, 209, 255, .16);
  border-radius: 16px;
  background: rgba(5, 8, 20, .72);
  box-shadow: 0 16px 60px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(20px) saturate(130%);
}
.brand { color: #effbff; letter-spacing: -.5px; }
.brand-accent { color: var(--cyan); text-shadow: 0 0 20px rgba(85,246,255,.55); }
.brand-mark {
  background: linear-gradient(145deg, #111b35, #050812);
  border: 1px solid rgba(85,246,255,.45);
  box-shadow: 4px 4px 0 rgba(155,123,255,.85), 0 0 24px rgba(85,246,255,.2);
}
.brand-mark i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.desktop-nav { color: #71889c; }
.desktop-nav a:hover, .desktop-nav a.active { color: #e8f9ff; text-shadow: 0 0 14px rgba(85,246,255,.4); }
.desktop-nav a.active::after { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.header-order-link {
  color: #d8f7ff;
  border-color: rgba(85,246,255,.25);
  background: rgba(85,246,255,.06);
}
.pulse-dot { background: var(--signal); box-shadow: 0 0 0 4px rgba(184,255,97,.1), 0 0 14px var(--signal); }

.hero { min-height: 650px; padding-top: 88px; }
.eyebrow { color: #7d9bad; }
.eyebrow span {
  color: #021014;
  background: var(--cyan);
  box-shadow: 0 0 24px rgba(85,246,255,.32);
}
.hero h1 {
  color: #f0fbff;
  text-shadow: 0 0 45px rgba(70, 128, 255, .12);
}
.hero h1 em {
  color: transparent;
  background: linear-gradient(100deg, var(--cyan), #8ca9ff 52%, #bd7cff);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
.hero h1 em::after {
  height: 2px;
  bottom: -4px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), transparent);
  box-shadow: 0 0 15px var(--cyan);
}
.hero-copy > p { color: #829aaa; }
.button-primary {
  color: #031015;
  background: linear-gradient(105deg, var(--cyan), #a3f7ff);
  box-shadow: 5px 6px 0 rgba(142,102,255,.88), 0 0 30px rgba(85,246,255,.12);
}
.button-primary:hover { box-shadow: 2px 3px 0 rgba(142,102,255,.88), 0 0 34px rgba(85,246,255,.25); }
.text-link { color: #dff9ff; border-color: rgba(85,246,255,.65); }
.hero-notes { color: #7c96a7; }
.hero-notes b { background: rgba(85,246,255,.1); color: var(--cyan); border: 1px solid rgba(85,246,255,.22); }

.orbit { border-color: rgba(85,246,255,.17); box-shadow: inset 0 0 50px rgba(85,246,255,.02); }
.orbit-two { border-color: rgba(155,123,255,.23); }
.card-back {
  color: #040b17;
  background: linear-gradient(135deg, var(--cyan), #9d82ff 78%);
  box-shadow: 0 24px 70px rgba(88,88,255,.25), 0 0 50px rgba(85,246,255,.12);
}
.card-main {
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), transparent 35%),
    linear-gradient(145deg, #121c38, #070b18 70%);
  border: 1px solid rgba(109,232,255,.34);
  box-shadow: 0 40px 85px rgba(0,0,0,.5), 0 0 35px rgba(85,246,255,.12), inset 0 0 45px rgba(90,130,255,.06);
}
.card-main::before { border-color: rgba(85,246,255,.24); }
.card-chip { background: linear-gradient(135deg, #8df9ff, #8c74ff); box-shadow: 0 0 20px rgba(85,246,255,.28); }
.card-logo i, .card-foot b { color: var(--cyan); background-color: var(--cyan); }
.float-pill {
  color: #eafaff;
  background: rgba(8,14,30,.82);
  border-color: rgba(85,246,255,.2);
  box-shadow: 0 18px 45px rgba(0,0,0,.32), 0 0 20px rgba(85,246,255,.08);
}
.float-pill > span, .float-speed > span { background: rgba(85,246,255,.12); color: var(--cyan); }
.float-pill small { color: #718ca0; }

.metrics {
  background: linear-gradient(120deg, rgba(14,22,45,.82), rgba(8,13,29,.8));
  border-color: rgba(85,246,255,.16);
  box-shadow: 0 20px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(18px);
}
.metrics > div:not(:last-child)::after { background: linear-gradient(transparent, rgba(85,246,255,.28), transparent); }
.metrics strong { color: #eafaff; text-shadow: 0 0 20px rgba(85,246,255,.15); }
.metrics strong small { color: var(--cyan); }
.metrics span { color: #71889a; }
.agent-banner { position:relative; overflow:hidden; border-color:rgba(160,255,80,.4); background:linear-gradient(105deg,rgba(12,27,32,.96),rgba(19,47,43,.96)); box-shadow:0 18px 60px rgba(0,0,0,.25),inset 0 0 30px rgba(160,255,80,.035); }.agent-banner::before { content:"代理合作"; position:absolute; right:130px; color:rgba(160,255,80,.035); font:800 56px/1 var(--display); letter-spacing:-2px; pointer-events:none; }.agent-offer b,.agent-banner a,.agent-signal { color:var(--signal); }.agent-signal span { background:var(--signal); box-shadow:0 0 16px var(--signal); }.agent-banner a { border-color:rgba(160,255,80,.35); background:rgba(160,255,80,.04); }.agent-banner a:hover { background:var(--signal); color:#06110f; }

.products-section { position: relative; }
.products-section::before {
  content: "CATALOG // 08";
  position: absolute;
  right: 0;
  top: 112px;
  color: rgba(85,246,255,.06);
  font: 700 clamp(50px,8vw,108px)/1 monospace;
  letter-spacing: -5px;
  pointer-events: none;
}
.section-kicker { color: var(--cyan); text-shadow: 0 0 15px rgba(85,246,255,.4); }
.section-heading h2, .query-copy h2 { color: #effaff; }
.section-heading > p { color: #667f91; }

/* Homepage order notice */
.purchase-notice { padding: 58px 0 10px; }
.notice-panel {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(85, 246, 255, .18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(85, 246, 255, .06), transparent 42%),
    rgba(7, 18, 30, .86);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .03);
}
.notice-panel::after {
  content: "NOTICE / 01";
  position: absolute;
  top: 20px;
  right: 26px;
  color: rgba(85, 246, 255, .08);
  font: 800 42px/1 var(--mono);
  letter-spacing: -2px;
  pointer-events: none;
}
.notice-header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.notice-header h2 { margin: 8px 0 10px; color: #effaff; font-size: clamp(28px, 3.3vw, 42px); letter-spacing: -1.8px; }
.notice-header p { max-width: 710px; margin: 0; color: #8aa1b1; font-size: 14px; line-height: 1.8; }
.support-chip {
  flex: 0 0 auto;
  display: grid;
  gap: 5px;
  min-width: 210px;
  padding: 14px 17px;
  border: 1px solid rgba(191, 255, 81, .2);
  border-radius: 10px;
  background: rgba(191, 255, 81, .06);
}
.support-chip span { color: #728897; font: 700 10px/1.2 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; }
.support-chip strong { color: var(--signal); font-size: 14px; letter-spacing: .2px; }
.notice-agreement { margin: 29px 0 12px; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.notice-rules { counter-reset: notice-rule; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.notice-rules li {
  counter-increment: notice-rule;
  position: relative;
  min-height: 82px;
  padding: 18px 18px 17px 56px;
  border: 1px solid rgba(122, 157, 180, .12);
  border-radius: 10px;
  background: rgba(3, 12, 22, .55);
  color: #8ca1af;
  font-size: 12px;
  line-height: 1.75;
}
.notice-rules li::before {
  content: "0" counter(notice-rule);
  position: absolute;
  top: 18px;
  left: 17px;
  color: var(--cyan);
  font: 800 13px/1.2 var(--mono);
}
.notice-rules li span { display: block; margin-bottom: 4px; color: #dcebf2; font-size: 13px; font-weight: 750; }
.notice-bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(191, 255, 81, .18);
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(191, 255, 81, .09), rgba(85, 246, 255, .035));
}
.notice-bonus small { display: block; margin-bottom: 6px; color: var(--signal); font: 800 9px/1 var(--mono); letter-spacing: 1.8px; }
.notice-bonus strong { display: block; color: #f0f9fc; font-size: 16px; }
.notice-bonus p { margin: 6px 0 0; color: #849aa8; font-size: 12px; line-height: 1.6; }
.notice-bonus a {
  flex: 0 0 auto;
  padding: 13px 17px;
  border-radius: 8px;
  background: var(--cyan);
  color: #06121b;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 0 26px rgba(85, 246, 255, .17);
}
.notice-bonus a span { margin-left: 7px; }
.product-toolbar { border-color: rgba(85,246,255,.14); }
.category-tab { color: #6f8799; }
.category-tab:hover { color: #bdd9e6; }
.category-tab.active { color: #eaffff; text-shadow: 0 0 12px rgba(85,246,255,.25); }
.category-tab.active::after { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(85,246,255,.5); }
.category-tab span { color: var(--cyan); background: rgba(85,246,255,.09); border: 1px solid rgba(85,246,255,.16); }
.search-box {
  color: #dffaff;
  background: rgba(10,16,34,.72);
  border-color: rgba(85,246,255,.18);
}
.search-box:focus-within { border-color: rgba(85,246,255,.5); box-shadow: 0 0 0 3px rgba(85,246,255,.06), 0 0 22px rgba(85,246,255,.08); }
.search-box > span, .search-box > span::after { border-color: var(--cyan); background-color: var(--cyan); }
.search-box input { color: #e8f9ff; }
.search-box kbd { color: #6e8c9f; background: #0b1122; border-color: rgba(85,246,255,.15); }

.product-grid { gap: 20px; }
.product-card {
  position: relative;
  background: linear-gradient(155deg, rgba(18,27,52,.88), rgba(7,11,24,.96));
  border-color: rgba(100,199,255,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 18px 55px rgba(0,0,0,.16);
  overflow: hidden;
}
.product-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(140deg, transparent 25%, rgba(85,246,255,.65), rgba(155,123,255,.5), transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.product-card:hover {
  border-color: rgba(85,246,255,.3);
  box-shadow: 0 24px 65px rgba(0,0,0,.38), 0 0 28px rgba(85,246,255,.09);
}
.product-card:hover::before { opacity: 1; }
.product-cover {
  color: var(--cyan) !important;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--cover) 26%, transparent), transparent 38%),
    linear-gradient(145deg, #0e1730, #070b18) !important;
  border: 1px solid rgba(94,198,255,.13);
}
.product-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(85,246,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(85,246,255,.045) 1px,transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(circle at center,#000,transparent 80%);
}
.product-cover::after { border-color: var(--violet); opacity: .18; }
.product-cover .cover-glyph {
  color: #eaffff;
  border-color: rgba(85,246,255,.35);
  background: rgba(85,246,255,.035);
  box-shadow: 0 0 30px rgba(85,246,255,.1), inset 0 0 22px rgba(85,246,255,.05);
  text-shadow: 0 0 14px rgba(85,246,255,.55);
}
.product-badge {
  color: var(--cyan);
  background: rgba(5,10,22,.78);
  border: 1px solid rgba(85,246,255,.22);
}
.stock-badge { color: #aeeeff; background: rgba(5,10,22,.78); border: 1px solid rgba(85,246,255,.16); }
.product-category { color: #6f9aac; }
.product-card h3 { color: #ecfbff; }
.product-description { color: #718797; }
.product-meta { border-color: rgba(85,246,255,.12); }
.product-price { color: var(--cyan); text-shadow: 0 0 18px rgba(85,246,255,.18); }
.buy-button {
  color: var(--cyan);
  border-color: rgba(85,246,255,.45);
  background: rgba(85,246,255,.04);
  box-shadow: inset 0 0 15px rgba(85,246,255,.04);
}
.product-card:hover .buy-button { color: #020b0f; background: var(--cyan); box-shadow: 0 0 22px rgba(85,246,255,.3); }
.empty-state h3 { color: #eafaff; }

.how-it-works {
  background:
    linear-gradient(rgba(85,246,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(85,246,255,.025) 1px,transparent 1px),
    #070b18;
  background-size: 42px 42px;
  border-block: 1px solid rgba(85,246,255,.1);
}
.how-it-works::before { border-color: rgba(85,246,255,.1); box-shadow: 0 0 0 80px rgba(88,102,255,.025),0 0 0 160px rgba(85,246,255,.014); }
.step-card:not(:last-child)::after { color: rgba(85,246,255,.25); }
.step-number { color: rgba(85,246,255,.055); }
.step-icon { color: var(--cyan); border-color: rgba(85,246,255,.28); background: rgba(85,246,255,.035); box-shadow: inset 0 0 20px rgba(85,246,255,.03); }
.step-card h3 { color: #edfaff; }
.step-card p { color: #6e8798; }

.query-card {
  background:
    radial-gradient(circle at 8% 100%, rgba(85,246,255,.14), transparent 38%),
    linear-gradient(120deg, #101a38, #0b1025 58%, #15102c);
  border: 1px solid rgba(85,246,255,.24);
  box-shadow: 0 30px 80px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05);
}
.query-card::before { border-color: rgba(85,246,255,.14); box-shadow:0 0 0 38px rgba(85,246,255,.02); }
.query-copy .section-kicker { color: var(--cyan); }
.query-copy > p { color: #829bad; }
.recent-orders button { color: var(--cyan); border-color: rgba(85,246,255,.4); }
.query-form { background: rgba(4,8,20,.48); border-color: rgba(85,246,255,.15); }
.query-input-wrap { background: #080e20; box-shadow: inset 0 0 0 1px rgba(85,246,255,.12), 0 12px 35px rgba(0,0,0,.22); }
.query-input-wrap input { color: #e8fbff; background: transparent; }
.query-input-wrap .button, .button-dark { color: #041014; background: linear-gradient(100deg,var(--cyan),#a7f9ff); }
.query-form small { color: #7194a5; }
.query-form small span { border-color: #7194a5; }

.faq-list, .faq-list details { border-color: rgba(85,246,255,.13); }
.faq-list summary { color: #dff8ff; }
.faq-list summary span { color: var(--cyan); }
.faq-list details p { color: #708899; }
.faq-section .section-heading a { color: var(--cyan); border-color: rgba(85,246,255,.55); }

footer { color: #d8f3fa; background: #040611; border-top: 1px solid rgba(85,246,255,.12); }
.footer-inner > div:first-child p, .footer-links, .footer-meta { color: #667d8f; }
.footer-meta { border-color: rgba(85,246,255,.1); }

.modal-backdrop { background: rgba(1,4,12,.78); }
.modal-panel {
  background: linear-gradient(155deg,#0e162d,#070b18);
  border: 1px solid rgba(85,246,255,.22);
  box-shadow: 0 35px 100px rgba(0,0,0,.65), 0 0 45px rgba(85,246,255,.08);
}
.modal-close,.result-close { color: #9ac8d5; background: rgba(85,246,255,.07); border: 1px solid rgba(85,246,255,.14); }
.modal-kicker { color: var(--cyan); }
.order-product, .full-input, .payment-methods label { color: #eafaff; background: #0a1022; border-color: rgba(85,246,255,.14); }
.manual-payment-summary > div, .manual-merchant, .manual-qr-box { color:#eafaff; background:#0a1022; border-color:rgba(85,246,255,.18); }
.manual-review-status { color:#eafffb; background:rgba(32,196,156,.08); border-color:rgba(78,227,191,.35); }
.manual-review-status p, .manual-expiry { color:#91aaa7; }
.modal-product-icon { color: #031015 !important; background: var(--cyan) !important; }
.order-product small, .order-row small, .field-label span { color: #6d8394; }
.order-product b, .total-row > strong, .product-price { color: var(--cyan); }
.stepper { border-color: rgba(85,246,255,.16); }
.stepper button { color: var(--cyan); background: #0a1022; }
.full-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(85,246,255,.07); }
.payment-methods label:has(input:checked) { border-color: var(--cyan); box-shadow: inset 0 0 18px rgba(85,246,255,.04); }
.payment-methods label:has(input:checked) > i { border-color: var(--cyan); }
.agreement { color: #62798a; }
.success-icon { color: #031014; background: var(--cyan); box-shadow:0 0 0 9px rgba(85,246,255,.08),0 0 30px rgba(85,246,255,.22); }
.success-view > p { color: #748b9c; }
.success-order { background: #0a1022; }
.secret-box, .result-secret { color: #eaffff; background: rgba(85,246,255,.07); border-color: rgba(85,246,255,.4); }
.secret-box > span,.result-secret small { color: #7db8c8; }
.secret-box code,.result-secret code { color: var(--cyan); }
.secret-box button { color: #031014; background: var(--cyan); }
.result-table,.result-row { border-color: rgba(85,246,255,.12); }
.result-row span { color: #6f8798; }
.crypto-icon { color:#021410; background:#35e6af; box-shadow:0 0 0 8px rgba(53,230,175,.07),0 0 30px rgba(53,230,175,.18); }
.crypto-warning { color:#d8edf3; background:rgba(255,194,71,.07); border-color:rgba(255,194,71,.24); }
.crypto-summary > div,.crypto-network { color:#eafaff; background:#0a1022; border-color:rgba(85,246,255,.14); }
.crypto-summary small,.crypto-address-box small,.crypto-network span { color:#6f8798; }
.crypto-summary button { color:#c8f8ff; }.crypto-summary strong { color:#35e6af; }
.crypto-address-box { background:rgba(53,230,175,.05); border-color:rgba(53,230,175,.42); }
.crypto-address-box code { color:#83ffd7; }.crypto-address-box button { color:#031410; background:#35e6af; }
.crypto-back { color:#6f8798; }
.crypto-auto-status { background:rgba(53,230,175,.05); border-color:rgba(53,230,175,.25); }.crypto-auto-status b { color:#83ffd7; }.crypto-auto-status p,.crypto-auto-note { color:#6f8798; }.crypto-spinner { border-color:rgba(53,230,175,.14); border-top-color:#35e6af; }
.toast { background: #0b1226; border: 1px solid rgba(85,246,255,.2); }
.toast span { color: #041014; background: var(--cyan); }
.back-top { color: #031014; background: var(--cyan); box-shadow:0 0 28px rgba(85,246,255,.3); }

@media (max-width:700px) {
  .site-header { top: 7px; padding: 0 12px; background: rgba(5,8,20,.88); }
  .hero { padding-top: 62px; }
  .hero h1 { font-size: 48px; }
  .metrics > div:nth-child(-n+2) { border-color: rgba(85,246,255,.12); }
  .purchase-notice { padding-top: 34px; }
  .notice-panel { padding: 24px 16px 16px; }
  .notice-panel::after { font-size: 29px; right: 13px; }
  .notice-header, .notice-bonus { align-items: stretch; flex-direction: column; }
  .support-chip { min-width: 0; }
  .notice-rules { grid-template-columns: 1fr; }
  .notice-rules li { min-height: 0; }
  .notice-bonus a { text-align: center; }
  .products-section::before { content: "CATALOG"; top: 78px; font-size: 58px; }
  .category-tabs { border-color: rgba(85,246,255,.12); scrollbar-color: rgba(85,246,255,.25) transparent; }
  .product-card { background: linear-gradient(155deg,rgba(18,27,52,.94),rgba(7,11,24,.98)); }
  .step-card { border-color: rgba(85,246,255,.09); }
  .query-input-wrap input { background: #080e20; }
}