:root {
  color-scheme: dark;
  --bg: #050b12;
  --surface: rgba(10, 22, 34, .86);
  --surface2: rgba(14, 32, 49, .94);
  --line: rgba(160, 198, 232, .16);
  --text: #eef7ff;
  --muted: #9db3c6;
  --cyan: #33d6ff;
  --green: #27e2a4;
  --gold: #ffc85a;
  --red: #ff4d6d;
  --blue: #3478ff;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -4%, rgba(52,120,255,.28), transparent 32rem),
    radial-gradient(circle at 92% 0%, rgba(39,226,164,.18), transparent 30rem),
    linear-gradient(180deg, #050b12 0%, #071522 45%, #06101b 100%);
}
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
.mc-nav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(18px,4vw,58px);
  border-bottom: 1px solid var(--line);
  background: rgba(5,12,20,.86);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.brand span {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; color: #031019;
  background: linear-gradient(135deg,var(--cyan),var(--green));
}
.mc-nav nav { display: flex; gap: clamp(14px,2.6vw,30px); color: var(--muted); font-size: 14px; }
.mc-nav nav a { position: relative; padding: 8px 0; }
.mc-nav nav a.active { color: var(--text); }
.mc-nav nav i, .tab-red-dot, .hidden-dot {
  position: absolute; top: 1px; right: -11px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(255,77,109,.14);
}
.hidden-dot { display: none; }
.nav-actions { display: flex; gap: 10px; }
.btn {
  border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.solid {
  color: #04111b; font-weight: 850;
  background: linear-gradient(135deg,var(--cyan),var(--green));
  box-shadow: 0 16px 40px rgba(51,214,255,.18);
}
.btn.ghost {
  color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.btn.small { padding: 8px 12px; }
.page-shell { padding: 0 clamp(18px,4vw,66px) 72px; }
.product-hero {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr);
  gap: clamp(28px,5vw,72px); align-items: center; min-height: 650px;
  padding: clamp(52px,7vw,96px) 0;
}
.hero-content h1 {
  margin: 14px 0 18px; max-width: 850px;
  font-size: clamp(42px,6.2vw,82px); line-height: 1.02; letter-spacing: 0;
}
.hero-content p {
  max-width: 680px; color: #c8d7e6; font-size: clamp(16px,2vw,21px); line-height: 1.78;
}
.live-pill, .section-label {
  display: inline-flex; width: fit-content; border-radius: 999px;
  padding: 8px 12px; color: #06121d; font-size: 12px; font-weight: 900;
  background: linear-gradient(135deg,var(--cyan),var(--green));
}
.live-pill.yellow { background: var(--gold); }
.invite-box, .buy-card, .growth-card, .product-panel, .tab-card, .order-panel, .faq-panel, .feature-list, .org-preview, .modal-card {
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(13,31,48,.88), rgba(6,17,28,.94));
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.invite-box {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; width: fit-content;
  margin-top: 30px; padding: 14px; border-radius: 22px;
}
.invite-box small { color: var(--muted); display: block; }
.invite-box strong { font-size: 23px; letter-spacing: .06em; }
.growth-card { padding: 26px; border-radius: 32px; }
.ring {
  display: grid; place-items: center; width: min(310px,100%); aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--progress)*1%), rgba(255,255,255,.09) 0);
  position: relative;
}
.ring:after { content:""; position:absolute; inset: 16px; border-radius:50%; background:#091827; }
.ring div { position: relative; z-index: 1; display: grid; place-items:center; text-align:center; gap:8px; }
.ring strong { font-size: 54px; }
.ring span, .ring small, .level-line, .mini-stats span { color: var(--muted); }
.level-line { display:flex; align-items:center; gap:12px; margin:24px 0; }
.level-line b { flex:1; height:8px; border-radius:999px; background:linear-gradient(90deg,var(--cyan),rgba(255,255,255,.12));}
.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mini-stats div, .kpi-row article, .reward-grid article, .flow-step {
  border:1px solid var(--line); border-radius:18px; padding:16px; background:rgba(255,255,255,.045);
}
.mini-stats b, .kpi-row strong { display:block; font-size:28px; }
.product-grid { display:grid; grid-template-columns: 210px 1fr; gap:22px; }
.tab-card { border-radius:26px; padding:14px; height: fit-content; position: sticky; top: 86px; }
.tab {
  position: relative; display:block; width:100%; border:0; border-radius:16px; padding:14px 16px;
  margin-bottom:8px; color:var(--muted); background:transparent; text-align:left; cursor:pointer;
}
.tab.active { color:var(--text); background:rgba(51,214,255,.12); }
.product-panel { border-radius:30px; padding:24px; min-height: 540px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.panel-head h2 { margin:8px 0 0; font-size:32px; }
.kpi-row, .reward-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mission-stack, .points-ledger, .friend-table, .rule-list { display:grid; gap:14px; margin-top:18px; }
.mission {
  display:grid; grid-template-columns:48px 1fr auto; gap:16px; align-items:center;
  border:1px solid var(--line); border-radius:20px; padding:16px; background:rgba(255,255,255,.04);
}
.mission b { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#06121d; background:rgba(255,255,255,.3); }
.mission.done b { background:var(--green); }
.mission.current { border-color:rgba(255,200,90,.45); background:rgba(255,200,90,.08); }
.mission.current b { background:var(--gold); }
.mission span, .mission em, .ledger-row em, .rule-list p { color: var(--muted); font-style: normal; line-height:1.65; }
.ref-view { display:none; animation: fadeUp .28s ease both; }
.ref-view.active { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ledger-row, .friend-head, .friend-line {
  display:grid; grid-template-columns:1.4fr .9fr .8fr; gap:12px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.ledger-row em.pending, .friend-line .wait { color: var(--gold); }
.friend-head, .friend-line { grid-template-columns:1fr repeat(5,.8fr); }
.friend-head { color:var(--muted); font-size:13px; }
.friend-line i { font-style: normal; color: var(--muted); }
.friend-line .ok { color: var(--green); }
.reward-grid article.claimable { border-color:rgba(39,226,164,.38); background:rgba(39,226,164,.08); }
.rule-list p { border:1px solid var(--line); border-radius:18px; padding:16px; background:rgba(255,255,255,.04); }
.trust-row, .payment-row, .pay-methods { display:flex; flex-wrap:wrap; gap:10px; }
.trust-row span, .pay-methods span, .pay, .provider {
  border:1px solid var(--line); border-radius:999px; padding:9px 12px; background:rgba(255,255,255,.06); color:#dceaf6;
}
.buy-card { border-radius:30px; padding:24px; }
.buy-tabs { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:20px; }
.buy-tabs button { border:0; border-radius:15px; padding:13px; background:rgba(255,255,255,.06); color:var(--muted); cursor:pointer; }
.buy-tabs .active { color:#06121d; background:var(--gold); font-weight:900; }
.buy-card label { display:block; margin:16px 0 8px; color:var(--muted); }
.amount-box {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid var(--line); border-radius:18px; padding:16px; background:rgba(255,255,255,.045);
}
.amount-box input, .amount-box select {
  width:100%; border:0; outline:0; color:var(--text); background:transparent; font-size:28px; font-weight:850;
}
.amount-box select { width:auto; font-size:16px; }
.amount-box.readonly strong { font-size:28px; }
.provider-list { display:grid; gap:10px; margin-top:16px; }
.provider { display:flex; align-items:center; justify-content:space-between; border-radius:18px; width:100%; cursor:pointer; }
.provider.selected { border-color:rgba(255,200,90,.55); background:rgba(255,200,90,.1); }
.payment-row { margin:14px 0; }
.pay { cursor:pointer; }
.pay.active { background:rgba(51,214,255,.16); border-color:rgba(51,214,255,.42); }
.wide { width:100%; margin-top:8px; }
.buy-card small, .faq span { color:var(--muted); line-height:1.6; }
.checkout-flow, .status-grid { display:grid; gap:18px; margin-top:24px; }
.checkout-flow { grid-template-columns:repeat(4,1fr); }
.flow-step { min-height:150px; }
.flow-step b { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; color:#06121d; background:var(--cyan); }
.flow-step.active b { background:var(--gold); }
.flow-step p, .order-detail span { color:var(--muted); line-height:1.65; }
.status-grid { grid-template-columns:1.25fr .75fr; }
.order-panel, .faq-panel { border-radius:30px; padding:24px; }
.status-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0; }
.status-steps span { border-radius:999px; padding:10px; text-align:center; color:var(--muted); background:rgba(255,255,255,.055); }
.status-steps .done { color:#06121d; background:var(--green); }
.status-steps .current { color:#06121d; background:var(--gold); }
.order-detail p { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:14px 0; margin:0; }
.faq { display:block; width:100%; border:1px solid var(--line); border-radius:18px; padding:16px; margin:12px 0; text-align:left; color:var(--text); background:rgba(255,255,255,.045); cursor:pointer; }
.faq span { display:none; margin-top:10px; }
.faq.active span { display:block; }
.checkout-modal, .notification-modal {
  position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:24px; background:rgba(0,0,0,.62);
}
.checkout-modal.show, .notification-modal.show { display:grid; }
.modal-card { width:min(520px,100%); border-radius:30px; padding:26px; position:relative; animation: modalIn .24s ease both; }
@keyframes modalIn { from { opacity:0; transform:scale(.96) translateY(10px); } to { opacity:1; transform:none; } }
.close, .close-mini {
  border:0; width:34px; height:34px; border-radius:50%; color:var(--text); background:rgba(255,255,255,.08); cursor:pointer;
}
.close { position:absolute; top:16px; right:16px; }
.moonpay-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.moonpay-head span { color:#06121d; background:#fbf06d; border-radius:14px; padding:9px 12px; font-weight:900; }
.modal-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 20px; }
.modal-steps i { font-style:normal; border-radius:999px; padding:9px; text-align:center; color:var(--muted); background:rgba(255,255,255,.055); }
.modal-steps .active { color:#06121d; background:var(--gold); }
.checkout-summary p { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:12px 0; }
.toast {
  position:fixed; left:50%; bottom:28px; z-index:160; transform:translate(-50%,20px);
  min-width:260px; max-width:90vw; opacity:0; pointer-events:none;
  border:1px solid var(--line); border-radius:18px; padding:14px 18px; color:var(--text);
  background:rgba(8,20,32,.94); box-shadow:0 20px 60px rgba(0,0,0,.35); transition:.25s ease;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.notify-stage { padding: clamp(22px,4vw,58px); }
.stage-hero { display:flex; justify-content:space-between; gap:26px; align-items:end; margin:24px 0 28px; }
.stage-hero h1 { margin:14px 0; font-size:clamp(36px,5vw,70px); }
.stage-hero p { color:var(--muted); max-width:760px; line-height:1.75; }
.stage-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; min-width:420px; }
.stage-metrics div { border:1px solid var(--line); border-radius:20px; padding:16px; background:rgba(255,255,255,.045); }
.stage-metrics b { font-size:30px; display:block; }
.stage-metrics span { color:var(--muted); }
.stage-layout { display:grid; grid-template-columns: 330px 1fr; gap:22px; }
.feature-list, .org-preview { border-radius:30px; padding:18px; }
.feature-btn {
  display:block; width:100%; border:1px solid var(--line); border-radius:16px; padding:13px; margin:9px 0;
  text-align:left; color:#dceaf6; background:rgba(255,255,255,.045); cursor:pointer;
}
.feature-btn:hover { border-color:rgba(51,214,255,.4); background:rgba(51,214,255,.08); }
.feature-btn b { color:var(--green); margin-right:8px; }
.preview-hero { border-radius:26px; padding:32px; background:linear-gradient(135deg,rgba(51,214,255,.16),rgba(39,226,164,.08)); }
.preview-hero h2 { font-size:42px; margin:0 0 10px; }
.preview-hero p { color:#c8d7e6; }
.preview-tabs { display:flex; gap:10px; margin:18px 0; }
.preview-tabs button { position:relative; border:1px solid var(--line); border-radius:999px; padding:11px 16px; color:var(--muted); background:rgba(255,255,255,.045); }
.preview-tabs .active { color:var(--text); background:rgba(51,214,255,.12); }
.preview-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.preview-cards article { border:1px solid var(--line); border-radius:22px; padding:20px; background:rgba(255,255,255,.045); transition:.25s ease; }
.preview-cards article.highlight { border-color:rgba(255,200,90,.55); box-shadow:0 0 0 5px rgba(255,200,90,.08); }
.preview-cards span { color:var(--green); font-weight:800; }
.preview-cards p { color:var(--muted); line-height:1.65; }
.bottom-bar {
  position:fixed; left:50%; bottom:22px; z-index:100; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; width:min(880px,calc(100% - 32px));
  border:1px solid rgba(255,200,90,.35); border-radius:22px; padding:12px 14px;
  background:linear-gradient(135deg,rgba(255,200,90,.95),rgba(255,232,169,.92)); color:#211600;
  box-shadow:0 20px 70px rgba(0,0,0,.3);
}
.bottom-bar.hidden { display:none; }
.notify-fab {
  position:fixed; right:22px; bottom:22px; z-index:110; border:0; border-radius:999px;
  padding:14px 18px; color:#06121d; font-weight:900; background:linear-gradient(135deg,var(--cyan),var(--green)); box-shadow:0 18px 60px rgba(51,214,255,.25); cursor:pointer;
}
.notify-fab span { position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%; background:var(--red); }
.notify-drawer {
  position:fixed; right:22px; bottom:84px; z-index:120; display:none; width:min(390px,calc(100vw - 44px)); max-height:72vh; overflow:auto;
  border:1px solid var(--line); border-radius:26px; padding:16px; background:rgba(8,20,32,.96); box-shadow:0 24px 80px rgba(0,0,0,.42);
}
.notify-drawer.show { display:block; }
.drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.drawer-head button { border:0; color:var(--text); background:transparent; font-size:26px; cursor:pointer; }
.modal-tag { color:#06121d; background:var(--gold); border-radius:999px; padding:7px 10px; font-weight:900; }
.modal-card p { color:#cbd9e6; line-height:1.8; }
.modal-actions { display:flex; gap:10px; margin-top:20px; }
.hub { display:grid; place-items:center; min-height:100vh; padding:24px; }
.hub-panel { width:min(920px,100%); border-radius:34px; padding:clamp(34px,7vw,72px); border:1px solid var(--line); background:var(--surface); }
.hub h1 { margin:10px 0 18px; font-size:clamp(40px,6.2vw,78px); line-height:1.02; }
.lead { color:#c8d7e6; line-height:1.8; }
.hub-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.primary,.secondary { border-radius:999px; padding:12px 18px; }
.primary { color:#06121d; font-weight:900; background:linear-gradient(135deg,var(--cyan),var(--green)); }
.secondary { color:var(--text); border:1px solid var(--line); background:rgba(255,255,255,.06); }
@media (max-width: 980px) {
  .mc-nav nav { display:none; }
  .product-hero, .product-grid, .status-grid, .stage-layout, .stage-hero { grid-template-columns:1fr; display:grid; }
  .checkout-flow, .preview-cards, .kpi-row, .reward-grid { grid-template-columns:1fr; }
  .stage-metrics { min-width:0; grid-template-columns:1fr; }
  .product-hero { min-height:auto; }
  .friend-head { display:none; }
  .friend-line { grid-template-columns:1fr 1fr; }
  .bottom-bar { bottom:82px; align-items:flex-start; flex-direction:column; }
}