:root { color-scheme: dark; --ink: #050814; --line: rgba(112,209,255,.17); --text: #edf9ff; --muted: #84a2b6; --cyan: #55e7ff; --violet: #8b5cf6; }
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); overflow-x: hidden; background: radial-gradient(circle at 73% 28%, rgba(54,79,159,.18), transparent 30%), radial-gradient(circle at 15% 80%, rgba(0,196,255,.08), transparent 28%), var(--ink); font-family: Inter, "SF Pro Display", "Segoe UI", "Microsoft YaHei", sans-serif; }
button, a { font: inherit; } button { color: inherit; } a { color: inherit; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; color: #001018; background: var(--cyan); border-radius: 8px; font-weight: 700; transition: top .2s ease; }
.skip-link:focus { top: 12px; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { position: relative; z-index: 20; height: 88px; padding: 0 clamp(24px,5vw,84px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(5,8,20,.92), rgba(5,8,20,.62)); backdrop-filter: blur(18px); }
.site-header::after { content: ""; position: absolute; left: clamp(24px,5vw,84px); right: clamp(24px,5vw,84px); bottom: -1px; height: 1px; background: linear-gradient(90deg,var(--cyan),transparent 18%,transparent 82%,var(--violet)); opacity: .45; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-mark { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(85,231,255,.7); transform: rotate(45deg); border-radius: 7px; }
.brand-mark::after { inset: 9px; border-color: rgba(139,92,246,.8); animation: brand-pulse 3.6s ease-in-out infinite; }
.brand-mark i { position: absolute; width: 4px; height: 4px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 14px var(--cyan); }
.brand-mark i:nth-child(1) { transform: translateX(-13px); } .brand-mark i:nth-child(2) { transform: translateX(13px); } .brand-mark i:nth-child(3) { width: 7px; height: 7px; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; } .brand-copy strong { font-size: 17px; letter-spacing: .18em; } .brand-copy small { font-size: 8px; color: var(--muted); letter-spacing: .32em; }
.portal-nav { display: flex; gap: 10px; }
.header-controls { display: flex; align-items: center; gap: 12px; }
.nav-entry { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; color: #cfe6f2; background: rgba(9,20,38,.64); text-decoration: none; cursor: pointer; transition: .25s ease; }
.nav-entry:hover, .nav-entry:focus-visible { transform: translateY(-2px); border-color: rgba(92,232,255,.5); outline: none; }
.nav-entry-primary { background: linear-gradient(120deg, rgba(52,203,255,.16), rgba(105,69,255,.16)); border-color: rgba(85,231,255,.32); }
.nav-entry svg { width: 17px; fill: none; stroke: var(--cyan); stroke-width: 1.7; } .nav-index { color: var(--cyan); font: 700 9px/1 ui-monospace,monospace; letter-spacing: .12em; } .nav-entry em { padding: 3px 6px; font: normal 9px/1 ui-monospace,monospace; color: #a9bdd0; border: 1px solid rgba(132,162,182,.2); border-radius: 4px; }
main { flex: 1; }
.hero { position: relative; isolation: isolate; min-height: calc(100vh - 146px); overflow: hidden; display: grid; grid-template-columns: minmax(360px,.88fr) minmax(520px,1.12fr); align-items: center; padding: clamp(48px,7vh,96px) clamp(24px,7vw,118px) 78px; }
#neural-field { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; }
.hero::before { content: ""; position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg,rgba(5,8,20,.94) 0%,rgba(5,8,20,.62) 43%,rgba(5,8,20,.12) 74%,rgba(5,8,20,.46) 100%); }
.hero::after { content: ""; position: absolute; z-index: -2; width: 68vw; height: 68vw; right: -9vw; top: -21vw; border-radius: 50%; background: radial-gradient(circle,rgba(66,175,255,.08) 0 1px,transparent 2px),radial-gradient(circle,rgba(85,231,255,.11),transparent 64%); background-size: 24px 24px,auto; mask-image: radial-gradient(circle,#000,transparent 69%); }
.hero-grid { position: absolute; z-index: -2; inset: 0; opacity: .26; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent); transform: perspective(800px) rotateX(64deg) scale(1.7) translateY(31%); transform-origin: bottom; }
.scan-line { position: absolute; z-index: -1; left: 0; right: 0; height: 1px; top: 16%; background: linear-gradient(90deg,transparent,rgba(85,231,255,.3),transparent); animation: scan 8s linear infinite; }
.hero-copy { position: relative; z-index: 5; max-width: 650px; } .system-status { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px; color: #8eb1c8; font: 600 10px/1 ui-monospace,monospace; letter-spacing: .18em; } .system-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: online 2s ease-in-out infinite; }
.eyebrow { margin: 0 0 16px; color: var(--cyan); font: 600 11px/1.2 ui-monospace,monospace; letter-spacing: .24em; } .hero h1 { margin: 0; font-size: clamp(54px,6.25vw,104px); line-height: .98; letter-spacing: -.055em; font-weight: 280; } .hero h1 span { display: block; color: #d8e5ec; } .hero h1 strong { display: block; margin-top: 9px; font-weight: 760; color: transparent; background: linear-gradient(92deg,#fff 10%,#97efff 52%,#8b9fff 94%); -webkit-background-clip: text; background-clip: text; }
.hero-intro { margin: 26px 0 0; max-width: 500px; color: #8da7b8; font-size: 16px; line-height: 1.9; letter-spacing: .04em; } .hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.cta { min-height: 52px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; border: 1px solid rgba(85,231,255,.25); border-radius: 10px; text-decoration: none; cursor: pointer; transition: .25s ease; } .cta-primary { color: #031119; font-weight: 750; background: linear-gradient(110deg,#bdf8ff,var(--cyan)); box-shadow: 0 10px 40px rgba(50,211,255,.16); } .cta-primary:hover,.cta-primary:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(50,211,255,.27); outline: none; } .cta-primary span { font-size: 18px; } .cta-secondary { color: #a8c0cf; background: rgba(8,18,35,.65); } .cta-secondary:hover,.cta-secondary:focus-visible { color: #fff; border-color: rgba(92,232,255,.5); outline: none; }
.signal-list { display: flex; gap: 0; margin: 42px 0 0; } .signal-list div { min-width: 128px; display: grid; grid-template-columns: 28px 1fr; padding: 0 22px; border-left: 1px solid var(--line); } .signal-list div:first-child { padding-left: 0; border: 0; } .signal-list dt { color: var(--cyan); font: 700 9px/1.5 ui-monospace,monospace; } .signal-list dd { margin: 0; color: #bcd0dc; font-size: 12px; } .signal-list small { display: block; margin-top: 5px; color: #526b7c; font: 600 8px/1 ui-monospace,monospace; letter-spacing: .12em; }
.site-footer { min-height: 58px; padding: 0 clamp(24px,5vw,84px); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #587386; background: rgba(3,7,16,.78); font-size: 11px; letter-spacing: .08em; } .site-footer p { margin: 0; } .site-footer p span { color: #91aebb; } .site-footer a { text-decoration: none; transition: color .2s; } .site-footer a:hover,.site-footer a:focus-visible { color: var(--cyan); outline: none; }
.notice { position: fixed; z-index: 80; right: 28px; bottom: 28px; width: min(390px,calc(100vw - 32px)); padding: 16px; display: grid; grid-template-columns: 40px 1fr 28px; gap: 12px; align-items: center; border: 1px solid rgba(85,231,255,.3); border-radius: 13px; background: rgba(7,17,32,.94); box-shadow: 0 18px 60px rgba(0,0,0,.4); transform: translateY(130%); opacity: 0; pointer-events: none; transition: .35s ease; } .notice.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } .notice-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(85,231,255,.36); border-radius: 10px; color: var(--cyan); font: 700 9px/1 ui-monospace,monospace; } .notice strong,.notice small { display: block; } .notice small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; } .notice button { border: 0; background: transparent; color: #7390a2; cursor: pointer; font-size: 21px; }
@keyframes brand-pulse { 50% { transform: rotate(135deg) scale(.86); } } @keyframes online { 50% { opacity: .35; transform: scale(.78); } } @keyframes scan { from { top: 8%; } to { top: 92%; } }
@media (max-width:1080px) { .hero { grid-template-columns: minmax(340px,.9fr) minmax(420px,1.1fr); padding-left: 5vw; padding-right: 3vw; } .signal-list div { min-width: 110px; padding-right: 13px; padding-left: 13px; } }
@media (max-width:820px) { .site-header { height: auto; min-height: 78px; padding: 14px 20px; } .brand-copy small,.nav-index,.nav-entry em { display: none; } .portal-nav { gap: 7px; } .header-controls { flex-wrap: wrap; justify-content: flex-end; } .nav-entry { min-height: 40px; padding: 0 11px; font-size: 12px; } .hero { min-height: auto; grid-template-columns: 1fr; padding: 64px 22px 50px; } .hero::before { background: linear-gradient(180deg,rgba(5,8,20,.9),rgba(5,8,20,.46) 42%,rgba(5,8,20,.68)); } .hero-copy { text-align: center; margin: 0 auto; } .system-status { margin-bottom: 20px; } .hero-intro { margin-left: auto; margin-right: auto; } .hero-actions,.signal-list { justify-content: center; } .site-footer { gap: 16px; } .edge-code { display: none; } }
@media (max-width:560px) { .site-header { align-items: flex-start; } .brand-mark { width: 31px; height: 31px; } .brand-copy strong { font-size: 14px; } .nav-entry { padding: 0 9px; } .nav-entry svg { display: none; } .hero { padding-top: 48px; } .hero h1 { font-size: clamp(47px,15vw,68px); } .hero-intro { font-size: 14px; } .hero-actions { flex-direction: column; align-items: stretch; } .cta { width: 100%; } .signal-list { margin-top: 32px; } .signal-list div { min-width: 0; flex: 1; padding: 0 8px; grid-template-columns: 1fr; gap: 5px; } .signal-list dt { display: none; } .interaction-hint { bottom: 25px; } .site-footer { padding: 15px 18px; min-height: 70px; flex-direction: column; justify-content: center; text-align: center; } .notice { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .interaction-hint { display: none; } }