:root{--bg1:#020818;--bg2:#06173a;--pearl:#cfe8ff;--glow:#7fd4ff;--text:#e8f3ff;--muted:#8aa6c8}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:-apple-system,"PingFang SC","Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg1);line-height:1.6}
a{color:inherit;text-decoration:none}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 6vw;
  background:#020818cc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #7fd4ff1f}
.logo{font-weight:600;letter-spacing:.08em;text-shadow:0 0 12px #7fd4ff66}
.nav ul{display:flex;gap:22px;list-style:none;font-size:14px}
.nav ul a{color:var(--muted);transition:color .2s}
.nav ul a:hover{color:var(--pearl);text-shadow:0 0 8px #7fd4ff88}
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 6vw;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,#123a7a 0%,var(--bg2) 45%,var(--bg1) 100%)}
.hero::before,.hero::after{content:"";position:absolute;inset:-50%;pointer-events:none;
  background-image:radial-gradient(2px 2px at 12% 30%,#9fdcffaa,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#cfe8ff88,transparent),
  radial-gradient(2px 2px at 85% 70%,#7fd4ff77,transparent),radial-gradient(1px 1px at 30% 80%,#ffffff77,transparent),
  radial-gradient(1.5px 1.5px at 50% 55%,#9fdcff66,transparent),radial-gradient(2.5px 2.5px at 60% 85%,#7fd4ff55,transparent);
  background-size:400px 400px;animation:drift 40s linear infinite}
.hero::after{background-size:620px 620px;opacity:.6;animation-duration:70s;animation-direction:reverse}
@keyframes drift{to{transform:translateY(-400px)}}
.pearl{width:110px;height:110px;border-radius:50%;margin-bottom:34px;
  background:radial-gradient(circle at 35% 30%,#ffffff,#cfe8ff 30%,#5ec4ff 65%,#0b3d7a);box-shadow:0 0 60px #7fd4ffaa,0 0 140px #7fd4ff44;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 90px #7fd4ffcc,0 0 200px #7fd4ff55}}
.hero h1{position:relative;font-size:clamp(32px,6vw,56px);letter-spacing:.06em;text-shadow:0 0 24px #7fd4ff66}
.hero p{position:relative;max-width:560px;margin-top:16px;color:var(--muted);font-size:clamp(15px,2vw,18px)}
.cta{position:relative;display:inline-block;margin-top:32px;padding:10px 26px;border-radius:999px;border:1px solid #7fd4ff88;color:var(--pearl);transition:all .3s}
.cta:hover{background:#7fd4ff22;box-shadow:0 0 20px #7fd4ff55}
section{padding:80px 6vw;max-width:1200px;margin:0 auto}
section h2{font-size:26px;margin-bottom:8px}
section .sub{color:var(--muted);margin-bottom:32px}
.wall-frame{width:100%;height:560px;border:1px solid #7fd4ff26;border-radius:20px;background:var(--bg2);box-shadow:0 20px 50px #00000066}
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.work{border-radius:20px;overflow:hidden;background:#0a1c40;border:1px solid #7fd4ff26;transition:transform .3s,box-shadow .3s}
.work:hover{transform:translateY(-4px);box-shadow:0 18px 40px #00000080,0 0 24px #7fd4ff33}
.work .cover{height:190px;display:flex;align-items:center;justify-content:center;font-size:56px}
.work.dragon .cover{background:radial-gradient(circle at 30% 30%,#5ec4ff88,transparent 50%),radial-gradient(circle at 75% 70%,#ff9fd688,transparent 50%),linear-gradient(135deg,#0b3d7a,#3a1f5e)}
.work.travel .cover{background:radial-gradient(circle at 70% 30%,#ffd27f88,transparent 50%),radial-gradient(circle at 25% 75%,#9effc888,transparent 50%),linear-gradient(135deg,#0e5236,#0b3d7a)}
.work .body{padding:20px 22px 24px}
.work h3{font-size:18px}
.work p{margin-top:8px;color:var(--muted);font-size:14px}
.soon{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.soon div{padding:26px;border-radius:16px;border:1px dashed #7fd4ff33;color:var(--muted);text-align:center}
.soon b{display:block;color:var(--pearl);font-size:17px;margin-bottom:6px}
footer{text-align:center;padding:40px 6vw;color:#4f6c92;font-size:13px;border-top:1px solid #7fd4ff1a}
footer a{color:var(--muted);margin-left:8px}
@media (max-width:720px){
  .nav{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 5vw}
  .nav ul{gap:14px;overflow-x:auto;width:100%;white-space:nowrap;font-size:13px}
  html{scroll-padding-top:100px}
  section{padding:56px 5vw}
  .wall-frame{height:520px}
}

.wall-frame{width:100%!important;height:760px!important;}
@media(max-width:640px){.wall-frame{height:700px!important}}