*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Inter","Noto Sans JP",sans-serif;
  background:#05060a;
  color:#fff;
  line-height:1.7;
}

.container{
  width:min(1100px,90%);
  margin:auto;
}

.bg-glow{
  position:fixed;
  width:400px;
  height:400px;
  border-radius:50%;
  filter:blur(120px);
  opacity:.5;
  z-index:0;
}
.bg1{background:#7b3cff;top:0;right:-100px}
.bg2{background:#00b7ff;bottom:0;left:-100px}

/* header */
.header{
  position:sticky;
  top:0;
  backdrop-filter:blur(10px);
  background:rgba(0,0,0,.6);
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:70px;
}
.logo span{color:#7b3cff}

.nav{display:flex;gap:20px}
.nav a{color:#ccc;font-size:.9rem}

.cta-small{
  border:1px solid #7b3cff;
  padding:6px 14px;
  border-radius:20px;
}

/* hero */
.hero{
  padding:120px 0;
  text-align:center;
}
.hero-title{
  font-size:clamp(2.5rem,8vw,5rem);
  font-weight:800;
}
.hero-title span{
  color:#00b7ff;
  text-shadow:0 0 20px #00b7ff;
}
.hero-text{
  margin:20px auto 0;
  color:#aaa;
  font-size: 18px;
  max-width: 620px;
}
.hero-btns{
  margin-top:30px;
  display:flex;
  gap:15px;
  justify-content:center;
}
.btn{
  padding:12px 24px;
  border-radius:999px;
}
.primary{
  border:1px solid #7b3cff;
  box-shadow:0 0 10px #7b3cff;
}
.secondary{
  border:1px solid #555;
}

/* featured */
.featured{
  padding:80px 0;
}
.section-label{
  margin-bottom:20px;
  color:#7b3cff;
  font-size:.8rem;
  letter-spacing:.1em;
}

.featured-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  padding:30px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  transition:.3s;
}
.featured-card:hover{
  transform:translateY(-5px);
  box-shadow:0 0 20px rgba(123,60,255,.3);
}

.featured-thumb{
  height:250px;
  background:linear-gradient(135deg,#09121f,#1f4d7a);
  border-radius:12px;
  overflow: hidden;
}

.meta{
  font-size:.8rem;
  color:#7b3cff;
}
.desc{
  margin-top:10px;
  color:#aaa;
}
.link{
  margin-top:15px;
  display:inline-block;
  color:#00b7ff;
}

/* works */
.works{
  padding:80px 0;
}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.card{
  padding:20px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  transition:.3s;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 0 15px rgba(0,183,255,.3);
}

.card p{
  margin-top: 8px;
  color: rgba(255,255,255,.65);
  font-size: 0.95rem;
  line-height: 1.7;
}

.thumb{
  height:150px;
  border-radius:10px;
  margin-bottom:15px;
  overflow: hidden;
}
.cafe{background:linear-gradient(135deg,#5f2c82,#49a09d)}
.gym{background:linear-gradient(135deg,#0f2027,#2c5364)}

/* contact */
.contact{
  padding:80px 0;
}
.contact-box{
  text-align:center;
  border:1px solid rgba(255,255,255,.1);
  padding:40px;
  border-radius:20px;
}

.contact .btn.primary{
    margin-top: 30px;
    display: inline-block;
}

.featured-thumb,
.thumb {
  overflow: hidden;
}

.featured-thumb img,
.thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}