@charset "UTF-8";

:root {
  color-scheme: dark;
  --paper: #091612;
  --ink: #f0f0e6;
  --muted: #a4b2a9;
  --line: #c5d4bc24;
  --accent: #e4c38f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; background-image: radial-gradient(#c7dcc4 0.6px, transparent 0.6px); background-size: 6px 6px; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
::selection { color: var(--paper); background: var(--accent); }
.ambient-light { position: absolute; z-index: -1; pointer-events: none; inset: 0 0 auto; height: 1000px; overflow: hidden; background: radial-gradient(ellipse at 80% 31%, #43795328, transparent 51%), radial-gradient(ellipse at 11% 4%, #a78a4712, transparent 42%); }
.page-shell { max-width: 1376px; margin: 0 auto; padding: 0 64px; }
.skip-link { position: absolute; top: 12px; left: 12px; z-index: 5; padding: 12px 18px; background: var(--accent); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.site-header { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 12px; align-items: center; font-size: 23px; font-weight: 600; letter-spacing: -.8px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #dec59675; border-radius: 50%; color: var(--accent); font: italic 32px/1 Georgia, serif; padding-bottom: 5px; background: linear-gradient(135deg, #dec59612, transparent); }
.brand-subtitle { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 500; letter-spacing: 3.5px; text-transform: uppercase; }
.site-header nav { display: flex; align-items: center; gap: 36px; font-size: 12px; }
.nav-link { color: #d6dfd4; }
.nav-link > [aria-hidden] { margin-left: 10px; color: var(--accent); }
.language-switch { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 28px; background: #ffffff04; }
.language-switch button { min-width: 44px; min-height: 33px; padding: 7px 12px; border: 0; border-radius: 22px; font: inherit; font-size: 11px; color: var(--muted); background: transparent; cursor: pointer; transition: color .2s, background .2s; }
.language-switch button[aria-pressed="true"] { color: #19251b; background: #d9cba7; box-shadow: 0 1px 8px #0003; }
.language-switch button[aria-pressed="false"]:hover, .nav-link:hover, .site-footer a:hover { color: var(--accent); }

.hero { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); align-items: center; gap: 32px; min-height: 658px; padding: 70px 0 62px; }
.hero-content { position: relative; z-index: 1; animation: arrive .8s ease both; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 35px; padding: 8px 13px; border: 1px solid #dbcc9a2b; border-radius: 30px; background: #d4bc8210; color: #e2d8ba; font-size: 9px; letter-spacing: 2px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px #ebce7c70; }
h1 { margin: 0; font: 400 clamp(62px, 6.8vw, 96px)/1.04 Georgia, "Times New Roman", serif; letter-spacing: -4px; }
h1 em { color: var(--accent); font-weight: 400; text-shadow: 0 0 80px #d5b27412; }
html:lang(zh) h1 { font-family: "Songti SC", "Noto Serif CJK SC", "STSong", serif; font-size: clamp(54px, 5.6vw, 80px); line-height: 1.32; letter-spacing: -1px; }
html:lang(zh) h1 em { font-style: normal; }
.hero-description { max-width: 420px; margin: 28px 0 0; color: #b7c5ba; font-size: 14px; line-height: 1.95; letter-spacing: .2px; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 36px; }
.hero-status { max-width: 155px; margin: 0; color: #91a397; font-size: 10px; line-height: 1.8; }
.primary-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 25px; min-height: 51px; padding: 9px 10px 9px 23px; border: 1px solid #f6deb2; border-radius: 30px; background: linear-gradient(115deg, #edd7ac, #cfb279); color: #20291d; font-size: 12px; font-weight: 550; box-shadow: 0 4px 28px #d2b3760c; transition: box-shadow .25s, transform .25s; }
.primary-link:hover { box-shadow: 0 5px 32px #d2b37630; transform: translateY(-2px); }
.primary-link > [aria-hidden] { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #2435203b; border-radius: 50%; font-size: 18px; line-height: 1; }

.hero-visual { position: relative; min-width: 0; margin: 0; animation: arrive 1s .12s ease both; }
.visual-scene { position: relative; width: 100%; height: 442px; }
.visual-scene::before { content: ""; position: absolute; inset: 10% 0 0; border-radius: 50%; background: radial-gradient(ellipse, #7f9c7040, transparent 67%); filter: blur(25px); }
.orbit { position: absolute; width: 380px; height: 380px; top: 22px; left: 50%; margin-left: -190px; border: 1px solid #c3d8b51c; border-radius: 50%; }
.orbit-two { width: 470px; height: 470px; top: -23px; margin-left: -235px; border-style: dashed; opacity: .65; }
.orbit-point { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #d4c491; box-shadow: 0 0 18px #dacb9870; }
.point-one { left: 15%; top: 19%; }
.point-two { right: 9%; bottom: 18%; width: 4px; height: 4px; background: #8eafa1; }
.card-group { position: absolute; width: 340px; height: 260px; left: 50%; top: 49%; margin-left: -170px; margin-top: -130px; perspective: 1000px; }
.visual-card { position: absolute; width: 326px; height: 202px; border-radius: 18px; overflow: hidden; }
.card-back { top: -36px; left: 14px; transform: rotate(13deg); color: #c3d1bc; border: 1px solid #c8d8b74a; background: radial-gradient(ellipse at 25% 30%, #506647, #263d30 55%, #20362c); box-shadow: 0 25px 45px #0005; }
.card-back::after { content: ""; position: absolute; width: 290px; height: 290px; border: 1px solid #bbd8ad22; border-radius: 50%; right: -150px; top: -45px; box-shadow: 0 0 0 16px #bbd8ad05, 0 0 0 33px #bbd8ad07, 0 0 0 50px #bbd8ad05; }
.card-wordmark { position: absolute; top: 23px; left: 25px; font: 600 18px/1 Georgia, serif; letter-spacing: -.6px; }
.back-monogram { position: absolute; right: 27px; top: 68px; font: italic 70px/1 Georgia, serif; opacity: .18; }
.card-region { position: absolute; left: 25px; bottom: 25px; font: 8px/1.3 sans-serif; letter-spacing: 3px; }
.card-corner { position: absolute; right: 27px; top: 24px; color: #e0ce9c; }
.card-front { left: -4px; top: 45px; transform: rotate(-11deg); border: 1px solid #f6e8c7c4; color: #39412c; background: linear-gradient(110deg, #b6a076, #e3d6ac 24%, #f1e6c9 48%, #c3b288 76%, #e0cba1); box-shadow: -5px 34px 55px #0007, inset 0 1px #ffffff9c; animation: card-float 8s ease-in-out infinite; }
.card-front::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: repeating-linear-gradient(105deg, #fff3 0, transparent 1px, transparent 3px); pointer-events: none; }
.card-sheen { position: absolute; inset: -100% -80%; pointer-events: none; background: linear-gradient(110deg, transparent 35%, #fff5 48%, transparent 60%); transform: translateX(-35%); animation: sheen 11s 2s ease-in-out infinite; }
.card-front .card-wordmark { color: #3f472f; }
.card-category { position: absolute; top: 29px; right: 25px; font-size: 7px; letter-spacing: 2.5px; }
.card-chip { position: absolute; left: 25px; top: 79px; width: 36px; height: 28px; border: 1px solid #9d87506b; border-radius: 6px; background: linear-gradient(90deg, transparent 31%, #9d875077 32%, transparent 34%, transparent 65%, #9d875077 66%, transparent 68%), linear-gradient(transparent 45%, #9d875077 46%, transparent 49%), linear-gradient(135deg, #d2bd82, #efe3ba, #c6ae71); }
.card-contactless { position: absolute; left: 72px; top: 83px; font-size: 14px; letter-spacing: -2px; opacity: .6; }
.card-edition { position: absolute; left: 25px; bottom: 28px; font-size: 9px; letter-spacing: 1px; }
.card-circles { position: absolute; right: 25px; bottom: 23px; display: flex; }
.card-circles i { width: 27px; height: 27px; border: 1px solid #4d573a78; border-radius: 50%; }
.card-circles i + i { margin-left: -11px; background: #6c795414; }
.floating-note { display: flex; align-items: center; gap: 10px; position: absolute; padding: 12px 15px; border: 1px solid #d0dcc12b; border-radius: 10px; color: #e1e8db; background: linear-gradient(110deg, #304237e8, #243a2fe8); box-shadow: 0 10px 24px #0002; backdrop-filter: blur(14px); font-size: 10px; letter-spacing: .5px; }
.source-note { right: -7px; top: 54px; transform: rotate(3deg); }
.cycle-note { left: -8px; bottom: 42px; transform: rotate(-3deg); }
.note-symbol { color: #e1d1a1; font-size: 21px; }
.cycle-symbol { color: #b5cbaa; font-size: 20px; }
.tiny-dot { width: 4px; height: 4px; border-radius: 50%; margin-left: 12px; background: #a6b991; box-shadow: 0 0 8px #c1da8d40; }
.hero-visual figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; color: #8fa395; font-size: 8px; letter-spacing: 1px; }
.caption-rule { width: 25px; height: 1px; background: #b8c7a74d; }

.research { scroll-margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 28px; }
.section-label { margin: 0 0 14px; color: #c4bd9c; font-size: 9px; letter-spacing: 2.5px; }
h2 { margin: 0; font-size: 25px; font-weight: 400; letter-spacing: .5px; }
.section-index { color: #758c7d; font-size: 10px; letter-spacing: 3px; padding-bottom: 4px; }
.research-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.research-card { position: relative; min-width: 0; overflow: hidden; padding: 28px 30px 30px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(120deg, #c6dcc508, #c6dcc502); transition: border-color .3s, background .3s; }
.research-card:hover { border-color: #d7cc9e5c; background-color: #b9cda609; }
.research-card::after { content: ""; position: absolute; inset: auto -30px -100px auto; width: 270px; height: 220px; pointer-events: none; background: radial-gradient(ellipse, #9cba8020, transparent 70%); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
.region-code { color: var(--accent); font-size: 9px; letter-spacing: 2.5px; font-weight: 550; }
.card-status { padding: 5px 9px; border: 1px solid #b8cead25; border-radius: 20px; color: #a8bca6; font-size: 9px; }
h3 { position: relative; margin: 40px 0 13px; font-size: 23px; font-weight: 400; letter-spacing: .4px; z-index: 1; }
.research-card p { position: relative; z-index: 1; max-width: 350px; margin: 0; color: #9eafa2; font-size: 12px; line-height: 1.95; }
.research-illustration { position: absolute; right: 28px; top: 80px; opacity: .2; transform: rotate(-8deg); }
.ledger-illustration { display: grid; gap: 7px; }
.ledger-illustration i { display: block; width: 63px; height: 7px; border: 1px solid #c7dbb7; border-radius: 2px; }
.ledger-illustration i:nth-child(even) { width: 43px; }
.rules-illustration { width: 58px; height: 58px; border: 1px solid #e4c38f; border-radius: 50%; }
.rules-illustration i { position: absolute; width: 6px; height: 6px; border: 1px solid #e4c38f; border-radius: 50%; top: 24px; left: 24px; }
.rules-illustration i:nth-child(2) { width: 34px; height: 34px; top: 11px; left: 11px; }
.rules-illustration i:nth-child(3) { width: 76px; height: 1px; border-radius: 0; top: 27px; left: -10px; transform: rotate(-45deg); }
.research-caption { margin: 18px 0 0; color: #859c8e; font-size: 10px; line-height: 1.8; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 54px; padding: 26px 0 32px; border-top: 1px solid var(--line); color: #8fa293; font-size: 9px; }
.footer-note { font: italic 14px Georgia, serif; color: #b6c2ab; }
html:lang(zh) .footer-note { font: 11px/1.5 "Songti SC", "STSong", serif; letter-spacing: 1px; }
.site-footer a > [aria-hidden] { margin-left: 10px; color: var(--accent); }

@keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-float { 0%, 100% { transform: rotate(-11deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-10px); } }
@keyframes sheen { 0%, 40%, 100% { transform: translateX(-35%); } 65%, 80% { transform: translateX(35%); } }

@media (max-width: 1100px) {
  .page-shell { padding: 0 40px; }
  .hero { gap: 20px; min-height: 600px; }
  h1 { font-size: clamp(58px, 6.7vw, 76px); letter-spacing: -3px; }
  html:lang(zh) h1 { font-size: 60px; }
  .card-group { scale: .88; }
  .orbit { width: 320px; height: 320px; top: 50px; margin-left: -160px; }
  .orbit-two { width: 390px; height: 390px; top: 15px; margin-left: -195px; }
  .floating-note { padding: 10px; font-size: 9px; gap: 7px; }
  .source-note { right: 0; top: 65px; }
  .cycle-note { left: 0; bottom: 70px; }
  .hero-description { font-size: 13px; }
  .hero-actions { gap: 14px; }
  .hero-status { font-size: 9px; }
  .research-card p { max-width: 300px; }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding: 60px 0 48px; gap: 35px; }
  .hero-content { max-width: 620px; }
  h1 { font-size: clamp(62px, 10vw, 84px); }
  html:lang(zh) h1 { font-size: clamp(50px, 8vw, 72px); }
  .hero-visual { max-width: 500px; width: 100%; margin: 0 auto; }
  .visual-scene { height: 380px; }
  .card-group { scale: 1; }
  .orbit { top: 28px; }
  .orbit-two { top: -7px; }
  .source-note { right: 14px; top: 20px; }
  .cycle-note { left: 5px; bottom: 22px; }
  .hero-status { max-width: 200px; }
  .hero-description { font-size: 15px; max-width: 450px; }
  .hero-visual figcaption { margin-top: 6px; }
  .research-illustration { right: 20px; opacity: .12; }
  h3 { font-size: 21px; }
}

@media (max-width: 560px) {
  .page-shell { padding: 0 24px; }
  .site-header { min-height: 88px; gap: 12px; }
  .brand { font-size: 20px; gap: 9px; }
  .brand-mark { width: 34px; height: 34px; font-size: 28px; }
  .brand-subtitle { font-size: 7px; letter-spacing: 3px; }
  .site-header nav { gap: 0; }
  .nav-link { display: none; }
  .language-switch { padding: 3px; }
  .language-switch button { min-width: 36px; padding: 6px 8px; font-size: 10px; }
  .hero { padding: 46px 0 37px; gap: 40px; }
  .eyebrow { margin-bottom: 25px; padding: 7px 11px; font-size: 8px; letter-spacing: 1.4px; }
  h1 { font-size: clamp(44px, 11.8vw, 64px); letter-spacing: -2px; }
  html:lang(zh) h1 { font-size: clamp(39px, 10.8vw, 58px); line-height: 1.35; }
  .hero-description { margin-top: 22px; font-size: 12px; line-height: 1.9; }
  .hero-actions { margin-top: 26px; gap: 16px; }
  .primary-link { gap: 15px; min-height: 45px; padding: 7px 8px 7px 17px; font-size: 11px; }
  .primary-link > [aria-hidden] { width: 28px; height: 28px; font-size: 17px; }
  .hero-status { max-width: 118px; font-size: 9px; }
  .visual-scene { height: 320px; }
  .card-group { scale: .78; top: 49%; }
  .orbit { width: 258px; height: 258px; margin-left: -129px; top: 22px; }
  .orbit-two { width: 310px; height: 310px; margin-left: -155px; top: -4px; }
  .floating-note { padding: 9px 10px; font-size: 8px; gap: 7px; border-radius: 8px; }
  .source-note { right: -2px; top: 10px; }
  .cycle-note { left: -2px; bottom: 19px; }
  .note-symbol { font-size: 17px; }
  .cycle-symbol { font-size: 16px; }
  .tiny-dot { margin-left: 4px; }
  .hero-visual figcaption { font-size: 8px; gap: 7px; letter-spacing: .5px; }
  .section-heading { margin-bottom: 21px; }
  .section-label { margin-bottom: 12px; font-size: 8px; letter-spacing: 1.6px; }
  h2 { max-width: 270px; font-size: 21px; line-height: 1.45; }
  .section-index { font-size: 8px; letter-spacing: 1px; white-space: nowrap; }
  .research-grid { grid-template-columns: 1fr; gap: 14px; }
  .research-card { padding: 23px; }
  h3 { margin-top: 34px; font-size: 22px; }
  .research-card p { font-size: 12px; }
  .research-illustration { opacity: .17; }
  .research-caption { font-size: 9px; }
  .site-footer { flex-wrap: wrap; margin-top: 35px; padding: 23px 0 28px; gap: 20px 12px; font-size: 8px; }
  .footer-note { order: 3; width: 100%; font-size: 13px; }
}

@media (max-width: 360px) {
  h1 { font-size: 40px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-status { max-width: none; }
  .card-group { scale: .7; }
  .orbit-two { width: 280px; height: 280px; margin-left: -140px; top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.hero-actions > .hero-status:only-child { max-width: none; }

.research-link { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-top: 25px; color: var(--accent); font-size: 11px; }
.research-link > [aria-hidden] { font-size: 17px; }