:root { --bg:#080b18; --surface:#10152a; --surface-light:#161d39; --text:#f4f3ff; --muted:#aaaec5; --line:rgba(210,211,255,.16); --cyan:#88e5ff; --violet:#ae9cff; --radius:22px; }
html { scroll-behavior:smooth; }
body { min-width:320px; overflow-x:hidden; color:var(--text); background:var(--bg); font-family:ui-sans-serif,system-ui,"Microsoft YaHei",sans-serif; line-height:1.65; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 82% 5%,rgba(107,85,230,.24),transparent 25rem),radial-gradient(circle at 8% 34%,rgba(41,156,208,.12),transparent 26rem); }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; z-index:10; top:.75rem; left:50%; transform:translate(-50%,-200%); padding:.6rem 1rem; background:var(--cyan); color:#030711; border-radius:99px; }
.skip-link:focus { transform:translate(-50%,0); }
.site-header { position:sticky; top:0; z-index:5; border-bottom:1px solid var(--line); background:rgba(8,11,24,.84); backdrop-filter:blur(14px); }
.site-header-inner,.site-footer-inner { width:min(100% - 2rem,1120px); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.site-header-inner { min-height:68px; }
.brand { display:flex; gap:.45rem; align-items:center; font-size:1.05rem; font-weight:750; letter-spacing:.02em; }.brand-mark { color:var(--cyan); }
.site-nav { display:flex; gap:1.25rem; color:var(--muted); font-size:.9rem; }.site-nav a:hover { color:var(--text); }
.section { width:min(100% - 2rem,1120px); margin:0 auto; padding:5.5rem 0; }
.hero { min-height:calc(100svh - 68px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr); align-items:center; gap:2rem; padding-top:4rem; }
.eyebrow { color:var(--cyan); text-transform:uppercase; letter-spacing:.13em; font-size:.73rem; font-weight:750; margin-bottom:1rem; }.eyebrow span { margin-right:.32rem; }
h1,h2,h3 { line-height:1.13; letter-spacing:-.04em; } h1 { font-size:clamp(2.5rem,6vw,5.3rem); max-width:11ch; } h2 { font-size:clamp(2rem,4vw,3.35rem); max-width:16ch; } h3 { font-size:clamp(1.55rem,2vw,2.2rem); }
.hero-intro { max-width:56ch; margin-top:1.45rem; color:var(--muted); font-size:1.03rem; }.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem 1.05rem; border:1px solid transparent; border-radius:999px; font-weight:720; font-size:.9rem; transition:transform .2s ease,background .2s ease,border-color .2s ease; }.button:hover { transform:translateY(-2px); }.button-primary { background:linear-gradient(120deg,var(--cyan),#a99aff); color:#07101c; }.button-secondary { border-color:var(--line); background:rgba(255,255,255,.03); }
.hero-orbit { position:relative; height:300px; max-width:360px; width:100%; justify-self:end; border-radius:50%; background:radial-gradient(circle,rgba(175,155,255,.35),rgba(16,21,42,.16) 35%,transparent 67%); }.orbit-line { position:absolute; inset:14%; border:1px solid rgba(183,194,255,.32); border-radius:50%; transform:rotate(-35deg); }.orbit-line-two { inset:28% 4%; transform:rotate(35deg); }.orbit-core { position:absolute; inset:44%; border-radius:50%; background:var(--cyan); box-shadow:0 0 36px 12px rgba(136,229,255,.42); }.orbit-star { position:absolute; color:var(--text); animation:twinkle 3s ease-in-out infinite; }.orbit-star-one { top:12%; left:45%; }.orbit-star-two { right:7%; bottom:26%; font-size:1.7rem; }.orbit-star-three { left:11%; bottom:14%; font-size:2rem; color:var(--cyan); }
.section-heading { margin-bottom:2.3rem; }.product-card { overflow:hidden; display:grid; grid-template-columns:minmax(250px,.93fr) 1.07fr; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(26,32,61,.96),rgba(14,18,37,.96)); box-shadow:0 18px 60px rgba(0,0,0,.18); }.product-cover { position:relative; min-height:300px; overflow:hidden; background:radial-gradient(circle at 76% 27%,#c3b4ff 0 1px,transparent 2px),radial-gradient(circle at 18% 72%,#9eefff 0 1px,transparent 2px),radial-gradient(circle at 45% 48%,rgba(75,100,232,.7),transparent 32%),linear-gradient(135deg,#0c1535,#21164b); }.product-cover::after { content:""; position:absolute; width:130%; height:55%; left:-15%; top:24%; border:1px solid rgba(188,219,255,.32); border-radius:50%; transform:rotate(-25deg); }.product-cover-label { position:absolute; left:1.4rem; top:1.3rem; color:rgba(238,244,255,.8); font-size:.7rem; letter-spacing:.19em; font-weight:750; }.product-cover-star { position:absolute; z-index:1; }.product-cover-star-one { right:20%; top:20%; font-size:3rem; color:#e8e4ff; }.product-cover-star-two { left:23%; bottom:24%; font-size:2rem; color:var(--cyan); }.product-cover-star-three { right:9%; bottom:15%; font-size:2.4rem; color:#fff; }
.product-content { padding:clamp(1.5rem,4vw,3rem); }.product-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.82rem; margin-bottom:1.1rem; }.status { display:inline-flex; gap:.38rem; align-items:center; color:#bdf4d6; }.status::before { content:""; width:.48rem; height:.48rem; border-radius:50%; background:#6fe5a8; box-shadow:0 0 0 3px rgba(111,229,168,.12); }.product-tagline { margin-top:.9rem; font-size:1.12rem; color:#e4e1ff; }.product-description { margin-top:.9rem; max-width:55ch; color:var(--muted); }.tag-list { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.3rem 0; }.tag-list li { padding:.25rem .6rem; border:1px solid var(--line); border-radius:999px; color:#c9c9df; font-size:.75rem; }
.building-section,.about-section { border-top:1px solid var(--line); }.building-grid,.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:2rem; }.building-intro,.about-copy { color:var(--muted); font-size:1.05rem; }.about-copy p + p { margin-top:1rem; }.exploration-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }.exploration-list li,.maker-path li { padding:.8rem 1rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }.maker-path { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; counter-reset:path; }.maker-path li { color:#d8d5ed; }.timeline { max-width:790px; border-left:1px solid var(--line); }.timeline li { position:relative; padding:0 0 2rem 1.5rem; }.timeline li::before { content:""; position:absolute; left:-.32rem; top:.42rem; width:.58rem; height:.58rem; border-radius:50%; background:var(--cyan); }.timeline time { color:var(--cyan); font-size:.82rem; font-weight:750; }.timeline p { margin-top:.3rem; color:var(--muted); }
.site-footer { border-top:1px solid var(--line); padding:1.5rem 0; color:var(--muted); font-size:.78rem; }.icp-link { text-decoration:underline; text-underline-offset:3px; }.icp-note { margin-left:.35rem; padding:.12rem .35rem; border-radius:4px; color:#17101d; background:#ffd99d; font-size:.65rem; font-weight:750; text-decoration:none; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
@keyframes twinkle { 50% { opacity:.45; transform:scale(.78); } }
@media (max-width: 767px) { .site-nav { gap:.78rem; font-size:.78rem; }.section { padding:4rem 0; }.hero { min-height:auto; grid-template-columns:1fr; padding-top:4.5rem; }.hero-orbit { justify-self:center; height:245px; max-width:290px; order:-1; }.hero-actions { flex-direction:column; align-items:stretch; }.product-card { grid-template-columns:1fr; }.product-cover { min-height:225px; }.building-grid,.about-grid { grid-template-columns:1fr; }.exploration-list,.maker-path { grid-template-columns:1fr; }.site-footer-inner { align-items:flex-start; flex-direction:column; gap:.7rem; } }
@media (min-width: 768px) and (max-width: 1199px) { .section { padding:6.5rem 0; }.hero { grid-template-columns:1.1fr .9fr; }.product-card { grid-template-columns:320px 1fr; } }
@media (min-width: 1200px) { .section { padding:7.5rem 0; }.site-header-inner { min-height:76px; }.site-nav { gap:1.8rem; }.hero { min-height:calc(100svh - 76px); }.hero-orbit { height:370px; max-width:430px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }