:root {
  --ink: #f5f7ff;
  --muted: #a7afc5;
  --accent: #b8f36b;
  --accent-deep: #6dce8f;
  --bg: #0d1224;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(120deg, #0b1020, #111b31 45%, #10152c, #0b1020);
  background-size: 300% 300%;
  font-family: "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  overflow-x: hidden;
  animation: ambient-shift 14s ease-in-out infinite alternate;
}

.background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.background::before,
.background::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.background::before {
  width: 4px; height: 4px; top: 17%; left: 13%; background: var(--accent);
  box-shadow: 18vw 9vh rgba(184,243,107,.8), 38vw 27vh rgba(154,183,255,.6), 63vw 12vh rgba(184,243,107,.6), 82vw 35vh rgba(154,183,255,.7), 29vw 71vh rgba(184,243,107,.55), 73vw 82vh rgba(184,243,107,.7), 7vw 87vh rgba(154,183,255,.55);
  opacity: .72; animation: twinkle 3.5s ease-in-out infinite alternate;
}
.background::after {
  width: 1px; height: 1px; top: 35%; left: 5%; background: rgba(255,255,255,.9);
  box-shadow: 11vw 18vh rgba(255,255,255,.8), 25vw -12vh rgba(184,243,107,.75), 49vw 42vh rgba(255,255,255,.7), 68vw -6vh rgba(184,243,107,.7), 91vw 57vh rgba(255,255,255,.8), 44vw 78vh rgba(154,183,255,.7);
  opacity: .62; animation: twinkle 4.5s 1.2s ease-in-out infinite alternate-reverse;
}
.glow { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .78; }
.glow-one { width: 64vw; height: 64vw; top: -30vw; right: -19vw; background: radial-gradient(circle, rgba(88, 205, 155, .4), transparent 68%); animation: drift-one 10s ease-in-out infinite alternate; }
.glow-two { width: 58vw; height: 58vw; bottom: -34vw; left: -23vw; background: radial-gradient(circle, rgba(133, 103, 246, .36), transparent 68%); animation: drift-two 12s ease-in-out infinite alternate; }
.grid { position: absolute; inset: -56px 0 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 78%); animation: grid-drift 9s linear infinite; }
.grid::after { content: ""; position: absolute; left: 0; top: -35%; width: 100%; height: 30%; background: linear-gradient(to bottom, transparent, rgba(184,243,107,.14), transparent); filter: blur(10px); animation: scanline 6s ease-in-out infinite; }

.page-shell { position: relative; width: min(1120px, calc(100% - 56px)); min-height: 100vh; margin: auto; display: flex; flex-direction: column; }
.topbar { padding: 34px 0; display: flex; justify-content: space-between; align-items: center; animation: fade-down .8s ease both; }
.brand { display: inline-flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; font-size: 12px; letter-spacing: .19em; font-weight: 700; }
.brand-logo { width: 28px; height: 28px; object-fit: contain; display: block; }
.brand-mark { display: inline-flex; align-items: end; gap: 3px; height: 19px; }
.brand-mark i { width: 4px; border-radius: 4px; background: var(--accent); display: block; }
.brand-mark i:nth-child(1) { height: 10px; opacity: .65; } .brand-mark i:nth-child(2) { height: 16px; } .brand-mark i:nth-child(3) { height: 13px; opacity: .82; }
.status-pill { border: 1px solid rgba(184,243,107,.24); border-radius: 99px; padding: 9px 15px; color: #d2dbeb; font-size: 11px; letter-spacing: .04em; background: rgba(184,243,107,.06); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(184,243,107,.12); }
.status-dot { animation: dot-pulse 2.4s ease-in-out infinite; }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 56px 0 110px; max-width: 800px; animation: fade-up 1s .12s ease both; }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .21em; font-weight: 700; display: flex; align-items: center; gap: 11px; }
.eyebrow span { width: 28px; height: 1px; background: var(--accent); }
h1 { margin: 26px 0 22px; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; font-size: clamp(57px, 9vw, 108px); letter-spacing: -.07em; line-height: 1.06; font-weight: 900; }
h1 em { color: var(--accent); font-style: normal; }
.intro { color: var(--muted); line-height: 1.9; font-size: 16px; margin: 0 0 45px; }
.progress-wrap { width: min(440px, 100%); }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 12px; color: #8490ac; font-size: 10px; letter-spacing: .15em; }
.progress-label strong { color: var(--accent); letter-spacing: 0; font-size: 12px; }
.progress-track { height: 5px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.progress-bar { display: block; width: 75%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 18px rgba(184,243,107,.48); transform-origin: left; animation: grow-bar 1.4s .7s cubic-bezier(.22,.8,.3,1) both; }
.contact-link { margin-top: 42px; color: var(--ink); text-decoration: none; font-size: 14px; width: fit-content; border-bottom: 1px solid rgba(184,243,107,.55); padding-bottom: 7px; transition: color .2s, border-color .2s; }
.contact-link span { color: var(--accent); margin-left: 8px; font-size: 17px; } .contact-link:hover { color: var(--accent); border-color: var(--accent); }
.footer { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0 28px; display: flex; justify-content: space-between; color: #69738d; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.icp,
.icp:visited { color: #69738d !important; letter-spacing: .08em; text-decoration: none; transition: color .2s ease; }
.icp:hover,
.icp:focus-visible { color: #69738d !important; text-decoration: underline; }
.footer-note { color: #8590a9; }

@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes grow-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drift-one { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-10vw, 12vw, 0) scale(1.18); } }
@keyframes drift-two { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(12vw, -10vw, 0) scale(1.2); } }
@keyframes grid-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(56px, 56px, 0); } }
@keyframes twinkle { from { opacity: .2; transform: scale(.7); } 50% { opacity: .95; } to { opacity: .3; transform: scale(1.45); } }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(184,243,107,.1), 0 0 0 rgba(184,243,107,0); } 50% { box-shadow: 0 0 0 7px rgba(184,243,107,.04), 0 0 17px 3px rgba(184,243,107,.34); } }
@keyframes ambient-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes scanline { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 70% { opacity: .7; } 100% { transform: translateY(460%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

@media (max-width: 600px) {
  .page-shell { width: min(100% - 40px, 1120px); }
  .topbar { padding: 23px 0; } .status-pill { padding: 7px 10px; font-size: 9px; }
  .status-pill .status-dot { width: 5px; height: 5px; margin-right: 5px; }
  .brand { font-size: 10px; } .hero { padding: 72px 0 90px; }
  h1 { margin-top: 22px; font-size: clamp(53px, 16vw, 76px); }
  .intro { font-size: 14px; margin-bottom: 38px; } .desktop-break { display: none; }
  .footer { font-size: 9px; gap: 12px; } .footer-note { display: none; } .icp { letter-spacing: 0; }
}