:root { --ice: #8fdcff; --ice-bright: #e8f9ff; --gold: #dcae63; --ink: #020711; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: #eef8ff; background: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 76px; padding: 0 max(28px, calc((100vw - 1360px) / 2)); display: flex; align-items: center; border-bottom: 1px solid rgba(119,194,232,.28); background: linear-gradient(180deg,rgba(1,8,18,.93),rgba(2,13,27,.7)); backdrop-filter: blur(14px); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.site-header::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: min(660px,48vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg,transparent,#65c9fb,transparent); box-shadow: 0 0 12px rgba(71,190,250,.7); }
.brand { min-width: 260px; display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid #65bbe4; color: #f7fcff; background: radial-gradient(circle,#174e79,#06182c 68%); box-shadow: inset 0 0 14px rgba(122,215,255,.28),0 0 20px rgba(45,170,238,.17); font-family: "STKaiti","KaiTi",serif; font-size: 21px; }
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand-copy strong,.brand-copy small { display: block; }
.brand-copy strong { color: #dff5ff; font-family: "STKaiti","KaiTi",serif; font-size: 23px; letter-spacing: .14em; text-shadow: 0 0 12px rgba(100,202,255,.28); }
.brand-copy small { margin-top: 2px; color: #597c94; font-family: Georgia,serif; font-size: 8px; letter-spacing: .25em; }
.site-header nav { flex: 1; height: 100%; display: flex; justify-content: center; gap: 6px; }
.site-header nav a { position: relative; min-width: 100px; display: grid; place-items: center; color: #8da9b9; font-size: 14px; transition: color .2s ease; }
.site-header nav a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: #78d4ff; box-shadow: 0 0 12px #50c6ff; transition: left .2s,right .2s; }
.site-header nav a:hover,.site-header nav a.active { color: #e8f9ff; }
.site-header nav a:hover::after,.site-header nav a.active::after { left: 24%; right: 24%; }
.nav-download { min-width: 122px; padding: 11px 20px; border: 1px solid rgba(130,210,248,.7); color: #dff7ff; text-align: center; background: linear-gradient(135deg,rgba(25,86,126,.92),rgba(5,28,49,.96)); box-shadow: inset 0 0 14px rgba(114,211,255,.13); transition: filter .2s,transform .2s; }
.nav-download:hover { filter: brightness(1.25); transform: translateY(-2px); }

.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #030b15; }
.hero-art { position: absolute; z-index: -4; inset: 0; background: url('./assets/hero-divine.png') center / cover no-repeat; filter: brightness(1.08) saturate(1.08) contrast(1.02); transform: scale(1.025); animation: hero-breathe 16s ease-in-out infinite alternate; }
.hero-shade { position: absolute; z-index: -3; inset: 0; background: radial-gradient(circle at 72% 45%,transparent 0 22%,rgba(2,8,17,.18) 47%,rgba(1,5,11,.72) 100%),linear-gradient(90deg,rgba(1,7,15,.96) 0%,rgba(1,10,21,.76) 37%,rgba(2,11,22,.11) 70%),linear-gradient(0deg,#020711 0%,transparent 28%,rgba(2,8,17,.38) 80%,rgba(2,8,17,.72) 100%); }
.hero-orbit { position: absolute; z-index: -2; border: 1px solid rgba(128,211,251,.13); border-radius: 50%; box-shadow: inset 0 0 80px rgba(45,158,218,.05); }
.orbit-one { width: 720px; height: 720px; right: 5vw; top: 10vh; animation: drift 18s linear infinite; }
.orbit-two { width: 480px; height: 480px; right: 12vw; top: 23vh; border-color: rgba(227,189,107,.1); animation: drift 14s linear infinite reverse; }
.hero-content { width: min(1260px,calc(100% - 48px)); margin: 0 auto; padding-top: clamp(180px,24vh,238px); }
.hero-content > * { max-width: 640px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #92dafa; font-size: 12px; font-weight: 700; letter-spacing: .34em; }
.eyebrow i { width: 46px; height: 1px; background: linear-gradient(90deg,#6bcffc,transparent); }
.eyebrow i:last-child { transform: scaleX(-1); }
.hero h1 { margin: 10px 0 0; color: #effaff; font-family: "STKaiti","KaiTi",serif; font-size: clamp(76px,8.2vw,128px); line-height: .95; letter-spacing: .02em; text-shadow: 0 3px 0 #143950,0 0 18px rgba(139,224,255,.62),0 0 50px rgba(36,155,222,.32),0 12px 24px #000; }
.hero h1 span { color: transparent; background: linear-gradient(180deg,#fff 6%,#d9f7ff 33%,#74c9f1 68%,#337aaa 100%); -webkit-background-clip: text; background-clip: text; }
.hero-en { margin: 12px 0 0; color: #5e95b5; font-family: Georgia,serif; font-size: 12px; letter-spacing: .58em; }
.hero-lead { margin: 24px 0 31px; color: #c8dce7; font-family: "STKaiti","KaiTi",serif; font-size: 19px; letter-spacing: .28em; text-shadow: 0 2px 8px #000; }
.hero-actions { display: flex; gap: 14px; }
.hero-actions a { position: relative; width: 204px; min-height: 68px; padding: 12px 20px; border: 1px solid; overflow: hidden; transition: transform .2s,filter .2s; }
.hero-actions a::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.1); }
.hero-actions a:hover { transform: translateY(-3px); filter: brightness(1.22); }
.hero-actions strong,.hero-actions small { position: relative; z-index: 1; display: block; }
.hero-actions strong { font-family: "STKaiti","KaiTi",serif; font-size: 22px; letter-spacing: .12em; }
.hero-actions small { margin-top: 3px; font-size: 10px; letter-spacing: .08em; }
.primary-button { border-color: #8bdcff !important; color: #ecfbff; background: linear-gradient(135deg,#236991,#092942); box-shadow: 0 0 30px rgba(56,175,234,.28),inset 0 0 18px rgba(139,220,255,.1); }
.primary-button small { color: #78aecb; }
.secondary-button { border-color: #95713f !important; color: #f2d79a; background: linear-gradient(135deg,#4f361d,#1a130d); box-shadow: inset 0 0 18px rgba(234,182,94,.08); }
.secondary-button small { color: #a18054; }
.online { margin-top: 20px; color: #607f92; font-size: 11px; letter-spacing: .1em; }
.online i { width: 7px; height: 7px; margin-right: 7px; display: inline-block; border-radius: 50%; background: #5ce57e; box-shadow: 0 0 9px #4de473; }
.online b { margin-left: 7px; color: #d8b575; font-weight: 500; }
.scroll-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 7px; color: #466678; font-size: 9px; letter-spacing: .32em; }
.scroll-hint i { width: 1px; height: 38px; background: linear-gradient(#72cff9,transparent); animation: pulse 1.8s ease-in-out infinite; }

.version-strip { position: relative; z-index: 3; width: min(1240px,calc(100% - 44px)); min-height: 106px; margin: -28px auto 0; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(98,174,212,.38); background: linear-gradient(180deg,rgba(8,24,38,.99),rgba(3,11,20,.99)); box-shadow: 0 18px 46px rgba(0,0,0,.5),inset 0 1px 0 rgba(221,247,255,.07); }
.version-strip > div { padding: 22px 24px; display: flex; align-items: center; gap: 15px; border-right: 1px solid rgba(102,150,176,.18); }
.version-strip > div:last-child { border-right: 0; }
.version-strip b { min-width: 62px; color: #80cef2; font-family: Georgia,serif; font-size: 28px; font-weight: 500; }
.version-strip span,.version-strip small { display: block; }
.version-strip span { color: #e3edf2; font-size: 15px; font-weight: 700; }
.version-strip small { margin-top: 5px; color: #5f7887; font-size: 10px; font-weight: 400; }
.section-shell { width: min(1240px,calc(100% - 44px)); margin-inline: auto; }
.notice-line { min-height: 66px; padding: 0 max(28px,calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 22px; border-bottom: 1px solid rgba(80,137,166,.18); background: #040d17; }
.notice-line > span { padding: 7px 12px; border: 1px solid #317da5; color: #9ee4ff; font-size: 11px; letter-spacing: .12em; background: rgba(26,91,126,.26); }
.notice-line p { flex: 1; margin: 0; color: #7693a4; font-size: 12px; }
.notice-line a { color: #d7b574; font-size: 12px; transition: color .2s; }
.notice-line a:hover { color: #ffe1a5; }

.section-heading { padding-top: 105px; text-align: center; }
.section-heading > p,.fashion-copy > p,.final-copy > p { margin: 0 0 11px; color: #5daed6; font-family: Georgia,serif; font-size: 10px; letter-spacing: .48em; }
.section-heading h2,.fashion-copy h2,.final-copy h2 { margin: 0; color: #e9f8ff; font-family: "STKaiti","KaiTi",serif; font-size: clamp(36px,4vw,52px); letter-spacing: .08em; text-shadow: 0 2px 0 #123049,0 0 24px rgba(91,196,247,.14); }
.section-heading > span,.fashion-copy > span,.final-copy > span { display: block; margin-top: 13px; color: #6d8594; font-size: 12px; letter-spacing: .12em; }
.align-left { padding-top: 0; text-align: left; }
.features { min-height: 690px; padding-bottom: 100px; }
.feature-grid { margin-top: 55px; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.feature-grid article { position: relative; min-height: 292px; padding: 40px 25px 30px; overflow: hidden; border: 1px solid #193b51; background: radial-gradient(circle at 50% 0,rgba(57,144,190,.16),transparent 48%),linear-gradient(145deg,#071a28,#030b13); box-shadow: inset 0 0 0 4px rgba(255,255,255,.012),0 18px 40px rgba(0,0,0,.24); transition: transform .25s,border-color .25s,box-shadow .25s; }
.feature-grid article::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(105,173,208,.08); pointer-events: none; }
.feature-grid article:hover { transform: translateY(-8px); border-color: #65bfe9; box-shadow: 0 22px 48px rgba(0,0,0,.4),0 0 24px rgba(63,174,229,.12); }
.feature-grid article > b { position: absolute; top: 12px; right: 17px; color: rgba(192,229,246,.09); font-family: Georgia,serif; font-size: 46px; }
.feature-grid article > i { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid #3b85a9; border-radius: 50%; color: #9adfff; background: radial-gradient(circle,#143e59,#06131e 70%); box-shadow: inset 0 0 18px rgba(89,195,245,.16),0 0 20px rgba(61,173,226,.1); font-family: "STKaiti","KaiTi",serif; font-size: 25px; font-style: normal; }
.feature-grid h3 { margin: 23px 0 10px; color: #e2f3fa; font-family: "STKaiti","KaiTi",serif; font-size: 25px; }
.feature-grid p { margin: 0; color: #6b8291; font-size: 12px; line-height: 1.85; }
.feature-grid small { position: absolute; left: 25px; bottom: 21px; color: #37576a; font-family: Georgia,serif; font-size: 8px; letter-spacing: .22em; }

.equipment { min-height: 1050px; padding: 105px 0 120px; border-block: 1px solid rgba(65,130,162,.24); background: radial-gradient(circle at 50% 0,rgba(29,92,128,.18),transparent 39%),linear-gradient(180deg,#06131f,#020810 85%); }
.equipment-head { display: flex; align-items: flex-end; justify-content: space-between; }
.class-pills { display: flex; gap: 8px; }
.class-pills span { padding: 9px 17px; border: 1px solid #20475e; color: #5d7d8f; font-size: 11px; background: rgba(5,17,27,.72); }
.class-pills span.active { border-color: #5daed6; color: #c9f0ff; background: rgba(25,91,124,.34); }
.showcase-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.showcase-grid article { position: relative; overflow: hidden; border: 1px solid #1d4155; background: #02070d; box-shadow: 0 20px 45px rgba(0,0,0,.34); transition: transform .25s,border-color .25s; }
.showcase-grid article:hover { transform: translateY(-6px); border-color: #5bbde8; }
.showcase-grid img { width: 100%; height: 410px; display: block; object-fit: cover; object-position: top center; background: #000; filter: brightness(1.13) saturate(1.08); transition: transform .5s; }
.showcase-grid article:hover img { transform: scale(1.025); }
.showcase-grid article > div { position: absolute; inset: auto 0 0; padding: 48px 21px 20px; background: linear-gradient(transparent,rgba(2,9,15,.96) 48%); }
.showcase-grid small { color: #4ea9d3; font-family: Georgia,serif; font-size: 8px; letter-spacing: .3em; }
.showcase-grid h3 { margin: 6px 0 4px; color: #e4f3fa; font-family: "STKaiti","KaiTi",serif; font-size: 21px; }
.showcase-grid p { margin: 0; color: #607988; font-size: 10px; letter-spacing: .08em; }

.fashion { min-height: 830px; padding-block: 110px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 72px; }
.fashion-copy h2 { margin-top: 4px; }
.fashion-copy > span { max-width: 450px; line-height: 1.8; }
.fashion-copy ul { margin: 38px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.fashion-copy li { max-width: 420px; padding: 15px 18px; display: flex; align-items: center; gap: 17px; border: 1px solid #16384d; background: linear-gradient(90deg,rgba(7,25,38,.94),rgba(4,14,23,.64)); }
.fashion-copy li > b { color: #58b0dc; font-family: Georgia,serif; font-size: 22px; font-weight: 500; }
.fashion-copy li strong,.fashion-copy li small { display: block; }
.fashion-copy li strong { color: #cfe6f0; font-size: 14px; }
.fashion-copy li small { margin-top: 4px; color: #587282; font-size: 10px; }
.fashion-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; transform: perspective(1100px) rotateY(-3deg); }
.fashion-gallery figure { position: relative; min-height: 560px; margin: 0; overflow: hidden; border: 1px solid #1c455c; background: #000; box-shadow: 0 24px 55px rgba(0,0,0,.42); }
.fashion-gallery figure:nth-child(2) { margin-top: 42px; }
.fashion-gallery img { width: 100%; height: 100%; min-height: 560px; display: block; object-fit: cover; object-position: center top; filter: brightness(1.12) saturate(1.06); }
.fashion-gallery figcaption { position: absolute; inset: auto 0 0; padding: 60px 20px 20px; background: linear-gradient(transparent,rgba(2,8,14,.96)); }
.fashion-gallery figcaption b,.fashion-gallery figcaption span { display: block; }
.fashion-gallery figcaption b { color: #e7f7ff; font-family: "STKaiti","KaiTi",serif; font-size: 20px; }
.fashion-gallery figcaption span { margin-top: 4px; color: #4e93b5; font-family: Georgia,serif; font-size: 8px; letter-spacing: .24em; }

.journey { min-height: 650px; padding-bottom: 110px; border-top: 1px solid rgba(50,108,137,.2); background: radial-gradient(circle at 50% 50%,rgba(27,92,127,.1),transparent 40%),#030a11; }
.journey-flow { margin-top: 64px; display: grid; grid-template-columns: 1fr 90px 1fr 90px 1fr; align-items: center; }
.journey-flow article { position: relative; min-height: 230px; padding: 33px 25px; border: 1px solid #1d4053; text-align: center; background: linear-gradient(145deg,#071a27,#040c13); }
.journey-flow article > b { position: absolute; top: 11px; right: 15px; color: rgba(152,215,244,.11); font-family: Georgia,serif; font-size: 32px; }
.journey-flow article > i { width: 61px; height: 61px; margin: 0 auto; display: grid; place-items: center; border: 1px solid #438db1; border-radius: 50%; color: #a4e5ff; background: radial-gradient(circle,#174762,#06131d 69%); box-shadow: 0 0 20px rgba(66,175,227,.14); font-size: 27px; font-style: normal; }
.journey-flow h3 { margin: 20px 0 8px; color: #dceef5; font-family: "STKaiti","KaiTi",serif; font-size: 22px; }
.journey-flow p { margin: 0; color: #627a88; font-size: 11px; }
.journey-flow > span { height: 1px; background: linear-gradient(90deg,#26475a,#61b9e3,#26475a); }

.final-cta { position: relative; min-height: 520px; overflow: hidden; display: grid; place-items: center; isolation: isolate; text-align: center; }
.final-art { position: absolute; z-index: -2; inset: 0; background: url('./assets/hero-divine.png') center 49% / cover no-repeat; filter: brightness(.48) saturate(.82); transform: scale(1.035); }
.final-cta::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 45%,rgba(29,108,148,.18),rgba(2,7,13,.84) 72%),linear-gradient(0deg,#02070d,transparent 38%,#02070d); }
.final-copy h2 { font-size: clamp(42px,5vw,67px); }
.final-copy > a { width: 236px; min-height: 76px; margin: 34px auto 0; padding: 13px 22px; display: block; border: 1px solid #6dccf7; color: #e8f9ff; background: linear-gradient(135deg,#1d668e,#08263e); box-shadow: inset 0 0 0 4px rgba(2,16,27,.42),0 0 34px rgba(53,173,230,.24); transition: transform .2s,filter .2s; }
.final-copy > a:hover { transform: translateY(-4px); filter: brightness(1.24); }
.final-copy a strong,.final-copy a small { display: block; }
.final-copy a strong { font-family: "STKaiti","KaiTi",serif; font-size: 24px; letter-spacing: .12em; }
.final-copy a small { margin-top: 4px; color: #74a9c2; font-size: 10px; letter-spacing: .16em; }

footer { border-top: 1px solid #143146; color: #5c7482; background: #01060a; }
.footer-main { min-height: 166px; padding-block: 35px; display: grid; grid-template-columns: 250px 1fr 440px; align-items: center; gap: 34px; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer-brand b { color: #bfeaff; font-family: "STKaiti","KaiTi",serif; font-size: 25px; }
.footer-brand span { padding: 3px 7px; border: 1px solid #4b93b5; border-radius: 12px; color: #9ddfff; font-size: 10px; }
.footer-brand small { width: 100%; color: #34576b; font-family: Georgia,serif; font-size: 8px; letter-spacing: .24em; }
.footer-main nav { display: flex; justify-content: center; }
.footer-main nav a { padding: 0 15px; border-right: 1px solid #1b3545; color: #607a89; font-size: 11px; }
.footer-main nav a:last-child { border-right: 0; }
.footer-main nav a:hover { color: #a9e5ff; }
.footer-main > p { margin: 0; font-size: 10px; line-height: 1.9; text-align: right; }
.copyright { padding: 14px 20px; border-top: 1px solid #0d202c; color: #304a58; text-align: center; font-size: 9px; }

@keyframes drift { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: .25; transform: scaleY(.65); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes hero-breathe { from { transform: scale(1.025); } to { transform: scale(1.065); } }
@media (max-width: 980px) { .site-header { height: 68px; padding-inline: 18px; } .brand { min-width: auto; } .brand-copy small,.site-header nav { display: none; } .nav-download { margin-left: auto; } .hero-content { padding-top: 26vh; } .hero-shade { background: linear-gradient(90deg,rgba(1,7,15,.88),rgba(1,10,21,.35)),linear-gradient(0deg,#020711,transparent 48%,rgba(2,8,17,.62)); } .version-strip { grid-template-columns: repeat(2,1fr); margin-top: 0; } .version-strip > div:nth-child(2) { border-right: 0; } .notice-line { padding-block: 14px; } .feature-grid { grid-template-columns: repeat(2,1fr); } .showcase-grid { grid-template-columns: repeat(2,1fr); } .fashion { grid-template-columns: 1fr; gap: 50px; } .fashion-copy { text-align: center; } .fashion-copy > span,.fashion-copy li { margin-inline: auto; } .fashion-gallery { transform: none; } .journey-flow { grid-template-columns: 1fr 34px 1fr 34px 1fr; } .footer-main { grid-template-columns: 1fr; gap: 22px; text-align: center; } .footer-brand { justify-content: center; } .footer-main > p { text-align: center; } }
@media (max-width: 620px) { .brand-copy strong { font-size: 19px; } .brand-mark { width: 36px; height: 36px; } .nav-download { min-width: 104px; padding: 9px 12px; } .hero { min-height: 780px; } .hero-art { background-position: 66% center; opacity: .86; } .hero-content { width: calc(100% - 28px); padding-top: 225px; text-align: center; } .hero-content > * { margin-inline: auto; } .eyebrow { justify-content: center; font-size: 9px; letter-spacing: .18em; } .eyebrow i { width: 24px; } .hero h1 { font-size: 66px; } .hero-en { font-size: 8px; letter-spacing: .35em; } .hero-lead { font-size: 15px; letter-spacing: .16em; } .hero-actions { flex-direction: column; align-items: center; } .hero-actions a { width: 226px; } .version-strip { width: calc(100% - 24px); } .version-strip > div { padding: 16px 12px; gap: 8px; } .version-strip b { min-width: 47px; font-size: 20px; } .version-strip span { font-size: 12px; } .notice-line { display: grid; gap: 10px; text-align: center; } .notice-line > span,.notice-line a { margin-inline: auto; } .feature-grid,.showcase-grid { grid-template-columns: 1fr; } .features { padding-bottom: 70px; } .section-heading { padding-top: 76px; } .equipment { padding-block: 76px; } .equipment-head { display: block; text-align: center; } .align-left { text-align: center; } .class-pills { margin-top: 24px; justify-content: center; flex-wrap: wrap; } .showcase-grid img { height: 445px; } .fashion { width: calc(100% - 28px); padding-block: 76px; } .fashion-gallery { grid-template-columns: 1fr; } .fashion-gallery figure,.fashion-gallery figure:nth-child(2) { min-height: 540px; margin-top: 0; } .journey-flow { grid-template-columns: 1fr; gap: 12px; } .journey-flow > span { width: 1px; height: 25px; margin: 0 auto; background: linear-gradient(#26475a,#61b9e3,#26475a); } .journey-flow article { min-height: 205px; } .footer-main nav { flex-wrap: wrap; gap: 12px 0; } }