:root{--bg:#070b20;--panel:rgba(14,23,58,.72);--cyan:#36d9ff;--violet:#9b5cff;--pink:#ff55d8;--text:#f4f6ff;--muted:#aab5d7;--line:rgba(106,157,255,.32)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;overflow-x:hidden}
#particles{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.ambient{position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(ellipse at 15% 15%,#183b83 0,transparent 38%),radial-gradient(ellipse at 85% 25%,#37116c 0,transparent 34%),linear-gradient(145deg,#070b20,#0a1030 55%,#090821)}
.ambient:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(80,130,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(80,130,255,.045) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
.glass{background:linear-gradient(135deg,rgba(22,38,88,.76),rgba(14,18,52,.68));border:1px solid var(--line);box-shadow:0 0 28px rgba(40,120,255,.12),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(18px)}
header{position:sticky;top:12px;z-index:20;width:min(1440px,calc(100% - 36px));margin:12px auto 0;border-radius:22px;padding:10px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:.5px}.brand img{width:44px;height:44px;object-fit:contain;border-radius:50%;filter:drop-shadow(0 0 12px #7a45ff);background:transparent}
main{width:min(1320px,calc(100% - 40px));margin:auto}
#entrance{min-height:calc(100vh - 90px);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:34px;padding:55px 0 65px;position:relative}
.hero-logo{display:flex;justify-content:center;align-items:center;position:relative}
.hero-logo:before{content:"";position:absolute;width:min(390px,80vw);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,transparent,#19cfff,#a34cff,#ff55d8,transparent);filter:blur(28px);opacity:.36;animation:spin 16s linear infinite}
.hero-copy .eyebrow{color:#70dfff;letter-spacing:4px;font-size:12px;font-weight:700}.hero-copy h1{font-size:clamp(38px,5.2vw,72px);line-height:1.12;margin:18px 0;background:linear-gradient(95deg,#fff 10%,#8eeaff 48%,#c18bff 80%);background-clip:text;color:transparent;text-shadow:0 0 30px #7b6dff25}
.hero-copy p{color:#bdc9e8;font-size:17px;line-height:1.9;max-width:680px}
.feature-row{display:flex;flex-wrap:wrap;gap:20px;margin:25px 0 34px;color:#dce5ff;font-size:14px}.feature-row span{display:flex;gap:8px;align-items:center}.feature-row b{color:var(--cyan)}
.actions{display:flex;gap:14px;flex-wrap:wrap}.btn{border:1px solid #73caff88;border-radius:999px;padding:14px 25px;color:white;background:linear-gradient(105deg,#087fe9,#7726db 70%,#bd35d8);box-shadow:0 0 25px #554cff77;transition:.25s;font-weight:750}.btn:hover{transform:translateY(-3px);box-shadow:0 0 34px #795bff}.btn.secondary{background:rgba(17,35,79,.65);box-shadow:inset 0 0 15px #579dff22}
.hero-orbit{position:absolute;right:2%;bottom:3%;width:230px;height:230px;border:1px solid #5a8dff55;border-radius:50%;opacity:.4;transform:rotateX(65deg);box-shadow:0 0 35px #3a7cff}
.hero-logo{min-height:430px;perspective:900px}
.holo-core{width:min(390px,78vw);height:390px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 0 28px #4d7dff55);animation:float 5.5s ease-in-out infinite}
.holo-orb{width:205px;height:205px;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 32% 25%,#a7f5ff 0,#347dff 16%,#15276d 43%,#080d2c 70%);border:1px solid #9eeaffaa;box-shadow:inset -20px -22px 45px #03051b,inset 12px 10px 30px #70eaff88,0 0 32px #3c9dff99,0 0 90px #813cff55;overflow:hidden}
.holo-orb:before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid #8beaff55;background:repeating-linear-gradient(0deg,transparent 0 9px,#8eeaff16 10px 11px),repeating-linear-gradient(90deg,transparent 0 9px,#8eeaff12 10px 11px);mask-image:radial-gradient(circle,black 40%,transparent 75%)}
.holo-orb:after{content:"";position:absolute;width:120%;height:35%;background:linear-gradient(90deg,transparent,#8ffaff99,transparent);transform:rotate(-28deg);filter:blur(8px);animation:scan 4s linear infinite}
.holo-orb span{font-size:78px;font-weight:950;letter-spacing:-9px;color:transparent;background:linear-gradient(130deg,#fff,#5ceaff 38%,#c17aff 75%,#fff);background-clip:text;text-shadow:0 0 24px #54cfff;z-index:2;transform:skew(-8deg)}
.holo-orb i{position:absolute;inset:30px;border-radius:50%;border:1px dashed #80dfff77;transform:rotateX(65deg) rotateZ(25deg)}
.holo-ring{position:absolute;border:2px solid transparent;border-top-color:#55e8ff;border-bottom-color:#a45bff;border-radius:50%;box-shadow:0 0 18px #3f9eff88,inset 0 0 15px #a55cff44}
.ring-a{width:340px;height:125px;transform:rotate(-22deg) rotateX(58deg);animation:orbitA 8s linear infinite}
.ring-b{width:315px;height:115px;transform:rotate(48deg) rotateX(62deg);border-top-color:#ff68df;border-bottom-color:#48caff;animation:orbitB 10s linear infinite}
.ring-c{width:255px;height:270px;transform:rotateY(68deg) rotateZ(20deg);border-left-color:#6ceaff;border-right-color:#a35bff;animation:orbitA 14s linear infinite reverse}
.holo-base{position:absolute;bottom:32px;width:220px;height:35px;border-radius:50%;border:2px solid #55dfff;background:radial-gradient(ellipse,#42dfff55,transparent 68%);box-shadow:0 0 25px #4d9fff,0 12px 35px #9a45ff55;transform:rotateX(65deg)}
.holo-caption{position:absolute;bottom:0;font-size:10px;letter-spacing:4px;color:#86dfff;text-shadow:0 0 12px #47cfff}
@keyframes orbitA{to{transform:rotate(338deg) rotateX(58deg)}}@keyframes orbitB{to{transform:rotate(408deg) rotateX(62deg)}}
@keyframes scan{0%{top:-40%;left:-50%}100%{top:110%;left:50%}}
#cursorParticles{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
@media(max-width:850px){.hero-logo{min-height:310px}.holo-core{height:300px;width:min(310px,78vw)}.holo-orb{width:160px;height:160px}.holo-orb span{font-size:62px}.ring-a{width:270px;height:100px}.ring-b{width:250px;height:90px}.ring-c{width:205px;height:220px}}
body { isolation: isolate; min-height: 100vh; }
:focus-visible { outline: 2px solid #8eeaff; outline-offset: 5px; }
header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; font-size: 14px; }
header nav a:hover { color: #8eeaff; }
.hero-orbit { pointer-events: none; }
@media (max-width: 850px) {
  #entrance { grid-template-columns: 1fr; text-align: center; padding: 28px 0 48px; gap: 15px; }
  .hero-copy p { margin-inline: auto; }
  .feature-row, .actions { justify-content: center; }
  .hero-orbit { display: none; }
}
@media (max-width: 560px) {
  header { width: calc(100% - 22px); padding: 9px 12px; }
  .brand { font-size: 15px; }
  .brand img { width: 33px; height: 33px; }
  header nav { display: none; }
  main { width: calc(100% - 28px); }
  .hero-copy h1 { font-size: clamp(32px, 10vw, 42px); }
  .hero-copy p { font-size: 15px; }
  .feature-row { gap: 10px 15px; margin-block: 18px 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo::before, .holo-core, .holo-ring, .holo-orb::after { animation: none; }
  .btn { transition: none; }
}